@schematichq/schematic-components 1.4.3 → 1.6.0

package/dist/schematic-components.esm.js

@@ -6703,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",
@@ -6738,6 +6739,7 @@ var en_default = {
     Expired: "Expired",
     "Expires in X months": "Expires in {{months}} mo",
     Expires: "Expires {{date}}",
+    Free: "Free",
     "Hide all": "Hide all",
     "Hide balance details": "Hide balance details",
     "Hide details": "Hide details",
@@ -7036,7 +7038,7 @@ import {
   useState as useState2
 } from "react";
 
-// node_modules/uuid/dist/esm-browser/stringify.js
+// node_modules/uuid/dist-browser/stringify.js
 var byteToHex = [];
 for (let i2 = 0; i2 < 256; ++i2) {
   byteToHex.push((i2 + 256).toString(16).slice(1));
@@ -7045,7 +7047,7 @@ function unsafeStringify(arr, offset = 0) {
   return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
-// node_modules/uuid/dist/esm-browser/rng.js
+// node_modules/uuid/dist-browser/rng.js
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -7058,15 +7060,12 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-// node_modules/uuid/dist/esm-browser/native.js
+// node_modules/uuid/dist-browser/native.js
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = { randomUUID };
 
-// node_modules/uuid/dist/esm-browser/v4.js
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
+// node_modules/uuid/dist-browser/v4.js
+function _v4(options, buf, offset) {
   options = options || {};
   const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
@@ -7086,6 +7085,12 @@ function v4(options, buf, offset) {
   }
   return unsafeStringify(rnds);
 }
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  return _v4(options, buf, offset);
+}
 var v4_default = v4;
 
 // src/api/checkoutexternal/runtime.ts
@@ -8639,6 +8644,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);
@@ -8652,8 +8673,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"]),
@@ -8718,6 +8749,7 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
     showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
     subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
     trialPaymentMethodRequired: json["trial_payment_method_required"] == null ? void 0 : json["trial_payment_method_required"],
@@ -10270,7 +10302,8 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON2
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
-    showPeriodToggle: json["show_period_toggle"]
+    showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"]
   };
 }
 
@@ -10468,7 +10501,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.4.3",
+      "X-Schematic-Components-Version": "1.6.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -11769,8 +11802,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;
@@ -11916,6 +11951,7 @@ var Tooltip = ({
   trigger,
   content,
   position: position2 = "top",
+  fullWidth = false,
   ...rest
 }) => {
   const ref = useRef5(null);
@@ -11956,6 +11992,7 @@ var Tooltip = ({
         ref,
         onPointerEnter: () => setShow(true),
         onPointerLeave: () => setShow(false),
+        $fullWidth: fullWidth,
         ...rest,
         children: trigger
       }
@@ -12102,6 +12139,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,
@@ -12119,7 +12185,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();
@@ -12132,7 +12198,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)
@@ -12141,7 +12207,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: [
           "/",
@@ -12165,17 +12231,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 },
@@ -12183,6 +12240,15 @@ var EntitlementRow = (entitlement) => {
             $color: settings.theme.typography.text.color,
             children: t2("Tier-based")
           }
+        ),
+        /* @__PURE__ */ jsx11(
+          PricingTiersTooltip,
+          {
+            feature,
+            period: planPeriod,
+            currency,
+            priceTiers
+          }
         )
       ] }) })
     ] });
@@ -12191,7 +12257,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);
@@ -12201,19 +12267,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,
             {
@@ -12222,20 +12288,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,
@@ -12257,7 +12323,7 @@ var StageButton = ({
   const { t: t2 } = useTranslation();
   const isDisabled = isLoading || !hasPlan || inEditMode;
   const NoPaymentRequired = () => {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Button,
       {
         type: "button",
@@ -12271,7 +12337,7 @@ var StageButton = ({
   };
   if (checkoutStage === "plan") {
     if (isSelectedPlanTrialable && trialPaymentMethodRequired && shouldTrial) {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -12292,7 +12358,7 @@ var StageButton = ({
                 t2("Next"),
                 ": ",
                 t2("Checkout"),
-                /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+                /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
               ]
             }
           )
@@ -12302,9 +12368,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",
@@ -12321,7 +12387,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" })
         ] })
       }
     );
@@ -12330,9 +12396,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",
@@ -12356,7 +12422,7 @@ var StageButton = ({
               ":",
               " ",
               hasAddOns ? t2("Addons") : hasCreditBundles ? t2("Credits") : t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -12371,9 +12437,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",
@@ -12397,7 +12463,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" })
             ]
           }
         )
@@ -12406,9 +12472,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",
@@ -12429,7 +12495,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               hasCreditBundles ? t2("Credits") : t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -12438,9 +12504,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",
@@ -12461,7 +12527,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               t2("Checkout"),
-              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx13(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -12470,9 +12536,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",
@@ -12487,7 +12553,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,
@@ -12670,6 +12736,10 @@ var Sidebar = ({
     () => creditBundles.filter((bundle) => bundle.count > 0),
     [creditBundles]
   );
+  const discountApplied = useMemo7(
+    () => promoCode && (amountOff > 0 || percentOff > 0),
+    [promoCode, amountOff, percentOff]
+  );
   const handleCheckout = useCallback8(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
@@ -12736,7 +12806,7 @@ var Sidebar = ({
           },
           []
         ),
-        skipTrial: !willTrialWithoutPaymentMethod,
+        skipTrial: !shouldTrial,
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
       });
@@ -12762,7 +12832,7 @@ var Sidebar = ({
     setLayout,
     payInAdvanceEntitlements,
     addOnUsageBasedEntitlements,
-    willTrialWithoutPaymentMethod,
+    shouldTrial,
     promoCode
   ]);
   const handleUnsubscribe = useCallback8(async () => {
@@ -12816,7 +12886,7 @@ var Sidebar = ({
         }
       },
       children: [
-        showHeader && /* @__PURE__ */ jsx13(
+        showHeader && /* @__PURE__ */ jsx14(
           Flex,
           {
             $position: "relative",
@@ -12828,7 +12898,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(
@@ -12845,7 +12915,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,
@@ -12859,8 +12929,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
@@ -12874,7 +12944,7 @@ var Sidebar = ({
                   }
                 ),
                 willPlanChange && /* @__PURE__ */ jsxs9(Box, { children: [
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     Box,
                     {
                       $width: "100%",
@@ -12882,7 +12952,7 @@ var Sidebar = ({
                       $opacity: "50%",
                       $marginBottom: "0.25rem",
                       $marginTop: "-0.25rem",
-                      children: /* @__PURE__ */ jsx13(
+                      children: /* @__PURE__ */ jsx14(
                         Icon3,
                         {
                           name: "arrow-down",
@@ -12901,8 +12971,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
@@ -12918,12 +12988,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",
@@ -12932,7 +13002,7 @@ var Sidebar = ({
                             $opacity: "0.625",
                             $textDecoration: "line-through",
                             $color: settings.theme.typography.heading4.color,
-                            children: /* @__PURE__ */ jsx13(
+                            children: /* @__PURE__ */ jsx14(
                               EntitlementRow,
                               {
                                 ...entitlement,
@@ -12953,7 +13023,7 @@ var Sidebar = ({
                     if (next2.feature?.name) {
                       acc.push(
                         /* @__PURE__ */ jsxs9(Box, { children: [
-                          /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx14(
                             Flex,
                             {
                               $justifyContent: "space-between",
@@ -12962,16 +13032,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)
@@ -12985,13 +13055,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,
@@ -13009,7 +13079,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,
                   {
@@ -13017,19 +13087,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,
@@ -13041,8 +13111,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: [
                             "/",
@@ -13063,8 +13133,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: [
                             "/",
@@ -13078,7 +13148,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;
@@ -13093,19 +13163,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
                               ) }) })
@@ -13119,7 +13189,7 @@ var Sidebar = ({
                   []
                 )
               ] }),
-              proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx13(
+              proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx14(
                 Proration,
                 {
                   charges,
@@ -13139,14 +13209,14 @@ var Sidebar = ({
             $width: "100%",
             $padding: "1.5rem",
             children: [
-              promoCode && /* @__PURE__ */ jsxs9(
+              discountApplied && /* @__PURE__ */ jsxs9(
                 Flex,
                 {
                   $justifyContent: "space-between",
                   $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,
                       {
@@ -13157,15 +13227,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",
@@ -13188,8 +13258,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
                     ) }) })
@@ -13203,13 +13273,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)
                     ] }) })
@@ -13223,11 +13293,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: [
                         "/",
@@ -13244,22 +13314,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,
@@ -13280,7 +13350,7 @@ var Sidebar = ({
                   willTrialWithoutPaymentMethod
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ jsx13(
+              layout === "unsubscribe" && /* @__PURE__ */ jsx14(
                 Button,
                 {
                   type: "button",
@@ -13290,8 +13360,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.` }) })
             ]
@@ -13303,13 +13373,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",
@@ -13352,12 +13422,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",
@@ -13369,7 +13439,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",
@@ -13383,7 +13453,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     overageInfo.featureName?.toLowerCase() || "unit"
                   ] }) })
                 ] }),
-                isAddOnCurrent && /* @__PURE__ */ jsx14(
+                isAddOnCurrent && /* @__PURE__ */ jsx15(
                   Flex,
                   {
                     $position: "absolute",
@@ -13392,7 +13462,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,
@@ -13403,7 +13473,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",
@@ -13415,7 +13485,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $fullWidth: true,
                   children: t2("Choose add-on")
                 }
-              ) : /* @__PURE__ */ jsx14(
+              ) : /* @__PURE__ */ jsx15(
                 Button,
                 {
                   type: "button",
@@ -13426,7 +13496,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")
                   ] })
                 }
@@ -13442,7 +13512,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,
@@ -13455,9 +13525,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,
         {
@@ -13466,7 +13536,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",
@@ -13488,7 +13558,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),
@@ -13505,11 +13575,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",
@@ -13533,16 +13603,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",
@@ -13572,7 +13642,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,
@@ -13584,7 +13654,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",
@@ -13593,7 +13663,7 @@ var Navigation = ({
               $display: "block"
             }
           },
-          children: index >= activeIndex ? /* @__PURE__ */ jsx17(
+          children: index >= activeIndex ? /* @__PURE__ */ jsx18(
             Box,
             {
               $width: `${20 / TEXT_BASE_SIZE}rem`,
@@ -13603,7 +13673,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",
@@ -13642,7 +13712,7 @@ var Navigation = ({
         }
       )
     ] }),
-    !isLast && /* @__PURE__ */ jsx17(
+    !isLast && /* @__PURE__ */ jsx18(
       Icon3,
       {
         name: "chevron-right",
@@ -13657,7 +13727,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();
@@ -13675,8 +13745,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,
@@ -13713,7 +13783,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",
@@ -13735,16 +13805,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",
@@ -13756,18 +13826,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",
@@ -13786,11 +13856,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,10 +13881,18 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = useState8(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const isTrialing = useMemo8(
-    () => isCheckoutData(data) && data.subscription?.status === "trialing",
-    [data]
-  );
+  const { isTrialing, showZeroPriceAsFree } = useMemo8(() => {
+    if (isCheckoutData(data)) {
+      return {
+        isTrialing: data.subscription?.status === "trialing",
+        showZeroPriceAsFree: data.showZeroPriceAsFree
+      };
+    }
+    return {
+      isTrialing: false,
+      showZeroPriceAsFree: false
+    };
+  }, [data]);
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = prev2[id] ? { ...prev2[id] } : void 0;
@@ -13834,7 +13912,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",
@@ -13848,8 +13926,9 @@ var Plan = ({
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
-        const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
-        const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? settings.theme.typography.heading3 : settings.theme.typography.heading2;
+        const isFreePlan = planPrice === 0;
+        const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
+        const headerPriceFontStyle = settings.theme.typography.heading2;
         const count = entitlementCounts[plan.id];
         const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
         return /* @__PURE__ */ jsxs14(
@@ -13883,20 +13962,20 @@ 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,
                           $size: headerPriceFontStyle.fontSize,
                           $weight: headerPriceFontStyle.fontWeight,
                           $color: headerPriceFontStyle.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs14(
+                      !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs14(
                         Text,
                         {
                           display: "heading2",
@@ -13908,7 +13987,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    credits.length > 0 && /* @__PURE__ */ jsx18(
+                    credits.length > 0 && /* @__PURE__ */ jsx19(
                       Flex,
                       {
                         $flexDirection: "column",
@@ -13916,7 +13995,7 @@ var Plan = ({
                         $flexGrow: 1,
                         $marginTop: "0.5rem",
                         children: credits.map((credit, creditIndex) => {
-                          return /* @__PURE__ */ jsx18(
+                          return /* @__PURE__ */ jsx19(
                             Flex,
                             {
                               $flexWrap: "wrap",
@@ -13924,7 +14003,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,
@@ -13933,7 +14012,7 @@ var Plan = ({
                                     rounded: true
                                   }
                                 ),
-                                /* @__PURE__ */ jsx18(
+                                /* @__PURE__ */ jsx19(
                                   Flex,
                                   {
                                     $flexDirection: "column",
@@ -13959,7 +14038,7 @@ var Plan = ({
                         })
                       }
                     ),
-                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ jsx18(
+                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ jsx19(
                       Flex,
                       {
                         $position: "absolute",
@@ -13968,7 +14047,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,
@@ -14001,7 +14080,7 @@ var Plan = ({
                           packageSize: entitlementPackageSize = 1
                         } = getEntitlementPrice(entitlement, planPeriod) || {};
                         const metricPeriodName = getMetricPeriodName(entitlement);
-                        return /* @__PURE__ */ jsx18(
+                        return /* @__PURE__ */ jsx19(
                           Flex,
                           {
                             $flexWrap: "wrap",
@@ -14009,7 +14088,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,
@@ -14025,7 +14104,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
@@ -14047,7 +14126,7 @@ var Plan = ({
                                         " ",
                                         planPeriod
                                       ] })
-                                    ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx18(
+                                    ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx19(
                                       TieredPricingDetails,
                                       {
                                         entitlement,
@@ -14084,51 +14163,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
                                         }
                                       )
                                     ] })
@@ -14148,14 +14235,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),
@@ -14175,7 +14262,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       PlanButtonGroup,
                       {
                         plan,
@@ -14198,13 +14285,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,
@@ -14232,8 +14319,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 }) })
                   ]
                 }
               ),
@@ -14244,7 +14331,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                   $gap: "0.5rem",
                   $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
                   children: [
-                    /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsx20(
                       Input,
                       {
                         $size: "lg",
@@ -14264,7 +14351,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsx20(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -14276,7 +14363,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") })
                   ]
                 }
               ),
@@ -14286,7 +14373,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
@@ -14296,7 +14383,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 },
@@ -14331,7 +14418,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(
@@ -14698,8 +14785,10 @@ var CheckoutDialog = ({ top = 0 }) => {
         },
         []
       );
-      setSelectedPlan(plan);
-      setUsageBasedEntitlements(entitlements);
+      if (plan.id !== selectedPlan?.id) {
+        setSelectedPlan(plan);
+        setUsageBasedEntitlements(entitlements);
+      }
       const updatedShouldTrial = updates.shouldTrial ?? shouldTrial;
       setShouldTrial(updatedShouldTrial);
       if (willTrialWithoutPaymentMethod) {
@@ -14725,6 +14814,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     },
     [
+      selectedPlan?.id,
       planPeriod,
       shouldTrial,
       willTrialWithoutPaymentMethod,
@@ -14871,7 +14961,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",
@@ -14881,7 +14971,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,
@@ -14940,7 +15030,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",
@@ -14949,9 +15039,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,
@@ -14963,7 +15053,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     ]
                   }
                 ),
-                isPending ? /* @__PURE__ */ jsx20(
+                isPending ? /* @__PURE__ */ jsx21(
                   Flex,
                   {
                     $width: "100%",
@@ -14971,9 +15061,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,
@@ -14984,7 +15074,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     shouldTrial,
                     showPeriodToggle
                   }
-                ) : checkoutStage === "usage" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "usage" ? /* @__PURE__ */ jsx21(
                   Usage,
                   {
                     isLoading,
@@ -14993,7 +15083,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: payInAdvanceEntitlements,
                     updateQuantity: updateUsageBasedEntitlementQuantity
                   }
-                ) : checkoutStage === "addons" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addons" ? /* @__PURE__ */ jsx21(
                   AddOns,
                   {
                     isLoading,
@@ -15001,7 +15091,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     addOns,
                     toggle: (id) => toggleAddOn(id)
                   }
-                ) : checkoutStage === "addonsUsage" ? /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addonsUsage" ? /* @__PURE__ */ jsx21(
                   Usage,
                   {
                     isLoading,
@@ -15010,14 +15100,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,
@@ -15028,7 +15118,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Sidebar,
             {
               planPeriod,
@@ -15062,32 +15152,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) {
@@ -15100,6 +15251,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"
@@ -15119,31 +15275,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,
@@ -15151,7 +15334,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 }) })
       ]
     }
   );
@@ -15159,7 +15342,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,
@@ -15179,7 +15362,7 @@ var PeriodToggle = ({
     }
     return 0;
   }, [selectedPlan]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Flex,
     {
       $margin: 0,
@@ -15195,7 +15378,7 @@ var PeriodToggle = ({
         }
       },
       children: options.map((option) => {
-        const element = /* @__PURE__ */ jsx23(
+        const element = /* @__PURE__ */ jsx24(
           Flex,
           {
             tabIndex: 0,
@@ -15215,7 +15398,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 },
@@ -15228,11 +15411,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
@@ -15253,7 +15436,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,
@@ -15261,6 +15444,7 @@ var PriceText = ({
   flatAmount = 0,
   perUnitPrice = 0
 }) => {
+  const { settings } = useEmbed();
   const text = useMemo11(() => {
     if (!flatAmount && perUnitPrice) {
       return /* @__PURE__ */ jsxs19(Fragment10, { children: [
@@ -15294,11 +15478,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,
@@ -15326,20 +15510,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(
@@ -15350,11 +15533,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,
@@ -15370,7 +15559,7 @@ var PricingTiersTooltip = ({
           );
         }) }),
         (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ jsxs20(Fragment11, { children: [
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             "hr",
             {
               style: {
@@ -15380,15 +15569,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"
+      ] })
     }
   );
 };
@@ -15449,7 +15636,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();
@@ -15494,7 +15681,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,
       {
@@ -15517,7 +15704,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"
@@ -15529,8 +15716,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",
@@ -15551,7 +15738,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Sidebar,
             {
               planPeriod,
@@ -15572,7 +15759,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();
@@ -15594,77 +15781,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",
@@ -15678,9 +15865,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,
@@ -15689,8 +15876,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." })
       ]
     }
   ) }) });
@@ -15699,7 +15886,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx28(Disabled, {});
+      return /* @__PURE__ */ jsx29(Disabled, {});
     default:
       return children;
   }
@@ -15724,7 +15911,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();
@@ -15752,22 +15939,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: {
@@ -15798,7 +15985,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Element,
     {
       as: Flex,
@@ -15806,7 +15993,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         Button,
         {
           as: "a",
@@ -15831,7 +16018,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,
@@ -15889,7 +16076,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),
@@ -15968,7 +16155,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)
       );
@@ -15984,7 +16171,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",
@@ -16028,9 +16215,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,
@@ -16038,8 +16226,7 @@ var UsageDetails = ({
               currency: billingPrice?.currency,
               priceTiers: billingPrice?.priceTier
             }
-          ),
-          /* @__PURE__ */ jsx31(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText })
+          )
         ] })
       ]
     }
@@ -16047,7 +16234,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: {
@@ -16131,7 +16318,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(
@@ -16155,7 +16342,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,
@@ -16164,7 +16351,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,
                         {
@@ -16182,7 +16369,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx32(
+                shouldShowDetails && /* @__PURE__ */ jsx33(
                   UsageDetails,
                   {
                     entitlement,
@@ -16196,14 +16383,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,
@@ -16221,7 +16408,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: {
@@ -16292,7 +16479,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,
       {
@@ -16302,8 +16489,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",
@@ -16316,12 +16503,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,
@@ -16335,18 +16522,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,
@@ -16358,7 +16545,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") })
     ] }) })
   ] });
 });
@@ -16368,14 +16555,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,
@@ -16392,7 +16579,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,
@@ -16449,14 +16636,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,
@@ -16467,7 +16654,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),
@@ -16507,7 +16694,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;
@@ -16536,7 +16723,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 {
@@ -16614,7 +16801,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       )
     );
   }, []);
-  const shouldShowFeatures = meteredFeatures.length > 0;
+  const shouldShowFeatures = meteredFeatures.length > 0 || creditGroups.length > 0;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -16629,7 +16816,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,
@@ -16651,8 +16838,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,
@@ -16661,7 +16848,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),
                               " "
@@ -16674,7 +16861,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                             " ",
                             t2("used")
                           ] }) }) }),
-                          props.allocation.isVisible && /* @__PURE__ */ jsx36(
+                          props.allocation.isVisible && /* @__PURE__ */ jsx37(
                             Limit,
                             {
                               entitlement,
@@ -16688,14 +16875,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",
@@ -16708,7 +16895,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,
@@ -16724,7 +16911,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,
@@ -16734,12 +16921,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,
@@ -16750,7 +16937,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   )]
                 }
               ),
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 Button,
                 {
                   type: "button",
@@ -16765,12 +16952,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)",
@@ -16778,19 +16965,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),
                             {
@@ -16803,7 +16990,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, {
@@ -16811,7 +16998,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,
@@ -16823,14 +17010,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),
                             {
@@ -16849,7 +17036,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
           }
         ),
         /* @__PURE__ */ jsxs29(Flex, { $gap: "0.25rem", children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             Icon3,
             {
               name: "chevron-down",
@@ -16860,7 +17047,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             Text,
             {
               onClick: () => toggleBalanceDetails(credit.id),
@@ -16880,24 +17067,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,
@@ -16964,8 +17151,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,
@@ -16976,8 +17163,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,
@@ -17022,21 +17209,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: () => {
@@ -17049,7 +17236,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           Icon3,
           {
             tabIndex: 0,
@@ -17071,7 +17258,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: {
@@ -17112,7 +17299,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,
@@ -17281,7 +17468,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: {
@@ -17421,7 +17608,7 @@ var PaymentMethodDetails = ({
     initializePaymentMethod
   ]);
   return /* @__PURE__ */ jsxs31(Flex, { $position: "relative", children: [
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       Flex,
       {
         $position: "absolute",
@@ -17430,7 +17617,7 @@ var PaymentMethodDetails = ({
         $alignItems: "center",
         $width: "100%",
         $height: "100%",
-        children: /* @__PURE__ */ jsx39(
+        children: /* @__PURE__ */ jsx40(
           Loader,
           {
             $color: settings.theme.primary,
@@ -17483,7 +17670,7 @@ var PaymentMethodDetails = ({
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
               children: [
-                /* @__PURE__ */ jsx39(
+                /* @__PURE__ */ jsx40(
                   PaymentForm,
                   {
                     onConfirm: async (paymentMethodId) => {
@@ -17493,7 +17680,7 @@ var PaymentMethodDetails = ({
                     }
                   }
                 ),
-                currentPaymentMethod && /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
+                currentPaymentMethod && /* @__PURE__ */ jsx40(Box, { children: /* @__PURE__ */ jsx40(
                   Text,
                   {
                     onClick: focusExistingPaymentMethods,
@@ -17507,7 +17694,7 @@ var PaymentMethodDetails = ({
               ]
             }
           ) : /* @__PURE__ */ jsxs31(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               PaymentMethodElement,
               {
                 paymentMethod: currentPaymentMethod,
@@ -17516,7 +17703,7 @@ var PaymentMethodDetails = ({
               }
             ),
             paymentMethods.length > 0 && /* @__PURE__ */ jsxs31(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 Text,
                 {
                   onClick: toggleShowPaymentMethods,
@@ -17527,7 +17714,7 @@ var PaymentMethodDetails = ({
                   children: t2("Choose different payment method")
                 }
               ),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 Icon3,
                 {
                   name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down"
@@ -17535,9 +17722,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,
@@ -17546,7 +17733,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod.id
               )) }),
-              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx39(
+              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx40(
                 Button,
                 {
                   type: "button",
@@ -17558,7 +17745,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 }) })
         ]
       }
     )
@@ -17569,7 +17756,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,
@@ -17579,10 +17766,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)}` })
         ] })
       ]
     }
@@ -17591,7 +17778,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,
@@ -17613,7 +17800,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"),
@@ -17685,13 +17872,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 },
@@ -17700,8 +17887,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,
@@ -17709,14 +17903,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)
-              ] })
-            ] })
+            )
           ] })
         ] })
       ]
@@ -17725,7 +17912,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: {
@@ -17769,6 +17956,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     canCheckout,
     defaultPlan,
     featureUsage,
+    showZeroPriceAsFree,
     trialPaymentMethodRequired
   } = useMemo23(() => {
     if (isCheckoutData(data)) {
@@ -17779,6 +17967,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         capabilities,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2,
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
       const creditGroups2 = groupCreditGrants(creditGrants, {
@@ -17808,6 +17997,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2?.features || [],
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       };
     }
@@ -17820,6 +18010,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       canCheckout: false,
       defaultPlan: void 0,
       featureUsage: [],
+      showZeroPriceAsFree: false,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -17844,7 +18035,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
-  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const isFreePlan = currentPlan?.planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && usageBasedEntitlements.length > 0;
   return /* @__PURE__ */ jsxs34(Fragment20, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs34(
       Notice,
@@ -17856,8 +18048,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
@@ -17874,8 +18066,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",
@@ -17910,21 +18102,21 @@ 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,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                      children: isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx42(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
+                  !isFreePlan && /* @__PURE__ */ jsx43(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -17933,7 +18125,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),
@@ -17941,7 +18133,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,
@@ -17952,7 +18144,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),
@@ -17960,8 +18152,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,
@@ -17973,7 +18165,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }) })
           ] }),
           props.addOns.isVisible && creditGroups.plan.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),
@@ -17981,7 +18173,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Credits in plan")
               }
             ),
-            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
               return /* @__PURE__ */ jsxs34(
                 Flex,
                 {
@@ -18021,7 +18213,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }) })
           ] }),
           props.addOns.isVisible && creditGroups.bundles.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),
@@ -18029,7 +18221,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Credit bundles")
               }
             ),
-            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+            /* @__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,
@@ -18077,7 +18269,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }) })
           ] }),
           props.addOns.isVisible && creditGroups.promotional.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),
@@ -18085,7 +18277,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Promotional credits")
               }
             ),
-            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
               return /* @__PURE__ */ jsxs34(
                 Flex,
                 {
@@ -18118,7 +18310,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               );
             }) })
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx42(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx43(
             Button,
             {
               type: "button",
@@ -18153,7 +18345,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();
@@ -18196,16 +18388,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",
@@ -18214,7 +18406,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,
@@ -18233,7 +18425,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",
@@ -18242,7 +18434,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",
@@ -18250,7 +18442,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,
@@ -18260,7 +18452,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: [
@@ -18278,7 +18470,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,
@@ -18294,7 +18486,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   })
                 }
               ),
-              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx43(
+              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx44(
                 Button,
                 {
                   type: "button",
@@ -18335,7 +18527,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,
@@ -18357,7 +18549,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,
@@ -18368,7 +18560,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"),
@@ -18384,7 +18576,7 @@ var Entitlement = ({
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx44(
+        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx45(
           TieredPricingDetails,
           {
             entitlement,
@@ -18405,49 +18597,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,
@@ -18460,7 +18660,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,
@@ -18481,7 +18681,8 @@ var Plan2 = ({
     isTrialSubscription,
     willSubscriptionCancel,
     isStandalone,
-    showCallToAction
+    showCallToAction,
+    showZeroPriceAsFree
   } = useMemo25(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
@@ -18493,7 +18694,8 @@ var Plan2 = ({
         isTrialSubscription: isTrialSubscription2,
         willSubscriptionCancel: willSubscriptionCancel2,
         isStandalone: false,
-        showCallToAction: true
+        showCallToAction: true,
+        showZeroPriceAsFree: data.showZeroPriceAsFree
       };
     }
     return {
@@ -18502,7 +18704,8 @@ var Plan2 = ({
       isTrialSubscription: false,
       willSubscriptionCancel: false,
       isStandalone: true,
-      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function"
+      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function",
+      showZeroPriceAsFree: false
     };
   }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const callToActionTarget = useMemo25(() => {
@@ -18530,8 +18733,9 @@ var Plan2 = ({
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (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 isFreePlan = planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
+  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(
@@ -18562,9 +18766,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,
@@ -18572,15 +18776,15 @@ var Plan2 = ({
                   $weight: headerPriceFontStyle.fontWeight,
                   $color: headerPriceFontStyle.color,
                   children: [
-                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs37("sub", { children: [
+                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency),
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs37("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
                   ]
                 }
               ) }),
-              credits.length > 0 && /* @__PURE__ */ jsx45(
+              credits.length > 0 && /* @__PURE__ */ jsx46(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -18589,7 +18793,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,
@@ -18598,7 +18802,7 @@ var Plan2 = ({
                           rounded: true
                         }
                       ),
-                      credit.name && /* @__PURE__ */ jsx45(
+                      credit.name && /* @__PURE__ */ jsx46(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -18621,7 +18825,7 @@ var Plan2 = ({
                   })
                 }
               ),
-              isActivePlan && /* @__PURE__ */ jsx45(
+              isActivePlan && /* @__PURE__ */ jsx46(
                 Flex,
                 {
                   $position: "absolute",
@@ -18630,7 +18834,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,
@@ -18653,10 +18857,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,
@@ -18673,14 +18877,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),
@@ -18708,7 +18912,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ jsx45(
+                    /* @__PURE__ */ jsx46(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -18716,10 +18920,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",
@@ -18756,11 +18960,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")
                 }
@@ -18774,7 +18978,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,
@@ -18878,7 +19082,7 @@ var PricingTable = forwardRef12(
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
     if (isPending) {
-      return /* @__PURE__ */ jsx46(
+      return /* @__PURE__ */ jsx47(
         Flex,
         {
           $width: "100%",
@@ -18886,12 +19090,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,
@@ -18916,7 +19120,7 @@ var PricingTable = forwardRef12(
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx46(
+                  /* @__PURE__ */ jsx47(
                     Text,
                     {
                       display: props.header.fontStyle,
@@ -18924,7 +19128,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,
@@ -18939,7 +19143,7 @@ var PricingTable = forwardRef12(
                 ]
               }
             ),
-            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx46(
+            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx47(
               Box,
               {
                 $display: "grid",
@@ -18947,7 +19151,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,
@@ -18969,14 +19173,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,
@@ -18986,7 +19190,7 @@ var PricingTable = forwardRef12(
                 )
               }
             ),
-            /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsx47(
               Box,
               {
                 $display: "grid",
@@ -18994,7 +19198,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,
@@ -19021,7 +19225,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: {
@@ -19033,7 +19237,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,
@@ -19047,7 +19251,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",
@@ -19083,7 +19287,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     Element,
     {
       as: Flex,
@@ -19091,7 +19295,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsx49(
         Button,
         {
           type: "button",
@@ -19113,7 +19317,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: {
@@ -19189,7 +19393,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
     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,
       {
@@ -19199,8 +19403,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",
@@ -19213,7 +19417,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,
         " ",
@@ -19226,11 +19430,11 @@ 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") }) })
           ]
         }
       ),
@@ -19242,8 +19446,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ jsx49(Text, { $weight: 600, children: t2("Remaining balance") }),
-            /* @__PURE__ */ jsx49(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx49(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+            /* @__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)) })
           ]
         }
       ),
@@ -19254,8 +19458,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",
@@ -19271,7 +19475,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ jsx49(
+                              discount.customerFacingCode && /* @__PURE__ */ jsx50(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -19280,7 +19484,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,
@@ -19290,7 +19494,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(
@@ -19314,7 +19518,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";
@@ -23574,10 +23778,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%",
@@ -23585,7 +23789,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" })
     }
   );
 };
@@ -23602,14 +23806,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,
@@ -23656,13 +23860,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_".'
@@ -23670,9 +23874,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,