@schematichq/schematic-components 1.4.2 → 1.5.0

package/dist/schematic-components.esm.js

@@ -1852,7 +1852,7 @@ var HOURS_IN_MS = MINUTES_IN_MS * 60;
 var DAYS_IN_MS = HOURS_IN_MS * 24;
 
 // src/const/debounce.ts
-var debounceOptions = {
+var DEBOUNCE_SETTINGS = {
   leading: true,
   trailing: false
 };
@@ -4207,6 +4207,7 @@ var initialContext = {
   hydrateComponent: stub,
   hydrateExternal: stub,
   getUpcomingInvoice: stub,
+  getCustomerBalance: stub,
   listInvoices: stub,
   createSetupIntent: stub,
   updatePaymentMethod: stub,
@@ -4219,7 +4220,8 @@ var initialContext = {
   setLayout: stub,
   setCheckoutState: stub,
   setData: stub,
-  updateSettings: stub
+  updateSettings: stub,
+  debug: stub
 };
 var EmbedContext = createContext(initialContext);
 
@@ -6701,6 +6703,7 @@ var en_default = {
     "After the trial, cancel": "After the trial, you will be downgraded to the {{defaultPlanName}} plan and your subscription will be cancelled.",
     "After the trial, subscribe": "After the trial, subscription starts and you will be billed.",
     "Amount off": "{{amount}} off",
+    "An invoice is created when charges reach $X; the rest is billed monthly.": "An invoice is created when charges reach {{amount}}; the rest is billed monthly.",
     "An unknown error occurred.": "An unknown error occurred.",
     Billed: "Billed {{period}}",
     "Cancel subscription": "Cancel subscription",
@@ -6713,8 +6716,10 @@ var en_default = {
     "Choose add-on": "Choose add-on",
     "Choose plan": "Choose plan",
     "Choose your base plan": "Choose your base plan",
-    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
+    "Credit bundles": "Credit bundles",
     Credits: "Credits",
+    "Credits in plan": "Credits in plan",
+    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
     "Current plan": "Current plan",
     "Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
     "Currently using": "Currently using {{quantity}} {{unit}}",
@@ -6765,8 +6770,10 @@ var en_default = {
     "Please provide an access token.": "Please provide an access token.",
     "Powered by": "Powered by",
     "Price by unit based on final tier reached.": "Price by unit based on final tier reached.",
+    "Promotional credits": "Promotional credits",
     Proration: "Proration",
     "Quantity to pay for in advance": "Quantity to pay for in advance",
+    "Remaining balance": "Remaining balance",
     "Remove add-on": "Remove add-on",
     Resets: "Resets {{date}}",
     "Save payment method": "Save payment method",
@@ -8633,6 +8640,22 @@ function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/CreditGrantDetail.ts
+function CreditGrantDetailFromJSON(json) {
+  return CreditGrantDetailFromJSONTyped(json, false);
+}
+function CreditGrantDetailFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
+    expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
+    grantReason: json["grant_reason"],
+    quantity: json["quantity"]
+  };
+}
+
 // src/api/checkoutexternal/models/FeatureUsageResponseData.ts
 function FeatureUsageResponseDataFromJSON(json) {
   return FeatureUsageResponseDataFromJSONTyped(json, false);
@@ -8646,8 +8669,18 @@ function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     allocation: json["allocation"] == null ? void 0 : json["allocation"],
     allocationType: json["allocation_type"],
     companyOverride: json["company_override"] == null ? void 0 : CompanyOverrideResponseDataFromJSON(json["company_override"]),
+    creditGrantCounts: json["credit_grant_counts"] == null ? void 0 : json["credit_grant_counts"],
+    creditGrantDetails: json["credit_grant_details"] == null ? void 0 : json["credit_grant_details"].map(
+      CreditGrantDetailFromJSON
+    ),
+    creditGrantReason: json["credit_grant_reason"] == null ? void 0 : json["credit_grant_reason"],
+    creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
+    creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
+    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
+    creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
     entitlementExpirationDate: json["entitlement_expiration_date"] == null ? void 0 : new Date(json["entitlement_expiration_date"]),
     entitlementId: json["entitlement_id"],
+    entitlementSource: json["entitlement_source"] == null ? void 0 : json["entitlement_source"],
     entitlementType: json["entitlement_type"],
     feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
     metricResetAt: json["metric_reset_at"] == null ? void 0 : new Date(json["metric_reset_at"]),
@@ -10462,7 +10495,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.4.2",
+      "X-Schematic-Components-Version": "1.5.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10495,7 +10528,7 @@ var EmbedProvider = ({
     }
   }, [api.public]);
   const debouncedHydratePublic = useMemo3(
-    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydratePublic]
   );
   const hydrate = useCallback3(async () => {
@@ -10517,7 +10550,7 @@ var EmbedProvider = ({
     }
   }, [api.checkout]);
   const debouncedHydrate = useMemo3(
-    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrate]
   );
   const hydrateComponent = useCallback3(
@@ -10544,7 +10577,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedHydrateComponent = useMemo3(
-    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateComponent]
   );
   const hydrateExternal = useCallback3(async function(fn) {
@@ -10564,14 +10597,14 @@ var EmbedProvider = ({
     }
   }, []);
   const debouncedHydrateExternal = useMemo3(
-    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateExternal]
   );
   const createSetupIntent = useCallback3(async () => {
     return api.checkout?.createSetupIntent();
   }, [api.checkout]);
   const debouncedCreateSetupIntent = useMemo3(
-    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [createSetupIntent]
   );
   const updatePaymentMethod = useCallback3(
@@ -10590,7 +10623,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedUpdatePaymentMethod = useMemo3(
-    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [updatePaymentMethod]
   );
   const deletePaymentMethod = useCallback3(
@@ -10609,7 +10642,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedDeletePaymentMethod = useMemo3(
-    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [deletePaymentMethod]
   );
   const checkout = useCallback3(
@@ -10628,7 +10661,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedCheckout = useMemo3(
-    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [checkout]
   );
   const previewCheckout = useCallback3(
@@ -10638,7 +10671,12 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedPreviewCheckout = useMemo3(
-    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, {
+      // invoke immediately for minimal latency
+      leading: true,
+      // but also ensure latest data is fetched
+      trailing: true
+    }),
     [previewCheckout]
   );
   const unsubscribe = useCallback3(async () => {
@@ -10652,7 +10690,7 @@ var EmbedProvider = ({
     return response;
   }, [api.checkout]);
   const debouncedUnsubscribe = useMemo3(
-    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [unsubscribe]
   );
   const getUpcomingInvoice = useCallback3(
@@ -10664,19 +10702,30 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedGetUpcomingInvoice = useMemo3(
-    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [getUpcomingInvoice]
   );
+  const getCustomerBalance = useCallback3(async () => {
+    return api.checkout?.fetchCustomerBalance();
+  }, [api.checkout]);
+  const debouncedGetCustomerBalance = useMemo3(
+    () => (0, import_debounce.default)(getCustomerBalance, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    [getCustomerBalance]
+  );
   const listInvoices = useCallback3(async () => {
     return api.checkout?.listInvoices();
   }, [api.checkout]);
   const debouncedListInvoices = useMemo3(
-    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [listInvoices]
   );
-  const setError = useCallback3((error) => {
-    dispatch({ type: "ERROR", error });
-  }, []);
+  const setError = useCallback3(
+    (error) => {
+      debug(error.message);
+      dispatch({ type: "ERROR", error });
+    },
+    [debug]
+  );
   const setAccessToken = useCallback3((token2) => {
     dispatch({ type: "SET_ACCESS_TOKEN", token: token2 });
   }, []);
@@ -10701,13 +10750,13 @@ var EmbedProvider = ({
     );
     if (element) {
       styleRef.current = element;
-      return;
+    } else {
+      const style = document.createElement("link");
+      style.id = "schematic-fonts";
+      style.rel = "stylesheet";
+      document.head.appendChild(style);
+      styleRef.current = style;
     }
-    const style = document.createElement("link");
-    style.id = "schematic-fonts";
-    style.rel = "stylesheet";
-    document.head.appendChild(style);
-    styleRef.current = style;
     const darkModeQuery = matchMedia("(prefers-color-scheme: dark)");
     const colorMode = darkModeQuery.matches ? "dark" : "light";
     dispatch({
@@ -10718,13 +10767,17 @@ var EmbedProvider = ({
         }
       }
     });
-    darkModeQuery.addEventListener("change", (event) => {
+    function darkModeQueryHandler(event) {
       const newColorMode = event.matches ? "dark" : "light";
       dispatch({
         type: "UPDATE_SETTINGS",
         settings: { theme: { colorMode: newColorMode } }
       });
-    });
+    }
+    darkModeQuery.addEventListener("change", darkModeQueryHandler);
+    return () => {
+      darkModeQuery.removeEventListener("change", darkModeQueryHandler);
+    };
   }, []);
   useEffect2(() => {
     const fontSet = /* @__PURE__ */ new Set([]);
@@ -10770,24 +10823,19 @@ var EmbedProvider = ({
       }));
     }
   }, [state.accessToken, apiConfig, customHeaders]);
-  useEffect2(() => {
-    if (state.error) {
-      debug(state.error.message);
-    }
-  }, [debug, state.error]);
   useEffect2(() => {
     const providedSettings = { ...options.settings || {} };
     updateSettings(providedSettings, { update: false });
   }, [options.settings, updateSettings]);
   useEffect2(() => {
-    const planChanged = (event) => {
+    function planChangedHandler(event) {
       if (event instanceof CustomEvent) {
         debug("plan changed", event.detail);
       }
-    };
-    window.addEventListener("plan-changed", planChanged);
+    }
+    window.addEventListener("plan-changed", planChangedHandler);
     return () => {
-      window.removeEventListener("plan-changed", planChanged);
+      window.removeEventListener("plan-changed", planChangedHandler);
     };
   }, [debug]);
   return /* @__PURE__ */ jsx(
@@ -10812,13 +10860,15 @@ var EmbedProvider = ({
         previewCheckout: debouncedPreviewCheckout,
         unsubscribe: debouncedUnsubscribe,
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
+        getCustomerBalance: debouncedGetCustomerBalance,
         listInvoices: debouncedListInvoices,
         setError,
         setAccessToken,
         setLayout,
         setCheckoutState,
         setData,
-        updateSettings
+        updateSettings,
+        debug
       },
       children: /* @__PURE__ */ jsxs(ot, { theme: state.settings.theme, children: [
         /* @__PURE__ */ jsx(IconStyles, {}),
@@ -11746,8 +11796,10 @@ import { createPortal } from "react-dom";
 
 // src/components/ui/tooltip/styles.ts
 var Trigger = dt(Box)`
-  width: 100%;
-  flex-grow: 1;
+  ${({ $fullWidth = false }) => $fullWidth && lt`
+      width: 100%;
+      flex-grow: 1;
+    `}
 `;
 var coords = (position2) => {
   let x2 = 0;
@@ -11893,6 +11945,7 @@ var Tooltip = ({
   trigger,
   content,
   position: position2 = "top",
+  fullWidth = false,
   ...rest
 }) => {
   const ref = useRef5(null);
@@ -11933,6 +11986,7 @@ var Tooltip = ({
         ref,
         onPointerEnter: () => setShow(true),
         onPointerLeave: () => setShow(false),
+        $fullWidth: fullWidth,
         ...rest,
         children: trigger
       }
@@ -12079,6 +12133,35 @@ var import_debounce3 = __toESM(require_debounce());
 import { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect5, useMemo as useMemo15, useState as useState12 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
+// src/components/shared/billing-threshold-tooltip/BillingThresholdTooltip.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var BillingThresholdTooltip = ({
+  billingThreshold
+}) => {
+  const { t: t2 } = useTranslation();
+  const { settings } = useEmbed();
+  const isLightBackground = useIsLightBackground();
+  return /* @__PURE__ */ jsx10(
+    Tooltip,
+    {
+      content: /* @__PURE__ */ jsx10(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, children: t2(
+        "An invoice is created when charges reach $X; the rest is billed monthly.",
+        {
+          amount: formatCurrency(billingThreshold)
+        }
+      ) }),
+      trigger: /* @__PURE__ */ jsx10(
+        Icon3,
+        {
+          title: "billing threshold",
+          name: "info-rounded",
+          color: `hsla(0, 0%, ${isLightBackground ? 0 : 100}%, 0.5)`
+        }
+      )
+    }
+  );
+};
+
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 import {
   useCallback as useCallback9,
@@ -12096,7 +12179,7 @@ import {
 } from "react";
 
 // src/components/shared/sidebar/EntitlementRow.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var EntitlementRow = (entitlement) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
@@ -12109,7 +12192,7 @@ var EntitlementRow = (entitlement) => {
       priceTier: priceTiers
     } = getEntitlementPrice(entitlement, planPeriod) || {};
     return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { display: "heading4", children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(Text, { display: "heading4", children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
         quantity,
         " ",
         getFeatureName(feature, quantity)
@@ -12118,7 +12201,7 @@ var EntitlementRow = (entitlement) => {
         " ",
         getFeatureName(feature, softLimit)
       ] }) : feature.name }) }),
-      /* @__PURE__ */ jsx10(Box, { $whiteSpace: "nowrap", children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs6(Text, { children: [
+      /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs6(Text, { children: [
         formatCurrency((price ?? 0) * quantity, currency),
         /* @__PURE__ */ jsxs6("sub", { children: [
           "/",
@@ -12142,17 +12225,8 @@ var EntitlementRow = (entitlement) => {
             shortenPeriod(planPeriod)
           ] })
         ] })
-      ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs6(Flex, { $alignItems: "center", children: [
-        /* @__PURE__ */ jsx10(
-          PricingTiersTooltip,
-          {
-            feature,
-            period: planPeriod,
-            currency,
-            priceTiers
-          }
-        ),
-        /* @__PURE__ */ jsx10(
+      ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs6(Flex, { $alignItems: "end", children: [
+        /* @__PURE__ */ jsx11(
           Text,
           {
             style: { opacity: 0.54 },
@@ -12160,6 +12234,15 @@ var EntitlementRow = (entitlement) => {
             $color: settings.theme.typography.text.color,
             children: t2("Tier-based")
           }
+        ),
+        /* @__PURE__ */ jsx11(
+          PricingTiersTooltip,
+          {
+            feature,
+            period: planPeriod,
+            currency,
+            priceTiers
+          }
         )
       ] }) })
     ] });
@@ -12168,7 +12251,7 @@ var EntitlementRow = (entitlement) => {
 
 // src/components/shared/sidebar/Proration.tsx
 import { useState as useState6 } from "react";
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var Proration = ({ currency, charges }) => {
   const { t: t2 } = useTranslation();
   const [open, setOpen] = useState6(false);
@@ -12178,19 +12261,19 @@ var Proration = ({ currency, charges }) => {
     setOpen((open2) => !open2);
   };
   return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(Text, { $size: 14, children: t2("Proration") }) }),
+    /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(Text, { $size: 14, children: t2("Proration") }) }),
     /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       open && charges?.upcomingInvoiceLineItems.map(
         ({ amount, description }, index) => {
           return /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
-            /* @__PURE__ */ jsx11(Text, { children: description }),
-            /* @__PURE__ */ jsx11(Text, { children: formatCurrency(amount, currency) })
+            /* @__PURE__ */ jsx12(Text, { children: description }),
+            /* @__PURE__ */ jsx12(Text, { children: formatCurrency(amount, currency) })
           ] }, index);
         }
       ),
       /* @__PURE__ */ jsxs7(Flex, { $justifyContent: "space-between", $alignItems: "center", $gap: "1rem", children: [
         /* @__PURE__ */ jsxs7(Flex, { children: [
-          /* @__PURE__ */ jsx11(Text, { display: "heading4", children: t2("Total") }),
+          /* @__PURE__ */ jsx12(Text, { display: "heading4", children: t2("Total") }),
           /* @__PURE__ */ jsxs7(
             Button,
             {
@@ -12199,20 +12282,20 @@ var Proration = ({ currency, charges }) => {
               style: { height: "auto", padding: 0 },
               $variant: "text",
               children: [
-                /* @__PURE__ */ jsx11(Icon3, { name: open ? "chevron-up" : "chevron-down" }),
-                /* @__PURE__ */ jsx11(Text, { children: open ? t2("Hide details") : t2("Show details") })
+                /* @__PURE__ */ jsx12(Icon3, { name: open ? "chevron-up" : "chevron-down" }),
+                /* @__PURE__ */ jsx12(Text, { children: open ? t2("Hide details") : t2("Show details") })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(Text, { children: formatCurrency(charges.proration, currency) }) })
+        /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(Text, { children: formatCurrency(charges.proration, currency) }) })
       ] })
     ] })
   ] });
 };
 
 // src/components/shared/sidebar/StageButton.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var StageButton = ({
   checkout,
   checkoutStage,
@@ -12234,7 +12317,7 @@ var StageButton = ({
   const { t: t2 } = useTranslation();
   const isDisabled = isLoading || !hasPlan || inEditMode;
   const NoPaymentRequired = () => {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12248,7 +12331,7 @@ var StageButton = ({
   };
   if (checkoutStage === "plan") {
     if (isSelectedPlanTrialable && trialPaymentMethodRequired && shouldTrial) {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -12269,7 +12352,7 @@ var StageButton = ({
                 t2("Next"),
                 ": ",
                 t2("Checkout"),
-                /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+                /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
               ]
             }
           )
@@ -12279,9 +12362,9 @@ var StageButton = ({
     if (!isPaymentMethodRequired && !checkoutStages?.some(
       (stage) => stage.id === "usage" || stage.id === "addons" || stage.id === "credits"
     )) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12298,7 +12381,7 @@ var StageButton = ({
           ":",
           " ",
           hasPayInAdvanceEntitlements ? t2("Usage") : hasAddOns ? t2("Addons") : hasCreditBundles ? t2("Credits") : t2("Checkout"),
-          /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+          /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
         ] })
       }
     );
@@ -12307,9 +12390,9 @@ var StageButton = ({
     if (!isPaymentMethodRequired && !checkoutStages?.some(
       (stage) => stage.id === "addons" || stage.id === "credits"
     )) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12333,7 +12416,7 @@ var StageButton = ({
               ":",
               " ",
               hasAddOns ? t2("Addons") : hasCreditBundles ? t2("Credits") : t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -12348,9 +12431,9 @@ var StageButton = ({
       (stage) => stage.id === "credits"
     );
     if (!isPaymentMethodRequired && !hasAddonsUsageStage && !hasCreditsStage) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12374,7 +12457,7 @@ var StageButton = ({
               ":",
               " ",
               hasAddonsUsageStage ? t2("Add-ons Quantity") : hasCreditsStage ? t2("Credits") : t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -12383,9 +12466,9 @@ var StageButton = ({
   }
   if (checkoutStage === "addonsUsage") {
     if (!isPaymentMethodRequired && !checkoutStages?.some((stage) => stage.id === "credits")) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12406,7 +12489,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               hasCreditBundles ? t2("Credits") : t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -12415,9 +12498,9 @@ var StageButton = ({
   }
   if (checkoutStage === "credits") {
     if (!isPaymentMethodRequired) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12438,7 +12521,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -12447,9 +12530,9 @@ var StageButton = ({
   }
   if (checkoutStage === "checkout") {
     if (!isPaymentMethodRequired) {
-      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12464,7 +12547,7 @@ var StageButton = ({
 };
 
 // src/components/shared/sidebar/Sidebar.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var Sidebar = ({
   planPeriod,
   selectedPlan,
@@ -12793,7 +12876,7 @@ var Sidebar = ({
         }
       },
       children: [
-        showHeader && /* @__PURE__ */ jsx13(
+        showHeader && /* @__PURE__ */ jsx14(
           Flex,
           {
             $position: "relative",
@@ -12805,7 +12888,7 @@ var Sidebar = ({
             $borderBottomWidth: "1px",
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-            children: /* @__PURE__ */ jsx13(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx13(Text, { as: "h3", display: "heading3", children: t2("Subscription") }) })
+            children: /* @__PURE__ */ jsx14(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx14(Text, { as: "h3", display: "heading3", children: t2("Subscription") }) })
           }
         ),
         /* @__PURE__ */ jsxs9(
@@ -12822,7 +12905,7 @@ var Sidebar = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
             children: [
-              /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { $size: 14, children: t2("Plan") }) }),
+              /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { $size: 14, children: t2("Plan") }) }),
               /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
                 currentPlan && /* @__PURE__ */ jsxs9(
                   Flex,
@@ -12836,8 +12919,8 @@ var Sidebar = ({
                       $color: settings.theme.typography.heading4.color
                     },
                     children: [
-                      /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(Text, { display: "heading4", children: currentPlan.name }) }),
-                      typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
+                      /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { display: "heading4", children: currentPlan.name }) }),
+                      typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx14(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
                         formatCurrency(
                           currentPlan.planPrice,
                           billingSubscription?.currency
@@ -12851,7 +12934,7 @@ var Sidebar = ({
                   }
                 ),
                 willPlanChange && /* @__PURE__ */ jsxs9(Box, { children: [
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     Box,
                     {
                       $width: "100%",
@@ -12859,7 +12942,7 @@ var Sidebar = ({
                       $opacity: "50%",
                       $marginBottom: "0.25rem",
                       $marginTop: "-0.25rem",
-                      children: /* @__PURE__ */ jsx13(
+                      children: /* @__PURE__ */ jsx14(
                         Icon3,
                         {
                           name: "arrow-down",
@@ -12878,8 +12961,8 @@ var Sidebar = ({
                       $alignItems: "center",
                       $gap: "1rem",
                       children: [
-                        /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsx13(Text, { display: "heading4", children: selectedPlan.name }) }),
-                        /* @__PURE__ */ jsx13(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
+                        /* @__PURE__ */ jsx14(Flex, { children: /* @__PURE__ */ jsx14(Text, { display: "heading4", children: selectedPlan.name }) }),
+                        /* @__PURE__ */ jsx14(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
                           formatCurrency(
                             selectedPlanPrice ?? 0,
                             selectedPlanCurrency
@@ -12895,12 +12978,12 @@ var Sidebar = ({
                 ] })
               ] }),
               updatedUsageBasedEntitlements.willChange && /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { $size: 14, children: t2("Usage-based") }) }),
+                /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { $size: 14, children: t2("Usage-based") }) }),
                 updatedUsageBasedEntitlements.removed.reduce(
                   (acc, entitlement, index) => {
                     if (entitlement.feature?.name) {
                       acc.push(
-                        /* @__PURE__ */ jsx13(
+                        /* @__PURE__ */ jsx14(
                           Flex,
                           {
                             $justifyContent: "space-between",
@@ -12909,7 +12992,7 @@ var Sidebar = ({
                             $opacity: "0.625",
                             $textDecoration: "line-through",
                             $color: settings.theme.typography.heading4.color,
-                            children: /* @__PURE__ */ jsx13(
+                            children: /* @__PURE__ */ jsx14(
                               EntitlementRow,
                               {
                                 ...entitlement,
@@ -12930,7 +13013,7 @@ var Sidebar = ({
                     if (next2.feature?.name) {
                       acc.push(
                         /* @__PURE__ */ jsxs9(Box, { children: [
-                          /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx14(
                             Flex,
                             {
                               $justifyContent: "space-between",
@@ -12939,16 +13022,16 @@ var Sidebar = ({
                               $opacity: "0.625",
                               $textDecoration: "line-through",
                               $color: settings.theme.typography.heading4.color,
-                              children: /* @__PURE__ */ jsx13(EntitlementRow, { ...previous, planPeriod })
+                              children: /* @__PURE__ */ jsx14(EntitlementRow, { ...previous, planPeriod })
                             }
                           ),
-                          /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx14(
                             Flex,
                             {
                               $justifyContent: "space-between",
                               $alignItems: "baseline",
                               $gap: "1rem",
-                              children: /* @__PURE__ */ jsx13(EntitlementRow, { ...next2, planPeriod })
+                              children: /* @__PURE__ */ jsx14(EntitlementRow, { ...next2, planPeriod })
                             }
                           )
                         ] }, index)
@@ -12962,13 +13045,13 @@ var Sidebar = ({
                   (acc, entitlement, index) => {
                     if (entitlement.feature?.name) {
                       acc.push(
-                        /* @__PURE__ */ jsx13(
+                        /* @__PURE__ */ jsx14(
                           Flex,
                           {
                             $justifyContent: "space-between",
                             $alignItems: "baseline",
                             $gap: "1rem",
-                            children: /* @__PURE__ */ jsx13(
+                            children: /* @__PURE__ */ jsx14(
                               EntitlementRow,
                               {
                                 ...entitlement,
@@ -12986,7 +13069,7 @@ var Sidebar = ({
                 )
               ] }),
               selectedPlan && isSelectedPlanTrialable && shouldTrial && /* @__PURE__ */ jsxs9(Box, { children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { $size: 14, children: t2("Trial") }) }),
+                /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { $size: 14, children: t2("Trial") }) }),
                 /* @__PURE__ */ jsxs9(
                   Flex,
                   {
@@ -12994,19 +13077,19 @@ var Sidebar = ({
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsx13(Text, { display: "heading4", children: t2("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
-                      /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsxs9(Text, { children: [
+                      /* @__PURE__ */ jsx14(Flex, { children: /* @__PURE__ */ jsx14(Text, { display: "heading4", children: t2("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
+                      /* @__PURE__ */ jsx14(Flex, { children: /* @__PURE__ */ jsxs9(Text, { children: [
                         "-",
                         formatCurrency(selectedPlanPrice ?? 0, selectedPlanCurrency),
                         "/",
-                        /* @__PURE__ */ jsx13("sub", { children: shortenPeriod(planPeriod) })
+                        /* @__PURE__ */ jsx14("sub", { children: shortenPeriod(planPeriod) })
                       ] }) })
                     ]
                   }
                 )
               ] }),
               (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { $size: 14, children: t2("Add-ons") }) }),
+                /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { $size: 14, children: t2("Add-ons") }) }),
                 removedAddOns.map((addOn, index) => {
                   return /* @__PURE__ */ jsxs9(
                     Flex,
@@ -13018,8 +13101,8 @@ var Sidebar = ({
                       $textDecoration: "line-through",
                       $color: settings.theme.typography.heading4.color,
                       children: [
-                        /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(Text, { display: "heading4", children: addOn.name }) }),
-                        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
+                        /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { display: "heading4", children: addOn.name }) }),
+                        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx14(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
                           formatCurrency(addOn.planPrice, selectedPlanCurrency),
                           addOn.planPeriod !== "one-time" && /* @__PURE__ */ jsxs9("sub", { children: [
                             "/",
@@ -13040,8 +13123,8 @@ var Sidebar = ({
                       $alignItems: "center",
                       $gap: "1rem",
                       children: [
-                        /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(Text, { display: "heading4", children: addOn.name }) }),
-                        /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
+                        /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { display: "heading4", children: addOn.name }) }),
+                        /* @__PURE__ */ jsx14(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
                           formatCurrency(addOnPrice ?? 0, addOnCurrency),
                           addOn.chargeType !== ChargeType.oneTime && /* @__PURE__ */ jsxs9("sub", { children: [
                             "/",
@@ -13055,7 +13138,7 @@ var Sidebar = ({
                 })
               ] }),
               addedCreditBundles.length > 0 && /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { $size: 14, children: t2("Credits") }) }),
+                /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { $size: 14, children: t2("Credits") }) }),
                 addedCreditBundles.reduce(
                   (acc, bundle, index) => {
                     const price = typeof bundle.price?.priceDecimal === "string" ? Number(bundle.price.priceDecimal) : typeof bundle.price?.price === "number" ? bundle.price.price : void 0;
@@ -13070,19 +13153,19 @@ var Sidebar = ({
                             $gap: "1rem",
                             children: [
                               /* @__PURE__ */ jsxs9(Box, { children: [
-                                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs9(Text, { display: "heading4", children: [
+                                /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsxs9(Text, { display: "heading4", children: [
                                   bundle.name,
                                   " (",
                                   bundle.count,
                                   ")"
                                 ] }) }),
-                                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs9(Text, { children: [
+                                /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsxs9(Text, { children: [
                                   amount,
                                   " ",
                                   getFeatureName(bundle, amount)
                                 ] }) })
                               ] }),
-                              bundle.count > 0 && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx13(Text, { children: formatCurrency(
+                              bundle.count > 0 && /* @__PURE__ */ jsx14(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx14(Text, { children: formatCurrency(
                                 price * bundle.count,
                                 bundle.price?.currency
                               ) }) })
@@ -13096,7 +13179,7 @@ var Sidebar = ({
                   []
                 )
               ] }),
-              proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx13(
+              proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx14(
                 Proration,
                 {
                   charges,
@@ -13123,7 +13206,7 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { children: t2("Discount") }) }),
+                    /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { children: t2("Discount") }) }),
                     /* @__PURE__ */ jsxs9(
                       Flex,
                       {
@@ -13134,15 +13217,15 @@ var Sidebar = ({
                         $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                         $borderRadius: "0.3125rem",
                         children: [
-                          /* @__PURE__ */ jsx13(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
-                          /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx14(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
+                          /* @__PURE__ */ jsx14(
                             Box,
                             {
                               $cursor: "pointer",
                               onClick: () => {
                                 updatePromoCode?.(null);
                               },
-                              children: /* @__PURE__ */ jsx13(
+                              children: /* @__PURE__ */ jsx14(
                                 Icon3,
                                 {
                                   name: "close",
@@ -13165,8 +13248,8 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx13(Text, { children: t2("X% off", { percent: percentOff }) }) }),
-                    /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(Text, { children: formatCurrency(
+                    /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx14(Text, { children: t2("X% off", { percent: percentOff }) }) }),
+                    /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { children: formatCurrency(
                       newCharges / 100 * percentOff,
                       selectedPlanCurrency
                     ) }) })
@@ -13180,13 +13263,13 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx13(Text, { children: t2("X off", {
+                    /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx14(Text, { children: t2("X off", {
                       amount: formatCurrency(
                         Math.abs(amountOff),
                         selectedPlanCurrency
                       )
                     }) }) }),
-                    /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs9(Text, { children: [
+                    /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsxs9(Text, { children: [
                       "-",
                       formatCurrency(Math.abs(amountOff), selectedPlanCurrency)
                     ] }) })
@@ -13200,11 +13283,11 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs9(Text, { children: [
+                    /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs9(Text, { children: [
                       planPeriod === "year" ? t2("Yearly total") : t2("Monthly total"),
                       ":"
                     ] }) }),
-                    /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
+                    /* @__PURE__ */ jsx14(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs9(Text, { children: [
                       subscriptionPrice,
                       /* @__PURE__ */ jsxs9("sub", { children: [
                         "/",
@@ -13221,22 +13304,22 @@ var Sidebar = ({
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs9(Text, { children: [
+                    /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs9(Text, { children: [
                       t2("Due today"),
                       ":"
                     ] }) }),
-                    /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
+                    /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
                   ]
                 }
               ),
               dueNow < 0 && /* @__PURE__ */ jsxs9(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
-                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs9(Text, { children: [
+                /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs9(Text, { children: [
                   t2("Credits to be applied to future invoices"),
                   ":"
                 ] }) }),
-                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
+                /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
               ] }),
-              layout === "checkout" && /* @__PURE__ */ jsx13(
+              layout === "checkout" && /* @__PURE__ */ jsx14(
                 StageButton,
                 {
                   checkout: handleCheckout,
@@ -13257,7 +13340,7 @@ var Sidebar = ({
                   willTrialWithoutPaymentMethod
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ jsx13(
+              layout === "unsubscribe" && /* @__PURE__ */ jsx14(
                 Button,
                 {
                   type: "button",
@@ -13267,8 +13350,8 @@ var Sidebar = ({
                   children: t2("Cancel subscription")
                 }
               ),
-              !isLoading && error && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(Text, { $weight: 500, $color: "#DB6669", children: error }) }),
-              layout !== "unsubscribe" && /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { children: subscriptionPrice && // TODO: localize
+              !isLoading && error && /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { $weight: 500, $color: "#DB6669", children: error }) }),
+              layout !== "unsubscribe" && /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { children: subscriptionPrice && // TODO: localize
               `You will be billed ${subscriptionPrice} ${usageBasedEntitlements.length > 0 ? "plus usage based costs" : ""} for this subscription
                 every ${planPeriod} ${periodStart ? `on the ${formatOrdinal(periodStart.getDate())}` : ""} ${planPeriod === "year" && periodStart ? `of ${getMonthName(periodStart)}` : ""} unless you unsubscribe.` }) })
             ]
@@ -13280,13 +13363,13 @@ var Sidebar = ({
 };
 
 // src/components/shared/checkout-dialog/AddOns.tsx
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var AddOns = ({ addOns, toggle, isLoading, period }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
   const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Box,
     {
       $display: "grid",
@@ -13329,12 +13412,12 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
             },
             children: [
               /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { display: "heading3", children: addOn.name }) }),
-                addOn.description && /* @__PURE__ */ jsx14(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx14(Text, { children: addOn.description }) }),
+                /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(Text, { display: "heading3", children: addOn.name }) }),
+                addOn.description && /* @__PURE__ */ jsx15(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx15(Text, { children: addOn.description }) }),
                 (addOn[periodKey] || addOn.chargeType === ChargeType.oneTime) && /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
                   /* @__PURE__ */ jsxs10(Box, { children: [
-                    /* @__PURE__ */ jsx14(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
-                    /* @__PURE__ */ jsx14(
+                    /* @__PURE__ */ jsx15(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
+                    /* @__PURE__ */ jsx15(
                       Text,
                       {
                         display: "heading2",
@@ -13346,7 +13429,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                       }
                     )
                   ] }),
-                  overageInfo && overageInfo.softLimit && /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsxs10(Text, { $size: 0.875, style: { opacity: 0.8 }, children: [
+                  overageInfo && overageInfo.softLimit && /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsxs10(Text, { $size: 0.875, style: { opacity: 0.8 }, children: [
                     overageInfo.softLimit,
                     " ",
                     overageInfo.featureName || "units",
@@ -13360,7 +13443,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     overageInfo.featureName?.toLowerCase() || "unit"
                   ] }) })
                 ] }),
-                isAddOnCurrent && /* @__PURE__ */ jsx14(
+                isAddOnCurrent && /* @__PURE__ */ jsx15(
                   Flex,
                   {
                     $position: "absolute",
@@ -13369,7 +13452,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     $backgroundColor: settings.theme.primary,
                     $borderRadius: "9999px",
                     $padding: "0.125rem 0.85rem",
-                    children: /* @__PURE__ */ jsx14(
+                    children: /* @__PURE__ */ jsx15(
                       Text,
                       {
                         $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -13380,7 +13463,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx14(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ jsx15(
                 Button,
                 {
                   type: "button",
@@ -13392,7 +13475,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $fullWidth: true,
                   children: t2("Choose add-on")
                 }
-              ) : /* @__PURE__ */ jsx14(
+              ) : /* @__PURE__ */ jsx15(
                 Button,
                 {
                   type: "button",
@@ -13403,7 +13486,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $variant: isAddOnCurrent ? "ghost" : "text",
                   $fullWidth: true,
                   children: isAddOnCurrent ? t2("Remove add-on") : /* @__PURE__ */ jsxs10(Fragment5, { children: [
-                    /* @__PURE__ */ jsx14(Icon3, { name: "check-rounded", size: "sm" }),
+                    /* @__PURE__ */ jsx15(Icon3, { name: "check-rounded", size: "sm" }),
                     t2("Selected")
                   ] })
                 }
@@ -13419,7 +13502,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 
 // src/components/shared/checkout-dialog/Checkout.tsx
 import { useState as useState7 } from "react";
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var Checkout = ({
   isPaymentMethodRequired,
   setPaymentMethodId,
@@ -13432,9 +13515,9 @@ var Checkout = ({
     return null;
   }
   return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsx15(PaymentMethodDetails, { setPaymentMethodId }),
+    /* @__PURE__ */ jsx16(PaymentMethodDetails, { setPaymentMethodId }),
     /* @__PURE__ */ jsxs11(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(Text, { display: "heading4", children: t2("Discount") }) }),
+      /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(Text, { display: "heading4", children: t2("Discount") }) }),
       /* @__PURE__ */ jsxs11(
         Flex,
         {
@@ -13443,7 +13526,7 @@ var Checkout = ({
           $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
           $borderRadius: "9999px",
           children: [
-            /* @__PURE__ */ jsx15(Box, { $flexGrow: 1, children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx16(Box, { $flexGrow: 1, children: /* @__PURE__ */ jsx16(
               Input,
               {
                 $size: "full",
@@ -13465,7 +13548,7 @@ var Checkout = ({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsx15(Box, { $flexShrink: 0, $padding: "0.5rem 1rem", children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx16(Box, { $flexShrink: 0, $padding: "0.5rem 1rem", children: /* @__PURE__ */ jsx16(
               Text,
               {
                 onClick: () => updatePromoCode(discount),
@@ -13482,11 +13565,11 @@ var Checkout = ({
 };
 
 // src/components/shared/checkout-dialog/Credits.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var Credits = ({ bundles, updateCount }) => {
   const { settings } = useEmbed();
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Box,
     {
       $display: "grid",
@@ -13510,16 +13593,16 @@ var Credits = ({ bundles, updateCount }) => {
             children: [
               /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
                 /* @__PURE__ */ jsxs12(Box, { children: [
-                  /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(Text, { display: "heading3", children: bundle.name }) }),
-                  /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsxs12(Text, { display: "heading6", children: [
+                  /* @__PURE__ */ jsx17(Box, { children: /* @__PURE__ */ jsx17(Text, { display: "heading3", children: bundle.name }) }),
+                  /* @__PURE__ */ jsx17(Box, { children: /* @__PURE__ */ jsxs12(Text, { display: "heading6", children: [
                     bundle.quantity ?? 0,
                     " ",
                     getFeatureName(bundle)
                   ] }) })
                 ] }),
-                typeof price === "number" && /* @__PURE__ */ jsx16(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx16(Text, { children: formatCurrency(price, bundle.price?.currency) }) })
+                typeof price === "number" && /* @__PURE__ */ jsx17(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx17(Text, { children: formatCurrency(price, bundle.price?.currency) }) })
               ] }),
-              /* @__PURE__ */ jsx16(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx17(
                 Input,
                 {
                   $size: "lg",
@@ -13549,7 +13632,7 @@ var Credits = ({ bundles, updateCount }) => {
 };
 
 // src/components/shared/checkout-dialog/Navigation.tsx
-import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var Navigation = ({
   name,
   index,
@@ -13561,7 +13644,7 @@ var Navigation = ({
   const isLightBackground = useIsLightBackground();
   return /* @__PURE__ */ jsxs13(Fragment7, { children: [
     /* @__PURE__ */ jsxs13(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         Box,
         {
           $display: "none",
@@ -13570,7 +13653,7 @@ var Navigation = ({
               $display: "block"
             }
           },
-          children: index >= activeIndex ? /* @__PURE__ */ jsx17(
+          children: index >= activeIndex ? /* @__PURE__ */ jsx18(
             Box,
             {
               $width: `${20 / TEXT_BASE_SIZE}rem`,
@@ -13580,7 +13663,7 @@ var Navigation = ({
               $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
               $borderRadius: "9999px"
             }
-          ) : /* @__PURE__ */ jsx17(
+          ) : /* @__PURE__ */ jsx18(
             Icon3,
             {
               name: "check",
@@ -13619,7 +13702,7 @@ var Navigation = ({
         }
       )
     ] }),
-    !isLast && /* @__PURE__ */ jsx17(
+    !isLast && /* @__PURE__ */ jsx18(
       Icon3,
       {
         name: "chevron-right",
@@ -13634,7 +13717,7 @@ var Navigation = ({
 
 // src/components/shared/checkout-dialog/Plan.tsx
 import { useEffect as useEffect4, useMemo as useMemo8, useState as useState8 } from "react";
-import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
@@ -13652,8 +13735,8 @@ var Selected = ({ isCurrent = false, isTrial = false }) => {
       $gap: "0.25rem",
       $padding: "0.625rem 0",
       children: [
-        /* @__PURE__ */ jsx18(Icon3, { name: "check-rounded", color: settings.theme.primary }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(Icon3, { name: "check-rounded", color: settings.theme.primary }),
+        /* @__PURE__ */ jsx19(
           Text,
           {
             $size: 0.9375 * settings.theme.typography.text.fontSize,
@@ -13690,7 +13773,7 @@ var PlanButtonGroup = ({
   }, [data, plan]);
   if (isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable) {
     return /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      !isTrialing && /* @__PURE__ */ jsx18(Fragment8, { children: isSelected && shouldTrial ? /* @__PURE__ */ jsx18(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ jsx18(
+      !isTrialing && /* @__PURE__ */ jsx19(Fragment8, { children: isSelected && shouldTrial ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ jsx19(
         Button,
         {
           type: "button",
@@ -13712,16 +13795,16 @@ var PlanButtonGroup = ({
           $color: "primary",
           $variant: "filled",
           $fullWidth: true,
-          children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx18(
+          children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx19(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ jsx18(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ jsx18(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+              trigger: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ jsx19(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Start X day trial", { days: plan.trialDays })
         }
       ) }),
-      !plan.custom && /* @__PURE__ */ jsx18(Fragment8, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ jsx18(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx18(
+      !plan.custom && /* @__PURE__ */ jsx19(Fragment8, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx19(
         Button,
         {
           type: "button",
@@ -13733,18 +13816,18 @@ var PlanButtonGroup = ({
           $color: "primary",
           $variant: isTrialing ? "filled" : "text",
           $fullWidth: true,
-          children: !isValidPlan ? /* @__PURE__ */ jsx18(
+          children: !isValidPlan ? /* @__PURE__ */ jsx19(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ jsx18(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ jsx18(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+              trigger: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ jsx19(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Choose plan")
         }
       ) })
     ] });
   }
-  return isSelected ? /* @__PURE__ */ jsx18(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx18(
+  return isSelected ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx19(
     Button,
     {
       type: "button",
@@ -13763,11 +13846,11 @@ var PlanButtonGroup = ({
       $color: "primary",
       $variant: "filled",
       $fullWidth: true,
-      children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx18(
+      children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx19(
         Tooltip,
         {
-          trigger: /* @__PURE__ */ jsx18(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-          content: /* @__PURE__ */ jsx18(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+          trigger: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+          content: /* @__PURE__ */ jsx19(Text, { children: t2("Current usage exceeds the limit of this plan.") })
         }
       ) : t2("Choose plan")
     }
@@ -13811,7 +13894,7 @@ var Plan = ({
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     Box,
     {
       $display: "grid",
@@ -13826,7 +13909,7 @@ var Plan = ({
           (entitlement) => !!entitlement.priceBehavior
         );
         const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
-        const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? settings.theme.typography.heading3 : settings.theme.typography.heading2;
+        const headerPriceFontStyle = settings.theme.typography.heading2;
         const count = entitlementCounts[plan.id];
         const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
         return /* @__PURE__ */ jsxs14(
@@ -13860,10 +13943,10 @@ var Plan = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsx18(Box, { children: /* @__PURE__ */ jsx18(Text, { display: "heading2", children: plan.name }) }),
-                    /* @__PURE__ */ jsx18(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ jsx18(Text, { children: plan.description }) }),
+                    /* @__PURE__ */ jsx19(Box, { children: /* @__PURE__ */ jsx19(Text, { display: "heading2", children: plan.name }) }),
+                    /* @__PURE__ */ jsx19(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ jsx19(Text, { children: plan.description }) }),
                     /* @__PURE__ */ jsxs14(Box, { children: [
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx19(
                         Text,
                         {
                           $font: headerPriceFontStyle.fontFamily,
@@ -13885,7 +13968,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    credits.length > 0 && /* @__PURE__ */ jsx18(
+                    credits.length > 0 && /* @__PURE__ */ jsx19(
                       Flex,
                       {
                         $flexDirection: "column",
@@ -13893,7 +13976,7 @@ var Plan = ({
                         $flexGrow: 1,
                         $marginTop: "0.5rem",
                         children: credits.map((credit, creditIndex) => {
-                          return /* @__PURE__ */ jsx18(
+                          return /* @__PURE__ */ jsx19(
                             Flex,
                             {
                               $flexWrap: "wrap",
@@ -13901,7 +13984,7 @@ var Plan = ({
                               $alignItems: "center",
                               $gap: "1rem",
                               children: /* @__PURE__ */ jsxs14(Flex, { $gap: "1rem", children: [
-                                credit.icon && /* @__PURE__ */ jsx18(
+                                credit.icon && /* @__PURE__ */ jsx19(
                                   Icon3,
                                   {
                                     name: credit.icon,
@@ -13910,7 +13993,7 @@ var Plan = ({
                                     rounded: true
                                   }
                                 ),
-                                /* @__PURE__ */ jsx18(
+                                /* @__PURE__ */ jsx19(
                                   Flex,
                                   {
                                     $flexDirection: "column",
@@ -13936,7 +14019,7 @@ var Plan = ({
                         })
                       }
                     ),
-                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ jsx18(
+                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ jsx19(
                       Flex,
                       {
                         $position: "absolute",
@@ -13945,7 +14028,7 @@ var Plan = ({
                         $backgroundColor: settings.theme.primary,
                         $borderRadius: "9999px",
                         $padding: "0.125rem 0.85rem",
-                        children: /* @__PURE__ */ jsx18(
+                        children: /* @__PURE__ */ jsx19(
                           Text,
                           {
                             $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -13978,7 +14061,7 @@ var Plan = ({
                           packageSize: entitlementPackageSize = 1
                         } = getEntitlementPrice(entitlement, planPeriod) || {};
                         const metricPeriodName = getMetricPeriodName(entitlement);
-                        return /* @__PURE__ */ jsx18(
+                        return /* @__PURE__ */ jsx19(
                           Flex,
                           {
                             $flexWrap: "wrap",
@@ -13986,7 +14069,7 @@ var Plan = ({
                             $alignItems: "center",
                             $gap: "1rem",
                             children: /* @__PURE__ */ jsxs14(Flex, { $gap: "1rem", children: [
-                              entitlement.feature?.icon && /* @__PURE__ */ jsx18(
+                              entitlement.feature?.icon && /* @__PURE__ */ jsx19(
                                 Icon3,
                                 {
                                   name: entitlement.feature.icon,
@@ -14002,7 +14085,7 @@ var Plan = ({
                                   $justifyContent: "center",
                                   $gap: "0.5rem",
                                   children: [
-                                    /* @__PURE__ */ jsx18(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                    /* @__PURE__ */ jsx19(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
                                       formatCurrency(
                                         entitlementPrice,
                                         entitlementCurrency
@@ -14024,7 +14107,7 @@ var Plan = ({
                                         " ",
                                         planPeriod
                                       ] })
-                                    ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx18(
+                                    ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx19(
                                       TieredPricingDetails,
                                       {
                                         entitlement,
@@ -14061,51 +14144,59 @@ var Plan = ({
                                         t2(metricPeriodName)
                                       ] })
                                     ] }) : entitlement.feature.name }),
-                                    entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs14(
-                                      Text,
-                                      {
-                                        style: { opacity: 0.54 },
-                                        $size: 0.875 * settings.theme.typography.text.fontSize,
-                                        $color: settings.theme.typography.text.color,
-                                        children: [
-                                          t2("then"),
-                                          " ",
-                                          formatCurrency(
-                                            entitlementPrice,
-                                            entitlementCurrency
-                                          ),
-                                          "/",
-                                          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment8, { children: [
-                                            entitlementPackageSize,
-                                            " "
-                                          ] }),
-                                          getFeatureName(
-                                            entitlement.feature,
-                                            entitlementPackageSize
-                                          ),
-                                          entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
-                                            "/",
-                                            shortenPeriod(planPeriod)
-                                          ] })
-                                        ]
-                                      }
-                                    ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs14(Flex, { $alignItems: "center", children: [
-                                      /* @__PURE__ */ jsx18(
-                                        PricingTiersTooltip,
-                                        {
-                                          feature: entitlement.feature,
-                                          period: planPeriod,
-                                          currency: entitlementCurrency,
-                                          priceTiers: entitlementPriceTiers
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx18(
+                                    /* @__PURE__ */ jsxs14(Flex, { $alignItems: "end", children: [
+                                      entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs14(
                                         Text,
                                         {
                                           style: { opacity: 0.54 },
                                           $size: 0.875 * settings.theme.typography.text.fontSize,
                                           $color: settings.theme.typography.text.color,
-                                          children: t2("Tier-based")
+                                          children: [
+                                            t2("then"),
+                                            " ",
+                                            formatCurrency(
+                                              entitlementPrice,
+                                              entitlementCurrency
+                                            ),
+                                            "/",
+                                            entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                              entitlementPackageSize,
+                                              " "
+                                            ] }),
+                                            getFeatureName(
+                                              entitlement.feature,
+                                              entitlementPackageSize
+                                            ),
+                                            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                              "/",
+                                              shortenPeriod(planPeriod)
+                                            ] })
+                                          ]
+                                        }
+                                      ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs14(Flex, { $alignItems: "end", children: [
+                                        /* @__PURE__ */ jsx19(
+                                          Text,
+                                          {
+                                            style: { opacity: 0.54 },
+                                            $size: 0.875 * settings.theme.typography.text.fontSize,
+                                            $color: settings.theme.typography.text.color,
+                                            children: t2("Tier-based")
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx19(
+                                          PricingTiersTooltip,
+                                          {
+                                            feature: entitlement.feature,
+                                            period: planPeriod,
+                                            currency: entitlementCurrency,
+                                            priceTiers: entitlementPriceTiers
+                                          }
+                                        )
+                                      ] }),
+                                      entitlement.billingThreshold && /* @__PURE__ */ jsx19(
+                                        BillingThresholdTooltip,
+                                        {
+                                          billingThreshold: entitlement.billingThreshold
                                         }
                                       )
                                     ] })
@@ -14125,14 +14216,14 @@ var Plan = ({
                           $gap: "0.5rem",
                           $marginTop: "1rem",
                           children: [
-                            /* @__PURE__ */ jsx18(
+                            /* @__PURE__ */ jsx19(
                               Icon3,
                               {
                                 name: isExpanded ? "chevron-up" : "chevron-down",
                                 color: "#D0D0D0"
                               }
                             ),
-                            /* @__PURE__ */ jsx18(
+                            /* @__PURE__ */ jsx19(
                               Text,
                               {
                                 onClick: () => handleToggleShowAll(plan.id),
@@ -14152,7 +14243,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       PlanButtonGroup,
                       {
                         plan,
@@ -14175,13 +14266,13 @@ var Plan = ({
 };
 
 // src/components/shared/checkout-dialog/Usage.tsx
-import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var Usage = ({ entitlements, updateQuantity, period }) => {
   const { settings } = useEmbed();
   const { t: t2 } = useTranslation();
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   const unitPriceFontSize = 0.875 * settings.theme.typography.text.fontSize;
-  return /* @__PURE__ */ jsx19(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce((acc, entitlement, index) => {
+  return /* @__PURE__ */ jsx20(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce((acc, entitlement, index) => {
     if (entitlement.feature) {
       const {
         price,
@@ -14209,8 +14300,8 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                   $gap: "0.75rem",
                   $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
                   children: [
-                    /* @__PURE__ */ jsx19(Box, { children: /* @__PURE__ */ jsx19(Text, { display: "heading2", children: entitlement.feature.name }) }),
-                    entitlement.feature.description && /* @__PURE__ */ jsx19(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx19(Text, { children: entitlement.feature.description }) })
+                    /* @__PURE__ */ jsx20(Box, { children: /* @__PURE__ */ jsx20(Text, { display: "heading2", children: entitlement.feature.name }) }),
+                    entitlement.feature.description && /* @__PURE__ */ jsx20(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx20(Text, { children: entitlement.feature.description }) })
                   ]
                 }
               ),
@@ -14221,7 +14312,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                   $gap: "0.5rem",
                   $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
                   children: [
-                    /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsx20(
                       Input,
                       {
                         $size: "lg",
@@ -14241,7 +14332,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsx20(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -14253,7 +14344,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         })
                       }
                     ),
-                    entitlement.quantity < entitlement.usage && /* @__PURE__ */ jsx19(Text, { $size: unitPriceFontSize, $color: "#DB6669", children: t2("Cannot downgrade entitlement") })
+                    entitlement.quantity < entitlement.usage && /* @__PURE__ */ jsx20(Text, { $size: unitPriceFontSize, $color: "#DB6669", children: t2("Cannot downgrade entitlement") })
                   ]
                 }
               ),
@@ -14263,7 +14354,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                   $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
                   $textAlign: "right",
                   children: [
-                    /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs15(Text, { children: [
+                    /* @__PURE__ */ jsx20(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs15(Text, { children: [
                       formatCurrency(
                         (price ?? 0) * entitlement.quantity,
                         currency
@@ -14273,7 +14364,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         shortenPeriod(period)
                       ] })
                     ] }) }),
-                    /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs15(
+                    /* @__PURE__ */ jsx20(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs15(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -14308,7 +14399,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 };
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
   if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
     const featureUsage = entitlements.find(
@@ -14663,19 +14754,22 @@ var CheckoutDialog = ({ top = 0 }) => {
       const entitlements = plan.entitlements.reduce(
         (acc, entitlement) => {
           if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
+            const allocation = entitlement.valueNumeric || 0;
             acc.push({
               ...entitlement,
-              allocation: entitlement.valueNumeric || 0,
+              allocation,
               usage: 0,
-              quantity: 0
+              quantity: allocation
             });
           }
           return acc;
         },
         []
       );
-      setSelectedPlan(plan);
-      setUsageBasedEntitlements(entitlements);
+      if (plan.id !== selectedPlan?.id) {
+        setSelectedPlan(plan);
+        setUsageBasedEntitlements(entitlements);
+      }
       const updatedShouldTrial = updates.shouldTrial ?? shouldTrial;
       setShouldTrial(updatedShouldTrial);
       if (willTrialWithoutPaymentMethod) {
@@ -14701,6 +14795,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     },
     [
+      selectedPlan?.id,
       planPeriod,
       shouldTrial,
       willTrialWithoutPaymentMethod,
@@ -14847,7 +14942,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     (stage) => stage.id === checkoutStage
   );
   return /* @__PURE__ */ jsxs16(Modal2, { size: "lg", top, contentRef, children: [
-    /* @__PURE__ */ jsx20(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx21(
       Flex,
       {
         $flexWrap: "wrap",
@@ -14857,7 +14952,7 @@ var CheckoutDialog = ({ top = 0 }) => {
             $gap: "1rem"
           }
         },
-        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ jsx20(
+        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ jsx21(
           Navigation,
           {
             name: stage.name,
@@ -14916,7 +15011,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     },
                     children: [
                       activeCheckoutStage && /* @__PURE__ */ jsxs16(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
-                        activeCheckoutStage.label && /* @__PURE__ */ jsx20(
+                        activeCheckoutStage.label && /* @__PURE__ */ jsx21(
                           Text,
                           {
                             as: "h3",
@@ -14925,9 +15020,9 @@ var CheckoutDialog = ({ top = 0 }) => {
                             children: activeCheckoutStage.label
                           }
                         ),
-                        activeCheckoutStage.description && /* @__PURE__ */ jsx20(Text, { as: "p", children: activeCheckoutStage.description })
+                        activeCheckoutStage.description && /* @__PURE__ */ jsx21(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
-                      checkoutStage === "plan" && showPeriodToggle && availablePeriods.length > 1 && /* @__PURE__ */ jsx20(
+                      checkoutStage === "plan" && showPeriodToggle && availablePeriods.length > 1 && /* @__PURE__ */ jsx21(
                         PeriodToggle,
                         {
                           options: availablePeriods,
@@ -14939,7 +15034,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     ]
                   }
                 ),
-                isPending ? /* @__PURE__ */ jsx20(
+                isPending ? /* @__PURE__ */ jsx21(
                   Flex,
                   {
                     $width: "100%",
@@ -14947,9 +15042,9 @@ var CheckoutDialog = ({ top = 0 }) => {
                     $alignItems: "center",
                     $justifyContent: "center",
                     $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-                    children: /* @__PURE__ */ jsx20(Loader, { $size: "2xl" })
+                    children: /* @__PURE__ */ jsx21(Loader, { $size: "2xl" })
                   }
-                ) : checkoutStage === "plan" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "plan" ? /* @__PURE__ */ jsx21(
                   Plan,
                   {
                     isLoading,
@@ -14960,7 +15055,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     shouldTrial,
                     showPeriodToggle
                   }
-                ) : checkoutStage === "usage" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "usage" ? /* @__PURE__ */ jsx21(
                   Usage,
                   {
                     isLoading,
@@ -14969,7 +15064,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: payInAdvanceEntitlements,
                     updateQuantity: updateUsageBasedEntitlementQuantity
                   }
-                ) : checkoutStage === "addons" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addons" ? /* @__PURE__ */ jsx21(
                   AddOns,
                   {
                     isLoading,
@@ -14977,7 +15072,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     addOns,
                     toggle: (id) => toggleAddOn(id)
                   }
-                ) : checkoutStage === "addonsUsage" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addonsUsage" ? /* @__PURE__ */ jsx21(
                   Usage,
                   {
                     isLoading,
@@ -14986,14 +15081,14 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: addOnPayInAdvanceEntitlements,
                     updateQuantity: updateAddOnEntitlementQuantity
                   }
-                ) : checkoutStage === "credits" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "credits" ? /* @__PURE__ */ jsx21(
                   Credits,
                   {
                     isLoading,
                     bundles: creditBundles,
                     updateCount: updateCreditBundleCount
                   }
-                ) : checkoutStage === "checkout" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "checkout" && /* @__PURE__ */ jsx21(
                   Checkout,
                   {
                     isPaymentMethodRequired,
@@ -15004,7 +15099,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Sidebar,
             {
               planPeriod,
@@ -15038,32 +15133,93 @@ var CheckoutDialog = ({ top = 0 }) => {
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
 import { useRef as useRef7 } from "react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const contentRef = useRef7(null);
   return /* @__PURE__ */ jsxs17(Modal2, { size: "md", top, contentRef, children: [
-    /* @__PURE__ */ jsx21(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx21(Text, { $size: 18, children: t2("Edit payment method") }) }),
-    /* @__PURE__ */ jsx21(PaymentMethodDetails, {})
+    /* @__PURE__ */ jsx22(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx22(Text, { $size: 18, children: t2("Edit payment method") }) }),
+    /* @__PURE__ */ jsx22(PaymentMethodDetails, {})
   ] });
 };
 
 // src/components/shared/payment-form/PaymentForm.tsx
 import {
+  AddressElement,
   PaymentElement,
   useElements,
   useStripe
 } from "@stripe/react-stripe-js";
 import { useState as useState10 } from "react";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// src/components/shared/payment-form/styles.ts
+var Label = dt.label`
+  display: flex;
+  margin-bottom: 0.75rem;
+  font-family: "Public Sans", system-ui, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  transition:
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
+    opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  color: #cdd6f4;
+  touch-action: manipulation;
+`;
+var Input2 = dt.input`
+  padding: 0.75rem;
+  background-color: white;
+  border-radius: 0.5rem;
+  transition:
+    background 0.15s ease,
+    border 0.15s ease,
+    box-shadow 0.15s ease,
+    color 0.15s ease;
+  border: 1px solid #e6e6e6;
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.03),
+    0 3px 6px rgba(0, 0, 0, 0.02);
+
+  appearance: none;
+  color: inherit;
+  filter: none;
+  font-family: "Public Sans", system-ui, sans-serif;
+  font-size: 1rem;
+  letter-spacing: inherit;
+  outline-offset: 0;
+  outline-width: 2px;
+
+  animation: native-autofill-out 1ms;
+  color-scheme: light;
+  display: block;
+  width: 100%;
+  touch-action: manipulation;
+
+  &:focus {
+    outline: 0;
+    border-color: #0570de;
+    boxshadow:
+      0 1px 1px rgba(0, 0, 0, 0.03),
+      0 3px 6px rgba(0, 0, 0, 0.02),
+      0 0 0 3px hsla(210, 96%, 45%, 25%),
+      0 1px 1px 0 rgba(0, 0, 0, 0.08);
+  }
+`;
+
+// src/components/shared/payment-form/PaymentForm.tsx
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
   const stripe = useStripe();
   const elements = useElements();
+  const { data } = useEmbed();
+  const [email, setEmail] = useState10("");
   const [message, setMessage] = useState10();
   const [isLoading, setIsLoading] = useState10(false);
   const [isConfirmed, setIsConfirmed] = useState10(false);
-  const [isComplete, setIsComplete] = useState10(false);
+  const [isPaymentComplete, setIsPaymentComplete] = useState10(false);
+  const [isAddressComplete, setIsAddressComplete] = useState10(
+    () => !isCheckoutData(data) || !data.checkoutSettings.collectAddress
+  );
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -15076,6 +15232,11 @@ var PaymentForm = ({ onConfirm }) => {
       const { setupIntent, error } = await stripe.confirmSetup({
         elements,
         confirmParams: {
+          payment_method_data: {
+            billing_details: {
+              email
+            }
+          },
           return_url: window.location.href
         },
         redirect: "if_required"
@@ -15095,31 +15256,58 @@ var PaymentForm = ({ onConfirm }) => {
     }
   };
   return /* @__PURE__ */ jsxs18(
-    "form",
+    Flex,
     {
+      as: "form",
       id: "payment-form",
       onSubmit: handleSubmit,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        overflowX: "hidden",
-        overflowY: "auto"
-      },
+      $flexDirection: "column",
+      $overflowX: "hidden",
+      $overflowY: "auto",
       children: [
-        /* @__PURE__ */ jsx22(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx23(
           PaymentElement,
           {
             id: "payment-element",
             onChange: (event) => {
-              setIsComplete(event.complete);
+              setIsPaymentComplete(event.complete);
+            }
+          }
+        ) }),
+        stripe && isCheckoutData(data) && data.checkoutSettings.collectEmail && /* @__PURE__ */ jsxs18(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
+          /* @__PURE__ */ jsx23(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx23(
+            Input2,
+            {
+              id: "email",
+              type: "text",
+              value: email,
+              autoComplete: "email",
+              placeholder: "Enter email address",
+              onChange: (e2) => setEmail(e2.target.value)
+            }
+          )
+        ] }),
+        isCheckoutData(data) && (data.checkoutSettings.collectAddress || data.checkoutSettings.collectPhone) && /* @__PURE__ */ jsx23(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx23(
+          AddressElement,
+          {
+            options: {
+              mode: "billing",
+              fields: {
+                phone: data.checkoutSettings.collectPhone ? "always" : "never"
+              }
+            },
+            id: "address-element",
+            onChange: (event) => {
+              setIsAddressComplete(event.complete);
             }
           }
         ) }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed || !isComplete,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isPaymentComplete || !isAddressComplete,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -15127,7 +15315,7 @@ var PaymentForm = ({ onConfirm }) => {
             children: isLoading ? t2("Loading") : t2("Save payment method")
           }
         ),
-        message && /* @__PURE__ */ jsx22(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx22(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
+        message && /* @__PURE__ */ jsx23(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx23(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
       ]
     }
   );
@@ -15135,7 +15323,7 @@ var PaymentForm = ({ onConfirm }) => {
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
 import { useMemo as useMemo10 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var PeriodToggle = ({
   options,
   selectedOption,
@@ -15155,7 +15343,7 @@ var PeriodToggle = ({
     }
     return 0;
   }, [selectedPlan]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Flex,
     {
       $margin: 0,
@@ -15171,7 +15359,7 @@ var PeriodToggle = ({
         }
       },
       children: options.map((option) => {
-        const element = /* @__PURE__ */ jsx23(
+        const element = /* @__PURE__ */ jsx24(
           Flex,
           {
             tabIndex: 0,
@@ -15191,7 +15379,7 @@ var PeriodToggle = ({
               $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
             },
             $borderRadius: "2.5rem",
-            children: /* @__PURE__ */ jsx23(
+            children: /* @__PURE__ */ jsx24(
               Text,
               {
                 style: { flexShrink: 0 },
@@ -15204,11 +15392,11 @@ var PeriodToggle = ({
           option
         );
         if (option === "year" && savingsPercentage > 0) {
-          return /* @__PURE__ */ jsx23(
+          return /* @__PURE__ */ jsx24(
             Tooltip,
             {
               trigger: element,
-              content: /* @__PURE__ */ jsx23(Text, { $size: 11, $leading: 1, children: selectedOption === "month" ? t2("Save with yearly billing", {
+              content: /* @__PURE__ */ jsx24(Text, { $size: 11, $leading: 1, children: selectedOption === "month" ? t2("Save with yearly billing", {
                 percent: savingsPercentage
               }) : t2("Saving with yearly billing", {
                 percent: savingsPercentage
@@ -15229,7 +15417,7 @@ import { useMemo as useMemo12 } from "react";
 
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
 import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var PriceText = ({
   feature,
   period,
@@ -15237,6 +15425,7 @@ var PriceText = ({
   flatAmount = 0,
   perUnitPrice = 0
 }) => {
+  const { settings } = useEmbed();
   const text = useMemo11(() => {
     if (!flatAmount && perUnitPrice) {
       return /* @__PURE__ */ jsxs19(Fragment10, { children: [
@@ -15270,11 +15459,11 @@ var PriceText = ({
       ] })
     ] });
   }, [feature, period, currency, flatAmount, perUnitPrice]);
-  return /* @__PURE__ */ jsx24(Text, { $leading: 1, children: text });
+  return /* @__PURE__ */ jsx25(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, $leading: 1, children: text });
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-import { Fragment as Fragment11, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var PricingTiersTooltip = ({
   feature,
   period,
@@ -15302,20 +15491,19 @@ var PricingTiersTooltip = ({
   if (!priceTiers.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     Tooltip,
     {
-      trigger: /* @__PURE__ */ jsx25(
+      trigger: /* @__PURE__ */ jsx26(
         Icon3,
         {
           title: "tiered pricing",
           name: "info-rounded",
-          color: `hsla(0, 0%, ${isLightBackground ? 0 : 100}%, 0.5)`,
-          style: { marginLeft: `-${1 / 3}rem` }
+          color: `hsla(0, 0%, ${isLightBackground ? 0 : 100}%, 0.5)`
         }
       ),
       content: /* @__PURE__ */ jsxs20(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ jsx25("dl", { children: tiers.map((tier, index) => {
+        /* @__PURE__ */ jsx26("dl", { children: tiers.map((tier, index) => {
           const flatAmount = typeof tier.flatAmount === "number" ? tier.flatAmount : void 0;
           const perUnitPrice = typeof tier.perUnitPriceDecimal === "string" ? Number(tier.perUnitPriceDecimal) : typeof tier.perUnitPrice === "number" ? tier.perUnitPrice : void 0;
           return /* @__PURE__ */ jsxs20(
@@ -15326,11 +15514,17 @@ var PricingTiersTooltip = ({
               $gap: "1rem",
               $padding: "0.5rem",
               children: [
-                /* @__PURE__ */ jsx25("dt", { children: /* @__PURE__ */ jsxs20(Text, { children: [
-                  tier.from,
-                  tier.from !== tier.to && /* @__PURE__ */ jsx25(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
-                ] }) }),
-                /* @__PURE__ */ jsx25("dd", { children: /* @__PURE__ */ jsx25(
+                /* @__PURE__ */ jsx26("dt", { children: /* @__PURE__ */ jsxs20(
+                  Text,
+                  {
+                    $size: 0.875 * settings.theme.typography.text.fontSize,
+                    children: [
+                      tier.from,
+                      tier.from !== tier.to && /* @__PURE__ */ jsx26(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx26("dd", { children: /* @__PURE__ */ jsx26(
                   PriceText,
                   {
                     period,
@@ -15346,7 +15540,7 @@ var PricingTiersTooltip = ({
           );
         }) }),
         (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ jsxs20(Fragment11, { children: [
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             "hr",
             {
               style: {
@@ -15356,15 +15550,13 @@ var PricingTiersTooltip = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx25(Box, { children: /* @__PURE__ */ jsxs20(Text, { children: [
+          /* @__PURE__ */ jsx26(Box, { children: /* @__PURE__ */ jsxs20(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, children: [
             "\u2139\uFE0F",
             " ",
             tiersMode === "volume" /* Volume */ ? t2("Price by unit based on final tier reached.") : t2("Tiers apply progressively as quantity increases.")
           ] }) })
         ] })
-      ] }),
-      $flexGrow: "0 !important",
-      $width: "auto !important"
+      ] })
     }
   );
 };
@@ -15425,7 +15617,7 @@ var TieredPricingDetails = ({
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
 import { useMemo as useMemo14, useRef as useRef8, useState as useState11 } from "react";
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
@@ -15470,7 +15662,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     [currentAddOns, availableAddOns]
   );
   return /* @__PURE__ */ jsxs21(Modal2, { size: "auto", top, contentRef, children: [
-    /* @__PURE__ */ jsx26(ModalHeader, {}),
+    /* @__PURE__ */ jsx27(ModalHeader, {}),
     /* @__PURE__ */ jsxs21(
       Flex,
       {
@@ -15493,7 +15685,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               $padding: "0 2.5rem 2.5rem",
               children: [
                 /* @__PURE__ */ jsxs21(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ jsx26(Text, { as: "h2", display: "heading2", children: t2("Cancel subscription") }),
+                  /* @__PURE__ */ jsx27(Text, { as: "h2", display: "heading2", children: t2("Cancel subscription") }),
                   /* @__PURE__ */ jsxs21(Text, { as: "p", children: [
                     t2(
                       "You will retain access to your plan until the end of the billing period, on"
@@ -15505,8 +15697,8 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs21(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ jsx26(Text, { as: "p", children: t2("Not ready to cancel?") }),
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(Text, { as: "p", children: t2("Not ready to cancel?") }),
+                  /* @__PURE__ */ jsx27(
                     Button,
                     {
                       type: "button",
@@ -15527,7 +15719,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Sidebar,
             {
               planPeriod,
@@ -15548,7 +15740,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
 };
 
 // src/components/ui/badge/Badge.tsx
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
@@ -15570,77 +15762,77 @@ var Badge = () => {
           " "
         ] }),
         /* @__PURE__ */ jsxs22("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "path",
             {
               d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
@@ -15654,9 +15846,9 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var Disabled = () => {
-  return /* @__PURE__ */ jsx28(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx28(Card, { children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx29(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx29(Card, { children: /* @__PURE__ */ jsxs23(
     Element,
     {
       as: Flex,
@@ -15665,8 +15857,8 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx28(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx28(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
-        /* @__PURE__ */ jsx28(Text, { as: "p", children: "Please try again later." })
+        /* @__PURE__ */ jsx29(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx29(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
+        /* @__PURE__ */ jsx29(Text, { as: "p", children: "Please try again later." })
       ]
     }
   ) }) });
@@ -15675,7 +15867,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx28(Disabled, {});
+      return /* @__PURE__ */ jsx29(Disabled, {});
     default:
       return children;
   }
@@ -15700,7 +15892,7 @@ var StyledViewport = dt.div.withConfig({
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var Viewport = forwardRef5(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
@@ -15728,22 +15920,22 @@ var Viewport = forwardRef5(
     }, [portal, layout]);
     return /* @__PURE__ */ jsxs24(Fragment12, { children: [
       /* @__PURE__ */ jsxs24(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ jsx29(RenderLayout, { children }),
-        isBadgeVisible && /* @__PURE__ */ jsx29(Badge, {})
+        /* @__PURE__ */ jsx30(RenderLayout, { children }),
+        isBadgeVisible && /* @__PURE__ */ jsx30(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx29(CheckoutDialog, { top }), portal || document.body),
+      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx30(CheckoutDialog, { top }), portal || document.body),
       layout === "unsubscribe" && createPortal2(
-        /* @__PURE__ */ jsx29(UnsubscribeDialog, { top }),
+        /* @__PURE__ */ jsx30(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && createPortal2(/* @__PURE__ */ jsx29(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && createPortal2(/* @__PURE__ */ jsx30(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/elements/button/Button.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -15774,7 +15966,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Element,
     {
       as: Flex,
@@ -15782,7 +15974,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         Button,
         {
           as: "a",
@@ -15807,7 +15999,7 @@ import { forwardRef as forwardRef7, useMemo as useMemo17, useRef as useRef9, use
 
 // src/components/elements/included-features/UsageDetails.tsx
 import { Fragment as Fragment13, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment14, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var UsageDetails = ({
   entitlement,
   shouldWrapChildren,
@@ -15865,7 +16057,7 @@ var UsageDetails = ({
       ] });
     }
     if (priceBehavior === "tier" /* Tiered */) {
-      return /* @__PURE__ */ jsx31(Fragment14, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
+      return /* @__PURE__ */ jsx32(Fragment14, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
         feature: getFeatureName(feature)
       }) : t2("Up to X units in this tier", {
         amount: formatNumber(currentTier.to),
@@ -15944,7 +16136,7 @@ var UsageDetails = ({
     if (typeof cost === "number" && cost > 0) {
       acc.push(
         /* @__PURE__ */ jsxs25(Fragment13, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx31(Fragment14, { children: " \u2022 " }),
+          acc.length > 0 && /* @__PURE__ */ jsx32(Fragment14, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
@@ -15960,7 +16152,7 @@ var UsageDetails = ({
     if (metricResetAt) {
       acc.push(
         /* @__PURE__ */ jsxs25(Fragment13, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx31(Fragment14, { children: " \u2022 " }),
+          acc.length > 0 && /* @__PURE__ */ jsx32(Fragment14, { children: " \u2022 " }),
           t2("Resets", {
             date: toPrettyDate(metricResetAt, {
               month: "numeric",
@@ -16004,9 +16196,10 @@ var UsageDetails = ({
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        layout.entitlement.isVisible && /* @__PURE__ */ jsx31(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx31(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
-        layout.usage.isVisible && usageText && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "end", $alignItems: "center", $whiteSpace: "nowrap", children: [
-          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx31(
+        layout.entitlement.isVisible && /* @__PURE__ */ jsx32(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx32(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
+        layout.usage.isVisible && usageText && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "end", $alignItems: "end", $whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ jsx32(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText }),
+          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx32(
             PricingTiersTooltip,
             {
               feature,
@@ -16014,8 +16207,7 @@ var UsageDetails = ({
               currency: billingPrice?.currency,
               priceTiers: billingPrice?.priceTier
             }
-          ),
-          /* @__PURE__ */ jsx31(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText })
+          )
         ] })
       ]
     }
@@ -16023,7 +16215,7 @@ var UsageDetails = ({
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -16107,7 +16299,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx32(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx32(Text, { display: props.header.fontStyle, children: props.header.text }) }),
+        props.header.isVisible && /* @__PURE__ */ jsx33(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx33(Text, { display: props.header.fontStyle, children: props.header.text }) }),
         featureUsage.slice(0, showCount).map((entitlement, index) => {
           const shouldShowDetails = entitlement.feature?.name && (entitlement.feature?.featureType === "event" /* Event */ || entitlement.feature?.featureType === "trait" /* Trait */);
           return /* @__PURE__ */ jsxs26(
@@ -16131,7 +16323,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx32(
+                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx33(
                         Icon3,
                         {
                           name: entitlement.feature.icon,
@@ -16140,7 +16332,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           rounded: true
                         }
                       ),
-                      entitlement.feature?.name && /* @__PURE__ */ jsx32(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
+                      entitlement.feature?.name && /* @__PURE__ */ jsx33(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
                       props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsxs26(
                         Text,
                         {
@@ -16158,7 +16350,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx32(
+                shouldShowDetails && /* @__PURE__ */ jsx33(
                   UsageDetails,
                   {
                     entitlement,
@@ -16172,14 +16364,14 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
           );
         }),
         shouldShowExpand && /* @__PURE__ */ jsxs26(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Icon3,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -16197,7 +16389,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef8, useCallback as useCallback10, useEffect as useEffect6, useState as useState14 } from "react";
-import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -16268,7 +16460,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
     return null;
   }
   return /* @__PURE__ */ jsxs27(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx33(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx33(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    /* @__PURE__ */ jsx34(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx34(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
     error ? /* @__PURE__ */ jsxs27(
       Flex,
       {
@@ -16278,8 +16470,8 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx33(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
+          /* @__PURE__ */ jsx34(
             Button,
             {
               type: "button",
@@ -16292,12 +16484,12 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx33(TransitionBox, { children: /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && /* @__PURE__ */ jsx33(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx33(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
+    ) : !isLoading && /* @__PURE__ */ jsx34(TransitionBox, { children: /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && /* @__PURE__ */ jsx34(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx34(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
       invoices.length > 0 ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
-        /* @__PURE__ */ jsx33(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+        /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
           return /* @__PURE__ */ jsxs27(Flex, { $justifyContent: "space-between", children: [
-            props.date.isVisible && /* @__PURE__ */ jsx33(
+            props.date.isVisible && /* @__PURE__ */ jsx34(
               Text,
               {
                 display: props.date.fontStyle,
@@ -16311,18 +16503,18 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
                 children: date
               }
             ),
-            props.amount.isVisible && /* @__PURE__ */ jsx33(Text, { display: props.amount.fontStyle, children: amount })
+            props.amount.isVisible && /* @__PURE__ */ jsx34(Text, { display: props.amount.fontStyle, children: amount })
           ] }, index);
         }) }),
         props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             Icon3,
             {
               name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             Text,
             {
               onClick: toggleListSize,
@@ -16334,7 +16526,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsx33(Text, { display: "heading2", children: t2("No invoices created yet") })
+      ] }) : /* @__PURE__ */ jsx34(Text, { display: "heading2", children: t2("No invoices created yet") })
     ] }) })
   ] });
 });
@@ -16344,14 +16536,14 @@ Invoices.displayName = "Invoices";
 import { forwardRef as forwardRef9, useCallback as useCallback11, useMemo as useMemo18, useRef as useRef10, useState as useState15 } from "react";
 
 // src/components/elements/metered-features/Meter.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Meter = ({ entitlement, usageDetails }) => {
   const { priceBehavior, usage } = entitlement;
   const limit = usageDetails.limit ?? usageDetails.currentTier?.to;
   if (typeof usage !== "number" || !limit || limit === Infinity) {
     return null;
   }
-  const meter = /* @__PURE__ */ jsx34(
+  const meter = /* @__PURE__ */ jsx35(
     ProgressBar,
     {
       progress: Math.min(usage, limit) / Math.max(usage, limit) * 100,
@@ -16368,7 +16560,7 @@ var Meter = ({ entitlement, usageDetails }) => {
 };
 
 // src/components/elements/metered-features/PriceDetails.tsx
-import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 var PriceDetails = ({
   entitlement,
   usageDetails,
@@ -16425,14 +16617,14 @@ var PriceDetails = ({
               shortenPeriod(period)
             ] })
           ] })
-        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs28(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs28(Flex, { $alignItems: "end", children: [
           /* @__PURE__ */ jsxs28(Text, { children: [
             t2("Tier"),
             ": ",
             currentTier?.from || 1,
-            typeof currentTier?.to === "number" && (currentTier?.from || 1) !== currentTier?.to && /* @__PURE__ */ jsx35(Fragment16, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
+            typeof currentTier?.to === "number" && (currentTier?.from || 1) !== currentTier?.to && /* @__PURE__ */ jsx36(Fragment16, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
           ] }),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             PricingTiersTooltip,
             {
               period,
@@ -16443,7 +16635,7 @@ var PriceDetails = ({
             }
           )
         ] }),
-        typeof amount === "number" && /* @__PURE__ */ jsx35(Fragment16, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs28(Text, { children: [
+        typeof amount === "number" && /* @__PURE__ */ jsx36(Fragment16, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs28(Text, { children: [
           formatNumber(amount),
           " ",
           getFeatureName(feature, amount),
@@ -16483,7 +16675,7 @@ var Container2 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment17, jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t2 } = useTranslation();
   const { feature, priceBehavior, allocation, usage, metricResetAt } = entitlement;
@@ -16512,7 +16704,7 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       })
     );
   }
-  return /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx36(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
+  return /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx37(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
 };
 function resolveDesignProps4(props) {
   return {
@@ -16605,7 +16797,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       acc.push(
         /* @__PURE__ */ jsxs29(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
           /* @__PURE__ */ jsxs29(Flex, { $gap: "1.5rem", children: [
-            props.icon.isVisible && /* @__PURE__ */ jsx36(
+            props.icon.isVisible && /* @__PURE__ */ jsx37(
               Icon3,
               {
                 name: feature.icon,
@@ -16627,8 +16819,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   $gap: "1rem",
                   children: [
                     /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                      /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.header.fontStyle, children: feature.name }) }),
-                      props.description.isVisible && /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.description.fontStyle, children: feature.description }) })
+                      /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.header.fontStyle, children: feature.name }) }),
+                      props.description.isVisible && /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.description.fontStyle, children: feature.description }) })
                     ] }),
                     /* @__PURE__ */ jsxs29(
                       Box,
@@ -16637,7 +16829,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         $flexGrow: 1,
                         $textAlign: shouldWrapChildren ? "left" : "right",
                         children: [
-                          props.usage.isVisible && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx36(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                          props.usage.isVisible && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx37(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
                             typeof limit === "number" && /* @__PURE__ */ jsxs29(Fragment17, { children: [
                               formatNumber(limit),
                               " "
@@ -16650,7 +16842,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                             " ",
                             t2("used")
                           ] }) }) }),
-                          props.allocation.isVisible && /* @__PURE__ */ jsx36(
+                          props.allocation.isVisible && /* @__PURE__ */ jsx37(
                             Limit,
                             {
                               entitlement,
@@ -16664,14 +16856,14 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   ]
                 }
               ),
-              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ jsx36(
+              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ jsx37(
                 Meter,
                 {
                   entitlement,
                   usageDetails
                 }
               ),
-              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx36(
+              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx37(
                 Button,
                 {
                   type: "button",
@@ -16684,7 +16876,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               )
             ] })
           ] }),
-          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsx36(
+          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsx37(
             PriceDetails,
             {
               entitlement,
@@ -16700,7 +16892,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       const isExpanded = creditVisibility.find(({ id }) => credit.id === id)?.isExpanded ?? false;
       return /* @__PURE__ */ jsxs29(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
         /* @__PURE__ */ jsxs29(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && /* @__PURE__ */ jsx36(
+          props.icon.isVisible && /* @__PURE__ */ jsx37(
             Icon3,
             {
               name: credit.icon,
@@ -16710,12 +16902,12 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
             }
           ),
           /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ jsx36(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.header.fontStyle, children: credit.name }) }),
-              props.description.isVisible && /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.description.fontStyle, children: credit.description }) })
+            /* @__PURE__ */ jsx37(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.header.fontStyle, children: credit.name }) }),
+              props.description.isVisible && /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.description.fontStyle, children: credit.description }) })
             ] }) }),
             /* @__PURE__ */ jsxs29(Flex, { $gap: "1rem", children: [
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 ProgressBar,
                 {
                   progress: credit.total.used / credit.total.value * 100,
@@ -16726,7 +16918,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   )]
                 }
               ),
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 Button,
                 {
                   type: "button",
@@ -16741,12 +16933,12 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           Box,
           {
             $width: `calc(100% + ${2 * settings.theme.card.padding / TEXT_BASE_SIZE}rem)`,
             $margin: `0 0 0 -${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-            children: /* @__PURE__ */ jsx36(
+            children: /* @__PURE__ */ jsx37(
               TransitionBox,
               {
                 $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0375)" : "hsla(0, 0%, 100%, 0.075)",
@@ -16754,19 +16946,19 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                 children: credit.grants.map((grant, index2) => {
                   const paddingX = settings.theme.card.padding / TEXT_BASE_SIZE;
                   const padding = index2 > 0 ? `0 ${paddingX}rem 1rem` : `1rem ${paddingX}rem`;
-                  return /* @__PURE__ */ jsx36(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
-                    /* @__PURE__ */ jsx36(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx36(Text, { children: t2("X items included in plan", {
+                  return /* @__PURE__ */ jsx37(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                    /* @__PURE__ */ jsx37(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx37(Text, { children: t2("X items included in plan", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, grant.quantity)
                     }) }) }),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ jsx36(Text, { children: t2("Resets", {
+                        children: grant.expiresAt && /* @__PURE__ */ jsx37(Text, { children: t2("Resets", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -16779,7 +16971,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                       }
                     )
                   ] }) : /* @__PURE__ */ jsxs29(Fragment17, { children: [
-                    /* @__PURE__ */ jsx36(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx36(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ jsx36(Fragment17, { children: t2("X item bundle", {
+                    /* @__PURE__ */ jsx37(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx37(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ jsx37(Fragment17, { children: t2("X item bundle", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, 1),
                       createdAt: toPrettyDate(grant.createdAt, {
@@ -16787,7 +16979,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         month: "2-digit",
                         year: "2-digit"
                       })
-                    }) }) : /* @__PURE__ */ jsx36(Fragment17, { children: t2("X item grant", {
+                    }) }) : /* @__PURE__ */ jsx37(Fragment17, { children: t2("X item grant", {
                       amount: grant.quantity,
                       item: getFeatureName(
                         credit,
@@ -16799,14 +16991,14 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         year: "2-digit"
                       })
                     }) }) }) }),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ jsx36(Text, { children: t2("Expires", {
+                        children: grant.expiresAt && /* @__PURE__ */ jsx37(Text, { children: t2("Expires", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -16825,7 +17017,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
           }
         ),
         /* @__PURE__ */ jsxs29(Flex, { $gap: "0.25rem", children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             Icon3,
             {
               name: "chevron-down",
@@ -16836,7 +17028,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             Text,
             {
               onClick: () => toggleBalanceDetails(credit.id),
@@ -16856,24 +17048,24 @@ import { forwardRef as forwardRef10, useMemo as useMemo20 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 import { useMemo as useMemo19 } from "react";
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
   iconTitle,
   label,
   paymentLast4
 }) => {
-  return /* @__PURE__ */ jsx37(Text, { children: /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ jsx37(Icon3, { name: iconName, title: iconTitle }),
+  return /* @__PURE__ */ jsx38(Text, { children: /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ jsx38(Icon3, { name: iconName, title: iconTitle }),
     (label || paymentLast4) && /* @__PURE__ */ jsxs30(Box, { $flexGrow: 1, children: [
-      label && /* @__PURE__ */ jsx37(Text, { children: label }),
+      label && /* @__PURE__ */ jsx38(Text, { children: label }),
       " ",
-      paymentLast4 && /* @__PURE__ */ jsx37(Text, { children: paymentLast4 })
+      paymentLast4 && /* @__PURE__ */ jsx38(Text, { children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
-  return /* @__PURE__ */ jsx37(Text, { children: /* @__PURE__ */ jsx37(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx37(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx37(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
+  return /* @__PURE__ */ jsx38(Text, { children: /* @__PURE__ */ jsx38(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx38(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx38(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -16940,8 +17132,8 @@ var PaymentMethodElement = ({
   const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
   return /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
     props.header.isVisible && /* @__PURE__ */ jsxs30(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx37(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx37(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
+      /* @__PURE__ */ jsx38(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx38(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
     ] }),
     /* @__PURE__ */ jsxs30(
       Flex,
@@ -16952,8 +17144,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod ? /* @__PURE__ */ jsx37(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx37(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx37(
+          paymentMethod ? /* @__PURE__ */ jsx38(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx38(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx38(
             Text,
             {
               onClick: onEdit,
@@ -16998,21 +17190,21 @@ var PaymentListElement = ({
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
       children: [
-        iconName && /* @__PURE__ */ jsx37(Icon3, { name: iconName, title: iconTitle }),
+        iconName && /* @__PURE__ */ jsx38(Icon3, { name: iconName, title: iconTitle }),
         (label || paymentLast4) && /* @__PURE__ */ jsxs30(Box, { $flexGrow: 1, children: [
-          label && /* @__PURE__ */ jsx37(Text, { children: label }),
+          label && /* @__PURE__ */ jsx38(Text, { children: label }),
           " ",
-          paymentLast4 && /* @__PURE__ */ jsx37(Text, { children: paymentLast4 })
+          paymentLast4 && /* @__PURE__ */ jsx38(Text, { children: paymentLast4 })
         ] }),
-        expirationDate && /* @__PURE__ */ jsx37(
+        expirationDate && /* @__PURE__ */ jsx38(
           Box,
           {
             $flexGrow: 1,
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ jsx37(Text, { children: t("Expires", { date: expirationDate }) })
+            children: /* @__PURE__ */ jsx38(Text, { children: t("Expires", { date: expirationDate }) })
           }
         ),
-        /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(
           Text,
           {
             onClick: () => {
@@ -17025,7 +17217,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           Icon3,
           {
             tabIndex: 0,
@@ -17047,7 +17239,7 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -17088,7 +17280,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
       monthsToExpiration: void 0
     };
   }, [data]);
-  return /* @__PURE__ */ jsx38(Element, { ref, className, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(Element, { ref, className, children: /* @__PURE__ */ jsx39(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -17257,7 +17449,7 @@ var loadStripe = function loadStripe2() {
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 import { useCallback as useCallback12, useEffect as useEffect7, useMemo as useMemo21, useState as useState16 } from "react";
-import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -17397,7 +17589,7 @@ var PaymentMethodDetails = ({
     initializePaymentMethod
   ]);
   return /* @__PURE__ */ jsxs31(Flex, { $position: "relative", children: [
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       Flex,
       {
         $position: "absolute",
@@ -17406,7 +17598,7 @@ var PaymentMethodDetails = ({
         $alignItems: "center",
         $width: "100%",
         $height: "100%",
-        children: /* @__PURE__ */ jsx39(
+        children: /* @__PURE__ */ jsx40(
           Loader,
           {
             $color: settings.theme.primary,
@@ -17459,7 +17651,7 @@ var PaymentMethodDetails = ({
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
               children: [
-                /* @__PURE__ */ jsx39(
+                /* @__PURE__ */ jsx40(
                   PaymentForm,
                   {
                     onConfirm: async (paymentMethodId) => {
@@ -17469,7 +17661,7 @@ var PaymentMethodDetails = ({
                     }
                   }
                 ),
-                currentPaymentMethod && /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
+                currentPaymentMethod && /* @__PURE__ */ jsx40(Box, { children: /* @__PURE__ */ jsx40(
                   Text,
                   {
                     onClick: focusExistingPaymentMethods,
@@ -17483,7 +17675,7 @@ var PaymentMethodDetails = ({
               ]
             }
           ) : /* @__PURE__ */ jsxs31(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               PaymentMethodElement,
               {
                 paymentMethod: currentPaymentMethod,
@@ -17492,7 +17684,7 @@ var PaymentMethodDetails = ({
               }
             ),
             paymentMethods.length > 0 && /* @__PURE__ */ jsxs31(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 Text,
                 {
                   onClick: toggleShowPaymentMethods,
@@ -17503,7 +17695,7 @@ var PaymentMethodDetails = ({
                   children: t2("Choose different payment method")
                 }
               ),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 Icon3,
                 {
                   name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down"
@@ -17511,9 +17703,9 @@ var PaymentMethodDetails = ({
               )
             ] }),
             showDifferentPaymentMethods && /* @__PURE__ */ jsxs31(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
-              /* @__PURE__ */ jsx39(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
+              /* @__PURE__ */ jsx40(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
                 (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
-              ) || []).map((paymentMethod) => /* @__PURE__ */ jsx39(
+              ) || []).map((paymentMethod) => /* @__PURE__ */ jsx40(
                 PaymentListElement,
                 {
                   paymentMethod,
@@ -17522,7 +17714,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod.id
               )) }),
-              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx39(
+              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx40(
                 Button,
                 {
                   type: "button",
@@ -17534,7 +17726,7 @@ var PaymentMethodDetails = ({
               )
             ] })
           ] }),
-          !isLoading && error && /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(Text, { $weight: 500, $color: "#DB6669", children: error }) })
+          !isLoading && error && /* @__PURE__ */ jsx40(Box, { children: /* @__PURE__ */ jsx40(Text, { $weight: 500, $color: "#DB6669", children: error }) })
         ]
       }
     )
@@ -17545,7 +17737,7 @@ var PaymentMethodDetails = ({
 import { forwardRef as forwardRef11, useMemo as useMemo23 } from "react";
 
 // src/components/elements/plan-manager/AddOn.tsx
-import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
 var AddOn = ({ addOn, currency, layout }) => {
   return /* @__PURE__ */ jsxs32(
     Flex,
@@ -17555,10 +17747,10 @@ var AddOn = ({ addOn, currency, layout }) => {
       $flexWrap: "wrap",
       $gap: "1rem",
       children: [
-        /* @__PURE__ */ jsx40(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
+        /* @__PURE__ */ jsx41(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
         typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsxs32(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ jsx40("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
+          /* @__PURE__ */ jsx41("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
         ] })
       ]
     }
@@ -17567,7 +17759,7 @@ var AddOn = ({ addOn, currency, layout }) => {
 
 // src/components/elements/plan-manager/UsageDetails.tsx
 import { Fragment as Fragment18, useMemo as useMemo22 } from "react";
-import { Fragment as Fragment19, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 var UsageDetails2 = ({
   entitlement,
   period,
@@ -17589,7 +17781,7 @@ var UsageDetails2 = ({
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ jsx41(Fragment18, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ jsx42(Fragment18, { children: t2("X additional", {
           amount
         }) }, index) : /* @__PURE__ */ jsxs33(Fragment18, { children: [
           t2("Additional"),
@@ -17661,13 +17853,13 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ jsx41(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs33(Fragment19, { children: [
+        /* @__PURE__ */ jsx42(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs33(Fragment19, { children: [
           quantity,
           " ",
           entitlement.feature.name
         ] }) : entitlement.feature.name }),
         /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          description.length > 0 && /* @__PURE__ */ jsx41(
+          description.length > 0 && /* @__PURE__ */ jsx42(
             Text,
             {
               style: { opacity: 0.54 },
@@ -17676,8 +17868,15 @@ var UsageDetails2 = ({
               children: description
             }
           ),
-          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", children: [
-            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx41(
+          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsxs33(Flex, { $alignItems: "end", children: [
+            /* @__PURE__ */ jsxs33(Text, { children: [
+              formatCurrency(cost, billingPrice?.currency),
+              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33("sub", { children: [
+                "/",
+                shortenPeriod(period)
+              ] })
+            ] }),
+            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx42(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -17685,14 +17884,7 @@ var UsageDetails2 = ({
                 currency: billingPrice?.currency,
                 priceTiers: billingPrice?.priceTier
               }
-            ),
-            /* @__PURE__ */ jsxs33(Text, { children: [
-              formatCurrency(cost, billingPrice?.currency),
-              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33("sub", { children: [
-                "/",
-                shortenPeriod(period)
-              ] })
-            ] })
+            )
           ] })
         ] })
       ]
@@ -17701,7 +17893,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { Fragment as Fragment20, jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -17757,11 +17949,29 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         featureUsage: featureUsage2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
+      const creditGroups2 = groupCreditGrants(creditGrants, {
+        groupBy: "bundle"
+      }).reduce(
+        (acc, grant) => {
+          switch (grant.grantReason) {
+            case "plan" /* Plan */:
+              acc.plan.push(grant);
+              break;
+            case "purchased" /* Purchased */:
+              acc.bundles.push(grant);
+              break;
+            case "free" /* Free */:
+              acc.promotional.push(grant);
+          }
+          return acc;
+        },
+        { plan: [], bundles: [], promotional: [] }
+      );
       return {
         currentPlan: company?.plan,
         currentAddOns: company?.addOns || [],
         creditBundles: creditBundles2,
-        creditGroups: groupCreditGrants(creditGrants, { groupBy: "bundle" }),
+        creditGroups: creditGroups2,
         billingSubscription: company?.billingSubscription,
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
@@ -17773,7 +17983,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       currentPlan: void 0,
       currentAddOns: [],
       creditBundles: [],
-      creditGroups: [],
+      creditGroups: { plan: [], bundles: [], promotional: [] },
       billingSubscription: void 0,
       canCheckout: false,
       defaultPlan: void 0,
@@ -17814,8 +18024,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ jsx42(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
-          /* @__PURE__ */ jsx42(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
+          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ jsx43(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
+          /* @__PURE__ */ jsx43(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
             defaultPlanName: defaultPlan?.name
           }) : t2("After the trial, cancel no default", {
             planName: currentPlan?.name
@@ -17832,8 +18042,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx42(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
-          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx43(
             Text,
             {
               as: "p",
@@ -17868,11 +18078,11 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               $gap: "1rem",
               children: [
                 /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx42(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx42(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                  /* @__PURE__ */ jsx43(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx43(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
                 props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs34(Box, { children: [
-                  /* @__PURE__ */ jsx42(
+                  /* @__PURE__ */ jsx43(
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -17882,7 +18092,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx42(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
+                  !isUsageBasedPlan && /* @__PURE__ */ jsx43(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -17891,7 +18101,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }
           ),
           props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx42(
+            props.addOns.showLabel && /* @__PURE__ */ jsx43(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -17899,7 +18109,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Add-ons")
               }
             ),
-            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx42(
+            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx43(
               AddOn,
               {
                 addOn,
@@ -17910,7 +18120,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             )) })
           ] }),
           props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx42(
+            props.addOns.showLabel && /* @__PURE__ */ jsx43(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -17918,8 +18128,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Usage-based")
               }
             ),
-            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
-              return /* @__PURE__ */ jsx42(
+            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
+              return /* @__PURE__ */ jsx43(
                 UsageDetails2,
                 {
                   entitlement,
@@ -17930,79 +18140,153 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx42(
+          props.addOns.isVisible && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx43(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
                 $leading: 1,
-                children: t2("Credits")
+                children: t2("Credits in plan")
               }
             ),
-            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.reduce(
-              (acc, group, groupIndex) => {
-                const bundle = group.grantReason === "purchased" /* Purchased */ && group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
-                acc.push(
-                  /* @__PURE__ */ jsxs34(
-                    Flex,
-                    {
-                      $justifyContent: "space-between",
-                      $alignItems: "center",
-                      $flexWrap: "wrap",
-                      $gap: "0.5rem",
-                      children: [
-                        group.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
-                          " ",
-                          getFeatureName(group, group.quantity),
+            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+              return /* @__PURE__ */ jsxs34(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      " ",
+                      subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment20, { children: [
+                        t2("per"),
+                        " ",
+                        t2(subscriptionInterval)
+                      ] })
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ jsxs34(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment20, { children: [
-                            t2("per"),
-                            " ",
-                            t2(subscriptionInterval)
-                          ] })
-                        ] }) : bundle ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
-                          group.grants.length > 1 && /* @__PURE__ */ jsxs34(Text, { style: { opacity: 0.5 }, children: [
-                            "(",
-                            group.grants.length,
-                            ")",
-                            " "
-                          ] }),
-                          bundle.name,
-                          " (",
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx43(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Credit bundles")
+              }
+            ),
+            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+              const bundle = group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
+              return /* @__PURE__ */ jsxs34(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    bundle ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.grants.length > 1 && /* @__PURE__ */ jsxs34(Text, { style: { opacity: 0.5 }, children: [
+                        "(",
+                        group.grants.length,
+                        ")",
+                        " "
+                      ] }),
+                      bundle.name,
+                      " (",
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      ")"
+                    ] }) : /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ jsxs34(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity),
-                          ")"
-                        ] }) : /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx43(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Promotional credits")
+              }
+            ),
+            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+              return /* @__PURE__ */ jsxs34(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ jsxs34(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity)
-                        ] }),
-                        group.total.used > 0 && /* @__PURE__ */ jsxs34(
-                          Text,
-                          {
-                            style: { opacity: 0.54 },
-                            $size: 0.875 * settings.theme.typography.text.fontSize,
-                            $color: settings.theme.typography.text.color,
-                            children: [
-                              group.total.used,
-                              " ",
-                              t2("used")
-                            ]
-                          }
-                        )
-                      ]
-                    },
-                    groupIndex
-                  )
-                );
-                return acc;
-              },
-              []
-            ) })
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx42(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx43(
             Button,
             {
               type: "button",
@@ -18037,7 +18321,7 @@ import {
 
 // src/components/elements/pricing-table/AddOn.tsx
 import { useMemo as useMemo24 } from "react";
-import { Fragment as Fragment21, jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -18080,16 +18364,16 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
       },
       children: [
         /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-          /* @__PURE__ */ jsx43(Box, { children: /* @__PURE__ */ jsx43(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
-          layout.addOns.showDescription && /* @__PURE__ */ jsx43(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx43(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-          /* @__PURE__ */ jsx43(Box, { children: /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
+          /* @__PURE__ */ jsx44(Box, { children: /* @__PURE__ */ jsx44(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
+          layout.addOns.showDescription && /* @__PURE__ */ jsx44(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx44(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+          /* @__PURE__ */ jsx44(Box, { children: /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
             formatCurrency(addOnPrice ?? 0, addOnCurrency),
             /* @__PURE__ */ jsxs35("sub", { children: [
               "/",
               selectedPeriod
             ] })
           ] }) }),
-          isActiveAddOn && /* @__PURE__ */ jsx43(
+          isActiveAddOn && /* @__PURE__ */ jsx44(
             Flex,
             {
               $position: "absolute",
@@ -18098,7 +18382,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
               $backgroundColor: settings.theme.primary,
               $borderRadius: "9999px",
               $padding: "0.125rem 0.85rem",
-              children: /* @__PURE__ */ jsx43(
+              children: /* @__PURE__ */ jsx44(
                 Text,
                 {
                   $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -18117,7 +18401,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             $gap: `${cardPadding}rem`,
             $flexGrow: 1,
             children: [
-              layout.addOns.showEntitlements && /* @__PURE__ */ jsx43(
+              layout.addOns.showEntitlements && /* @__PURE__ */ jsx44(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -18126,7 +18410,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   $flexGrow: 1,
                   children: addOn.entitlements.map((entitlement, entitlementIndex) => {
                     const metricPeriodName = getMetricPeriodName(entitlement);
-                    return /* @__PURE__ */ jsx43(
+                    return /* @__PURE__ */ jsx44(
                       Flex,
                       {
                         $flexWrap: "wrap",
@@ -18134,7 +18418,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                         $alignItems: "center",
                         $gap: "1rem",
                         children: /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
-                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx43(
+                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx44(
                             Icon3,
                             {
                               name: entitlement.feature.icon,
@@ -18144,7 +18428,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                             }
                           ),
                           /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            entitlement.feature?.name && /* @__PURE__ */ jsx43(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx43(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment21, { children: [
+                            entitlement.feature?.name && /* @__PURE__ */ jsx44(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx44(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment21, { children: [
                               entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
                                 item: getFeatureName(entitlement.feature)
                               }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs35(Fragment21, { children: [
@@ -18162,7 +18446,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                                 t2(metricPeriodName)
                               ] })
                             ] }) : entitlement.feature.name }) }),
-                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx43(
+                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx44(
                               Text,
                               {
                                 $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -18178,7 +18462,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   })
                 }
               ),
-              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx43(
+              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx44(
                 Button,
                 {
                   type: "button",
@@ -18219,7 +18503,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 import { useMemo as useMemo25 } from "react";
 
 // src/components/elements/pricing-table/Entitlement.tsx
-import { Fragment as Fragment22, jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 var Entitlement = ({
   entitlement,
   sharedProps,
@@ -18241,7 +18525,7 @@ var Entitlement = ({
   const limit = entitlement.softLimit ?? entitlement.valueNumeric;
   const metricPeriodName = getMetricPeriodName(entitlement);
   return /* @__PURE__ */ jsxs36(Flex, { $gap: "1rem", children: [
-    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx44(
+    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx45(
       Icon3,
       {
         name: entitlement.feature.icon,
@@ -18252,7 +18536,7 @@ var Entitlement = ({
     ),
     entitlement.feature?.name && /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ jsx44(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
+        /* @__PURE__ */ jsx45(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t2("per"),
@@ -18268,7 +18552,7 @@ var Entitlement = ({
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx44(
+        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx45(
           TieredPricingDetails,
           {
             entitlement,
@@ -18289,49 +18573,57 @@ var Entitlement = ({
             t2(metricPeriodName)
           ] })
         ] }) : entitlement.feature.name }),
-        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs36(
-          Text,
-          {
-            $size: 0.875 * settings.theme.typography.text.fontSize,
-            $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
-            children: [
-              t2("then"),
-              " ",
-              formatCurrency(entitlementPrice, entitlementCurrency),
-              "/",
-              entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
-                entitlementPackageSize,
-                " "
-              ] }),
-              getFeatureName(entitlement.feature, entitlementPackageSize),
-              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
-                "/",
-                shortenPeriod(selectedPeriod)
-              ] })
-            ]
-          }
-        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs36(Flex, { $alignItems: "center", children: [
-          /* @__PURE__ */ jsx44(
-            PricingTiersTooltip,
-            {
-              feature: entitlement.feature,
-              period: selectedPeriod,
-              currency: entitlementCurrency,
-              priceTiers: entitlementPriceTiers
-            }
-          ),
-          /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsxs36(Flex, { $alignItems: "end", children: [
+          entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs36(
             Text,
             {
-              style: { opacity: 0.54 },
               $size: 0.875 * settings.theme.typography.text.fontSize,
-              $color: settings.theme.typography.text.color,
-              children: t2("Tier-based")
+              $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
+              children: [
+                t2("then"),
+                " ",
+                formatCurrency(entitlementPrice, entitlementCurrency),
+                "/",
+                entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+                  entitlementPackageSize,
+                  " "
+                ] }),
+                getFeatureName(entitlement.feature, entitlementPackageSize),
+                entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+                  "/",
+                  shortenPeriod(selectedPeriod)
+                ] })
+              ]
+            }
+          ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs36(Flex, { $alignItems: "end", children: [
+            /* @__PURE__ */ jsx45(
+              Text,
+              {
+                style: { opacity: 0.54 },
+                $size: 0.875 * settings.theme.typography.text.fontSize,
+                $color: settings.theme.typography.text.color,
+                children: t2("Tier-based")
+              }
+            ),
+            /* @__PURE__ */ jsx45(
+              PricingTiersTooltip,
+              {
+                feature: entitlement.feature,
+                period: selectedPeriod,
+                currency: entitlementCurrency,
+                priceTiers: entitlementPriceTiers
+              }
+            )
+          ] }),
+          entitlement.billingThreshold && /* @__PURE__ */ jsx45(
+            BillingThresholdTooltip,
+            {
+              billingThreshold: entitlement.billingThreshold
             }
           )
         ] })
       ] }),
-      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx44(
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx45(
         Text,
         {
           $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -18344,7 +18636,7 @@ var Entitlement = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-import { Fragment as Fragment23, jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var Plan2 = ({
   plan,
   index,
@@ -18415,7 +18707,7 @@ var Plan2 = ({
     (entitlement) => !!entitlement.priceBehavior
   );
   const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
-  const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? settings.theme.typography.heading3 : settings.theme.typography[layout.plans.name.fontStyle];
+  const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const count = entitlementCounts[plan.id];
   const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
   return /* @__PURE__ */ jsxs37(
@@ -18446,9 +18738,9 @@ var Plan2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
-              layout.plans.description.isVisible && /* @__PURE__ */ jsx45(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
-              /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsx46(Box, { children: /* @__PURE__ */ jsx46(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
+              layout.plans.description.isVisible && /* @__PURE__ */ jsx46(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx46(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
+              /* @__PURE__ */ jsx46(Box, { children: /* @__PURE__ */ jsxs37(
                 Text,
                 {
                   $font: headerPriceFontStyle.fontFamily,
@@ -18464,7 +18756,7 @@ var Plan2 = ({
                   ]
                 }
               ) }),
-              credits.length > 0 && /* @__PURE__ */ jsx45(
+              credits.length > 0 && /* @__PURE__ */ jsx46(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -18473,7 +18765,7 @@ var Plan2 = ({
                   $marginTop: "0.5rem",
                   children: credits.map((credit, idx) => {
                     return /* @__PURE__ */ jsxs37(Flex, { $gap: "1rem", children: [
-                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx45(
+                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx46(
                         Icon3,
                         {
                           name: credit.icon,
@@ -18482,7 +18774,7 @@ var Plan2 = ({
                           rounded: true
                         }
                       ),
-                      credit.name && /* @__PURE__ */ jsx45(
+                      credit.name && /* @__PURE__ */ jsx46(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -18505,7 +18797,7 @@ var Plan2 = ({
                   })
                 }
               ),
-              isActivePlan && /* @__PURE__ */ jsx45(
+              isActivePlan && /* @__PURE__ */ jsx46(
                 Flex,
                 {
                   $position: "absolute",
@@ -18514,7 +18806,7 @@ var Plan2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ jsx45(
+                  children: /* @__PURE__ */ jsx46(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -18537,10 +18829,10 @@ var Plan2 = ({
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
               layout.plans.showEntitlements && /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx45(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx45(Text, { children: t2("Everything in", {
+                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx46(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx46(Text, { children: t2("Everything in", {
                   plan: plans[index - 1].name
                 }) }) }),
-                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ jsx45(
+                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ jsx46(
                   Entitlement,
                   {
                     entitlement,
@@ -18557,14 +18849,14 @@ var Plan2 = ({
                     $gap: "0.5rem",
                     $marginTop: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx45(
+                      /* @__PURE__ */ jsx46(
                         Icon3,
                         {
                           name: isExpanded ? "chevron-up" : "chevron-down",
                           color: "#D0D0D0"
                         }
                       ),
-                      /* @__PURE__ */ jsx45(
+                      /* @__PURE__ */ jsx46(
                         Text,
                         {
                           onClick: () => handleToggleShowAll(plan.id),
@@ -18592,7 +18884,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ jsx45(
+                    /* @__PURE__ */ jsx46(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -18600,10 +18892,10 @@ var Plan2 = ({
                         color: settings.theme.primary
                       }
                     ),
-                    /* @__PURE__ */ jsx45(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
+                    /* @__PURE__ */ jsx46(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
                   ]
                 }
-              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx45(
+              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx46(
                 Button,
                 {
                   type: "button",
@@ -18640,11 +18932,11 @@ var Plan2 = ({
                     }
                   },
                   $fullWidth: true,
-                  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ jsx45(
+                  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ jsx46(
                     Tooltip,
                     {
-                      trigger: /* @__PURE__ */ jsx45(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-                      content: /* @__PURE__ */ jsx45(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+                      trigger: /* @__PURE__ */ jsx46(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+                      content: /* @__PURE__ */ jsx46(Text, { children: t2("Current usage exceeds the limit of this plan.") })
                     }
                   ) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
                 }
@@ -18658,7 +18950,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-import { Fragment as Fragment25, jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -18762,7 +19054,7 @@ var PricingTable = forwardRef12(
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
     if (isPending) {
-      return /* @__PURE__ */ jsx46(
+      return /* @__PURE__ */ jsx47(
         Flex,
         {
           $width: "100%",
@@ -18770,12 +19062,12 @@ var PricingTable = forwardRef12(
           $alignItems: "center",
           $justifyContent: "center",
           $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-          children: /* @__PURE__ */ jsx46(Loader, { $size: "2xl" })
+          children: /* @__PURE__ */ jsx47(Loader, { $size: "2xl" })
         }
       );
     }
     const Wrapper = isStandalone ? Container : Fragment24;
-    return /* @__PURE__ */ jsx46(Wrapper, { children: /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsx47(Wrapper, { children: /* @__PURE__ */ jsxs38(
       FussyChild,
       {
         ref,
@@ -18800,7 +19092,7 @@ var PricingTable = forwardRef12(
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx46(
+                  /* @__PURE__ */ jsx47(
                     Text,
                     {
                       display: props.header.fontStyle,
@@ -18808,7 +19100,7 @@ var PricingTable = forwardRef12(
                       children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                     }
                   ),
-                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx46(
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx47(
                     PeriodToggle,
                     {
                       options: periods,
@@ -18823,7 +19115,7 @@ var PricingTable = forwardRef12(
                 ]
               }
             ),
-            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx46(
+            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx47(
               Box,
               {
                 $display: "grid",
@@ -18831,7 +19123,7 @@ var PricingTable = forwardRef12(
                 $gap: "1rem",
                 children: plans.map((plan, index, self2) => {
                   const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ jsx46(
+                  return /* @__PURE__ */ jsx47(
                     Plan2,
                     {
                       plan,
@@ -18853,14 +19145,14 @@ var PricingTable = forwardRef12(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx46(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment25, { children: [
-            props.header.isVisible && /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx47(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment25, { children: [
+            props.header.isVisible && /* @__PURE__ */ jsx47(
               Flex,
               {
                 $justifyContent: "space-between",
                 $alignItems: "center",
                 $marginBottom: "1rem",
-                children: /* @__PURE__ */ jsx46(
+                children: /* @__PURE__ */ jsx47(
                   Text,
                   {
                     display: props.header.fontStyle,
@@ -18870,7 +19162,7 @@ var PricingTable = forwardRef12(
                 )
               }
             ),
-            /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsx47(
               Box,
               {
                 $display: "grid",
@@ -18878,7 +19170,7 @@ var PricingTable = forwardRef12(
                 $gap: "1rem",
                 children: addOns.map((addOn, index) => {
                   const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ jsx46(
+                  return /* @__PURE__ */ jsx47(
                     AddOn2,
                     {
                       addOn,
@@ -18905,7 +19197,7 @@ PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -18917,7 +19209,7 @@ var resolveDesignProps9 = (props) => {
 };
 var TextElement = forwardRef13(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
-  return /* @__PURE__ */ jsx47(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx48(
     Text,
     {
       display: props.text.fontStyle,
@@ -18931,7 +19223,7 @@ TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 import { forwardRef as forwardRef14, useMemo as useMemo27 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var buttonStyles = {
   primary: {
     color: "primary",
@@ -18967,7 +19259,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     Element,
     {
       as: Flex,
@@ -18975,7 +19267,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsx49(
         Button,
         {
           type: "button",
@@ -18997,7 +19289,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 import { forwardRef as forwardRef15, useCallback as useCallback13, useEffect as useEffect9, useMemo as useMemo28, useState as useState18 } from "react";
-import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -19019,11 +19311,12 @@ function resolveDesignProps11(props) {
 var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
-  const { data, settings, getUpcomingInvoice } = useEmbed();
+  const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const [isLoading, setIsLoading] = useState18(false);
   const [error, setError] = useState18();
   const [upcomingInvoice, setUpcomingInvoice] = useState18();
+  const [balances, setBalances] = useState18([]);
   const discounts = useMemo28(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
@@ -19052,14 +19345,27 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       }
     }
   }, [data, getUpcomingInvoice]);
+  const getBalances = useCallback13(async () => {
+    try {
+      const response = await getCustomerBalance();
+      if (response) {
+        setBalances(response.data.balances);
+      }
+    } catch (err2) {
+      debug("Failed to fetch customer balance.", err2);
+    }
+  }, [debug, getCustomerBalance]);
   useEffect9(() => {
     getInvoice();
   }, [getInvoice]);
+  useEffect9(() => {
+    getBalances();
+  }, [getBalances]);
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
     return null;
   }
   return /* @__PURE__ */ jsxs39(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx49(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx49(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    /* @__PURE__ */ jsx50(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx50(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
     error ? /* @__PURE__ */ jsxs39(
       Flex,
       {
@@ -19069,8 +19375,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx49(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ jsx50(
             Button,
             {
               type: "button",
@@ -19083,7 +19389,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx49(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs39(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    ) : !isLoading && /* @__PURE__ */ jsx50(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs39(Flex, { $flexDirection: "column", $gap: "1rem", children: [
       props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs39(Text, { display: props.header.fontStyle, children: [
         props.header.prefix,
         " ",
@@ -19096,11 +19402,24 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            props.price.isVisible && /* @__PURE__ */ jsx49(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+            props.price.isVisible && /* @__PURE__ */ jsx50(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
               upcomingInvoice.amountDue,
               upcomingInvoice.currency
             ) }),
-            /* @__PURE__ */ jsx49(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx49(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
+            /* @__PURE__ */ jsx50(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx50(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
+          ]
+        }
+      ),
+      balances.length > 0 && /* @__PURE__ */ jsxs39(
+        Flex,
+        {
+          as: TransitionBox,
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ jsx50(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ jsx50(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx50(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
           ]
         }
       ),
@@ -19111,8 +19430,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ jsx49(Text, { $weight: 600, children: t2("Discount") }),
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx50(Text, { $weight: 600, children: t2("Discount") }),
+            /* @__PURE__ */ jsx50(
               Flex,
               {
                 $flexDirection: "column",
@@ -19128,7 +19447,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ jsx49(
+                              discount.customerFacingCode && /* @__PURE__ */ jsx50(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -19137,7 +19456,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                                   $borderStyle: "solid",
                                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                                   $borderRadius: "0.3125rem",
-                                  children: /* @__PURE__ */ jsx49(
+                                  children: /* @__PURE__ */ jsx50(
                                     Text,
                                     {
                                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -19147,7 +19466,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
+                              /* @__PURE__ */ jsx50(Box, { children: /* @__PURE__ */ jsx50(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
                                 percent: discount.percentOff
                               }) : t2("Amount off", {
                                 amount: formatCurrency(
@@ -19171,7 +19490,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           ]
         }
       )
-    ] }) : /* @__PURE__ */ jsx49(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+    ] }) : /* @__PURE__ */ jsx50(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
   ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
@@ -23431,10 +23750,10 @@ function createRenderer(options) {
 }
 
 // src/components/embed/Embed.tsx
-import { Fragment as Fragment26, jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var Loading = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     Flex,
     {
       $width: "100%",
@@ -23442,7 +23761,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx50(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ jsx51(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
@@ -23459,14 +23778,14 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx50(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx50(Text, { display: "heading1", children: "Error" }) }),
-        /* @__PURE__ */ jsx50(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx50(Text, { children: message }) })
+        /* @__PURE__ */ jsx51(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx51(Text, { display: "heading1", children: "Error" }) }),
+        /* @__PURE__ */ jsx51(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx51(Text, { children: message }) })
       ]
     }
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = useState19(/* @__PURE__ */ jsx50(Loading, {}));
+  const [children, setChildren] = useState19(/* @__PURE__ */ jsx51(Loading, {}));
   const theme = useContext5(et);
   const {
     data,
@@ -23513,13 +23832,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
     return stub();
   }
   if (error) {
-    return /* @__PURE__ */ jsx50(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx51(Error2, { message: error.message });
   }
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx50(Error2, { message: "Please provide an access token." });
+    return /* @__PURE__ */ jsx51(Error2, { message: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx51(
       Error2,
       {
         message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -23527,9 +23846,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
     );
   }
   if (isPending) {
-    return /* @__PURE__ */ jsx50(Loading, {});
+    return /* @__PURE__ */ jsx51(Loading, {});
   }
-  return /* @__PURE__ */ jsx50(Fragment26, { children });
+  return /* @__PURE__ */ jsx51(Fragment26, { children });
 };
 export {
   Box,