@schematichq/schematic-components 1.7.1 → 1.9.0

package/dist/schematic-components.cjs.js

@@ -1919,7 +1919,7 @@ var HOURS_IN_MS = MINUTES_IN_MS * 60;
 var DAYS_IN_MS = HOURS_IN_MS * 24;
 
 // src/const/debounce.ts
-var DEBOUNCE_SETTINGS = {
+var LEADING_DEBOUNCE_SETTINGS = {
   leading: true,
   trailing: false
 };
@@ -2159,6 +2159,8 @@ function getUsageDetails(entitlement, period) {
     limit = entitlement.allocation;
   } else if (entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlement.softLimit === "number") {
     limit = entitlement.softLimit;
+  } else if (entitlement.priceBehavior === "credit_burndown" /* Credit */ && typeof entitlement.creditTotal === "number" && typeof entitlement.creditConsumptionRate === "number") {
+    limit = entitlement.creditTotal / entitlement.creditConsumptionRate;
   }
   let amount;
   if (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof entitlement.allocation === "number") {
@@ -2167,6 +2169,8 @@ function getUsageDetails(entitlement, period) {
     amount = entitlement.usage;
   } else if (entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlement.usage === "number" && typeof entitlement.softLimit === "number") {
     amount = Math.max(0, entitlement.usage - entitlement.softLimit);
+  } else if (entitlement.priceBehavior === "credit_burndown" /* Credit */ && typeof entitlement.creditUsed === "number" && typeof entitlement.creditConsumptionRate === "number") {
+    amount = entitlement.creditUsed / entitlement.creditConsumptionRate;
   }
   const cost = getEntitlementCost(entitlement, period);
   const tiers = billingPrice?.priceTier || [];
@@ -2198,6 +2202,36 @@ function getUsageDetails(entitlement, period) {
   }
   return { billingPrice, limit, amount, cost, currentTier };
 }
+function getCreditBasedEntitlementLimit(entitlement, credits) {
+  const matchedCredit = credits.find(
+    (credit) => credit.id === entitlement.valueCredit?.id
+  );
+  if (matchedCredit && entitlement.consumptionRate) {
+    return {
+      limit: Math.floor(matchedCredit.quantity / entitlement.consumptionRate),
+      period: matchedCredit.period
+    };
+  }
+}
+function extractCurrentUsageBasedEntitlements(features = [], planPeriod) {
+  return features.reduce((acc, entitlement) => {
+    if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
+      const allocation = entitlement.allocation || 0;
+      const usage = entitlement.usage || 0;
+      const quantity = allocation ?? usage;
+      acc.push({
+        ...entitlement,
+        allocation,
+        usage,
+        quantity
+      });
+    }
+    return acc;
+  }, []);
+}
+function getEntitlementFeatureName(entitlement, defaultValue) {
+  return entitlement.feature?.pluralName || entitlement.feature?.name || entitlement.featureName || defaultValue || "";
+}
 
 // src/utils/pluralize.ts
 var pluralRules = [];
@@ -4777,7 +4811,12 @@ var Translator = class _Translator extends EventEmitter {
     };
     if (key == null) return false;
     const resolved = this.resolve(key, opt);
-    return resolved?.res !== void 0;
+    if (resolved?.res === void 0) return false;
+    const isObject2 = shouldHandleAsObject(resolved.res);
+    if (opt.returnObjects === false && isObject2) {
+      return false;
+    }
+    return true;
   }
   extractFromKey(key, opt) {
     let nsSeparator = opt.nsSeparator !== void 0 ? opt.nsSeparator : this.options.nsSeparator;
@@ -6787,6 +6826,7 @@ var en_default = {
     "An unknown error occurred.": "An unknown error occurred.",
     Billed: "Billed {{period}}",
     "Cancel subscription": "Cancel subscription",
+    "Cannot change to this plan.": "{{reason, list(style: 'long'; type: 'disjunction';)}} usage is over the limit.",
     "Cannot downgrade entitlement": "Cannot downgrade to a quantity lower than current usage.",
     "Card ending in": "\u{1F4B3} Card ending in {{value}}",
     "Change add-on": "Change add-on",
@@ -6840,7 +6880,7 @@ var en_default = {
     "One time ": "One time",
     "Optionally add features to your subscription": "Optionally add features to your subscription",
     "Other existing payment method": "Other existing payment method",
-    "Over usage limit": "Over usage limit",
+    "Over plan limit": "Over plan limit",
     "Pay-in-advance features require a quantity.": "Pay-in-advance features require a quantity.",
     "Pay now": "Pay now",
     "Payment Method": "Payment Method",
@@ -6895,6 +6935,8 @@ var en_default = {
     "Unsubscribe failed": "Unsubscribe failed",
     Unsubscribe: "Unsubscribe",
     "Unused time": "Unused time",
+    "Up to X units": "Up to {{amount}} {{units}}",
+    "Up to X units per period": "Up to {{amount}} {{units}} per {{period}}",
     "Up to a limit of": "Up to a limit of {{amount}} {{units}}",
     "Up to X units at $Y/unit": "Up to {{X}} {{units}} at {{Y}} per {{unit}}",
     "Up to X units at $Y/unit + $Z/period": "Up to {{X}} {{units}} at {{Y}} per {{unit}} plus {{Z}} per {{period}}",
@@ -8094,6 +8136,85 @@ function EntityTraitDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/TraitDefinition.ts
+function TraitDefinitionFromJSON(json) {
+  return TraitDefinitionFromJSONTyped(json, false);
+}
+function TraitDefinitionFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    comparableType: json["comparable_type"],
+    entityType: json["entity_type"],
+    id: json["id"]
+  };
+}
+
+// src/api/checkoutexternal/models/Condition.ts
+function ConditionFromJSON(json) {
+  return ConditionFromJSONTyped(json, false);
+}
+function ConditionFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    comparisonTraitDefinition: json["comparison_trait_definition"] == null ? void 0 : TraitDefinitionFromJSON(json["comparison_trait_definition"]),
+    conditionType: json["condition_type"],
+    consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
+    creditId: json["credit_id"] == null ? void 0 : json["credit_id"],
+    environmentId: json["environment_id"],
+    eventSubtype: json["event_subtype"] == null ? void 0 : json["event_subtype"],
+    id: json["id"],
+    metricPeriod: json["metric_period"] == null ? void 0 : json["metric_period"],
+    metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : json["metric_period_month_reset"],
+    metricValue: json["metric_value"] == null ? void 0 : json["metric_value"],
+    operator: json["operator"],
+    resourceIds: json["resource_ids"],
+    traitDefinition: json["trait_definition"] == null ? void 0 : TraitDefinitionFromJSON(json["trait_definition"]),
+    traitValue: json["trait_value"]
+  };
+}
+
+// src/api/checkoutexternal/models/ConditionGroup.ts
+function ConditionGroupFromJSON(json) {
+  return ConditionGroupFromJSONTyped(json, false);
+}
+function ConditionGroupFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    conditions: json["conditions"].map(ConditionFromJSON)
+  };
+}
+
+// src/api/checkoutexternal/models/Rule.ts
+function RuleFromJSON(json) {
+  return RuleFromJSONTyped(json, false);
+}
+function RuleFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    conditionGroups: json["condition_groups"].map(
+      ConditionGroupFromJSON
+    ),
+    conditions: json["conditions"].map(ConditionFromJSON),
+    environmentId: json["environment_id"],
+    flagId: json["flag_id"] == null ? void 0 : json["flag_id"],
+    id: json["id"],
+    name: json["name"],
+    priority: json["priority"],
+    ruleType: json["rule_type"],
+    value: json["value"]
+  };
+}
+
 // src/api/checkoutexternal/models/GenericPreviewObject.ts
 function GenericPreviewObjectFromJSON(json) {
   return GenericPreviewObjectFromJSONTyped(json, false);
@@ -8146,6 +8267,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     plan: json["plan"] == null ? void 0 : CompanyPlanWithBillingSubViewFromJSON(json["plan"]),
     plans: json["plans"].map(GenericPreviewObjectFromJSON),
+    rules: json["rules"].map(RuleFromJSON),
     traits: json["traits"] == null ? void 0 : json["traits"],
     updatedAt: new Date(json["updated_at"]),
     userCount: json["user_count"]
@@ -8560,14 +8682,20 @@ function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     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"],
+    effectiveLimit: json["effective_limit"] == null ? void 0 : json["effective_limit"],
+    effectivePrice: json["effective_price"] == null ? void 0 : json["effective_price"],
     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"]),
+    hasValidAllocation: json["has_valid_allocation"] == null ? void 0 : json["has_valid_allocation"],
+    isUnlimited: json["is_unlimited"] == null ? void 0 : json["is_unlimited"],
     metricResetAt: json["metric_reset_at"] == null ? void 0 : new Date(json["metric_reset_at"]),
     monthReset: json["month_reset"] == null ? void 0 : json["month_reset"],
     monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
+    overuse: json["overuse"] == null ? void 0 : json["overuse"],
+    percentUsed: json["percent_used"] == null ? void 0 : json["percent_used"],
     period: json["period"] == null ? void 0 : json["period"],
     plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
     planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
@@ -10648,7 +10776,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.7.1",
+      "X-Schematic-Components-Version": "1.9.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10690,7 +10818,11 @@ var EmbedProvider = ({
     }
   }, [api.public]);
   const debouncedHydratePublic = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      hydratePublic,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [hydratePublic]
   );
   const hydrate = (0, import_react12.useCallback)(async () => {
@@ -10712,7 +10844,7 @@ var EmbedProvider = ({
     }
   }, [api.checkout]);
   const debouncedHydrate = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [hydrate]
   );
   const hydrateComponent = (0, import_react12.useCallback)(
@@ -10739,7 +10871,11 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedHydrateComponent = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      hydrateComponent,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [hydrateComponent]
   );
   const hydrateExternal = (0, import_react12.useCallback)(async function(fn) {
@@ -10759,14 +10895,22 @@ var EmbedProvider = ({
     }
   }, []);
   const debouncedHydrateExternal = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      hydrateExternal,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [hydrateExternal]
   );
   const createSetupIntent = (0, import_react12.useCallback)(async () => {
     return api.checkout?.createSetupIntent();
   }, [api.checkout]);
   const debouncedCreateSetupIntent = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      createSetupIntent,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [createSetupIntent]
   );
   const updatePaymentMethod = (0, import_react12.useCallback)(
@@ -10785,7 +10929,11 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedUpdatePaymentMethod = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      updatePaymentMethod,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [updatePaymentMethod]
   );
   const deletePaymentMethod = (0, import_react12.useCallback)(
@@ -10804,7 +10952,11 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedDeletePaymentMethod = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      deletePaymentMethod,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [deletePaymentMethod]
   );
   const checkout = (0, import_react12.useCallback)(
@@ -10823,7 +10975,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedCheckout = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [checkout]
   );
   const previewCheckout = (0, import_react12.useCallback)(
@@ -10832,15 +10984,6 @@ var EmbedProvider = ({
     },
     [api.checkout]
   );
-  const debouncedPreviewCheckout = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, {
-      // invoke immediately for minimal latency
-      leading: true,
-      // but also ensure latest data is fetched
-      trailing: true
-    }),
-    [previewCheckout]
-  );
   const unsubscribe = (0, import_react12.useCallback)(async () => {
     const response = await api.checkout?.checkoutUnsubscribe();
     if (response) {
@@ -10852,7 +10995,7 @@ var EmbedProvider = ({
     return response;
   }, [api.checkout]);
   const debouncedUnsubscribe = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [unsubscribe]
   );
   const getUpcomingInvoice = (0, import_react12.useCallback)(
@@ -10864,21 +11007,29 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedGetUpcomingInvoice = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      getUpcomingInvoice,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [getUpcomingInvoice]
   );
   const getCustomerBalance = (0, import_react12.useCallback)(async () => {
     return api.checkout?.fetchCustomerBalance();
   }, [api.checkout]);
   const debouncedGetCustomerBalance = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(getCustomerBalance, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      getCustomerBalance,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [getCustomerBalance]
   );
   const listInvoices = (0, import_react12.useCallback)(async () => {
     return api.checkout?.listInvoices();
   }, [api.checkout]);
   const debouncedListInvoices = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [listInvoices]
   );
   const setError = (0, import_react12.useCallback)(
@@ -11018,7 +11169,7 @@ var EmbedProvider = ({
         updatePaymentMethod: debouncedUpdatePaymentMethod,
         deletePaymentMethod: debouncedDeletePaymentMethod,
         checkout: debouncedCheckout,
-        previewCheckout: debouncedPreviewCheckout,
+        previewCheckout,
         unsubscribe: debouncedUnsubscribe,
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
         getCustomerBalance: debouncedGetCustomerBalance,
@@ -12859,21 +13010,9 @@ var Sidebar = ({
         currentPlan: data.company?.plan,
         currentAddOns: data.company?.addOns || [],
         currentEntitlements: currentEntitlements2,
-        currentUsageBasedEntitlements: currentEntitlements2.reduce(
-          (acc, entitlement) => {
-            if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
-              const allocation = entitlement.allocation || 0;
-              const usage = entitlement.usage || 0;
-              acc.push({
-                ...entitlement,
-                allocation,
-                usage,
-                quantity: allocation ?? usage
-              });
-            }
-            return acc;
-          },
-          []
+        currentUsageBasedEntitlements: extractCurrentUsageBasedEntitlements(
+          data.featureUsage?.features,
+          planPeriod
         ),
         billingSubscription: data.company?.billingSubscription,
         paymentMethod: data.subscription?.paymentMethod,
@@ -13688,9 +13827,53 @@ var Sidebar = ({
 
 // src/components/shared/checkout-dialog/AddOns.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+function renderMeteredEntitlementPricing({
+  priceBehavior,
+  softLimit,
+  price,
+  currency,
+  packageSize,
+  feature,
+  featureName,
+  isTiered
+}) {
+  if (priceBehavior === "overage" /* Overage */ && softLimit) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      "Additional: ",
+      formatCurrency(price, currency),
+      "/",
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      formatCurrency(price, currency),
+      "/",
+      packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        packageSize,
+        " "
+      ] }),
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (isTiered) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "Tier-based pricing" });
+  }
+  return null;
+}
+function shouldShowUsageBased(price, displayableEntitlements) {
+  return price < 0.01 && displayableEntitlements.some((ent) => !ent.isUnlimited);
+}
 var AddOns = ({ addOns, toggle, isLoading, period }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
+  const isLightBackground = useIsLightBackground();
   const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -13703,29 +13886,40 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
         const { price, currency } = getAddOnPrice(addOn, period) || {};
         const isAddOnValid = isHydratedPlan(addOn) && addOn.valid;
         const isAddOnCurrent = isHydratedPlan(addOn) && addOn.current;
-        const overageEntitlement = addOn.entitlements?.find(
-          (entitlement) => entitlement.priceBehavior === "overage" /* Overage */
-        );
-        let overageInfo = null;
-        if (overageEntitlement) {
-          const priceData = period === "year" ? overageEntitlement.meteredYearlyPrice : overageEntitlement.meteredMonthlyPrice;
-          if (priceData?.priceTier && priceData.priceTier.length >= 2) {
-            const overageTier = priceData.priceTier[priceData.priceTier.length - 1];
-            overageInfo = {
-              softLimit: overageEntitlement.softLimit,
-              perUnitPrice: overageTier.perUnitPriceDecimal ? Number(overageTier.perUnitPriceDecimal) : overageTier.perUnitPrice || 0,
-              currency: priceData.currency || currency,
-              featureName: overageEntitlement.feature?.name
+        const displayableEntitlements = addOn.entitlements?.filter(
+          (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
+            "pay_as_you_go" /* PayAsYouGo */,
+            "pay_in_advance" /* PayInAdvance */,
+            "overage" /* Overage */,
+            "tier" /* Tiered */
+          ].includes(entitlement.priceBehavior)
+        ).map((entitlement) => {
+          if (entitlement.valueType === "unlimited" && !entitlement.priceBehavior) {
+            return {
+              isUnlimited: true,
+              featureName: entitlement.feature?.name,
+              feature: entitlement.feature
             };
           }
-        }
+          const priceData = getEntitlementPrice(entitlement, period);
+          return {
+            isUnlimited: false,
+            priceBehavior: entitlement.priceBehavior,
+            softLimit: entitlement.softLimit,
+            price: priceData?.price ?? 0,
+            currency: priceData?.currency || currency,
+            featureName: entitlement.feature?.name,
+            feature: entitlement.feature,
+            packageSize: priceData?.packageSize ?? 1,
+            isTiered: entitlement.priceBehavior === "tier" /* Tiered */
+          };
+        }) || [];
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           Flex,
           {
             $position: "relative",
             $flexDirection: "column",
-            $gap: "2rem",
-            $padding: `${cardPadding}rem`,
+            $padding: `${0.75 * cardPadding}rem 0`,
             $backgroundColor: settings.theme.card.background,
             $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
             $outlineWidth: "2px",
@@ -13735,86 +13929,180 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
               $boxShadow: cardBoxShadow
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading3", children: addOn.name }) }),
-                addOn.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: addOn.description }) }),
-                (addOn[periodKey] || addOn.chargeType === ChargeType.oneTime) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      Text,
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "0.75rem",
+                  $padding: `0 ${cardPadding}rem ${displayableEntitlements.length > 0 ? 0.75 * cardPadding : 0}rem`,
+                  $borderWidth: "0",
+                  $borderBottomWidth: displayableEntitlements.length > 0 ? "1px" : "0",
+                  $borderStyle: "solid",
+                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading3", children: addOn.name }) }),
+                    addOn.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: addOn.description }) }),
+                    (addOn[periodKey] || addOn.chargeType === ChargeType.oneTime) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: shouldShowUsageBased(price ?? 0, displayableEntitlements) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading2", children: t2("Usage-based") }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        Text,
+                        {
+                          display: "heading2",
+                          $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
+                          children: addOn.chargeType === ChargeType.oneTime ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                            " ",
+                            t2("one time")
+                          ] }) : `/${period}`
+                        }
+                      )
+                    ] }) }),
+                    isAddOnCurrent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Flex,
                       {
-                        display: "heading2",
-                        $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
-                        children: addOn.chargeType === ChargeType.oneTime ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-                          " ",
-                          t2("one time")
-                        ] }) : `/${period}`
+                        $position: "absolute",
+                        $right: "1rem",
+                        $top: "1rem",
+                        $backgroundColor: settings.theme.primary,
+                        $borderRadius: "9999px",
+                        $padding: "0.125rem 0.85rem",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                          Text,
+                          {
+                            $size: 0.75 * settings.theme.typography.text.fontSize,
+                            $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                            children: t2("Active")
+                          }
+                        )
                       }
                     )
-                  ] }),
-                  overageInfo && overageInfo.softLimit && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text, { $size: 0.875, style: { opacity: 0.8 }, children: [
-                    overageInfo.softLimit,
-                    " ",
-                    overageInfo.featureName || "units",
-                    " included, then",
-                    " ",
-                    formatCurrency(
-                      overageInfo.perUnitPrice,
-                      overageInfo.currency
-                    ),
-                    "/",
-                    overageInfo.featureName?.toLowerCase() || "unit"
-                  ] }) })
-                ] }),
-                isAddOnCurrent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  Flex,
-                  {
-                    $position: "absolute",
-                    $right: "1rem",
-                    $top: "1rem",
-                    $backgroundColor: settings.theme.primary,
-                    $borderRadius: "9999px",
-                    $padding: "0.125rem 0.85rem",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      Text,
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $justifyContent: "end",
+                  $flexGrow: 1,
+                  $gap: `${cardPadding}rem`,
+                  $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
+                  children: [
+                    displayableEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: displayableEntitlements.map((entitlement, idx) => {
+                      if (entitlement.isUnlimited) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                          Flex,
+                          {
+                            $flexWrap: "wrap",
+                            $justifyContent: "space-between",
+                            $alignItems: "center",
+                            $gap: "1rem",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $gap: "1rem", children: [
+                                entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                  Icon3,
+                                  {
+                                    name: entitlement.feature.icon,
+                                    color: settings.theme.primary,
+                                    background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                                    rounded: true
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                  Flex,
+                                  {
+                                    $flexDirection: "column",
+                                    $justifyContent: "center",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: entitlement.feature?.pluralName || entitlement.feature?.name || entitlement.featureName })
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                Text,
+                                {
+                                  style: { opacity: 0.54 },
+                                  $size: 0.875 * settings.theme.typography.text.fontSize,
+                                  $color: settings.theme.typography.text.color,
+                                  children: "Unlimited"
+                                }
+                              )
+                            ]
+                          },
+                          idx
+                        );
+                      }
+                      const meteredEntitlement = entitlement;
+                      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                        Flex,
+                        {
+                          $flexWrap: "wrap",
+                          $justifyContent: "space-between",
+                          $alignItems: "center",
+                          $gap: "1rem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $gap: "1rem", children: [
+                              meteredEntitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                Icon3,
+                                {
+                                  name: meteredEntitlement.feature.icon,
+                                  color: settings.theme.primary,
+                                  background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                                  rounded: true
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $justifyContent: "center",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: meteredEntitlement.priceBehavior === "overage" /* Overage */ && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) })
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                              Text,
+                              {
+                                style: { opacity: 0.54 },
+                                $size: 0.875 * settings.theme.typography.text.fontSize,
+                                $color: settings.theme.typography.text.color,
+                                children: renderMeteredEntitlementPricing(meteredEntitlement)
+                              }
+                            )
+                          ]
+                        },
+                        idx
+                      );
+                    }) }),
+                    !addOn.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Button,
                       {
-                        $size: 0.75 * settings.theme.typography.text.fontSize,
-                        $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                        children: t2("Active")
+                        type: "button",
+                        disabled: isLoading || !isAddOnValid,
+                        onClick: () => toggle(addOn.id),
+                        $size: "sm",
+                        $color: "primary",
+                        $variant: "outline",
+                        $fullWidth: true,
+                        children: t2("Choose add-on")
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Button,
+                      {
+                        type: "button",
+                        disabled: isLoading || !isAddOnValid,
+                        onClick: () => toggle(addOn.id),
+                        $size: "sm",
+                        $color: isAddOnCurrent ? "danger" : "primary",
+                        $variant: isAddOnCurrent ? "ghost" : "text",
+                        $fullWidth: true,
+                        children: isAddOnCurrent ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon3, { name: "check-rounded", size: "sm" }),
+                          t2("Selected")
+                        ] })
                       }
                     )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                Button,
-                {
-                  type: "button",
-                  disabled: isLoading || !isAddOnValid,
-                  onClick: () => toggle(addOn.id),
-                  $size: "sm",
-                  $color: "primary",
-                  $variant: "outline",
-                  $fullWidth: true,
-                  children: t2("Choose add-on")
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                Button,
-                {
-                  type: "button",
-                  disabled: isLoading || !isAddOnValid,
-                  onClick: () => toggle(addOn.id),
-                  $size: "sm",
-                  $color: isAddOnCurrent ? "danger" : "primary",
-                  $variant: isAddOnCurrent ? "ghost" : "text",
-                  $fullWidth: true,
-                  children: isAddOnCurrent ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon3, { name: "check-rounded", size: "sm" }),
-                    t2("Selected")
-                  ] })
+                  ]
                 }
-              ) })
+              )
             ]
           },
           index
@@ -14052,6 +14340,13 @@ var Navigation = ({
 
 // src/components/shared/checkout-dialog/Plan.tsx
 var import_react30 = require("react");
+
+// src/components/shared/checkout-dialog/styles.ts
+var FlexWithAlignEnd = dt(Flex)`
+  align-items: end;
+`;
+
+// src/components/shared/checkout-dialog/Plan.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
@@ -14092,104 +14387,96 @@ var PlanButtonGroup = ({
 }) => {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const { isCurrentPlan, isValidPlan, isTrialing } = (0, import_react30.useMemo)(() => {
+  const isTrialing = (0, import_react30.useMemo)(() => {
+    return isCheckoutData(data) && data.subscription?.status === "trialing" || false;
+  }, [data]);
+  const { isCurrentPlan, isValidPlan } = (0, import_react30.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         isCurrentPlan: data.company?.plan?.id === plan.id,
-        isValidPlan: isHydratedPlan(plan) && plan.valid,
-        isTrialing: data.subscription?.status === "trialing"
+        isValidPlan: isHydratedPlan(plan) && plan.valid
       };
     }
     return {
       isCurrentPlan: false,
-      isValidPlan: true,
-      isTrialing: false
+      isValidPlan: true
     };
   }, [data, plan]);
   if (isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      !isTrialing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: isSelected && shouldTrial ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        Button,
-        {
-          type: "button",
-          disabled: (isLoading || !isValidPlan) && !plan.custom,
-          ...plan.custom ? {
-            as: "a",
-            href: plan.customPlanConfig?.ctaWebSite ?? "#",
-            target: "_blank",
-            rel: "noreferrer"
-          } : {
+      !isTrialing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: isSelected && shouldTrial ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Button,
+          {
+            type: "button",
+            disabled: (isLoading || !isValidPlan) && !plan.custom,
+            ...plan.custom ? {
+              as: "a",
+              href: plan.customPlanConfig?.ctaWebSite ?? "#",
+              target: "_blank",
+              rel: "noreferrer"
+            } : {
+              onClick: () => {
+                onSelect({
+                  plan,
+                  shouldTrial: true
+                });
+              }
+            },
+            $size: "sm",
+            $color: "primary",
+            $variant: "filled",
+            $fullWidth: true,
+            children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Start X day trial", { days: plan.trialDays })
+          }
+        ),
+        isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
+      ] }) }),
+      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Button,
+          {
+            type: "button",
+            disabled: isLoading || !isValidPlan,
             onClick: () => {
-              onSelect({
-                plan,
-                shouldTrial: true
-              });
-            }
-          },
-          $size: "sm",
-          $color: "primary",
-          $variant: "filled",
-          $fullWidth: true,
-          children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            Tooltip,
-            {
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
-            }
-          ) : t2("Start X day trial", { days: plan.trialDays })
-        }
-      ) }),
-      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        Button,
-        {
-          type: "button",
-          disabled: isLoading || !isValidPlan,
-          onClick: () => {
-            onSelect({ plan, shouldTrial: false });
-          },
-          $size: "sm",
-          $color: "primary",
-          $variant: isTrialing ? "filled" : "text",
-          $fullWidth: true,
-          children: !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            Tooltip,
-            {
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
-            }
-          ) : t2("Choose plan")
-        }
-      ) })
+              onSelect({ plan, shouldTrial: false });
+            },
+            $size: "sm",
+            $color: "primary",
+            $variant: isTrialing ? "filled" : "text",
+            $fullWidth: true,
+            children: !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box, { $textAlign: "center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) }) : t2("Choose plan")
+          }
+        ),
+        isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
+      ] }) })
     ] });
   }
-  return isSelected ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    Button,
-    {
-      type: "button",
-      disabled: (isLoading || !isValidPlan) && !plan.custom,
-      ...plan.custom ? {
-        as: "a",
-        href: plan.customPlanConfig?.ctaWebSite ?? "#",
-        target: "_blank",
-        rel: "noreferrer"
-      } : {
-        onClick: () => {
-          onSelect({ plan });
-        }
-      },
-      $size: "sm",
-      $color: "primary",
-      $variant: "filled",
-      $fullWidth: true,
-      children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        Tooltip,
-        {
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-          content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
-        }
-      ) : t2("Choose plan")
-    }
-  );
+  return isSelected ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      Button,
+      {
+        type: "button",
+        disabled: (isLoading || !isValidPlan) && !plan.custom,
+        ...plan.custom ? {
+          as: "a",
+          href: plan.customPlanConfig?.ctaWebSite ?? "#",
+          target: "_blank",
+          rel: "noreferrer"
+        } : {
+          onClick: () => {
+            onSelect({ plan });
+          }
+        },
+        $size: "sm",
+        $color: "primary",
+        $variant: "filled",
+        $fullWidth: true,
+        children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Choose plan")
+      }
+    ),
+    isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
+  ] });
 };
 var Plan = ({
   isLoading,
@@ -14197,8 +14484,7 @@ var Plan = ({
   selectedPlan,
   period,
   selectPlan,
-  shouldTrial,
-  showPeriodToggle
+  shouldTrial
 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
@@ -14206,16 +14492,23 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = (0, import_react30.useState)(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const { isTrialing, showZeroPriceAsFree } = (0, import_react30.useMemo)(() => {
+  const { isTrialing, showCredits, showPeriodToggle, showZeroPriceAsFree } = (0, import_react30.useMemo)(() => {
+    const showCredits2 = data?.showCredits ?? true;
+    const showPeriodToggle2 = data?.showPeriodToggle ?? true;
+    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
     if (isCheckoutData(data)) {
       return {
         isTrialing: data.subscription?.status === "trialing",
-        showZeroPriceAsFree: data.showZeroPriceAsFree
+        showCredits: showCredits2,
+        showPeriodToggle: showPeriodToggle2,
+        showZeroPriceAsFree: showZeroPriceAsFree2
       };
     }
     return {
       isTrialing: false,
-      showZeroPriceAsFree: false
+      showCredits: showCredits2,
+      showPeriodToggle: showPeriodToggle2,
+      showZeroPriceAsFree: showZeroPriceAsFree2
     };
   }, [data]);
   const handleToggleShowAll = (id) => {
@@ -14312,7 +14605,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    showCredits && credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       Flex,
                       {
                         $flexDirection: "column",
@@ -14398,6 +14691,7 @@ var Plan = ({
                       plan.entitlements.map((entitlement, entitlementIndex) => {
                         const hasNumericValue = entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */;
                         const limit = entitlement.softLimit ?? entitlement.valueNumeric;
+                        const creditBasedEntitlementLimit = getCreditBasedEntitlementLimit(entitlement, credits);
                         const {
                           price: entitlementPrice,
                           priceTier: entitlementPriceTiers,
@@ -14405,6 +14699,7 @@ var Plan = ({
                           packageSize: entitlementPackageSize = 1
                         } = getEntitlementPrice(entitlement, planPeriod) || {};
                         const metricPeriodName = getMetricPeriodName(entitlement);
+                        const UsageDetailsContainer = entitlement.billingThreshold ? FlexWithAlignEnd : import_react30.Fragment;
                         return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                           Flex,
                           {
@@ -14457,7 +14752,7 @@ var Plan = ({
                                         entitlement,
                                         period: planPeriod
                                       }
-                                    ) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+                                    ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
                                       entitlement.consumptionRate,
                                       " ",
                                       getFeatureName(
@@ -14468,7 +14763,20 @@ var Plan = ({
                                       t2("per"),
                                       " ",
                                       getFeatureName(entitlement.feature, 1)
-                                    ] }) : hasNumericValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+                                    ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: creditBasedEntitlementLimit?.period ? t2("Up to X units per period", {
+                                      amount: creditBasedEntitlementLimit.limit,
+                                      units: getFeatureName(
+                                        entitlement.feature,
+                                        creditBasedEntitlementLimit.limit
+                                      ),
+                                      period: creditBasedEntitlementLimit.period
+                                    }) : t2("Up to X units", {
+                                      amount: creditBasedEntitlementLimit.limit,
+                                      units: getFeatureName(
+                                        entitlement.feature,
+                                        creditBasedEntitlementLimit.limit
+                                      )
+                                    }) }) : hasNumericValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
                                       entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
                                         item: getFeatureName(
                                           entitlement.feature
@@ -14488,7 +14796,7 @@ var Plan = ({
                                         t2(metricPeriodName)
                                       ] })
                                     ] }) : entitlement.feature.name }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $alignItems: "end", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(UsageDetailsContainer, { children: [
                                       entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                                         Text,
                                         {
@@ -14783,18 +15091,19 @@ var CheckoutDialog = ({ top = 0 }) => {
     showPeriodToggle,
     trialPaymentMethodRequired
   } = (0, import_react31.useMemo)(() => {
+    const showPeriodToggle2 = data?.showPeriodToggle ?? true;
     if (isCheckoutData(data)) {
       return {
         currentPlanId: data.company?.plan?.id,
         currentEntitlements: data.featureUsage ? data.featureUsage.features : [],
-        showPeriodToggle: data.showPeriodToggle,
+        showPeriodToggle: showPeriodToggle2,
         trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
       };
     }
     return {
       currentPlanId: void 0,
       currentEntitlements: [],
-      showPeriodToggle: true,
+      showPeriodToggle: showPeriodToggle2,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -15397,8 +15706,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     plans: availablePlans,
                     selectedPlan,
                     selectPlan,
-                    shouldTrial,
-                    showPeriodToggle
+                    shouldTrial
                   }
                 ) : checkoutStage === "usage" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   Usage,
@@ -16095,12 +16403,35 @@ var UnsubscribeDialog = ({ top = 0 }) => {
   ] });
 };
 
-// src/components/ui/badge/Badge.tsx
+// src/components/shared/usage-violation-text/UsageViolationText.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
+var UsageViolationText = ({ violations }) => {
+  const { t: t2 } = useTranslation();
+  const { settings } = useEmbed();
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    Text,
+    {
+      $size: 0.875 * settings.theme.typography.text.fontSize,
+      $leading: 1.35,
+      style: { opacity: 0.625 },
+      children: t2("Cannot change to this plan.", {
+        reason: violations.reduce((acc, violation) => {
+          if (violation.feature) {
+            acc.push(violation.feature.name);
+          }
+          return acc;
+        }, [])
+      })
+    }
+  );
+};
+
+// src/components/ui/badge/Badge.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     Flex,
     {
       as: "a",
@@ -16113,82 +16444,82 @@ var Badge = () => {
       $gridColumn: "1 / -1",
       $color: settings.theme.typography.text.color,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Text, { $size: 12, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Text, { $size: 12, children: [
           t2("Powered by"),
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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",
@@ -16202,9 +16533,9 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Disabled = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     Element,
     {
       as: Flex,
@@ -16213,8 +16544,8 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { as: "p", children: "Please try again later." })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { as: "p", children: "Please try again later." })
       ]
     }
   ) }) });
@@ -16223,7 +16554,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Disabled, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Disabled, {});
     default:
       return children;
   }
@@ -16248,7 +16579,7 @@ var StyledViewport = dt.div.withConfig({
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Viewport = (0, import_react39.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
@@ -16274,24 +16605,24 @@ var Viewport = (0, import_react39.forwardRef)(
         parent.style.overflow = "";
       };
     }, [portal, layout]);
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RenderLayout, { children }),
-        isBadgeVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Badge, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(StyledViewport, { ref, ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RenderLayout, { children }),
+        isBadgeVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckoutDialog, { top }), portal || document.body),
+      canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckoutDialog, { top }), portal || document.body),
       layout === "unsubscribe" && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UnsubscribeDialog, { top }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/elements/button/Button.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -16322,7 +16653,7 @@ var ButtonElement = (0, import_react40.forwardRef)(({ children, className, ...re
       variant: "text"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Element,
     {
       as: Flex,
@@ -16330,7 +16661,7 @@ var ButtonElement = (0, import_react40.forwardRef)(({ children, className, ...re
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Button,
         {
           as: "a",
@@ -16355,7 +16686,7 @@ var import_react42 = require("react");
 
 // src/components/elements/included-features/UsageDetails.tsx
 var import_react41 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var UsageDetails = ({
   entitlement,
   shouldWrapChildren,
@@ -16373,8 +16704,18 @@ var UsageDetails = ({
   } = entitlement;
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const period = (0, import_react41.useMemo)(() => {
-    return isCheckoutData(data) && typeof data.company?.plan?.planPeriod === "string" ? data.company.plan.planPeriod : void 0;
+  const { period, showCredits } = (0, import_react41.useMemo)(() => {
+    const showCredits2 = data?.showCredits ?? true;
+    if (isCheckoutData(data)) {
+      return {
+        period: data.company?.plan?.planPeriod || void 0,
+        showCredits: showCredits2
+      };
+    }
+    return {
+      period: void 0,
+      showCredits: showCredits2
+    };
   }, [data]);
   const { billingPrice, cost, currentTier } = (0, import_react41.useMemo)(
     () => getUsageDetails(entitlement, period),
@@ -16386,19 +16727,19 @@ var UsageDetails = ({
     }
     const { price, currency, packageSize = 1 } = billingPrice || {};
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof allocation === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
       ] });
     }
     if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof price === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
         formatCurrency(price, currency),
         " ",
         t2("per"),
         " ",
-        packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
           packageSize,
           " "
         ] }),
@@ -16406,22 +16747,22 @@ var UsageDetails = ({
       ] });
     }
     if (priceBehavior === "overage" /* Overage */ && typeof softLimit === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
         formatNumber(softLimit),
         " ",
         getFeatureName(feature, softLimit)
       ] });
     }
     if (priceBehavior === "tier" /* Tiered */) {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { 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),
         feature: getFeatureName(feature, currentTier?.to)
       })) });
     }
-    if (priceBehavior === "credit_burndown" /* Credit */ && planEntitlement?.valueCredit && typeof planEntitlement?.consumptionRate === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    if (showCredits && priceBehavior === "credit_burndown" /* Credit */ && planEntitlement?.valueCredit && typeof planEntitlement?.consumptionRate === "number") {
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
         planEntitlement.consumptionRate,
         " ",
         getFeatureName(
@@ -16435,7 +16776,7 @@ var UsageDetails = ({
       ] });
     }
     if (!priceBehavior && typeof allocation === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
@@ -16453,7 +16794,8 @@ var UsageDetails = ({
     priceBehavior,
     softLimit,
     billingPrice,
-    currentTier?.to
+    currentTier?.to,
+    showCredits
   ]);
   const usageText = (0, import_react41.useMemo)(() => {
     if (!feature) {
@@ -16464,10 +16806,10 @@ var UsageDetails = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
           formatCurrency(price, currency),
           "/",
-          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
             packageSize,
             " "
           ] }),
@@ -16479,7 +16821,7 @@ var UsageDetails = ({
       index += 1;
     } else if ((priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */ || priceBehavior === "credit_burndown" /* Credit */) && typeof usage === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -16491,14 +16833,14 @@ var UsageDetails = ({
     }
     if (typeof cost === "number" && cost > 0) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
-          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: " \u2022 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
+          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
       index += 1;
       if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
-        acc.push(/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
+        acc.push(/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
           "/",
           shortenPeriod(period)
         ] }, index));
@@ -16507,8 +16849,8 @@ var UsageDetails = ({
     }
     if (metricResetAt) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
-          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: " \u2022 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
+          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: " \u2022 " }),
           t2("Resets", {
             date: toPrettyDate(metricResetAt, {
               month: "numeric",
@@ -16542,20 +16884,20 @@ var UsageDetails = ({
     billingPrice,
     cost
   ]);
-  if (!text || !feature?.name) {
+  if (!text && !usageText || !feature) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     Box,
     {
       $flexBasis: "min-content",
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        layout.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
-        layout.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $justifyContent: "end", $alignItems: "end", $whiteSpace: "nowrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText }),
-          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        layout.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
+        layout.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $justifyContent: "end", $alignItems: "end", $whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText }),
+          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             PricingTiersTooltip,
             {
               feature,
@@ -16571,7 +16913,7 @@ var UsageDetails = ({
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -16646,7 +16988,7 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     Element,
     {
       as: Flex,
@@ -16655,10 +16997,10 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { display: props.header.fontStyle, children: props.header.text }) }),
+        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(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__ */ (0, import_jsx_runtime34.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             Flex,
             {
               ref: (el) => {
@@ -16671,7 +17013,7 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                   Flex,
                   {
                     $alignItems: "center",
@@ -16679,7 +17021,7 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Icon3,
                         {
                           name: entitlement.feature.icon,
@@ -16688,8 +17030,8 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
                           rounded: true
                         }
                       ),
-                      entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
-                      props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                      entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
+                      props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                         Text,
                         {
                           display: props.entitlementExpiration.fontStyle,
@@ -16706,7 +17048,7 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   UsageDetails,
                   {
                     entitlement,
@@ -16719,15 +17061,15 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
             index
           );
         }),
-        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Icon3,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -16745,7 +17087,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 var import_react43 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -16815,9 +17157,9 @@ var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       Flex,
       {
         as: TransitionBox,
@@ -16826,8 +17168,8 @@ var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Button,
             {
               type: "button",
@@ -16840,12 +17182,12 @@ var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TransitionBox, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
-      invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $justifyContent: "space-between", children: [
-            props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TransitionBox, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
+      invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $justifyContent: "space-between", children: [
+            props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Text,
               {
                 display: props.date.fontStyle,
@@ -16859,18 +17201,18 @@ var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref
                 children: date
               }
             ),
-            props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.amount.fontStyle, children: amount })
+            props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: props.amount.fontStyle, children: amount })
           ] }, index);
         }) }),
-        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Icon3,
             {
               name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Text,
             {
               onClick: toggleListSize,
@@ -16882,7 +17224,7 @@ var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: "heading2", children: t2("No invoices created yet") })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: "heading2", children: t2("No invoices created yet") })
     ] }) })
   ] });
 });
@@ -16892,14 +17234,14 @@ Invoices.displayName = "Invoices";
 var import_react44 = require("react");
 
 // src/components/elements/metered-features/Meter.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("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__ */ (0, import_jsx_runtime36.jsx)(
+  const meter = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     ProgressBar,
     {
       progress: Math.min(usage, limit) / Math.max(usage, limit) * 100,
@@ -16916,7 +17258,7 @@ var Meter = ({ entitlement, usageDetails }) => {
 };
 
 // src/components/elements/metered-features/PriceDetails.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var PriceDetails = ({
   entitlement,
   usageDetails,
@@ -16943,7 +17285,7 @@ var PriceDetails = ({
   if (!feature || typeof currentTierPerUnitPrice !== "number") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -16957,30 +17299,30 @@ var PriceDetails = ({
         $borderBottomRightRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`
       },
       children: [
-        priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+        priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
           t2("Additional"),
           ": ",
           formatCurrency(currentTierPerUnitPrice, currency),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(feature, packageSize),
-            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
               "/",
               shortenPeriod(period)
             ] })
           ] })
-        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $alignItems: "end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $alignItems: "end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
             t2("Tier"),
             ": ",
             currentTier?.from || 1,
-            typeof currentTier?.to === "number" && (currentTier?.from || 1) !== currentTier?.to && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
+            typeof currentTier?.to === "number" && (currentTier?.from || 1) !== currentTier?.to && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             PricingTiersTooltip,
             {
               period,
@@ -16991,19 +17333,19 @@ var PriceDetails = ({
             }
           )
         ] }),
-        typeof amount === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+        typeof amount === "number" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
           formatNumber(amount),
           " ",
           getFeatureName(feature, amount),
           " \xB7 ",
           formatCurrency(currentTierPerUnitPrice * amount, currency),
-          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
-        ] }) : priceBehavior === "tier" /* Tiered */ && typeof cost === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+        ] }) : priceBehavior === "tier" /* Tiered */ && typeof cost === "number" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
           formatCurrency(cost, currency),
-          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
@@ -17031,7 +17373,7 @@ var Container2 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t2 } = useTranslation();
   const { feature, priceBehavior, allocation, usage, metricResetAt } = entitlement;
@@ -17045,7 +17387,9 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       feature: getFeatureName(feature)
     }) : priceBehavior === "overage" /* Overage */ && typeof limit === "number" ? t2("X included", {
       amount: formatNumber(limit)
-    }) : priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof usage === "number" ? `${formatNumber(usage)} ${t2("used")}` : priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof cost === "number" ? formatCurrency(cost, billingPrice?.currency) : typeof allocation === "number" ? t2("Limit of", {
+    }) : priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof usage === "number" ? `${formatNumber(usage)} ${t2("used")}` : priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof cost === "number" ? formatCurrency(cost, billingPrice?.currency) : priceBehavior === "credit_burndown" /* Credit */ && typeof limit === "number" ? t2("Limit of", {
+      amount: formatNumber(limit)
+    }) : typeof allocation === "number" ? t2("Limit of", {
       amount: formatNumber(allocation)
     }) : t2("No limit")
   );
@@ -17060,7 +17404,7 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
 };
 function resolveDesignProps4(props) {
   return {
@@ -17094,7 +17438,8 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { period, meteredFeatures, creditGroups } = (0, import_react44.useMemo)(() => {
+  const { period, meteredFeatures, creditGroups, showCredits } = (0, import_react44.useMemo)(() => {
+    const showCredits2 = data?.showCredits ?? true;
     if (isCheckoutData(data)) {
       const period2 = typeof data.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
@@ -17112,20 +17457,19 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
       return {
         period: period2,
         meteredFeatures: (orderedFeatureUsage || data.featureUsage?.features || []).filter(
-          ({ priceBehavior, feature }) => (
-            // credit-based entitlements behave differently and should not be shown as a metered feature
-            priceBehavior !== "credit_burndown" /* Credit */ && (feature?.featureType === "event" /* Event */ || feature?.featureType === "trait" /* Trait */)
-          )
+          ({ feature }) => feature?.featureType === "event" /* Event */ || feature?.featureType === "trait" /* Trait */
         ),
         creditGroups: groupCreditGrants(data.creditGrants, {
           groupBy: "credit"
-        })
+        }),
+        showCredits: showCredits2
       };
     }
     return {
       period: void 0,
       meteredFeatures: [],
-      creditGroups: []
+      creditGroups: [],
+      showCredits: showCredits2
     };
   }, [props.visibleFeatures, data]);
   const [creditVisibility, setCreditVisibility] = (0, import_react44.useState)(
@@ -17142,7 +17486,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Container2, { ref, className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Container2, { ref, className, children: [
     meteredFeatures.reduce((acc, entitlement, index) => {
       if (!entitlement.feature) {
         return acc;
@@ -17151,9 +17495,9 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
       const usageDetails = getUsageDetails(entitlement, period);
       const { limit } = usageDetails;
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $gap: "1.5rem", children: [
-            props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $gap: "1.5rem", children: [
+            props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Icon3,
               {
                 name: feature.icon,
@@ -17162,8 +17506,8 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                 rounded: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
                 Flex,
                 {
                   ref: (el) => {
@@ -17174,31 +17518,31 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                   $flexWrap: "wrap",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: props.header.fontStyle, children: feature.name }) }),
-                      props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: props.description.fontStyle, children: feature.description }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.header.fontStyle, children: feature.name }) }),
+                      props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.description.fontStyle, children: feature.description }) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
                       Box,
                       {
                         $flexBasis: "min-content",
                         $flexGrow: 1,
                         $textAlign: shouldWrapChildren ? "left" : "right",
                         children: [
-                          props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-                            typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                          props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+                            typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
                               formatNumber(limit),
                               " "
                             ] }),
                             getFeatureName(feature, limit)
-                          ] }) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                          ] }) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
                             formatNumber(usage),
                             " ",
                             getFeatureName(feature, usage),
                             " ",
                             t2("used")
                           ] }) }) }),
-                          props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                          props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                             Limit,
                             {
                               entitlement,
@@ -17212,14 +17556,14 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                   ]
                 }
               ),
-              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 Meter,
                 {
                   entitlement,
                   usageDetails
                 }
               ),
-              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 Button,
                 {
                   type: "button",
@@ -17232,7 +17576,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
               )
             ] })
           ] }),
-          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             PriceDetails,
             {
               entitlement,
@@ -17244,11 +17588,11 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
       );
       return acc;
     }, []),
-    creditGroups.map((credit, index) => {
+    showCredits && creditGroups.map((credit, index) => {
       const isExpanded = creditVisibility.find(({ id }) => credit.id === id)?.isExpanded ?? false;
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             Icon3,
             {
               name: credit.icon,
@@ -17257,13 +17601,13 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
               rounded: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: props.header.fontStyle, children: credit.name }) }),
-              props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: props.description.fontStyle, children: credit.description }) })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.header.fontStyle, children: credit.name }) }),
+              props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.description.fontStyle, children: credit.description }) })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $gap: "1rem", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $gap: "1rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 ProgressBar,
                 {
                   progress: credit.total.used / credit.total.value * 100,
@@ -17274,7 +17618,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                   )]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 Button,
                 {
                   type: "button",
@@ -17289,12 +17633,12 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           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__ */ (0, import_jsx_runtime38.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               TransitionBox,
               {
                 $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0375)" : "hsla(0, 0%, 100%, 0.075)",
@@ -17302,19 +17646,19 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                 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__ */ (0, import_jsx_runtime38.jsx)(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t2("X items included in plan", {
+                  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: t2("X items included in plan", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, grant.quantity)
                     }) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t2("Resets", {
+                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: t2("Resets", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -17326,8 +17670,8 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                         }) })
                       }
                     )
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: t2("X item bundle", {
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: t2("X item bundle", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, 1),
                       createdAt: toPrettyDate(grant.createdAt, {
@@ -17335,7 +17679,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                         month: "2-digit",
                         year: "2-digit"
                       })
-                    }) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: t2("X item grant", {
+                    }) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: t2("X item grant", {
                       amount: grant.quantity,
                       item: getFeatureName(
                         credit,
@@ -17347,14 +17691,14 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
                         year: "2-digit"
                       })
                     }) }) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t2("Expires", {
+                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: t2("Expires", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -17372,8 +17716,8 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $gap: "0.25rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $gap: "0.25rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             Icon3,
             {
               name: "chevron-down",
@@ -17384,7 +17728,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             Text,
             {
               onClick: () => toggleBalanceDetails(credit.id),
@@ -17404,24 +17748,24 @@ var import_react46 = require("react");
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 var import_react45 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
   iconTitle,
   label,
   paymentLast4
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon3, { name: iconName, title: iconTitle }),
-    (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Box, { $flexGrow: 1, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon3, { name: iconName, title: iconTitle }),
+    (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Box, { $flexGrow: 1, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { children: label }),
       " ",
-      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: paymentLast4 })
+      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -17486,12 +17830,12 @@ var PaymentMethodElement = ({
   const { t: t2 } = useTranslation();
   const isLightBackground = useIsLightBackground();
   const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -17500,8 +17844,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          paymentMethod ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             Text,
             {
               onClick: onEdit,
@@ -17534,7 +17878,7 @@ var PaymentListElement = ({
     }
     return `${cardExpMonth}/${formatedYear}`;
   }, [paymentMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     Flex,
     {
       $flexDirection: "row",
@@ -17546,21 +17890,21 @@ var PaymentListElement = ({
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
       children: [
-        iconName && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon3, { name: iconName, title: iconTitle }),
-        (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Box, { $flexGrow: 1, children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: label }),
+        iconName && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon3, { name: iconName, title: iconTitle }),
+        (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Box, { $flexGrow: 1, children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { children: label }),
           " ",
-          paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: paymentLast4 })
+          paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { children: paymentLast4 })
         ] }),
-        expirationDate && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        expirationDate && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Box,
           {
             $flexGrow: 1,
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: t("Expires", { date: expirationDate }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { children: t("Expires", { date: expirationDate }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Text,
           {
             onClick: () => {
@@ -17573,7 +17917,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Icon3,
           {
             tabIndex: 0,
@@ -17595,7 +17939,7 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -17636,7 +17980,7 @@ var PaymentMethod = (0, import_react46.forwardRef)(({ children, className, porta
       monthsToExpiration: void 0
     };
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -17652,7 +17996,7 @@ PaymentMethod.displayName = "PaymentMethod";
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "basil";
+var RELEASE_TRAIN = "clover";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
@@ -17692,7 +18036,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.9.0",
+    version: "8.1.0",
     startTime
   });
 };
@@ -17767,7 +18111,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.9.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -17805,7 +18149,7 @@ var loadStripe = function loadStripe2() {
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 var import_react47 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -17963,8 +18307,8 @@ var PaymentMethodDetails = ({
     showPaymentForm,
     initializePaymentMethod
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Flex, { $position: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $position: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Flex,
       {
         $position: "absolute",
@@ -17973,7 +18317,7 @@ var PaymentMethodDetails = ({
         $alignItems: "center",
         $width: "100%",
         $height: "100%",
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Loader,
           {
             $color: settings.theme.primary,
@@ -17983,7 +18327,7 @@ var PaymentMethodDetails = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       Flex,
       {
         $position: "relative",
@@ -17996,7 +18340,7 @@ var PaymentMethodDetails = ({
         $visibility: isLoading || isConfirmingPayment ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
         children: [
-          setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             import_react_stripe_js2.Elements,
             {
               stripe,
@@ -18026,7 +18370,7 @@ var PaymentMethodDetails = ({
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   PaymentForm,
                   {
                     financeData,
@@ -18037,7 +18381,7 @@ var PaymentMethodDetails = ({
                     }
                   }
                 ),
-                currentPaymentMethod && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                currentPaymentMethod && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   Text,
                   {
                     onClick: focusExistingPaymentMethods,
@@ -18050,8 +18394,8 @@ var PaymentMethodDetails = ({
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               PaymentMethodElement,
               {
                 paymentMethod: currentPaymentMethod,
@@ -18059,8 +18403,8 @@ var PaymentMethodDetails = ({
                 ...props
               }
             ),
-            paymentMethods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            paymentMethods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 Text,
                 {
                   onClick: toggleShowPaymentMethods,
@@ -18071,17 +18415,17 @@ var PaymentMethodDetails = ({
                   children: t2("Choose different payment method")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 Icon3,
                 {
                   name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down"
                 }
               )
             ] }),
-            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
+            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
                 (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
-              ) || []).map((paymentMethod) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              ) || []).map((paymentMethod) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 PaymentListElement,
                 {
                   paymentMethod,
@@ -18090,7 +18434,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod.id
               )) }),
-              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 Button,
                 {
                   type: "button",
@@ -18102,7 +18446,7 @@ var PaymentMethodDetails = ({
               )
             ] })
           ] }),
-          !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }) })
+          !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }) })
         ]
       }
     )
@@ -18113,9 +18457,9 @@ var PaymentMethodDetails = ({
 var import_react49 = require("react");
 
 // src/components/elements/plan-manager/AddOn.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var AddOn = ({ addOn, currency, layout }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -18123,10 +18467,10 @@ var AddOn = ({ addOn, currency, layout }) => {
       $flexWrap: "wrap",
       $gap: "1rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
+        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
         ] })
       ]
     }
@@ -18135,10 +18479,11 @@ var AddOn = ({ addOn, currency, layout }) => {
 
 // src/components/elements/plan-manager/UsageDetails.tsx
 var import_react48 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var UsageDetails2 = ({
   entitlement,
   period,
+  showCredits,
   layout
 }) => {
   const { t: t2 } = useTranslation();
@@ -18157,9 +18502,9 @@ var UsageDetails2 = ({
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react48.Fragment, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react48.Fragment, { children: t2("X additional", {
           amount
-        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
+        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
           t2("Additional"),
           ": "
         ] }, index)
@@ -18170,16 +18515,16 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
           formatCurrency(price, billingPrice?.currency),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("sub", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(entitlement.feature, packageSize),
-            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -18188,10 +18533,10 @@ var UsageDetails2 = ({
       );
       index += 1;
     }
-    if (entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
+    if (showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
       const creditAmount = entitlement.planEntitlement.consumptionRate * amount;
       acc.push(
-        creditAmount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
+        creditAmount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
           creditAmount,
           " ",
           getFeatureName(
@@ -18200,7 +18545,7 @@ var UsageDetails2 = ({
           ),
           " ",
           t2("used")
-        ] }, index) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
+        ] }, index) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
           entitlement.planEntitlement.consumptionRate,
           " ",
           getFeatureName(
@@ -18216,12 +18561,12 @@ var UsageDetails2 = ({
       index += 1;
     }
     return acc;
-  }, [t2, period, entitlement, billingPrice, amount]);
-  if (!entitlement.feature?.name) {
+  }, [t2, period, showCredits, entitlement, billingPrice, amount]);
+  if (entitlement.priceBehavior === "credit_burndown" /* Credit */ && !showCredits || !entitlement.feature?.name) {
     return null;
   }
-  const quantity = limit || amount;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  const quantity = entitlement.priceBehavior !== "credit_burndown" /* Credit */ ? limit || amount : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -18229,13 +18574,13 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
           quantity,
           " ",
           entitlement.feature.name
         ] }) : entitlement.feature.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          description.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          description.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             Text,
             {
               style: { opacity: 0.54 },
@@ -18244,15 +18589,15 @@ var UsageDetails2 = ({
               children: description
             }
           ),
-          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $alignItems: "end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { children: [
+          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $alignItems: "end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { children: [
               formatCurrency(cost, billingPrice?.currency),
-              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("sub", { children: [
+              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
                 "/",
                 shortenPeriod(period)
               ] })
             ] }),
-            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -18269,7 +18614,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -18313,9 +18658,12 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
     canCheckout,
     postTrialPlan,
     featureUsage,
+    showCredits,
     showZeroPriceAsFree,
     trialPaymentMethodRequired
   } = (0, import_react49.useMemo)(() => {
+    const showCredits2 = data?.showCredits ?? true;
+    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
     if (isCheckoutData(data)) {
       const {
         company,
@@ -18324,7 +18672,6 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
         capabilities,
         postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2,
-        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
       const creditGroups2 = groupCreditGrants(creditGrants, {
@@ -18354,8 +18701,9 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
         canCheckout: capabilities?.checkout ?? true,
         postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2?.features || [],
-        showZeroPriceAsFree: showZeroPriceAsFree2,
-        trialPaymentMethodRequired: trialPaymentMethodRequired2
+        trialPaymentMethodRequired: trialPaymentMethodRequired2,
+        showCredits: showCredits2,
+        showZeroPriceAsFree: showZeroPriceAsFree2
       };
     }
     return {
@@ -18367,8 +18715,9 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
       canCheckout: false,
       postTrialPlan: void 0,
       featureUsage: [],
-      showZeroPriceAsFree: false,
-      trialPaymentMethodRequired: false
+      trialPaymentMethodRequired: false,
+      showCredits: showCredits2,
+      showZeroPriceAsFree: showZeroPriceAsFree2
     };
   }, [data]);
   const usageBasedEntitlements = (0, import_react49.useMemo)(
@@ -18394,8 +18743,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
   }, [billingSubscription]);
   const isFreePlan = currentPlan?.planPrice === 0;
   const isUsageBasedPlan = isFreePlan && usageBasedEntitlements.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       Notice,
       {
         as: Flex,
@@ -18405,15 +18754,15 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : postTrialPlan ? t2("After the trial, cancel", {
+          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : postTrialPlan ? t2("After the trial, cancel", {
             postTrialPlanName: postTrialPlan?.name
           }) : t2("After the trial, cancel no default", {
             planName: currentPlan?.name
           }) })
         ]
       }
-    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       Notice,
       {
         as: Flex,
@@ -18423,8 +18772,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
-          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             Text,
             {
               as: "p",
@@ -18442,7 +18791,7 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       Element,
       {
         as: Flex,
@@ -18451,19 +18800,19 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -18473,7 +18822,7 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                       )
                     }
                   ),
-                  !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
+                  !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -18481,8 +18830,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
               ]
             }
           ),
-          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18490,7 +18839,7 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                 children: t2("Add-ons")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               AddOn,
               {
                 addOn,
@@ -18500,8 +18849,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
               addOnIndex
             )) })
           ] }),
-          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18509,20 +18858,21 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                 children: t2("Usage-based")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 UsageDetails2,
                 {
                   entitlement,
                   period: currentPlan?.planPeriod || "month",
+                  showCredits,
                   layout: props
                 },
                 entitlementIndex
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.plan.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18530,8 +18880,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                 children: t2("Credits in plan")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -18539,18 +18889,18 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                   $flexWrap: "wrap",
                   $gap: "0.5rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { display: props.addOns.fontStyle, children: [
                       group.quantity,
                       " ",
                       getFeatureName(group, group.quantity),
                       " ",
-                      subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+                      subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
                         t2("per"),
                         " ",
                         t2(subscriptionInterval)
                       ] })
                     ] }),
-                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -18569,8 +18919,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18578,9 +18928,9 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                 children: t2("Credit bundles")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(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__ */ (0, import_jsx_runtime44.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -18588,8 +18938,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                   $flexWrap: "wrap",
                   $gap: "0.5rem",
                   children: [
-                    bundle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                      group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { style: { opacity: 0.5 }, children: [
+                    bundle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { style: { opacity: 0.5 }, children: [
                         "(",
                         group.grants.length,
                         ")",
@@ -18601,12 +18951,12 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                       " ",
                       getFeatureName(group, group.quantity),
                       ")"
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { display: props.addOns.fontStyle, children: [
                       group.quantity,
                       " ",
                       getFeatureName(group, group.quantity)
                     ] }),
-                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -18625,8 +18975,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18634,8 +18984,8 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                 children: t2("Promotional credits")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -18643,12 +18993,12 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
                   $flexWrap: "wrap",
                   $gap: "0.5rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { display: props.addOns.fontStyle, children: [
                       group.quantity,
                       " ",
                       getFeatureName(group, group.quantity)
                     ] }),
-                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -18667,7 +19017,7 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             Button,
             {
               type: "button",
@@ -18696,7 +19046,7 @@ var import_react52 = require("react");
 
 // src/components/elements/pricing-table/AddOn.tsx
 var import_react50 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -18722,7 +19072,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const isCurrentAddOn = isHydratedPlan(addOn) && addOn.current;
   const isActiveAddOn = isCurrentAddOn && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
   const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     Flex,
     {
       $position: "relative",
@@ -18738,17 +19088,17 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
-          layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
+          layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
             formatCurrency(addOnPrice ?? 0, addOnCurrency),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("sub", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
               "/",
               selectedPeriod
             ] })
           ] }) }),
-          isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             Flex,
             {
               $position: "absolute",
@@ -18757,7 +19107,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
               $backgroundColor: settings.theme.primary,
               $borderRadius: "9999px",
               $padding: "0.125rem 0.85rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 Text,
                 {
                   $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -18768,7 +19118,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -18776,7 +19126,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             $gap: `${cardPadding}rem`,
             $flexGrow: 1,
             children: [
-              layout.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              layout.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -18785,15 +19135,15 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   $flexGrow: 1,
                   children: addOn.entitlements.map((entitlement, entitlementIndex) => {
                     const metricPeriodName = getMetricPeriodName(entitlement);
-                    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                       Flex,
                       {
                         $flexWrap: "wrap",
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $gap: "1rem", children: [
-                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
+                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                             Icon3,
                             {
                               name: entitlement.feature.icon,
@@ -18802,11 +19152,11 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                               rounded: true
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                            entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
                               entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
                                 item: getFeatureName(entitlement.feature)
-                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
                                 formatNumber(entitlement.valueNumeric),
                                 " ",
                                 getFeatureName(
@@ -18814,14 +19164,14 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                                   entitlement.valueNumeric
                                 )
                               ] }),
-                              metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+                              metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
                                 " ",
                                 t2("per"),
                                 " ",
                                 t2(metricPeriodName)
                               ] })
                             ] }) : entitlement.feature.name }) }),
-                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                               Text,
                               {
                                 $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -18837,7 +19187,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   })
                 }
               ),
-              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 Button,
                 {
                   type: "button",
@@ -18878,11 +19228,13 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 var import_react51 = require("react");
 
 // src/components/elements/pricing-table/Entitlement.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Entitlement = ({
   entitlement,
-  sharedProps,
-  selectedPeriod
+  credits = [],
+  selectedPeriod,
+  showCredits,
+  sharedProps
 }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -18894,13 +19246,14 @@ var Entitlement = ({
     currency: entitlementCurrency,
     packageSize: entitlementPackageSize = 1
   } = getEntitlementPrice(entitlement, selectedPeriod) || {};
-  if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
-    return null;
-  }
   const limit = entitlement.softLimit ?? entitlement.valueNumeric;
   const metricPeriodName = getMetricPeriodName(entitlement);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
-    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  const creditBasedEntitlementLimit = getCreditBasedEntitlementLimit(
+    entitlement,
+    credits
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $gap: "1rem", children: [
+    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Icon3,
       {
         name: entitlement.feature.icon,
@@ -18909,47 +19262,71 @@ var Entitlement = ({
         rounded: true
       }
     ),
-    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t2("per"),
           " ",
-          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
             entitlementPackageSize,
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
-          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
             " ",
             t2("per"),
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           TieredPricingDetails,
           {
             entitlement,
             period: selectedPeriod
           }
-        ) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+        ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          entitlement.consumptionRate,
+          " ",
+          getFeatureName(
+            entitlement.valueCredit,
+            entitlement.consumptionRate || void 0
+          ),
+          " ",
+          t2("per"),
+          " ",
+          getFeatureName(entitlement.feature, 1)
+        ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: creditBasedEntitlementLimit?.period ? t2("Up to X units per period", {
+          amount: creditBasedEntitlementLimit.limit,
+          units: getFeatureName(
+            entitlement.feature,
+            creditBasedEntitlementLimit.limit
+          ),
+          period: creditBasedEntitlementLimit.period
+        }) : t2("Up to X units", {
+          amount: creditBasedEntitlementLimit.limit,
+          units: getFeatureName(
+            entitlement.feature,
+            creditBasedEntitlementLimit.limit
+          )
+        }) }) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
           entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
             formatNumber(limit),
             " ",
             getFeatureName(entitlement.feature, limit)
           ] }),
-          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
             " ",
             t2("per"),
             " ",
             t2(metricPeriodName)
           ] })
         ] }) : entitlement.feature.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $alignItems: "end", children: [
-          entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $alignItems: "end", children: [
+          entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
             Text,
             {
               $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -18959,19 +19336,19 @@ var Entitlement = ({
                 " ",
                 formatCurrency(entitlementPrice, entitlementCurrency),
                 "/",
-                entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+                entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
                   entitlementPackageSize,
                   " "
                 ] }),
                 getFeatureName(entitlement.feature, entitlementPackageSize),
-                entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+                entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
                   "/",
                   shortenPeriod(selectedPeriod)
                 ] })
               ]
             }
-          ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $alignItems: "end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $alignItems: "end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Text,
               {
                 style: { opacity: 0.54 },
@@ -18980,7 +19357,7 @@ var Entitlement = ({
                 children: t2("Tier-based")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -18990,7 +19367,7 @@ var Entitlement = ({
               }
             )
           ] }),
-          entitlement.billingThreshold && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          entitlement.billingThreshold && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             BillingThresholdTooltip,
             {
               billingThreshold: entitlement.billingThreshold
@@ -18998,7 +19375,7 @@ var Entitlement = ({
           )
         ] })
       ] }),
-      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Text,
         {
           $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -19011,7 +19388,7 @@ var Entitlement = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var Plan2 = ({
   plan,
   index,
@@ -19026,15 +19403,20 @@ var Plan2 = ({
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const trialEnd = useTrialEnd();
+  const showCallToAction = (0, import_react51.useMemo)(() => {
+    return typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function";
+  }, [sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const {
     currentPeriod,
     canCheckout,
     isTrialSubscription,
     willSubscriptionCancel,
     isStandalone,
-    showCallToAction,
+    showCredits,
     showZeroPriceAsFree
   } = (0, import_react51.useMemo)(() => {
+    const showCredits2 = data?.showCredits ?? true;
+    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
       const isTrialSubscription2 = billingSubscription?.status === "trialing";
@@ -19045,8 +19427,8 @@ var Plan2 = ({
         isTrialSubscription: isTrialSubscription2,
         willSubscriptionCancel: willSubscriptionCancel2,
         isStandalone: false,
-        showCallToAction: true,
-        showZeroPriceAsFree: data.showZeroPriceAsFree
+        showCredits: showCredits2,
+        showZeroPriceAsFree: showZeroPriceAsFree2
       };
     }
     return {
@@ -19055,10 +19437,10 @@ var Plan2 = ({
       isTrialSubscription: false,
       willSubscriptionCancel: false,
       isStandalone: true,
-      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function",
-      showZeroPriceAsFree: false
+      showCredits: showCredits2,
+      showZeroPriceAsFree: showZeroPriceAsFree2
     };
-  }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
+  }, [data]);
   const callToActionTarget = (0, import_react51.useMemo)(() => {
     if (sharedProps.callToActionTarget) {
       return sharedProps.callToActionTarget;
@@ -19089,7 +19471,7 @@ var Plan2 = ({
   const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const count = entitlementCounts[plan.id];
   const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     Flex,
     {
       className: "sch-PricingTable_Plan",
@@ -19106,7 +19488,7 @@ var Plan2 = ({
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -19117,9 +19499,9 @@ var Plan2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
-              layout.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
+              layout.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
                 Text,
                 {
                   $font: headerPriceFontStyle.fontFamily,
@@ -19128,14 +19510,14 @@ var Plan2 = ({
                   $color: headerPriceFontStyle.color,
                   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__ */ (0, import_jsx_runtime47.jsxs)("sub", { children: [
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
                   ]
                 }
               ) }),
-              credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              showCredits && credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -19143,8 +19525,8 @@ var Plan2 = ({
                   $flexGrow: 1,
                   $marginTop: "0.5rem",
                   children: credits.map((credit, idx) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $gap: "1rem", children: [
-                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Flex, { $gap: "1rem", children: [
+                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                         Icon3,
                         {
                           name: credit.icon,
@@ -19153,17 +19535,17 @@ var Plan2 = ({
                           rounded: true
                         }
                       ),
-                      credit.name && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      credit.name && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                         Flex,
                         {
                           $flexDirection: "column",
                           $justifyContent: "center",
                           $gap: "0.5rem",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Text, { children: [
+                          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Text, { children: [
                             credit.quantity,
                             " ",
                             getFeatureName(credit, credit.quantity),
-                            credit.period && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+                            credit.period && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
                               " ",
                               t2("per"),
                               " ",
@@ -19176,7 +19558,7 @@ var Plan2 = ({
                   })
                 }
               ),
-              isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Flex,
                 {
                   $position: "absolute",
@@ -19185,7 +19567,7 @@ var Plan2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -19198,7 +19580,7 @@ var Plan2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -19207,20 +19589,22 @@ var Plan2 = ({
             $gap: `${cardPadding}rem`,
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { children: t2("Everything in", {
+              layout.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
+                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { children: t2("Everything in", {
                   plan: plans[index - 1].name
                 }) }) }),
-                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   Entitlement,
                   {
                     entitlement,
-                    sharedProps: { layout },
-                    selectedPeriod
+                    credits,
+                    selectedPeriod,
+                    showCredits,
+                    sharedProps: { layout }
                   },
                   idx
                 )).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
-                (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
                   Flex,
                   {
                     $justifyContent: "start",
@@ -19228,14 +19612,14 @@ var Plan2 = ({
                     $gap: "0.5rem",
                     $marginTop: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                         Icon3,
                         {
                           name: isExpanded ? "chevron-up" : "chevron-down",
                           color: "#D0D0D0"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                         Text,
                         {
                           onClick: () => handleToggleShowAll(plan.id),
@@ -19255,7 +19639,7 @@ var Plan2 = ({
                   }
                 )
               ] }),
-              isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+              isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
                 Flex,
                 {
                   $justifyContent: "center",
@@ -19263,7 +19647,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -19271,55 +19655,52 @@ var Plan2 = ({
                         color: settings.theme.primary
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
+                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
                   ]
                 }
-              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                Button,
-                {
-                  type: "button",
-                  disabled: (isHydratedPlan(plan) && !plan.valid || !canCheckout) && !plan.custom,
-                  ...index > currentPlanIndex ? {
-                    $size: layout.upgrade.buttonSize,
-                    $color: layout.upgrade.buttonStyle,
-                    $variant: "filled"
-                  } : {
-                    $size: layout.downgrade.buttonSize,
-                    $color: layout.downgrade.buttonStyle,
-                    $variant: "outline"
-                  },
-                  ...plan.custom ? {
-                    as: "a",
-                    href: plan.customPlanConfig?.ctaWebSite ?? "#",
-                    target: "_blank",
-                    rel: "noreferrer"
-                  } : sharedProps.callToActionUrl ? {
-                    as: "a",
-                    href: sharedProps.callToActionUrl,
-                    target: callToActionTarget,
-                    rel: "noreferrer"
-                  } : {
-                    onClick: () => {
-                      sharedProps.onCallToAction?.(plan);
-                      if (!isStandalone && isHydratedPlan(plan) && !plan.custom) {
-                        setCheckoutState({
-                          period: selectedPeriod,
-                          planId: isActivePlan ? null : plan.id,
-                          usage: false
-                        });
+              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    disabled: (isHydratedPlan(plan) && !plan.valid || !canCheckout) && !plan.custom,
+                    ...index > currentPlanIndex ? {
+                      $size: layout.upgrade.buttonSize,
+                      $color: layout.upgrade.buttonStyle,
+                      $variant: "filled"
+                    } : {
+                      $size: layout.downgrade.buttonSize,
+                      $color: layout.downgrade.buttonStyle,
+                      $variant: "outline"
+                    },
+                    ...plan.custom ? {
+                      as: "a",
+                      href: plan.customPlanConfig?.ctaWebSite ?? "#",
+                      target: "_blank",
+                      rel: "noreferrer"
+                    } : sharedProps.callToActionUrl ? {
+                      as: "a",
+                      href: sharedProps.callToActionUrl,
+                      target: callToActionTarget,
+                      rel: "noreferrer"
+                    } : {
+                      onClick: () => {
+                        sharedProps.onCallToAction?.(plan);
+                        if (!isStandalone && isHydratedPlan(plan) && !plan.custom) {
+                          setCheckoutState({
+                            period: selectedPeriod,
+                            planId: isActivePlan ? null : plan.id,
+                            usage: false
+                          });
+                        }
                       }
-                    }
-                  },
-                  $fullWidth: true,
-                  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    Tooltip,
-                    {
-                      trigger: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-                      content: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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")
-                }
-              )
+                    },
+                    $fullWidth: true,
+                    children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
+                  }
+                ),
+                isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UsageViolationText, { violations: plan.usageViolations })
+              ] })
             ]
           }
         )
@@ -19329,7 +19710,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -19433,7 +19814,7 @@ var PricingTable = (0, import_react52.forwardRef)(
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
     if (isPending) {
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Flex,
         {
           $width: "100%",
@@ -19441,12 +19822,12 @@ var PricingTable = (0, import_react52.forwardRef)(
           $alignItems: "center",
           $justifyContent: "center",
           $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Loader, { $size: "2xl" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Loader, { $size: "2xl" })
         }
       );
     }
     const Wrapper = isStandalone ? Container : import_react52.Fragment;
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       FussyChild,
       {
         ref,
@@ -19455,8 +19836,8 @@ var PricingTable = (0, import_react52.forwardRef)(
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
               Flex,
               {
                 $flexDirection: "column",
@@ -19471,8 +19852,8 @@ var PricingTable = (0, import_react52.forwardRef)(
                   }
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
-                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                     PeriodToggle,
                     {
                       options: periods,
@@ -19487,7 +19868,7 @@ var PricingTable = (0, import_react52.forwardRef)(
                 ]
               }
             ),
-            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Box,
               {
                 $display: "grid",
@@ -19495,7 +19876,7 @@ var PricingTable = (0, import_react52.forwardRef)(
                 $gap: "1rem",
                 children: plans.map((plan, index, self2) => {
                   const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                     Plan2,
                     {
                       plan,
@@ -19517,17 +19898,17 @@ var PricingTable = (0, import_react52.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-            props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+            props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Flex,
               {
                 $justifyContent: "space-between",
                 $alignItems: "center",
                 $marginBottom: "1rem",
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Box,
               {
                 $display: "grid",
@@ -19535,7 +19916,7 @@ var PricingTable = (0, import_react52.forwardRef)(
                 $gap: "1rem",
                 children: addOns.map((addOn, index) => {
                   const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                     AddOn2,
                     {
                       addOn,
@@ -19562,7 +19943,7 @@ PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
 var import_react53 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -19574,7 +19955,7 @@ var resolveDesignProps9 = (props) => {
 };
 var TextElement = (0, import_react53.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     Text,
     {
       display: props.text.fontStyle,
@@ -19588,7 +19969,7 @@ TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 var import_react54 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var buttonStyles = {
   primary: {
     color: "primary",
@@ -19624,7 +20005,7 @@ var UnsubscribeButton = (0, import_react54.forwardRef)(({ children, className, .
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Element,
     {
       as: Flex,
@@ -19632,7 +20013,7 @@ var UnsubscribeButton = (0, import_react54.forwardRef)(({ children, className, .
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Button,
         {
           type: "button",
@@ -19654,7 +20035,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 var import_react55 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -19729,9 +20110,9 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       Flex,
       {
         as: TransitionBox,
@@ -19740,8 +20121,8 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             Button,
             {
               type: "button",
@@ -19754,28 +20135,28 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Text, { display: props.header.fontStyle, children: [
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Text, { display: props.header.fontStyle, children: [
         props.header.prefix,
         " ",
         toPrettyDate(upcomingInvoice.dueDate)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
               upcomingInvoice.amountDue,
               upcomingInvoice.currency
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
           ]
         }
       ),
-      balances.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      balances.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         Flex,
         {
           as: TransitionBox,
@@ -19783,20 +20164,20 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { $weight: 600, children: t2("Remaining balance") }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
           ]
         }
       ),
-      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { $weight: 600, children: t2("Discount") }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { $weight: 600, children: t2("Discount") }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               Flex,
               {
                 $flexDirection: "column",
@@ -19806,13 +20187,13 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
                   (acc, discount) => {
                     if (typeof discount.percentOff === "number" || typeof discount.amountOff === "number") {
                       acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
                           Flex,
                           {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                              discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -19821,7 +20202,7 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
                                   $borderStyle: "solid",
                                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                                   $borderRadius: "0.3125rem",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                                     Text,
                                     {
                                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -19831,7 +20212,7 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
+                              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
                                 percent: discount.percentOff
                               }) : t2("Amount off", {
                                 amount: formatCurrency(
@@ -19855,7 +20236,7 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
           ]
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
   ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
@@ -24115,10 +24496,10 @@ function createRenderer(options) {
 }
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var Loading = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     Flex,
     {
       $width: "100%",
@@ -24126,13 +24507,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     Flex,
     {
       $flexDirection: "column",
@@ -24143,14 +24524,14 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { display: "heading1", children: "Error" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { children: message }) })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { display: "heading1", children: "Error" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { children: message }) })
       ]
     }
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = (0, import_react57.useState)(/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loading, {}));
+  const [children, setChildren] = (0, import_react57.useState)(/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, {}));
   const theme = (0, import_react57.useContext)(et);
   const {
     data,
@@ -24200,13 +24581,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
     return stub();
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Error2, { message: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Error2, { message: error.message });
   }
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Error2, { message: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Error2, { message: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Error2,
       {
         message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -24214,9 +24595,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
     );
   }
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loading, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children });
 };
 /*! Bundled license information: