@windrun-huaiin/third-ui 31.3.6 → 31.4.0

package/dist/main/credit/credit-nav-button.d.ts

@@ -1,12 +1,13 @@
 import type { MoneyPriceData } from '../money-price/money-price-types';
-import type { CreditPricingContext, PricingModalMode } from './types';
+import type { CreditPricingContext, MobileBillingSwitchBehavior, PricingModalMode } from './types';
 interface CreditNavButtonProps {
     locale: string;
     totalBalance: number;
     totalLabel: string;
+    mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
     children: React.ReactNode;
 }
-export declare function CreditNavButton({ locale, totalBalance, totalLabel, children, }: CreditNavButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CreditNavButton({ locale, totalBalance, totalLabel, mobileBillingSwitchBehavior, children, }: CreditNavButtonProps): import("react/jsx-runtime").JSX.Element;
 interface CreditNavPopoverContextValue {
     close: () => void;
     isMobile: boolean;

package/dist/main/credit/credit-nav-button.js

@@ -4,20 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
 var icons = require('@windrun-huaiin/base-ui/icons');
-var lib = require('@windrun-huaiin/base-ui/lib');
 var ui = require('@windrun-huaiin/base-ui/ui');
 var React = require('react');
-var moneyPriceInteractive = require('../money-price/money-price-interactive.js');
 var moneyPriceConfigUtil = require('../money-price/money-price-config-util.js');
-var dialogStyles = require('../alert-dialog/dialog-styles.js');
+var pricingModal = require('../money-price/pricing-modal.js');
 
-function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
+function CreditNavButton({ locale, totalBalance, totalLabel, mobileBillingSwitchBehavior, children, }) {
     const [open, setOpen] = React.useState(false);
     const [isMobile, setIsMobile] = React.useState(false);
     const triggerRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const closeMenu = React.useCallback(() => setOpen(false), []);
-    const [pricingModal, setPricingModal] = React.useState({
+    const [pricingModal$1, setPricingModal] = React.useState({
         open: false,
         mode: 'subscription',
     });
@@ -108,13 +106,13 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         openPricingModal,
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
-    const isOnetimeModal = pricingModal.mode === 'onetime';
+    const isOnetimeModal = pricingModal$1.mode === 'onetime';
     const modalInitialBillingType = React.useMemo(() => {
         var _a, _b;
         if (isOnetimeModal) {
             return 'onetime';
         }
-        const pricingContext = pricingModal.pricingContext;
+        const pricingContext = pricingModal$1.pricingContext;
         const priceId = (_b = (_a = pricingContext === null || pricingContext === void 0 ? void 0 : pricingContext.initUserContext) === null || _a === void 0 ? void 0 : _a.xSubscription) === null || _b === void 0 ? void 0 : _b.priceId;
         if (!pricingContext || !priceId) {
             return undefined;
@@ -129,8 +127,8 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
             }
         }
         return undefined;
-    }, [isOnetimeModal, pricingModal.pricingContext]);
-    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsxRuntime.jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsxRuntime.jsx(icons.GemIcon, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsxRuntime.jsx(ui.AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', lib.themeMainBgColor), overlayClassName: dialogStyles.dialogThemedOverlayClass, children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsxRuntime.jsx(icons.XIcon, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: modalInitialBillingType, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    }, [isOnetimeModal, pricingModal$1.pricingContext]);
+    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsxRuntime.jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsxRuntime.jsx(icons.GemIcon, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal$1.modalMoneyPriceData && pricingModal$1.pricingContext ? (jsxRuntime.jsx(pricingModal.PricingModal, { open: pricingModal$1.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), data: pricingModal$1.modalMoneyPriceData, config: pricingModal$1.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal$1.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal$1.pricingContext.customerPortalApiEndpoint, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: pricingModal$1.pricingContext.enableSubscriptionUpgrade, billingType: modalInitialBillingType, initUserContext: pricingModal$1.pricingContext.initUserContext })) : null] }));
 }
 const CreditNavPopoverContext = React.createContext(null);
 function useCreditNavPopover() {

package/dist/main/credit/credit-nav-button.mjs

@@ -1,15 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { GemIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
-import { themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle } from '@windrun-huaiin/base-ui/ui';
+import { GemIcon } from '@windrun-huaiin/base-ui/icons';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@windrun-huaiin/base-ui/ui';
 import { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from 'react';
-import { MoneyPriceInteractive } from '../money-price/money-price-interactive.mjs';
 import { getActiveProviderConfigUtil } from '../money-price/money-price-config-util.mjs';
-import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles.mjs';
+import { PricingModal } from '../money-price/pricing-modal.mjs';
 
-function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
+function CreditNavButton({ locale, totalBalance, totalLabel, mobileBillingSwitchBehavior, children, }) {
     const [open, setOpen] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const triggerRef = useRef(null);
@@ -128,7 +126,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         }
         return undefined;
     }, [isOnetimeModal, pricingModal.pricingContext]);
-    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsx(GemIcon, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative z-10 flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxs(AlertDialogContent, { className: cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', themeMainBgColor), overlayClassName: dialogThemedOverlayClass, children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsx(XIcon, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: modalInitialBillingType, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsx(GemIcon, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative z-10 flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(PricingModal, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, billingType: modalInitialBillingType, initUserContext: pricingModal.pricingContext.initUserContext })) : null] }));
 }
 const CreditNavPopoverContext = createContext(null);
 function useCreditNavPopover() {

package/dist/main/credit/credit-overview-client.js

@@ -17,7 +17,7 @@ const formatNumber = (locale, value) => new Intl.NumberFormat(locale, {
     maximumFractionDigits: 0,
 }).format(value);
 function CreditOverviewClient({ data, locale, translations, className, expiringSoonThresholdDays = 7, customActionHandlers, }) {
-    var _a;
+    var _a, _b;
     const { redirectToSignIn } = nextjs.useClerk();
     const navPopover = creditNavButton.useCreditNavPopover();
     const isMobile = (_a = navPopover === null || navPopover === void 0 ? void 0 : navPopover.isMobile) !== null && _a !== void 0 ? _a : false;
@@ -59,6 +59,9 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
     const subscription = data.subscription;
     const pricingContext = data.pricingContext;
     const ctaBehaviors = data.ctaBehaviors;
+    const billingOptions = (_b = pricingContext === null || pricingContext === void 0 ? void 0 : pricingContext.moneyPriceData.billingSwitch.options) !== null && _b !== void 0 ? _b : [];
+    const subscriptionBillingEnabled = billingOptions.some((option) => option.key === 'monthly' || option.key === 'yearly');
+    const onetimeBillingEnabled = billingOptions.some((option) => option.key === 'onetime');
     const getModalMoneyPriceData = React.useCallback((mode) => {
         if (!pricingContext) {
             return null;
@@ -232,10 +235,10 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
         userToggledRef.current = true;
         setBucketExpanded(true);
     }, []);
-    return (jsxRuntime.jsxs("section", { className: utils.cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxRuntime.jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsxRuntime.jsx(icons.GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsxRuntime.jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsxRuntime.jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxRuntime.jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsxRuntime.jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsxRuntime.jsx("div", { className: "pt-2 sm:pt-0", children: jsxRuntime.jsx(gradientButton.GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsxRuntime.jsx(icons.Settings2Icon, {}) : jsxRuntime.jsx(icons.BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsxRuntime.jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsxRuntime.jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxRuntime.jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsxRuntime.jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsxRuntime.jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsxRuntime.jsx(icons.ChevronUpIcon, { className: "h-4 w-4" })) : (jsxRuntime.jsx(icons.ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
+    return (jsxRuntime.jsxs("section", { className: utils.cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxRuntime.jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsxRuntime.jsx(icons.GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsxRuntime.jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsxRuntime.jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), subscriptionBillingEnabled ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsxRuntime.jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsxRuntime.jsx("div", { className: "pt-2 sm:pt-0", children: jsxRuntime.jsx(gradientButton.GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsxRuntime.jsx(icons.Settings2Icon, {}) : jsxRuntime.jsx(icons.BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] })) : null] }), jsxRuntime.jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsxRuntime.jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxRuntime.jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsxRuntime.jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsxRuntime.jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsxRuntime.jsx(icons.ChevronUpIcon, { className: "h-4 w-4" })) : (jsxRuntime.jsx(icons.ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
                             const balanceDisplay = formatNumber(locale, bucket.balance);
                             return (jsxRuntime.jsxs("li", { "data-credit-kind": bucket.kind, className: "rounded-2xl border border-slate-200/70 bg-white/85 px-3 py-3 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 sm:px-4", children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs sm:text-sm", children: [jsxRuntime.jsx("span", { className: "flex min-w-0 items-center gap-2", children: jsxRuntime.jsx("span", { className: "max-w-full truncate rounded-full bg-purple-50 px-2 py-1 text-xs text-purple-600 shadow-sm dark:bg-purple-500/20 dark:text-purple-100 sm:text-sm", children: bucket.computedLabel }) }), jsxRuntime.jsx("span", { className: "flex min-w-0 justify-end", children: jsxRuntime.jsx("span", { className: "text-right text-base font-semibold leading-tight text-gray-500 dark:text-slate-100 sm:text-lg", title: balanceDisplay, children: balanceDisplay }) })] }), jsxRuntime.jsx("div", { className: "mt-3 flex justify-end gap-2", children: jsxRuntime.jsxs("span", { className: "text-[11px] text-gray-500 dark:text-slate-100 sm:text-xs", children: [translations.expiredAtLabel, ": ", bucket.expiresAt] }) })] }, bucket.kind));
-                        }) })) : (jsxRuntime.jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsxRuntime.jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsxRuntime.jsx(gradientButton.GradientButton, { title: translations.onetimeBuy, icon: jsxRuntime.jsx(icons.ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
+                        }) })) : (jsxRuntime.jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsxRuntime.jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), onetimeBillingEnabled ? (jsxRuntime.jsx(gradientButton.GradientButton, { title: translations.onetimeBuy, icon: jsxRuntime.jsx(icons.ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })) : null] })] }));
 }
 function deriveStatus(expiresAt, thresholdDays = 7) {
     if (!expiresAt) {

package/dist/main/credit/credit-overview-client.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { __awaiter } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useClerk } from '@clerk/nextjs';
 import { GradientButton } from '../buttons/gradient-button.mjs';
 import { useState, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -15,7 +15,7 @@ const formatNumber = (locale, value) => new Intl.NumberFormat(locale, {
     maximumFractionDigits: 0,
 }).format(value);
 function CreditOverviewClient({ data, locale, translations, className, expiringSoonThresholdDays = 7, customActionHandlers, }) {
-    var _a;
+    var _a, _b;
     const { redirectToSignIn } = useClerk();
     const navPopover = useCreditNavPopover();
     const isMobile = (_a = navPopover === null || navPopover === void 0 ? void 0 : navPopover.isMobile) !== null && _a !== void 0 ? _a : false;
@@ -57,6 +57,9 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
     const subscription = data.subscription;
     const pricingContext = data.pricingContext;
     const ctaBehaviors = data.ctaBehaviors;
+    const billingOptions = (_b = pricingContext === null || pricingContext === void 0 ? void 0 : pricingContext.moneyPriceData.billingSwitch.options) !== null && _b !== void 0 ? _b : [];
+    const subscriptionBillingEnabled = billingOptions.some((option) => option.key === 'monthly' || option.key === 'yearly');
+    const onetimeBillingEnabled = billingOptions.some((option) => option.key === 'onetime');
     const getModalMoneyPriceData = useCallback((mode) => {
         if (!pricingContext) {
             return null;
@@ -230,10 +233,10 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
         userToggledRef.current = true;
         setBucketExpanded(true);
     }, []);
-    return (jsxs("section", { className: cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsx(GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsx("div", { className: "pt-2 sm:pt-0", children: jsx(GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsx(Settings2Icon, {}) : jsx(BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsx(ChevronUpIcon, { className: "h-4 w-4" })) : (jsx(ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
+    return (jsxs("section", { className: cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsx(GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), subscriptionBillingEnabled ? (jsxs(Fragment, { children: [jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsx("div", { className: "pt-2 sm:pt-0", children: jsx(GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsx(Settings2Icon, {}) : jsx(BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] })) : null] }), jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsx(ChevronUpIcon, { className: "h-4 w-4" })) : (jsx(ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
                             const balanceDisplay = formatNumber(locale, bucket.balance);
                             return (jsxs("li", { "data-credit-kind": bucket.kind, className: "rounded-2xl border border-slate-200/70 bg-white/85 px-3 py-3 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 sm:px-4", children: [jsxs("div", { className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs sm:text-sm", children: [jsx("span", { className: "flex min-w-0 items-center gap-2", children: jsx("span", { className: "max-w-full truncate rounded-full bg-purple-50 px-2 py-1 text-xs text-purple-600 shadow-sm dark:bg-purple-500/20 dark:text-purple-100 sm:text-sm", children: bucket.computedLabel }) }), jsx("span", { className: "flex min-w-0 justify-end", children: jsx("span", { className: "text-right text-base font-semibold leading-tight text-gray-500 dark:text-slate-100 sm:text-lg", title: balanceDisplay, children: balanceDisplay }) })] }), jsx("div", { className: "mt-3 flex justify-end gap-2", children: jsxs("span", { className: "text-[11px] text-gray-500 dark:text-slate-100 sm:text-xs", children: [translations.expiredAtLabel, ": ", bucket.expiresAt] }) })] }, bucket.kind));
-                        }) })) : (jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsx(GradientButton, { title: translations.onetimeBuy, icon: jsx(ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
+                        }) })) : (jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), onetimeBillingEnabled ? (jsx(GradientButton, { title: translations.onetimeBuy, icon: jsx(ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })) : null] })] }));
 }
 function deriveStatus(expiresAt, thresholdDays = 7) {
     if (!expiresAt) {

package/dist/main/credit/credit-overview-nav-client.d.ts

@@ -1,5 +1,5 @@
 import { type CreditOverviewTranslations } from './credit-overview-client';
-import type { CreditOverviewData } from './types';
+import type { CreditOverviewData, MobileBillingSwitchBehavior } from './types';
 export declare const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = "windrun-huaiin:credit-overview:refresh";
 export interface CreditOverviewPayload {
     data: CreditOverviewData;
@@ -9,6 +9,16 @@ export interface CreditOverviewPayload {
 export interface CreditOverviewNavClientProps {
     locale: string;
     endpoint: string;
+    /**
+     * Billing types enabled by the business app.
+     * Defaults are handled by the API/payload builder when omitted.
+     */
+    enabledBillingTypes?: string[];
+    /**
+     * Mobile behavior for the pricing modal billing switch.
+     * Default: 'sticky'.
+     */
+    mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
     /**
      * Browser event names that should trigger credit overview reload.
      * Business apps can dispatch these events after credit balance changes.
@@ -24,4 +34,4 @@ export interface CreditOverviewNavClientProps {
     refreshDebounceMs?: number;
 }
 export declare function dispatchCreditOverviewRefresh(eventName?: string): void;
-export declare function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebounceMs, }: CreditOverviewNavClientProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, mobileBillingSwitchBehavior, refreshEvents, refreshDebounceMs, }: CreditOverviewNavClientProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/main/credit/credit-overview-nav-client.js

@@ -9,9 +9,23 @@ var creditNavButton = require('./credit-nav-button.js');
 var creditOverviewClient = require('./credit-overview-client.js');
 
 const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
-function buildCreditOverviewUrl(endpoint, locale) {
+function normalizeEnabledBillingTypes(enabledBillingTypes) {
+    if (!(enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length)) {
+        return [];
+    }
+    return Array.from(new Set(enabledBillingTypes
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => billingType.length > 0)));
+}
+function buildEnabledBillingTypesKey(enabledBillingTypes) {
+    return normalizeEnabledBillingTypes(enabledBillingTypes).join('\n');
+}
+function buildCreditOverviewUrl(endpoint, locale, enabledBillingTypes) {
     const url = new URL(endpoint, window.location.origin);
     url.searchParams.set('locale', locale);
+    for (const billingType of enabledBillingTypes) {
+        url.searchParams.append('enabledBillingTypes', billingType);
+    }
     return url.toString();
 }
 function normalizeRefreshEvents(refreshEvents) {
@@ -29,13 +43,15 @@ function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRE
     }
     window.dispatchEvent(new CustomEvent(eventName));
 }
-function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebounceMs = 300, }) {
+function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, mobileBillingSwitchBehavior, refreshEvents, refreshDebounceMs = 300, }) {
     const { isLoaded, isSignedIn, userId } = nextjs.useAuth();
     const [payload, setPayload] = React.useState(null);
     const abortControllerRef = React.useRef(null);
     const isMountedRef = React.useRef(false);
     const refreshEventsKey = buildRefreshEventsKey(refreshEvents);
     const normalizedRefreshEvents = React.useMemo(() => refreshEventsKey.split('\n').filter(Boolean), [refreshEventsKey]);
+    const enabledBillingTypesKey = buildEnabledBillingTypesKey(enabledBillingTypes);
+    const normalizedEnabledBillingTypes = React.useMemo(() => enabledBillingTypesKey.split('\n').filter(Boolean), [enabledBillingTypesKey]);
     React.useEffect(() => {
         isMountedRef.current = true;
         return () => {
@@ -50,7 +66,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
         const controller = new AbortController();
         abortControllerRef.current = controller;
         try {
-            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale), {
+            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale, normalizedEnabledBillingTypes), {
                 cache: 'no-store',
                 credentials: 'same-origin',
                 signal: controller.signal,
@@ -77,7 +93,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
                 abortControllerRef.current = null;
             }
         }
-    }), [endpoint, locale]);
+    }), [endpoint, locale, normalizedEnabledBillingTypes]);
     React.useEffect(() => {
         var _a;
         if (!isLoaded) {
@@ -119,7 +135,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
     if (!payload) {
         return null;
     }
-    return (jsxRuntime.jsx(creditNavButton.CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, children: jsxRuntime.jsx(creditOverviewClient.CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
+    return (jsxRuntime.jsx(creditNavButton.CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, children: jsxRuntime.jsx(creditOverviewClient.CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
 }
 
 exports.CreditOverviewNavClient = CreditOverviewNavClient;

package/dist/main/credit/credit-overview-nav-client.mjs

@@ -7,9 +7,23 @@ import { CreditNavButton } from './credit-nav-button.mjs';
 import { CreditOverviewClient } from './credit-overview-client.mjs';
 
 const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
-function buildCreditOverviewUrl(endpoint, locale) {
+function normalizeEnabledBillingTypes(enabledBillingTypes) {
+    if (!(enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length)) {
+        return [];
+    }
+    return Array.from(new Set(enabledBillingTypes
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => billingType.length > 0)));
+}
+function buildEnabledBillingTypesKey(enabledBillingTypes) {
+    return normalizeEnabledBillingTypes(enabledBillingTypes).join('\n');
+}
+function buildCreditOverviewUrl(endpoint, locale, enabledBillingTypes) {
     const url = new URL(endpoint, window.location.origin);
     url.searchParams.set('locale', locale);
+    for (const billingType of enabledBillingTypes) {
+        url.searchParams.append('enabledBillingTypes', billingType);
+    }
     return url.toString();
 }
 function normalizeRefreshEvents(refreshEvents) {
@@ -27,13 +41,15 @@ function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRE
     }
     window.dispatchEvent(new CustomEvent(eventName));
 }
-function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebounceMs = 300, }) {
+function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, mobileBillingSwitchBehavior, refreshEvents, refreshDebounceMs = 300, }) {
     const { isLoaded, isSignedIn, userId } = useAuth();
     const [payload, setPayload] = useState(null);
     const abortControllerRef = useRef(null);
     const isMountedRef = useRef(false);
     const refreshEventsKey = buildRefreshEventsKey(refreshEvents);
     const normalizedRefreshEvents = useMemo(() => refreshEventsKey.split('\n').filter(Boolean), [refreshEventsKey]);
+    const enabledBillingTypesKey = buildEnabledBillingTypesKey(enabledBillingTypes);
+    const normalizedEnabledBillingTypes = useMemo(() => enabledBillingTypesKey.split('\n').filter(Boolean), [enabledBillingTypesKey]);
     useEffect(() => {
         isMountedRef.current = true;
         return () => {
@@ -48,7 +64,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
         const controller = new AbortController();
         abortControllerRef.current = controller;
         try {
-            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale), {
+            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale, normalizedEnabledBillingTypes), {
                 cache: 'no-store',
                 credentials: 'same-origin',
                 signal: controller.signal,
@@ -75,7 +91,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
                 abortControllerRef.current = null;
             }
         }
-    }), [endpoint, locale]);
+    }), [endpoint, locale, normalizedEnabledBillingTypes]);
     useEffect(() => {
         var _a;
         if (!isLoaded) {
@@ -117,7 +133,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
     if (!payload) {
         return null;
     }
-    return (jsx(CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, children: jsx(CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
+    return (jsx(CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, children: jsx(CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
 }
 
 export { CreditOverviewNavClient, DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT, dispatchCreditOverviewRefresh };

package/dist/main/credit/index.d.ts

@@ -3,4 +3,4 @@ export { CreditOverviewNavClient, DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT, dispatc
 export { CreditNavButton } from './credit-nav-button';
 export type { CreditOverviewTranslations } from './credit-overview-client';
 export type { CreditOverviewNavClientProps, CreditOverviewPayload, } from './credit-overview-nav-client';
-export type { CreditOverviewData, CreditBucket, CreditBucketStatus, SubscriptionInfo, } from './types';
+export type { CreditOverviewData, CreditBucket, CreditBucketStatus, MobileBillingSwitchBehavior, SubscriptionInfo, } from './types';

package/dist/main/credit/types.d.ts

@@ -1,5 +1,6 @@
 import type { InitUserContext, MoneyPriceConfig, MoneyPriceData } from '../money-price/money-price-types';
 export type PricingModalMode = 'subscription' | 'onetime';
+export type MobileBillingSwitchBehavior = 'sticky' | 'static';
 export type CreditActionConfig = CreditModalAction | CreditRedirectAction | CreditAuthAction | CreditCustomAction;
 export interface CreditModalAction {
     kind: 'modal';

package/dist/main/money-price/index.d.ts

@@ -1,4 +1,6 @@
 export { MoneyPriceInteractive } from './money-price-interactive';
 export { MoneyPriceButton } from './money-price-button';
+export { PricingModal, PricingModalProvider, usePricingModal, } from './pricing-modal';
 export type { MoneyPriceConfig, MoneyPriceData, MoneyPriceAnimeTone, MoneyPriceStrictDiffAnime, InitUserContext, MoneyPriceInteractiveProps, MoneyPriceButtonProps, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext, } from './money-price-types';
+export type { OpenPricingModalOptions, PricingModalProps, PricingModalProviderProps, } from './pricing-modal';
 export { UserState } from './money-price-types';

package/dist/main/money-price/index.js

@@ -3,12 +3,16 @@
 
 var moneyPriceInteractive = require('./money-price-interactive.js');
 var moneyPriceButton = require('./money-price-button.js');
+var pricingModal = require('./pricing-modal.js');
 var moneyPriceTypes = require('./money-price-types.js');
 
 
 
 exports.MoneyPriceInteractive = moneyPriceInteractive.MoneyPriceInteractive;
 exports.MoneyPriceButton = moneyPriceButton.MoneyPriceButton;
+exports.PricingModal = pricingModal.PricingModal;
+exports.PricingModalProvider = pricingModal.PricingModalProvider;
+exports.usePricingModal = pricingModal.usePricingModal;
 Object.defineProperty(exports, "UserState", {
 	enumerable: true,
 	get: function () { return moneyPriceTypes.UserState; }

package/dist/main/money-price/index.mjs

@@ -1,4 +1,5 @@
 "use client";
 export { MoneyPriceInteractive } from './money-price-interactive.mjs';
 export { MoneyPriceButton } from './money-price-button.mjs';
+export { PricingModal, PricingModalProvider, usePricingModal } from './pricing-modal.mjs';
 export { UserState } from './money-price-types.mjs';

package/dist/main/money-price/money-price-interactive.d.ts

@@ -1,2 +1,2 @@
 import { type MoneyPriceInteractiveProps } from './money-price-types';
-export declare function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, enableSubscriptionUpgrade, initialBillingType, disableAutoDetectBilling, initUserContext, isInitLoading, }: MoneyPriceInteractiveProps): import("react/jsx-runtime").JSX.Element;
+export declare function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade, initialBillingType, disableAutoDetectBilling, initUserContext, isInitLoading, }: MoneyPriceInteractiveProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/money-price/money-price-interactive.js

@@ -17,7 +17,7 @@ require('animejs');
 require('../anime/anime-404-page.js');
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
-function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
+function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior = 'static', enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
     var _a, _b, _c, _d, _e, _f;
     const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = nextjs.useClerk();
     const router = navigation.useRouter();
@@ -37,6 +37,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return acc;
         }, {});
     }, [billingOptions]);
+    const showBillingSwitch = billingOptions.length > 1;
     const defaultBilling = React.useMemo(() => {
         var _a;
         const defaultKey = data.billingSwitch.defaultKey;
@@ -309,15 +310,16 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return null;
         return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
     }, [selectedBillingOption, providerConfig, billingType]);
-    // Configure the mobile floating style for BillingTypeButton.
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsxRuntime.jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
+    // Configure the mobile behavior for BillingTypeButton.
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBillingSwitch ? (jsxRuntime.jsx("div", { className: utils.cn('mb-6 flex justify-center', mobileBillingSwitchBehavior === 'sticky' &&
+                    'max-md:sticky max-md:top-2 max-md:z-30 max-md:py-2 max-md:bg-transparent'), children: jsxRuntime.jsx("div", { className: "inline-flex max-w-[calc(100vw-2rem)] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
                             ? utils.cn('text-white rounded-full shadow-sm', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
-                        return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsxRuntime.jsx("button", { className: utils.cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
-                    }) }) }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
+                        return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsxRuntime.jsx("button", { className: utils.cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[88px] min-[360px]:min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
+                    }) }) })) : null, jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
                         var _a, _b;
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {

package/dist/main/money-price/money-price-interactive.mjs

@@ -15,7 +15,7 @@ import 'animejs';
 import '../anime/anime-404-page.mjs';
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
-function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
+function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior = 'static', enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
     var _a, _b, _c, _d, _e, _f;
     const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = useClerk();
     const router = useRouter();
@@ -35,6 +35,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return acc;
         }, {});
     }, [billingOptions]);
+    const showBillingSwitch = billingOptions.length > 1;
     const defaultBilling = useMemo(() => {
         var _a;
         const defaultKey = data.billingSwitch.defaultKey;
@@ -307,15 +308,16 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return null;
         return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
     }, [selectedBillingOption, providerConfig, billingType]);
-    // Configure the mobile floating style for BillingTypeButton.
-    return (jsxs(Fragment, { children: [jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
+    // Configure the mobile behavior for BillingTypeButton.
+    return (jsxs(Fragment, { children: [showBillingSwitch ? (jsx("div", { className: cn('mb-6 flex justify-center', mobileBillingSwitchBehavior === 'sticky' &&
+                    'max-md:sticky max-md:top-2 max-md:z-30 max-md:py-2 max-md:bg-transparent'), children: jsx("div", { className: "inline-flex max-w-[calc(100vw-2rem)] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
                             ? cn('text-white rounded-full shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
-                        return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
-                    }) }) }), jsx("div", { className: "w-full", children: jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
+                        return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[88px] min-[360px]:min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
+                    }) }) })) : null, jsx("div", { className: "w-full", children: jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
                         var _a, _b;
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {

package/dist/main/money-price/money-price-types.d.ts

@@ -81,6 +81,7 @@ export interface MoneyPriceProps {
     enableClerkModal?: boolean;
     sectionClassName?: string;
     enabledBillingTypes?: string[];
+    mobileBillingSwitchBehavior?: 'sticky' | 'static';
     enableSubscriptionUpgrade?: boolean;
     initUserContext?: InitUserContext;
     initialBillingType?: string;
@@ -92,6 +93,7 @@ export interface MoneyPriceInteractiveProps {
     customerPortalApiEndpoint?: string;
     enableClerkModal?: boolean;
     enabledBillingTypes?: string[];
+    mobileBillingSwitchBehavior?: 'sticky' | 'static';
     enableSubscriptionUpgrade?: boolean;
     initialBillingType?: string;
     disableAutoDetectBilling?: boolean;

package/dist/main/money-price/money-price.d.ts

@@ -1,2 +1,2 @@
 import type { MoneyPriceProps } from './money-price-types';
-export declare function MoneyPrice({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade, initUserContext, initialBillingType, }: MoneyPriceProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function MoneyPrice({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, sectionClassName, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade, initUserContext, initialBillingType, }: MoneyPriceProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/main/money-price/money-price.js

@@ -7,13 +7,13 @@ var moneyPriceInteractive = require('./money-price-interactive.js');
 var moneyPriceData = require('./money-price-data.js');
 
 function MoneyPrice(_a) {
-    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
+    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
         const data = yield moneyPriceData.buildMoneyPriceData({
             locale,
             currency: config.display.currency,
             enabledBillingTypes,
         });
-        return (jsxRuntime.jsxs("section", { id: "money-pricing", className: utils.cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
+        return (jsxRuntime.jsxs("section", { id: "money-pricing", className: utils.cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
     });
 }