@schematichq/schematic-components 1.7.0 → 1.8.0

package/dist/schematic-components.esm.js

@@ -1852,7 +1852,7 @@ var HOURS_IN_MS = MINUTES_IN_MS * 60;
 var DAYS_IN_MS = HOURS_IN_MS * 24;
 
 // src/const/debounce.ts
-var DEBOUNCE_SETTINGS = {
+var LEADING_DEBOUNCE_SETTINGS = {
   leading: true,
   trailing: false
 };
@@ -2092,6 +2092,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") {
@@ -2100,6 +2102,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 || [];
@@ -2131,6 +2135,17 @@ 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
+    };
+  }
+}
 
 // src/utils/pluralize.ts
 var pluralRules = [];
@@ -6720,6 +6735,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",
@@ -6773,7 +6789,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",
@@ -6828,6 +6844,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}}",
@@ -7434,7 +7452,7 @@ function BillingProductResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   return {
     accountId: json["account_id"],
     createdAt: new Date(json["created_at"]),
-    currency: json["currency"],
+    currency: json["currency"] == null ? void 0 : json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     isActive: json["is_active"],
@@ -7582,7 +7600,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
   return {
     accountId: json["account_id"],
     createdAt: new Date(json["created_at"]),
-    currency: json["currency"],
+    currency: json["currency"] == null ? void 0 : json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     isActive: json["is_active"],
@@ -9824,7 +9842,7 @@ function BillingProductResponseDataFromJSONTyped4(json, ignoreDiscriminator) {
   return {
     accountId: json["account_id"],
     createdAt: new Date(json["created_at"]),
-    currency: json["currency"],
+    currency: json["currency"] == null ? void 0 : json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     isActive: json["is_active"],
@@ -9944,7 +9962,7 @@ function BillingProductDetailResponseDataFromJSONTyped5(json, ignoreDiscriminato
   return {
     accountId: json["account_id"],
     createdAt: new Date(json["created_at"]),
-    currency: json["currency"],
+    currency: json["currency"] == null ? void 0 : json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     isActive: json["is_active"],
@@ -10588,7 +10606,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.7.0",
+      "X-Schematic-Components-Version": "1.8.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10630,7 +10648,11 @@ var EmbedProvider = ({
     }
   }, [api.public]);
   const debouncedHydratePublic = useMemo3(
-    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      hydratePublic,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [hydratePublic]
   );
   const hydrate = useCallback3(async () => {
@@ -10652,7 +10674,7 @@ var EmbedProvider = ({
     }
   }, [api.checkout]);
   const debouncedHydrate = useMemo3(
-    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [hydrate]
   );
   const hydrateComponent = useCallback3(
@@ -10679,7 +10701,11 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedHydrateComponent = useMemo3(
-    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      hydrateComponent,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [hydrateComponent]
   );
   const hydrateExternal = useCallback3(async function(fn) {
@@ -10699,14 +10725,22 @@ var EmbedProvider = ({
     }
   }, []);
   const debouncedHydrateExternal = useMemo3(
-    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      hydrateExternal,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [hydrateExternal]
   );
   const createSetupIntent = useCallback3(async () => {
     return api.checkout?.createSetupIntent();
   }, [api.checkout]);
   const debouncedCreateSetupIntent = useMemo3(
-    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      createSetupIntent,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [createSetupIntent]
   );
   const updatePaymentMethod = useCallback3(
@@ -10725,7 +10759,11 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedUpdatePaymentMethod = useMemo3(
-    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      updatePaymentMethod,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [updatePaymentMethod]
   );
   const deletePaymentMethod = useCallback3(
@@ -10744,7 +10782,11 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedDeletePaymentMethod = useMemo3(
-    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      deletePaymentMethod,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [deletePaymentMethod]
   );
   const checkout = useCallback3(
@@ -10763,7 +10805,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedCheckout = useMemo3(
-    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [checkout]
   );
   const previewCheckout = useCallback3(
@@ -10772,15 +10814,6 @@ var EmbedProvider = ({
     },
     [api.checkout]
   );
-  const debouncedPreviewCheckout = useMemo3(
-    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, {
-      // invoke immediately for minimal latency
-      leading: true,
-      // but also ensure latest data is fetched
-      trailing: true
-    }),
-    [previewCheckout]
-  );
   const unsubscribe = useCallback3(async () => {
     const response = await api.checkout?.checkoutUnsubscribe();
     if (response) {
@@ -10792,7 +10825,7 @@ var EmbedProvider = ({
     return response;
   }, [api.checkout]);
   const debouncedUnsubscribe = useMemo3(
-    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [unsubscribe]
   );
   const getUpcomingInvoice = useCallback3(
@@ -10804,21 +10837,29 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedGetUpcomingInvoice = useMemo3(
-    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      getUpcomingInvoice,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [getUpcomingInvoice]
   );
   const getCustomerBalance = useCallback3(async () => {
     return api.checkout?.fetchCustomerBalance();
   }, [api.checkout]);
   const debouncedGetCustomerBalance = useMemo3(
-    () => (0, import_debounce.default)(getCustomerBalance, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(
+      getCustomerBalance,
+      FETCH_DEBOUNCE_TIMEOUT,
+      LEADING_DEBOUNCE_SETTINGS
+    ),
     [getCustomerBalance]
   );
   const listInvoices = useCallback3(async () => {
     return api.checkout?.listInvoices();
   }, [api.checkout]);
   const debouncedListInvoices = useMemo3(
-    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [listInvoices]
   );
   const setError = useCallback3(
@@ -10958,7 +10999,7 @@ var EmbedProvider = ({
         updatePaymentMethod: debouncedUpdatePaymentMethod,
         deletePaymentMethod: debouncedDeletePaymentMethod,
         checkout: debouncedCheckout,
-        previewCheckout: debouncedPreviewCheckout,
+        previewCheckout,
         unsubscribe: debouncedUnsubscribe,
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
         getCustomerBalance: debouncedGetCustomerBalance,
@@ -14001,8 +14042,15 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-import { useEffect as useEffect5, useMemo as useMemo8, useState as useState9 } from "react";
-import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, useEffect as useEffect5, useMemo as useMemo8, useState as useState9 } from "react";
+
+// src/components/shared/checkout-dialog/styles.ts
+var FlexWithAlignEnd = dt(Flex)`
+  align-items: end;
+`;
+
+// src/components/shared/checkout-dialog/Plan.tsx
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
@@ -14042,104 +14090,96 @@ var PlanButtonGroup = ({
 }) => {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const { isCurrentPlan, isValidPlan, isTrialing } = useMemo8(() => {
+  const isTrialing = useMemo8(() => {
+    return isCheckoutData(data) && data.subscription?.status === "trialing" || false;
+  }, [data]);
+  const { isCurrentPlan, isValidPlan } = useMemo8(() => {
     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__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      !isTrialing && /* @__PURE__ */ jsx19(Fragment8, { children: isSelected && shouldTrial ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ jsx19(
-        Button,
-        {
-          type: "button",
-          disabled: (isLoading || !isValidPlan) && !plan.custom,
-          ...plan.custom ? {
-            as: "a",
-            href: plan.customPlanConfig?.ctaWebSite ?? "#",
-            target: "_blank",
-            rel: "noreferrer"
-          } : {
+      !isTrialing && /* @__PURE__ */ jsx19(Fragment9, { children: isSelected && shouldTrial ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+        /* @__PURE__ */ jsx19(
+          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__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Start X day trial", { days: plan.trialDays })
+          }
+        ),
+        isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
+      ] }) }),
+      !plan.custom && /* @__PURE__ */ jsx19(Fragment9, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+        /* @__PURE__ */ jsx19(
+          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__ */ jsx19(
-            Tooltip,
-            {
-              trigger: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ jsx19(Text, { children: t2("Current usage exceeds the limit of this plan.") })
-            }
-          ) : t2("Start X day trial", { days: plan.trialDays })
-        }
-      ) }),
-      !plan.custom && /* @__PURE__ */ jsx19(Fragment8, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx19(
-        Button,
-        {
-          type: "button",
-          disabled: isLoading || !isValidPlan,
-          onClick: () => {
-            onSelect({ plan, shouldTrial: false });
-          },
-          $size: "sm",
-          $color: "primary",
-          $variant: isTrialing ? "filled" : "text",
-          $fullWidth: true,
-          children: !isValidPlan ? /* @__PURE__ */ jsx19(
-            Tooltip,
-            {
-              trigger: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ jsx19(Text, { children: t2("Current usage exceeds the limit of this plan.") })
-            }
-          ) : t2("Choose plan")
-        }
-      ) })
+              onSelect({ plan, shouldTrial: false });
+            },
+            $size: "sm",
+            $color: "primary",
+            $variant: isTrialing ? "filled" : "text",
+            $fullWidth: true,
+            children: !isValidPlan ? /* @__PURE__ */ jsx19(Box, { $textAlign: "center", children: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) }) : t2("Choose plan")
+          }
+        ),
+        isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
+      ] }) })
     ] });
   }
-  return isSelected ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx19(
-    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__ */ jsx19(
-        Tooltip,
-        {
-          trigger: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-          content: /* @__PURE__ */ jsx19(Text, { children: t2("Current usage exceeds the limit of this plan.") })
-        }
-      ) : t2("Choose plan")
-    }
-  );
+  return isSelected ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+    /* @__PURE__ */ jsx19(
+      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__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Choose plan")
+      }
+    ),
+    isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
+  ] });
 };
 var Plan = ({
   isLoading,
@@ -14147,8 +14187,7 @@ var Plan = ({
   selectedPlan,
   period,
   selectPlan,
-  shouldTrial,
-  showPeriodToggle
+  shouldTrial
 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
@@ -14156,16 +14195,23 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = useState9(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const { isTrialing, showZeroPriceAsFree } = useMemo8(() => {
+  const { isTrialing, showCredits, showPeriodToggle, showZeroPriceAsFree } = useMemo8(() => {
+    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) => {
@@ -14262,7 +14308,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    credits.length > 0 && /* @__PURE__ */ jsx19(
+                    showCredits && credits.length > 0 && /* @__PURE__ */ jsx19(
                       Flex,
                       {
                         $flexDirection: "column",
@@ -14297,7 +14343,7 @@ var Plan = ({
                                       credit.quantity,
                                       " ",
                                       getFeatureName(credit, credit.quantity),
-                                      credit.period && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      credit.period && /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                         " ",
                                         t2("per"),
                                         " ",
@@ -14348,6 +14394,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,
@@ -14355,6 +14402,7 @@ var Plan = ({
                           packageSize: entitlementPackageSize = 1
                         } = getEntitlementPrice(entitlement, planPeriod) || {};
                         const metricPeriodName = getMetricPeriodName(entitlement);
+                        const UsageDetailsContainer = entitlement.billingThreshold ? FlexWithAlignEnd : Fragment8;
                         return /* @__PURE__ */ jsx19(
                           Flex,
                           {
@@ -14379,7 +14427,7 @@ var Plan = ({
                                   $justifyContent: "center",
                                   $gap: "0.5rem",
                                   children: [
-                                    /* @__PURE__ */ jsx19(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                    /* @__PURE__ */ jsx19(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                       formatCurrency(
                                         entitlementPrice,
                                         entitlementCurrency
@@ -14387,7 +14435,7 @@ var Plan = ({
                                       " ",
                                       t2("per"),
                                       " ",
-                                      entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                         entitlementPackageSize,
                                         " "
                                       ] }),
@@ -14395,7 +14443,7 @@ var Plan = ({
                                         entitlement.feature,
                                         entitlementPackageSize
                                       ),
-                                      entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                         " ",
                                         t2("per"),
                                         " ",
@@ -14407,7 +14455,7 @@ var Plan = ({
                                         entitlement,
                                         period: planPeriod
                                       }
-                                    ) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                    ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                       entitlement.consumptionRate,
                                       " ",
                                       getFeatureName(
@@ -14418,12 +14466,25 @@ var Plan = ({
                                       t2("per"),
                                       " ",
                                       getFeatureName(entitlement.feature, 1)
-                                    ] }) : hasNumericValue ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                    ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx19(Fragment9, { 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__ */ jsxs14(Fragment9, { children: [
                                       entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
                                         item: getFeatureName(
                                           entitlement.feature
                                         )
-                                      }) : typeof limit === "number" && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      }) : typeof limit === "number" && /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                         formatNumber(limit),
                                         " ",
                                         getFeatureName(
@@ -14431,14 +14492,14 @@ var Plan = ({
                                           limit
                                         )
                                       ] }),
-                                      metricPeriodName && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      metricPeriodName && /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                         " ",
                                         t2("per"),
                                         " ",
                                         t2(metricPeriodName)
                                       ] })
                                     ] }) : entitlement.feature.name }),
-                                    /* @__PURE__ */ jsxs14(Flex, { $alignItems: "end", children: [
+                                    /* @__PURE__ */ jsxs14(UsageDetailsContainer, { children: [
                                       entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs14(
                                         Text,
                                         {
@@ -14453,7 +14514,7 @@ var Plan = ({
                                               entitlementCurrency
                                             ),
                                             "/",
-                                            entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                            entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                               entitlementPackageSize,
                                               " "
                                             ] }),
@@ -14461,7 +14522,7 @@ var Plan = ({
                                               entitlement.feature,
                                               entitlementPackageSize
                                             ),
-                                            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs14(Fragment9, { children: [
                                               "/",
                                               shortenPeriod(planPeriod)
                                             ] })
@@ -14560,7 +14621,7 @@ var Plan = ({
 };
 
 // src/components/shared/checkout-dialog/Usage.tsx
-import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var Usage = ({ entitlements, updateQuantity, period }) => {
   const { settings } = useEmbed();
   const { t: t2 } = useTranslation();
@@ -14668,7 +14729,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           formatCurrency(price ?? 0, currency),
                           /* @__PURE__ */ jsxs15("sub", { children: [
                             "/",
-                            packageSize > 1 && /* @__PURE__ */ jsxs15(Fragment9, { children: [
+                            packageSize > 1 && /* @__PURE__ */ jsxs15(Fragment10, { children: [
                               packageSize,
                               " "
                             ] }),
@@ -14733,18 +14794,19 @@ var CheckoutDialog = ({ top = 0 }) => {
     showPeriodToggle,
     trialPaymentMethodRequired
   } = useMemo9(() => {
+    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]);
@@ -15347,8 +15409,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     plans: availablePlans,
                     selectedPlan,
                     selectPlan,
-                    shouldTrial,
-                    showPeriodToggle
+                    shouldTrial
                   }
                 ) : checkoutStage === "usage" ? /* @__PURE__ */ jsx21(
                   Usage,
@@ -15726,7 +15787,7 @@ import { useMemo as useMemo12 } from "react";
 
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
 import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var PriceText = ({
   feature,
   period,
@@ -15737,7 +15798,7 @@ var PriceText = ({
   const { settings } = useEmbed();
   const text = useMemo11(() => {
     if (!flatAmount && perUnitPrice) {
-      return /* @__PURE__ */ jsxs19(Fragment10, { children: [
+      return /* @__PURE__ */ jsxs19(Fragment11, { children: [
         formatCurrency(perUnitPrice, currency),
         /* @__PURE__ */ jsxs19("sub", { children: [
           "/",
@@ -15746,7 +15807,7 @@ var PriceText = ({
       ] });
     }
     if (flatAmount && !perUnitPrice) {
-      return /* @__PURE__ */ jsxs19(Fragment10, { children: [
+      return /* @__PURE__ */ jsxs19(Fragment11, { children: [
         formatCurrency(flatAmount, currency),
         period && /* @__PURE__ */ jsxs19("sub", { children: [
           "/",
@@ -15754,7 +15815,7 @@ var PriceText = ({
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsxs19(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs19(Fragment11, { children: [
       formatCurrency(perUnitPrice, currency),
       /* @__PURE__ */ jsxs19("sub", { children: [
         "/",
@@ -15772,7 +15833,7 @@ var PriceText = ({
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var PricingTiersTooltip = ({
   feature,
   period,
@@ -15829,7 +15890,7 @@ var PricingTiersTooltip = ({
                     $size: 0.875 * settings.theme.typography.text.fontSize,
                     children: [
                       tier.from,
-                      tier.from !== tier.to && /* @__PURE__ */ jsx26(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
+                      tier.from !== tier.to && /* @__PURE__ */ jsx26(Fragment12, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
                     ]
                   }
                 ) }),
@@ -15848,7 +15909,7 @@ var PricingTiersTooltip = ({
             index
           );
         }) }),
-        (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ jsxs20(Fragment11, { children: [
+        (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ jsxs20(Fragment12, { children: [
           /* @__PURE__ */ jsx26(
             "hr",
             {
@@ -16050,8 +16111,31 @@ var UnsubscribeDialog = ({ top = 0 }) => {
   ] });
 };
 
+// src/components/shared/usage-violation-text/UsageViolationText.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var UsageViolationText = ({ violations }) => {
+  const { t: t2 } = useTranslation();
+  const { settings } = useEmbed();
+  return /* @__PURE__ */ jsx28(
+    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
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
@@ -16073,77 +16157,77 @@ var Badge = () => {
           " "
         ] }),
         /* @__PURE__ */ jsxs22("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "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",
@@ -16157,9 +16241,9 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var Disabled = () => {
-  return /* @__PURE__ */ jsx29(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx29(Card, { children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx30(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx30(Card, { children: /* @__PURE__ */ jsxs23(
     Element,
     {
       as: Flex,
@@ -16168,8 +16252,8 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx29(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx29(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
-        /* @__PURE__ */ jsx29(Text, { as: "p", children: "Please try again later." })
+        /* @__PURE__ */ jsx30(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx30(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
+        /* @__PURE__ */ jsx30(Text, { as: "p", children: "Please try again later." })
       ]
     }
   ) }) });
@@ -16178,7 +16262,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx29(Disabled, {});
+      return /* @__PURE__ */ jsx30(Disabled, {});
     default:
       return children;
   }
@@ -16203,7 +16287,7 @@ var StyledViewport = dt.div.withConfig({
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var Viewport = forwardRef5(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
@@ -16229,24 +16313,24 @@ var Viewport = forwardRef5(
         parent.style.overflow = "";
       };
     }, [portal, layout]);
-    return /* @__PURE__ */ jsxs24(Fragment12, { children: [
+    return /* @__PURE__ */ jsxs24(Fragment13, { children: [
       /* @__PURE__ */ jsxs24(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ jsx30(RenderLayout, { children }),
-        isBadgeVisible && /* @__PURE__ */ jsx30(Badge, {})
+        /* @__PURE__ */ jsx31(RenderLayout, { children }),
+        isBadgeVisible && /* @__PURE__ */ jsx31(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx30(CheckoutDialog, { top }), portal || document.body),
+      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx31(CheckoutDialog, { top }), portal || document.body),
       layout === "unsubscribe" && createPortal2(
-        /* @__PURE__ */ jsx30(UnsubscribeDialog, { top }),
+        /* @__PURE__ */ jsx31(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && createPortal2(/* @__PURE__ */ jsx30(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && createPortal2(/* @__PURE__ */ jsx31(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/elements/button/Button.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -16277,7 +16361,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Element,
     {
       as: Flex,
@@ -16285,7 +16369,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx32(
         Button,
         {
           as: "a",
@@ -16309,8 +16393,8 @@ ButtonElement.displayName = "Button";
 import { forwardRef as forwardRef7, useMemo as useMemo17, useRef as useRef10, useState as useState14 } from "react";
 
 // src/components/elements/included-features/UsageDetails.tsx
-import { Fragment as Fragment13, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment14, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment14, useMemo as useMemo16 } from "react";
+import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 var UsageDetails = ({
   entitlement,
   shouldWrapChildren,
@@ -16328,8 +16412,18 @@ var UsageDetails = ({
   } = entitlement;
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const period = useMemo16(() => {
-    return isCheckoutData(data) && typeof data.company?.plan?.planPeriod === "string" ? data.company.plan.planPeriod : void 0;
+  const { period, showCredits } = useMemo16(() => {
+    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 } = useMemo16(
     () => getUsageDetails(entitlement, period),
@@ -16341,19 +16435,19 @@ var UsageDetails = ({
     }
     const { price, currency, packageSize = 1 } = billingPrice || {};
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof allocation === "number") {
-      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment15, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
       ] });
     }
     if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof price === "number") {
-      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment15, { children: [
         formatCurrency(price, currency),
         " ",
         t2("per"),
         " ",
-        packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment14, { children: [
+        packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment15, { children: [
           packageSize,
           " "
         ] }),
@@ -16361,22 +16455,22 @@ var UsageDetails = ({
       ] });
     }
     if (priceBehavior === "overage" /* Overage */ && typeof softLimit === "number") {
-      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment15, { children: [
         formatNumber(softLimit),
         " ",
         getFeatureName(feature, softLimit)
       ] });
     }
     if (priceBehavior === "tier" /* Tiered */) {
-      return /* @__PURE__ */ jsx32(Fragment14, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
+      return /* @__PURE__ */ jsx33(Fragment15, { 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__ */ jsxs25(Fragment14, { children: [
+    if (showCredits && priceBehavior === "credit_burndown" /* Credit */ && planEntitlement?.valueCredit && typeof planEntitlement?.consumptionRate === "number") {
+      return /* @__PURE__ */ jsxs25(Fragment15, { children: [
         planEntitlement.consumptionRate,
         " ",
         getFeatureName(
@@ -16390,7 +16484,7 @@ var UsageDetails = ({
       ] });
     }
     if (!priceBehavior && typeof allocation === "number") {
-      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment15, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
@@ -16408,7 +16502,8 @@ var UsageDetails = ({
     priceBehavior,
     softLimit,
     billingPrice,
-    currentTier?.to
+    currentTier?.to,
+    showCredits
   ]);
   const usageText = useMemo16(() => {
     if (!feature) {
@@ -16419,10 +16514,10 @@ var UsageDetails = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ jsxs25(Fragment13, { children: [
+        /* @__PURE__ */ jsxs25(Fragment14, { children: [
           formatCurrency(price, currency),
           "/",
-          packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment14, { children: [
+          packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment15, { children: [
             packageSize,
             " "
           ] }),
@@ -16434,7 +16529,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__ */ jsxs25(Fragment13, { children: [
+        /* @__PURE__ */ jsxs25(Fragment14, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -16446,14 +16541,14 @@ var UsageDetails = ({
     }
     if (typeof cost === "number" && cost > 0) {
       acc.push(
-        /* @__PURE__ */ jsxs25(Fragment13, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx32(Fragment14, { children: " \u2022 " }),
+        /* @__PURE__ */ jsxs25(Fragment14, { children: [
+          acc.length > 0 && /* @__PURE__ */ jsx33(Fragment15, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
       index += 1;
       if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
-        acc.push(/* @__PURE__ */ jsxs25(Fragment13, { children: [
+        acc.push(/* @__PURE__ */ jsxs25(Fragment14, { children: [
           "/",
           shortenPeriod(period)
         ] }, index));
@@ -16462,8 +16557,8 @@ var UsageDetails = ({
     }
     if (metricResetAt) {
       acc.push(
-        /* @__PURE__ */ jsxs25(Fragment13, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx32(Fragment14, { children: " \u2022 " }),
+        /* @__PURE__ */ jsxs25(Fragment14, { children: [
+          acc.length > 0 && /* @__PURE__ */ jsx33(Fragment15, { children: " \u2022 " }),
           t2("Resets", {
             date: toPrettyDate(metricResetAt, {
               month: "numeric",
@@ -16497,7 +16592,7 @@ var UsageDetails = ({
     billingPrice,
     cost
   ]);
-  if (!text || !feature?.name) {
+  if (!text && !usageText || !feature) {
     return null;
   }
   return /* @__PURE__ */ jsxs25(
@@ -16507,10 +16602,10 @@ var UsageDetails = ({
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        layout.entitlement.isVisible && /* @__PURE__ */ jsx32(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx32(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
+        layout.entitlement.isVisible && /* @__PURE__ */ jsx33(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx33(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
         layout.usage.isVisible && usageText && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "end", $alignItems: "end", $whiteSpace: "nowrap", children: [
-          /* @__PURE__ */ jsx32(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText }),
-          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText }),
+          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx33(
             PricingTiersTooltip,
             {
               feature,
@@ -16526,7 +16621,7 @@ var UsageDetails = ({
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -16610,7 +16705,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx33(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx33(Text, { display: props.header.fontStyle, children: props.header.text }) }),
+        props.header.isVisible && /* @__PURE__ */ jsx34(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx34(Text, { display: props.header.fontStyle, children: props.header.text }) }),
         featureUsage.slice(0, showCount).map((entitlement, index) => {
           const shouldShowDetails = entitlement.feature?.name && (entitlement.feature?.featureType === "event" /* Event */ || entitlement.feature?.featureType === "trait" /* Trait */);
           return /* @__PURE__ */ jsxs26(
@@ -16634,7 +16729,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx33(
+                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx34(
                         Icon3,
                         {
                           name: entitlement.feature.icon,
@@ -16643,7 +16738,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           rounded: true
                         }
                       ),
-                      entitlement.feature?.name && /* @__PURE__ */ jsx33(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
+                      entitlement.feature?.name && /* @__PURE__ */ jsx34(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
                       props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsxs26(
                         Text,
                         {
@@ -16661,7 +16756,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx33(
+                shouldShowDetails && /* @__PURE__ */ jsx34(
                   UsageDetails,
                   {
                     entitlement,
@@ -16675,14 +16770,14 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
           );
         }),
         shouldShowExpand && /* @__PURE__ */ jsxs26(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             Icon3,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -16700,7 +16795,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef8, useCallback as useCallback11, useEffect as useEffect7, useState as useState15 } from "react";
-import { Fragment as Fragment15, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -16771,7 +16866,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
     return null;
   }
   return /* @__PURE__ */ jsxs27(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx34(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx34(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    /* @__PURE__ */ jsx35(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx35(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
     error ? /* @__PURE__ */ jsxs27(
       Flex,
       {
@@ -16781,8 +16876,8 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx34(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
+          /* @__PURE__ */ jsx35(
             Button,
             {
               type: "button",
@@ -16795,12 +16890,12 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx34(TransitionBox, { children: /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && /* @__PURE__ */ jsx34(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx34(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
-      invoices.length > 0 ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
-        /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+    ) : !isLoading && /* @__PURE__ */ jsx35(TransitionBox, { children: /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && /* @__PURE__ */ jsx35(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx35(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
+      invoices.length > 0 ? /* @__PURE__ */ jsxs27(Fragment16, { children: [
+        /* @__PURE__ */ jsx35(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
           return /* @__PURE__ */ jsxs27(Flex, { $justifyContent: "space-between", children: [
-            props.date.isVisible && /* @__PURE__ */ jsx34(
+            props.date.isVisible && /* @__PURE__ */ jsx35(
               Text,
               {
                 display: props.date.fontStyle,
@@ -16814,18 +16909,18 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
                 children: date
               }
             ),
-            props.amount.isVisible && /* @__PURE__ */ jsx34(Text, { display: props.amount.fontStyle, children: amount })
+            props.amount.isVisible && /* @__PURE__ */ jsx35(Text, { display: props.amount.fontStyle, children: amount })
           ] }, index);
         }) }),
         props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Icon3,
             {
               name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Text,
             {
               onClick: toggleListSize,
@@ -16837,7 +16932,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsx34(Text, { display: "heading2", children: t2("No invoices created yet") })
+      ] }) : /* @__PURE__ */ jsx35(Text, { display: "heading2", children: t2("No invoices created yet") })
     ] }) })
   ] });
 });
@@ -16847,14 +16942,14 @@ Invoices.displayName = "Invoices";
 import { forwardRef as forwardRef9, useCallback as useCallback12, useMemo as useMemo18, useRef as useRef11, useState as useState16 } from "react";
 
 // src/components/elements/metered-features/Meter.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Meter = ({ entitlement, usageDetails }) => {
   const { priceBehavior, usage } = entitlement;
   const limit = usageDetails.limit ?? usageDetails.currentTier?.to;
   if (typeof usage !== "number" || !limit || limit === Infinity) {
     return null;
   }
-  const meter = /* @__PURE__ */ jsx35(
+  const meter = /* @__PURE__ */ jsx36(
     ProgressBar,
     {
       progress: Math.min(usage, limit) / Math.max(usage, limit) * 100,
@@ -16871,7 +16966,7 @@ var Meter = ({ entitlement, usageDetails }) => {
 };
 
 // src/components/elements/metered-features/PriceDetails.tsx
-import { Fragment as Fragment16, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 var PriceDetails = ({
   entitlement,
   usageDetails,
@@ -16918,12 +17013,12 @@ var PriceDetails = ({
           formatCurrency(currentTierPerUnitPrice, currency),
           /* @__PURE__ */ jsxs28(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
+            packageSize > 1 && /* @__PURE__ */ jsxs28(Fragment17, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(feature, packageSize),
-            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ jsxs28(Fragment16, { children: [
+            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ jsxs28(Fragment17, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -16933,9 +17028,9 @@ var PriceDetails = ({
             t2("Tier"),
             ": ",
             currentTier?.from || 1,
-            typeof currentTier?.to === "number" && (currentTier?.from || 1) !== currentTier?.to && /* @__PURE__ */ jsx36(Fragment16, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
+            typeof currentTier?.to === "number" && (currentTier?.from || 1) !== currentTier?.to && /* @__PURE__ */ jsx37(Fragment17, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
           ] }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             PricingTiersTooltip,
             {
               period,
@@ -16946,7 +17041,7 @@ var PriceDetails = ({
             }
           )
         ] }),
-        typeof amount === "number" && /* @__PURE__ */ jsx36(Fragment16, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs28(Text, { children: [
+        typeof amount === "number" && /* @__PURE__ */ jsx37(Fragment17, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs28(Text, { children: [
           formatNumber(amount),
           " ",
           getFeatureName(feature, amount),
@@ -16986,7 +17081,7 @@ var Container2 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment17, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t2 } = useTranslation();
   const { feature, priceBehavior, allocation, usage, metricResetAt } = entitlement;
@@ -17000,7 +17095,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")
   );
@@ -17015,7 +17112,7 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       })
     );
   }
-  return /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx37(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
+  return /* @__PURE__ */ jsx38(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx38(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
 };
 function resolveDesignProps4(props) {
   return {
@@ -17049,7 +17146,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { period, meteredFeatures, creditGroups } = useMemo18(() => {
+  const { period, meteredFeatures, creditGroups, showCredits } = useMemo18(() => {
+    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(
@@ -17067,20 +17165,19 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       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] = useState16(
@@ -17108,7 +17205,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       acc.push(
         /* @__PURE__ */ jsxs29(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
           /* @__PURE__ */ jsxs29(Flex, { $gap: "1.5rem", children: [
-            props.icon.isVisible && /* @__PURE__ */ jsx37(
+            props.icon.isVisible && /* @__PURE__ */ jsx38(
               Icon3,
               {
                 name: feature.icon,
@@ -17130,8 +17227,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   $gap: "1rem",
                   children: [
                     /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                      /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.header.fontStyle, children: feature.name }) }),
-                      props.description.isVisible && /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.description.fontStyle, children: feature.description }) })
+                      /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(Text, { display: props.header.fontStyle, children: feature.name }) }),
+                      props.description.isVisible && /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(Text, { display: props.description.fontStyle, children: feature.description }) })
                     ] }),
                     /* @__PURE__ */ jsxs29(
                       Box,
@@ -17140,20 +17237,20 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         $flexGrow: 1,
                         $textAlign: shouldWrapChildren ? "left" : "right",
                         children: [
-                          props.usage.isVisible && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx37(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
-                            typeof limit === "number" && /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                          props.usage.isVisible && /* @__PURE__ */ jsx38(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx38(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs29(Fragment18, { children: [
+                            typeof limit === "number" && /* @__PURE__ */ jsxs29(Fragment18, { children: [
                               formatNumber(limit),
                               " "
                             ] }),
                             getFeatureName(feature, limit)
-                          ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                          ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs29(Fragment18, { children: [
                             formatNumber(usage),
                             " ",
                             getFeatureName(feature, usage),
                             " ",
                             t2("used")
                           ] }) }) }),
-                          props.allocation.isVisible && /* @__PURE__ */ jsx37(
+                          props.allocation.isVisible && /* @__PURE__ */ jsx38(
                             Limit,
                             {
                               entitlement,
@@ -17167,14 +17264,14 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   ]
                 }
               ),
-              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ jsx37(
+              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ jsx38(
                 Meter,
                 {
                   entitlement,
                   usageDetails
                 }
               ),
-              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx37(
+              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx38(
                 Button,
                 {
                   type: "button",
@@ -17187,7 +17284,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               )
             ] })
           ] }),
-          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsx37(
+          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsx38(
             PriceDetails,
             {
               entitlement,
@@ -17199,11 +17296,11 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       );
       return acc;
     }, []),
-    creditGroups.map((credit, index) => {
+    showCredits && creditGroups.map((credit, index) => {
       const isExpanded = creditVisibility.find(({ id }) => credit.id === id)?.isExpanded ?? false;
       return /* @__PURE__ */ jsxs29(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
         /* @__PURE__ */ jsxs29(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && /* @__PURE__ */ jsx37(
+          props.icon.isVisible && /* @__PURE__ */ jsx38(
             Icon3,
             {
               name: credit.icon,
@@ -17213,12 +17310,12 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
             }
           ),
           /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ jsx37(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.header.fontStyle, children: credit.name }) }),
-              props.description.isVisible && /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: props.description.fontStyle, children: credit.description }) })
+            /* @__PURE__ */ jsx38(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(Text, { display: props.header.fontStyle, children: credit.name }) }),
+              props.description.isVisible && /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(Text, { display: props.description.fontStyle, children: credit.description }) })
             ] }) }),
             /* @__PURE__ */ jsxs29(Flex, { $gap: "1rem", children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 ProgressBar,
                 {
                   progress: credit.total.used / credit.total.value * 100,
@@ -17229,7 +17326,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   )]
                 }
               ),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 Button,
                 {
                   type: "button",
@@ -17244,12 +17341,12 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           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__ */ jsx37(
+            children: /* @__PURE__ */ jsx38(
               TransitionBox,
               {
                 $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0375)" : "hsla(0, 0%, 100%, 0.075)",
@@ -17257,19 +17354,19 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                 children: credit.grants.map((grant, index2) => {
                   const paddingX = settings.theme.card.padding / TEXT_BASE_SIZE;
                   const padding = index2 > 0 ? `0 ${paddingX}rem 1rem` : `1rem ${paddingX}rem`;
-                  return /* @__PURE__ */ jsx37(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
-                    /* @__PURE__ */ jsx37(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx37(Text, { children: t2("X items included in plan", {
+                  return /* @__PURE__ */ jsx38(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs29(Fragment18, { children: [
+                    /* @__PURE__ */ jsx38(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx38(Text, { children: t2("X items included in plan", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, grant.quantity)
                     }) }) }),
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ jsx37(Text, { children: t2("Resets", {
+                        children: grant.expiresAt && /* @__PURE__ */ jsx38(Text, { children: t2("Resets", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -17281,8 +17378,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         }) })
                       }
                     )
-                  ] }) : /* @__PURE__ */ jsxs29(Fragment17, { children: [
-                    /* @__PURE__ */ jsx37(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx37(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ jsx37(Fragment17, { children: t2("X item bundle", {
+                  ] }) : /* @__PURE__ */ jsxs29(Fragment18, { children: [
+                    /* @__PURE__ */ jsx38(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx38(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ jsx38(Fragment18, { children: t2("X item bundle", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, 1),
                       createdAt: toPrettyDate(grant.createdAt, {
@@ -17290,7 +17387,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         month: "2-digit",
                         year: "2-digit"
                       })
-                    }) }) : /* @__PURE__ */ jsx37(Fragment17, { children: t2("X item grant", {
+                    }) }) : /* @__PURE__ */ jsx38(Fragment18, { children: t2("X item grant", {
                       amount: grant.quantity,
                       item: getFeatureName(
                         credit,
@@ -17302,14 +17399,14 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         year: "2-digit"
                       })
                     }) }) }) }),
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ jsx37(Text, { children: t2("Expires", {
+                        children: grant.expiresAt && /* @__PURE__ */ jsx38(Text, { children: t2("Expires", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -17328,7 +17425,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
           }
         ),
         /* @__PURE__ */ jsxs29(Flex, { $gap: "0.25rem", children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             Icon3,
             {
               name: "chevron-down",
@@ -17339,7 +17436,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             Text,
             {
               onClick: () => toggleBalanceDetails(credit.id),
@@ -17359,24 +17456,24 @@ import { forwardRef as forwardRef10, useMemo as useMemo20 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 import { useMemo as useMemo19 } from "react";
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
   iconTitle,
   label,
   paymentLast4
 }) => {
-  return /* @__PURE__ */ jsx38(Text, { children: /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ jsx38(Icon3, { name: iconName, title: iconTitle }),
+  return /* @__PURE__ */ jsx39(Text, { children: /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ jsx39(Icon3, { name: iconName, title: iconTitle }),
     (label || paymentLast4) && /* @__PURE__ */ jsxs30(Box, { $flexGrow: 1, children: [
-      label && /* @__PURE__ */ jsx38(Text, { children: label }),
+      label && /* @__PURE__ */ jsx39(Text, { children: label }),
       " ",
-      paymentLast4 && /* @__PURE__ */ jsx38(Text, { children: paymentLast4 })
+      paymentLast4 && /* @__PURE__ */ jsx39(Text, { children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
-  return /* @__PURE__ */ jsx38(Text, { children: /* @__PURE__ */ jsx38(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx38(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx38(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
+  return /* @__PURE__ */ jsx39(Text, { children: /* @__PURE__ */ jsx39(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx39(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx39(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -17443,8 +17540,8 @@ var PaymentMethodElement = ({
   const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
   return /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
     props.header.isVisible && /* @__PURE__ */ jsxs30(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx38(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx38(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
+      /* @__PURE__ */ jsx39(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx39(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
     ] }),
     /* @__PURE__ */ jsxs30(
       Flex,
@@ -17455,8 +17552,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod ? /* @__PURE__ */ jsx38(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx38(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx38(
+          paymentMethod ? /* @__PURE__ */ jsx39(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx39(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx39(
             Text,
             {
               onClick: onEdit,
@@ -17501,21 +17598,21 @@ var PaymentListElement = ({
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
       children: [
-        iconName && /* @__PURE__ */ jsx38(Icon3, { name: iconName, title: iconTitle }),
+        iconName && /* @__PURE__ */ jsx39(Icon3, { name: iconName, title: iconTitle }),
         (label || paymentLast4) && /* @__PURE__ */ jsxs30(Box, { $flexGrow: 1, children: [
-          label && /* @__PURE__ */ jsx38(Text, { children: label }),
+          label && /* @__PURE__ */ jsx39(Text, { children: label }),
           " ",
-          paymentLast4 && /* @__PURE__ */ jsx38(Text, { children: paymentLast4 })
+          paymentLast4 && /* @__PURE__ */ jsx39(Text, { children: paymentLast4 })
         ] }),
-        expirationDate && /* @__PURE__ */ jsx38(
+        expirationDate && /* @__PURE__ */ jsx39(
           Box,
           {
             $flexGrow: 1,
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ jsx38(Text, { children: t("Expires", { date: expirationDate }) })
+            children: /* @__PURE__ */ jsx39(Text, { children: t("Expires", { date: expirationDate }) })
           }
         ),
-        /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
           Text,
           {
             onClick: () => {
@@ -17528,7 +17625,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           Icon3,
           {
             tabIndex: 0,
@@ -17550,7 +17647,7 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -17591,7 +17688,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
       monthsToExpiration: void 0
     };
   }, [data]);
-  return /* @__PURE__ */ jsx39(Element, { ref, className, children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(Element, { ref, className, children: /* @__PURE__ */ jsx40(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -17760,7 +17857,7 @@ var loadStripe = function loadStripe2() {
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 import { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo21, useState as useState17 } from "react";
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -17919,7 +18016,7 @@ var PaymentMethodDetails = ({
     initializePaymentMethod
   ]);
   return /* @__PURE__ */ jsxs31(Flex, { $position: "relative", children: [
-    /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41(
       Flex,
       {
         $position: "absolute",
@@ -17928,7 +18025,7 @@ var PaymentMethodDetails = ({
         $alignItems: "center",
         $width: "100%",
         $height: "100%",
-        children: /* @__PURE__ */ jsx40(
+        children: /* @__PURE__ */ jsx41(
           Loader,
           {
             $color: settings.theme.primary,
@@ -17981,7 +18078,7 @@ var PaymentMethodDetails = ({
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
               children: [
-                /* @__PURE__ */ jsx40(
+                /* @__PURE__ */ jsx41(
                   PaymentForm,
                   {
                     financeData,
@@ -17992,7 +18089,7 @@ var PaymentMethodDetails = ({
                     }
                   }
                 ),
-                currentPaymentMethod && /* @__PURE__ */ jsx40(Box, { children: /* @__PURE__ */ jsx40(
+                currentPaymentMethod && /* @__PURE__ */ jsx41(Box, { children: /* @__PURE__ */ jsx41(
                   Text,
                   {
                     onClick: focusExistingPaymentMethods,
@@ -18006,7 +18103,7 @@ var PaymentMethodDetails = ({
               ]
             }
           ) : /* @__PURE__ */ jsxs31(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx41(
               PaymentMethodElement,
               {
                 paymentMethod: currentPaymentMethod,
@@ -18015,7 +18112,7 @@ var PaymentMethodDetails = ({
               }
             ),
             paymentMethods.length > 0 && /* @__PURE__ */ jsxs31(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-              /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx41(
                 Text,
                 {
                   onClick: toggleShowPaymentMethods,
@@ -18026,7 +18123,7 @@ var PaymentMethodDetails = ({
                   children: t2("Choose different payment method")
                 }
               ),
-              /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx41(
                 Icon3,
                 {
                   name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down"
@@ -18034,9 +18131,9 @@ var PaymentMethodDetails = ({
               )
             ] }),
             showDifferentPaymentMethods && /* @__PURE__ */ jsxs31(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
-              /* @__PURE__ */ jsx40(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
+              /* @__PURE__ */ jsx41(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
                 (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
-              ) || []).map((paymentMethod) => /* @__PURE__ */ jsx40(
+              ) || []).map((paymentMethod) => /* @__PURE__ */ jsx41(
                 PaymentListElement,
                 {
                   paymentMethod,
@@ -18045,7 +18142,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod.id
               )) }),
-              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx40(
+              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx41(
                 Button,
                 {
                   type: "button",
@@ -18057,7 +18154,7 @@ var PaymentMethodDetails = ({
               )
             ] })
           ] }),
-          !isLoading && error && /* @__PURE__ */ jsx40(Box, { children: /* @__PURE__ */ jsx40(Text, { $weight: 500, $color: "#DB6669", children: error }) })
+          !isLoading && error && /* @__PURE__ */ jsx41(Box, { children: /* @__PURE__ */ jsx41(Text, { $weight: 500, $color: "#DB6669", children: error }) })
         ]
       }
     )
@@ -18068,7 +18165,7 @@ var PaymentMethodDetails = ({
 import { forwardRef as forwardRef11, useMemo as useMemo23 } from "react";
 
 // src/components/elements/plan-manager/AddOn.tsx
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var AddOn = ({ addOn, currency, layout }) => {
   return /* @__PURE__ */ jsxs32(
     Flex,
@@ -18078,10 +18175,10 @@ var AddOn = ({ addOn, currency, layout }) => {
       $flexWrap: "wrap",
       $gap: "1rem",
       children: [
-        /* @__PURE__ */ jsx41(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
+        /* @__PURE__ */ jsx42(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
         typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsxs32(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ jsx41("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
+          /* @__PURE__ */ jsx42("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
         ] })
       ]
     }
@@ -18089,11 +18186,12 @@ var AddOn = ({ addOn, currency, layout }) => {
 };
 
 // src/components/elements/plan-manager/UsageDetails.tsx
-import { Fragment as Fragment18, useMemo as useMemo22 } from "react";
-import { Fragment as Fragment19, jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment19, useMemo as useMemo22 } from "react";
+import { Fragment as Fragment20, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var UsageDetails2 = ({
   entitlement,
   period,
+  showCredits,
   layout
 }) => {
   const { t: t2 } = useTranslation();
@@ -18112,9 +18210,9 @@ var UsageDetails2 = ({
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ jsx42(Fragment18, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ jsx43(Fragment19, { children: t2("X additional", {
           amount
-        }) }, index) : /* @__PURE__ */ jsxs33(Fragment18, { children: [
+        }) }, index) : /* @__PURE__ */ jsxs33(Fragment19, { children: [
           t2("Additional"),
           ": "
         ] }, index)
@@ -18125,16 +18223,16 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ jsxs33(Fragment18, { children: [
+        /* @__PURE__ */ jsxs33(Fragment19, { children: [
           formatCurrency(price, billingPrice?.currency),
           /* @__PURE__ */ jsxs33("sub", { children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ jsxs33(Fragment19, { children: [
+            packageSize > 1 && /* @__PURE__ */ jsxs33(Fragment20, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(entitlement.feature, packageSize),
-            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33(Fragment19, { children: [
+            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33(Fragment20, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -18143,10 +18241,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__ */ jsxs33(Fragment18, { children: [
+        creditAmount > 0 ? /* @__PURE__ */ jsxs33(Fragment19, { children: [
           creditAmount,
           " ",
           getFeatureName(
@@ -18155,7 +18253,7 @@ var UsageDetails2 = ({
           ),
           " ",
           t2("used")
-        ] }, index) : /* @__PURE__ */ jsxs33(Fragment18, { children: [
+        ] }, index) : /* @__PURE__ */ jsxs33(Fragment19, { children: [
           entitlement.planEntitlement.consumptionRate,
           " ",
           getFeatureName(
@@ -18171,11 +18269,11 @@ 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;
+  const quantity = entitlement.priceBehavior !== "credit_burndown" /* Credit */ ? limit || amount : void 0;
   return /* @__PURE__ */ jsxs33(
     Flex,
     {
@@ -18184,13 +18282,13 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ jsx42(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs33(Fragment19, { children: [
+        /* @__PURE__ */ jsx43(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs33(Fragment20, { children: [
           quantity,
           " ",
           entitlement.feature.name
         ] }) : entitlement.feature.name }),
         /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          description.length > 0 && /* @__PURE__ */ jsx42(
+          description.length > 0 && /* @__PURE__ */ jsx43(
             Text,
             {
               style: { opacity: 0.54 },
@@ -18207,7 +18305,7 @@ var UsageDetails2 = ({
                 shortenPeriod(period)
               ] })
             ] }),
-            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx42(
+            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx43(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -18224,7 +18322,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { Fragment as Fragment20, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -18268,9 +18366,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     canCheckout,
     postTrialPlan,
     featureUsage,
+    showCredits,
     showZeroPriceAsFree,
     trialPaymentMethodRequired
   } = useMemo23(() => {
+    const showCredits2 = data?.showCredits ?? true;
+    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
     if (isCheckoutData(data)) {
       const {
         company,
@@ -18279,7 +18380,6 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         capabilities,
         postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2,
-        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
       const creditGroups2 = groupCreditGrants(creditGrants, {
@@ -18309,8 +18409,9 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         canCheckout: capabilities?.checkout ?? true,
         postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2?.features || [],
-        showZeroPriceAsFree: showZeroPriceAsFree2,
-        trialPaymentMethodRequired: trialPaymentMethodRequired2
+        trialPaymentMethodRequired: trialPaymentMethodRequired2,
+        showCredits: showCredits2,
+        showZeroPriceAsFree: showZeroPriceAsFree2
       };
     }
     return {
@@ -18322,8 +18423,9 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       canCheckout: false,
       postTrialPlan: void 0,
       featureUsage: [],
-      showZeroPriceAsFree: false,
-      trialPaymentMethodRequired: false
+      trialPaymentMethodRequired: false,
+      showCredits: showCredits2,
+      showZeroPriceAsFree: showZeroPriceAsFree2
     };
   }, [data]);
   const usageBasedEntitlements = useMemo23(
@@ -18349,7 +18451,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   }, [billingSubscription]);
   const isFreePlan = currentPlan?.planPrice === 0;
   const isUsageBasedPlan = isFreePlan && usageBasedEntitlements.length > 0;
-  return /* @__PURE__ */ jsxs34(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment21, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs34(
       Notice,
       {
@@ -18360,8 +18462,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ jsx43(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
-          /* @__PURE__ */ jsx43(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : postTrialPlan ? t2("After the trial, cancel", {
+          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ jsx44(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
+          /* @__PURE__ */ jsx44(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
@@ -18378,8 +18480,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx43(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
-          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx44(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx44(
             Text,
             {
               as: "p",
@@ -18414,11 +18516,11 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               $gap: "1rem",
               children: [
                 /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx43(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx43(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                  /* @__PURE__ */ jsx44(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx44(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
                 props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs34(Box, { children: [
-                  /* @__PURE__ */ jsx43(
+                  /* @__PURE__ */ jsx44(
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -18428,7 +18530,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isFreePlan && /* @__PURE__ */ jsx43(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
+                  !isFreePlan && /* @__PURE__ */ jsx44(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -18437,7 +18539,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }
           ),
           props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx43(
+            props.addOns.showLabel && /* @__PURE__ */ jsx44(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18445,7 +18547,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Add-ons")
               }
             ),
-            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx44(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx44(
               AddOn,
               {
                 addOn,
@@ -18456,7 +18558,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             )) })
           ] }),
           props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx43(
+            props.addOns.showLabel && /* @__PURE__ */ jsx44(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18464,20 +18566,21 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Usage-based")
               }
             ),
-            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
-              return /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx44(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
+              return /* @__PURE__ */ jsx44(
                 UsageDetails2,
                 {
                   entitlement,
                   period: currentPlan?.planPeriod || "month",
+                  showCredits,
                   layout: props
                 },
                 entitlementIndex
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx43(
+          props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx44(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18485,7 +18588,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Credits in plan")
               }
             ),
-            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+            /* @__PURE__ */ jsx44(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
               return /* @__PURE__ */ jsxs34(
                 Flex,
                 {
@@ -18499,7 +18602,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       " ",
                       getFeatureName(group, group.quantity),
                       " ",
-                      subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment20, { children: [
+                      subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment21, { children: [
                         t2("per"),
                         " ",
                         t2(subscriptionInterval)
@@ -18525,7 +18628,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }) })
           ] }),
           props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx43(
+            props.addOns.showLabel && /* @__PURE__ */ jsx44(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18533,7 +18636,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Credit bundles")
               }
             ),
-            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+            /* @__PURE__ */ jsx44(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
               const bundle = group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
               return /* @__PURE__ */ jsxs34(
                 Flex,
@@ -18581,7 +18684,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }) })
           ] }),
           props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx43(
+            props.addOns.showLabel && /* @__PURE__ */ jsx44(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -18589,7 +18692,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Promotional credits")
               }
             ),
-            /* @__PURE__ */ jsx43(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+            /* @__PURE__ */ jsx44(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
               return /* @__PURE__ */ jsxs34(
                 Flex,
                 {
@@ -18622,7 +18725,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               );
             }) })
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx43(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx44(
             Button,
             {
               type: "button",
@@ -18648,7 +18751,7 @@ PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
 import {
-  Fragment as Fragment24,
+  Fragment as Fragment25,
   forwardRef as forwardRef12,
   useEffect as useEffect9,
   useMemo as useMemo26,
@@ -18657,7 +18760,7 @@ import {
 
 // src/components/elements/pricing-table/AddOn.tsx
 import { useMemo as useMemo24 } from "react";
-import { Fragment as Fragment21, jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -18700,16 +18803,16 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
       },
       children: [
         /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-          /* @__PURE__ */ jsx44(Box, { children: /* @__PURE__ */ jsx44(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
-          layout.addOns.showDescription && /* @__PURE__ */ jsx44(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx44(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-          /* @__PURE__ */ jsx44(Box, { children: /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
+          /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
+          layout.addOns.showDescription && /* @__PURE__ */ jsx45(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+          /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
             formatCurrency(addOnPrice ?? 0, addOnCurrency),
             /* @__PURE__ */ jsxs35("sub", { children: [
               "/",
               selectedPeriod
             ] })
           ] }) }),
-          isActiveAddOn && /* @__PURE__ */ jsx44(
+          isActiveAddOn && /* @__PURE__ */ jsx45(
             Flex,
             {
               $position: "absolute",
@@ -18718,7 +18821,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
               $backgroundColor: settings.theme.primary,
               $borderRadius: "9999px",
               $padding: "0.125rem 0.85rem",
-              children: /* @__PURE__ */ jsx44(
+              children: /* @__PURE__ */ jsx45(
                 Text,
                 {
                   $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -18737,7 +18840,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             $gap: `${cardPadding}rem`,
             $flexGrow: 1,
             children: [
-              layout.addOns.showEntitlements && /* @__PURE__ */ jsx44(
+              layout.addOns.showEntitlements && /* @__PURE__ */ jsx45(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -18746,7 +18849,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   $flexGrow: 1,
                   children: addOn.entitlements.map((entitlement, entitlementIndex) => {
                     const metricPeriodName = getMetricPeriodName(entitlement);
-                    return /* @__PURE__ */ jsx44(
+                    return /* @__PURE__ */ jsx45(
                       Flex,
                       {
                         $flexWrap: "wrap",
@@ -18754,7 +18857,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                         $alignItems: "center",
                         $gap: "1rem",
                         children: /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
-                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx44(
+                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx45(
                             Icon3,
                             {
                               name: entitlement.feature.icon,
@@ -18764,10 +18867,10 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                             }
                           ),
                           /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            entitlement.feature?.name && /* @__PURE__ */ jsx44(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx44(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment21, { children: [
+                            entitlement.feature?.name && /* @__PURE__ */ jsx45(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx45(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment22, { children: [
                               entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
                                 item: getFeatureName(entitlement.feature)
-                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs35(Fragment21, { children: [
+                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs35(Fragment22, { children: [
                                 formatNumber(entitlement.valueNumeric),
                                 " ",
                                 getFeatureName(
@@ -18775,14 +18878,14 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                                   entitlement.valueNumeric
                                 )
                               ] }),
-                              metricPeriodName && /* @__PURE__ */ jsxs35(Fragment21, { children: [
+                              metricPeriodName && /* @__PURE__ */ jsxs35(Fragment22, { children: [
                                 " ",
                                 t2("per"),
                                 " ",
                                 t2(metricPeriodName)
                               ] })
                             ] }) : entitlement.feature.name }) }),
-                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx44(
+                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx45(
                               Text,
                               {
                                 $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -18798,7 +18901,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   })
                 }
               ),
-              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx44(
+              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx45(
                 Button,
                 {
                   type: "button",
@@ -18839,11 +18942,13 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 import { useMemo as useMemo25 } from "react";
 
 // src/components/elements/pricing-table/Entitlement.tsx
-import { Fragment as Fragment22, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var Entitlement = ({
   entitlement,
-  sharedProps,
-  selectedPeriod
+  credits = [],
+  selectedPeriod,
+  showCredits,
+  sharedProps
 }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -18855,13 +18960,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);
+  const creditBasedEntitlementLimit = getCreditBasedEntitlementLimit(
+    entitlement,
+    credits
+  );
   return /* @__PURE__ */ jsxs36(Flex, { $gap: "1rem", children: [
-    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx45(
+    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx46(
       Icon3,
       {
         name: entitlement.feature.icon,
@@ -18872,37 +18978,61 @@ var Entitlement = ({
     ),
     entitlement.feature?.name && /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ jsx45(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
+        /* @__PURE__ */ jsx46(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs36(Fragment23, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t2("per"),
           " ",
-          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment23, { children: [
             entitlementPackageSize,
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
-          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs36(Fragment23, { children: [
             " ",
             t2("per"),
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx45(
+        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx46(
           TieredPricingDetails,
           {
             entitlement,
             period: selectedPeriod
           }
-        ) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
+        ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ jsxs36(Fragment23, { children: [
+          entitlement.consumptionRate,
+          " ",
+          getFeatureName(
+            entitlement.valueCredit,
+            entitlement.consumptionRate || void 0
+          ),
+          " ",
+          t2("per"),
+          " ",
+          getFeatureName(entitlement.feature, 1)
+        ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx46(Fragment23, { 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__ */ jsxs36(Fragment23, { children: [
           entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          }) : typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment23, { children: [
             formatNumber(limit),
             " ",
             getFeatureName(entitlement.feature, limit)
           ] }),
-          metricPeriodName && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          metricPeriodName && /* @__PURE__ */ jsxs36(Fragment23, { children: [
             " ",
             t2("per"),
             " ",
@@ -18920,19 +19050,19 @@ var Entitlement = ({
                 " ",
                 formatCurrency(entitlementPrice, entitlementCurrency),
                 "/",
-                entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+                entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment23, { children: [
                   entitlementPackageSize,
                   " "
                 ] }),
                 getFeatureName(entitlement.feature, entitlementPackageSize),
-                entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+                entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs36(Fragment23, { children: [
                   "/",
                   shortenPeriod(selectedPeriod)
                 ] })
               ]
             }
           ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs36(Flex, { $alignItems: "end", children: [
-            /* @__PURE__ */ jsx45(
+            /* @__PURE__ */ jsx46(
               Text,
               {
                 style: { opacity: 0.54 },
@@ -18941,7 +19071,7 @@ var Entitlement = ({
                 children: t2("Tier-based")
               }
             ),
-            /* @__PURE__ */ jsx45(
+            /* @__PURE__ */ jsx46(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -18951,7 +19081,7 @@ var Entitlement = ({
               }
             )
           ] }),
-          entitlement.billingThreshold && /* @__PURE__ */ jsx45(
+          entitlement.billingThreshold && /* @__PURE__ */ jsx46(
             BillingThresholdTooltip,
             {
               billingThreshold: entitlement.billingThreshold
@@ -18959,7 +19089,7 @@ var Entitlement = ({
           )
         ] })
       ] }),
-      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx45(
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx46(
         Text,
         {
           $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -18972,7 +19102,7 @@ var Entitlement = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-import { Fragment as Fragment23, jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var Plan2 = ({
   plan,
   index,
@@ -18987,15 +19117,20 @@ var Plan2 = ({
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const trialEnd = useTrialEnd();
+  const showCallToAction = useMemo25(() => {
+    return typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function";
+  }, [sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const {
     currentPeriod,
     canCheckout,
     isTrialSubscription,
     willSubscriptionCancel,
     isStandalone,
-    showCallToAction,
+    showCredits,
     showZeroPriceAsFree
   } = useMemo25(() => {
+    const showCredits2 = data?.showCredits ?? true;
+    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
       const isTrialSubscription2 = billingSubscription?.status === "trialing";
@@ -19006,8 +19141,8 @@ var Plan2 = ({
         isTrialSubscription: isTrialSubscription2,
         willSubscriptionCancel: willSubscriptionCancel2,
         isStandalone: false,
-        showCallToAction: true,
-        showZeroPriceAsFree: data.showZeroPriceAsFree
+        showCredits: showCredits2,
+        showZeroPriceAsFree: showZeroPriceAsFree2
       };
     }
     return {
@@ -19016,10 +19151,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 = useMemo25(() => {
     if (sharedProps.callToActionTarget) {
       return sharedProps.callToActionTarget;
@@ -19078,9 +19213,9 @@ var Plan2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ jsx46(Box, { children: /* @__PURE__ */ jsx46(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
-              layout.plans.description.isVisible && /* @__PURE__ */ jsx46(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx46(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
-              /* @__PURE__ */ jsx46(Box, { children: /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsx47(Box, { children: /* @__PURE__ */ jsx47(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
+              layout.plans.description.isVisible && /* @__PURE__ */ jsx47(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx47(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
+              /* @__PURE__ */ jsx47(Box, { children: /* @__PURE__ */ jsxs37(
                 Text,
                 {
                   $font: headerPriceFontStyle.fontFamily,
@@ -19096,7 +19231,7 @@ var Plan2 = ({
                   ]
                 }
               ) }),
-              credits.length > 0 && /* @__PURE__ */ jsx46(
+              showCredits && credits.length > 0 && /* @__PURE__ */ jsx47(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -19105,7 +19240,7 @@ var Plan2 = ({
                   $marginTop: "0.5rem",
                   children: credits.map((credit, idx) => {
                     return /* @__PURE__ */ jsxs37(Flex, { $gap: "1rem", children: [
-                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx46(
+                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx47(
                         Icon3,
                         {
                           name: credit.icon,
@@ -19114,7 +19249,7 @@ var Plan2 = ({
                           rounded: true
                         }
                       ),
-                      credit.name && /* @__PURE__ */ jsx46(
+                      credit.name && /* @__PURE__ */ jsx47(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -19124,7 +19259,7 @@ var Plan2 = ({
                             credit.quantity,
                             " ",
                             getFeatureName(credit, credit.quantity),
-                            credit.period && /* @__PURE__ */ jsxs37(Fragment23, { children: [
+                            credit.period && /* @__PURE__ */ jsxs37(Fragment24, { children: [
                               " ",
                               t2("per"),
                               " ",
@@ -19137,7 +19272,7 @@ var Plan2 = ({
                   })
                 }
               ),
-              isActivePlan && /* @__PURE__ */ jsx46(
+              isActivePlan && /* @__PURE__ */ jsx47(
                 Flex,
                 {
                   $position: "absolute",
@@ -19146,7 +19281,7 @@ var Plan2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ jsx46(
+                  children: /* @__PURE__ */ jsx47(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -19169,15 +19304,17 @@ var Plan2 = ({
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
               layout.plans.showEntitlements && /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx46(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx46(Text, { children: t2("Everything in", {
+                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx47(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx47(Text, { children: t2("Everything in", {
                   plan: plans[index - 1].name
                 }) }) }),
-                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ jsx46(
+                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ jsx47(
                   Entitlement,
                   {
                     entitlement,
-                    sharedProps: { layout },
-                    selectedPeriod
+                    credits,
+                    selectedPeriod,
+                    showCredits,
+                    sharedProps: { layout }
                   },
                   idx
                 )).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
@@ -19189,14 +19326,14 @@ var Plan2 = ({
                     $gap: "0.5rem",
                     $marginTop: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx46(
+                      /* @__PURE__ */ jsx47(
                         Icon3,
                         {
                           name: isExpanded ? "chevron-up" : "chevron-down",
                           color: "#D0D0D0"
                         }
                       ),
-                      /* @__PURE__ */ jsx46(
+                      /* @__PURE__ */ jsx47(
                         Text,
                         {
                           onClick: () => handleToggleShowAll(plan.id),
@@ -19224,7 +19361,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ jsx46(
+                    /* @__PURE__ */ jsx47(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -19232,55 +19369,52 @@ var Plan2 = ({
                         color: settings.theme.primary
                       }
                     ),
-                    /* @__PURE__ */ jsx46(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
+                    /* @__PURE__ */ jsx47(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
                   ]
                 }
-              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx46(
-                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__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                /* @__PURE__ */ jsx47(
+                  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__ */ jsx46(
-                    Tooltip,
-                    {
-                      trigger: /* @__PURE__ */ jsx46(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-                      content: /* @__PURE__ */ jsx46(Text, { children: t2("Current usage exceeds the limit of this plan.") })
-                    }
-                  ) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
-                }
-              )
+                    },
+                    $fullWidth: true,
+                    children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ jsx47(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__ */ jsx47(UsageViolationText, { violations: plan.usageViolations })
+              ] })
             ]
           }
         )
@@ -19290,7 +19424,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-import { Fragment as Fragment25, jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -19394,7 +19528,7 @@ var PricingTable = forwardRef12(
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
     if (isPending) {
-      return /* @__PURE__ */ jsx47(
+      return /* @__PURE__ */ jsx48(
         Flex,
         {
           $width: "100%",
@@ -19402,12 +19536,12 @@ var PricingTable = forwardRef12(
           $alignItems: "center",
           $justifyContent: "center",
           $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-          children: /* @__PURE__ */ jsx47(Loader, { $size: "2xl" })
+          children: /* @__PURE__ */ jsx48(Loader, { $size: "2xl" })
         }
       );
     }
-    const Wrapper = isStandalone ? Container : Fragment24;
-    return /* @__PURE__ */ jsx47(Wrapper, { children: /* @__PURE__ */ jsxs38(
+    const Wrapper = isStandalone ? Container : Fragment25;
+    return /* @__PURE__ */ jsx48(Wrapper, { children: /* @__PURE__ */ jsxs38(
       FussyChild,
       {
         ref,
@@ -19432,8 +19566,8 @@ var PricingTable = forwardRef12(
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx47(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
-                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx47(
+                  /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx48(
                     PeriodToggle,
                     {
                       options: periods,
@@ -19448,7 +19582,7 @@ var PricingTable = forwardRef12(
                 ]
               }
             ),
-            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx47(
+            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx48(
               Box,
               {
                 $display: "grid",
@@ -19456,7 +19590,7 @@ var PricingTable = forwardRef12(
                 $gap: "1rem",
                 children: plans.map((plan, index, self2) => {
                   const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ jsx47(
+                  return /* @__PURE__ */ jsx48(
                     Plan2,
                     {
                       plan,
@@ -19478,17 +19612,17 @@ var PricingTable = forwardRef12(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx47(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment25, { children: [
-            props.header.isVisible && /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx48(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment26, { children: [
+            props.header.isVisible && /* @__PURE__ */ jsx48(
               Flex,
               {
                 $justifyContent: "space-between",
                 $alignItems: "center",
                 $marginBottom: "1rem",
-                children: /* @__PURE__ */ jsx47(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
+                children: /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
               }
             ),
-            /* @__PURE__ */ jsx47(
+            /* @__PURE__ */ jsx48(
               Box,
               {
                 $display: "grid",
@@ -19496,7 +19630,7 @@ var PricingTable = forwardRef12(
                 $gap: "1rem",
                 children: addOns.map((addOn, index) => {
                   const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ jsx47(
+                  return /* @__PURE__ */ jsx48(
                     AddOn2,
                     {
                       addOn,
@@ -19523,7 +19657,7 @@ PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -19535,7 +19669,7 @@ var resolveDesignProps9 = (props) => {
 };
 var TextElement = forwardRef13(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
-  return /* @__PURE__ */ jsx48(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx49(
     Text,
     {
       display: props.text.fontStyle,
@@ -19549,7 +19683,7 @@ TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 import { forwardRef as forwardRef14, useMemo as useMemo27 } from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var buttonStyles = {
   primary: {
     color: "primary",
@@ -19585,7 +19719,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     Element,
     {
       as: Flex,
@@ -19593,7 +19727,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx49(
+      children: /* @__PURE__ */ jsx50(
         Button,
         {
           type: "button",
@@ -19615,7 +19749,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 import { forwardRef as forwardRef15, useCallback as useCallback14, useEffect as useEffect10, useMemo as useMemo28, useState as useState19 } from "react";
-import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -19691,7 +19825,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
     return null;
   }
   return /* @__PURE__ */ jsxs39(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx50(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx50(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    /* @__PURE__ */ jsx51(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx51(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
     error ? /* @__PURE__ */ jsxs39(
       Flex,
       {
@@ -19701,8 +19835,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx50(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ jsx51(
             Button,
             {
               type: "button",
@@ -19715,7 +19849,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx50(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs39(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    ) : !isLoading && /* @__PURE__ */ jsx51(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs39(Flex, { $flexDirection: "column", $gap: "1rem", children: [
       props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs39(Text, { display: props.header.fontStyle, children: [
         props.header.prefix,
         " ",
@@ -19728,11 +19862,11 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            props.price.isVisible && /* @__PURE__ */ jsx50(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+            props.price.isVisible && /* @__PURE__ */ jsx51(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
               upcomingInvoice.amountDue,
               upcomingInvoice.currency
             ) }),
-            /* @__PURE__ */ jsx50(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx50(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
+            /* @__PURE__ */ jsx51(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx51(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
           ]
         }
       ),
@@ -19744,8 +19878,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ jsx50(Text, { $weight: 600, children: t2("Remaining balance") }),
-            /* @__PURE__ */ jsx50(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx50(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+            /* @__PURE__ */ jsx51(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ jsx51(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx51(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
           ]
         }
       ),
@@ -19756,8 +19890,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ jsx50(Text, { $weight: 600, children: t2("Discount") }),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(Text, { $weight: 600, children: t2("Discount") }),
+            /* @__PURE__ */ jsx51(
               Flex,
               {
                 $flexDirection: "column",
@@ -19773,7 +19907,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ jsx50(
+                              discount.customerFacingCode && /* @__PURE__ */ jsx51(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -19782,7 +19916,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                                   $borderStyle: "solid",
                                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                                   $borderRadius: "0.3125rem",
-                                  children: /* @__PURE__ */ jsx50(
+                                  children: /* @__PURE__ */ jsx51(
                                     Text,
                                     {
                                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -19792,7 +19926,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ jsx50(Box, { children: /* @__PURE__ */ jsx50(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
+                              /* @__PURE__ */ jsx51(Box, { children: /* @__PURE__ */ jsx51(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
                                 percent: discount.percentOff
                               }) : t2("Amount off", {
                                 amount: formatCurrency(
@@ -19816,7 +19950,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           ]
         }
       )
-    ] }) : /* @__PURE__ */ jsx50(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+    ] }) : /* @__PURE__ */ jsx51(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
   ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
@@ -24076,10 +24210,10 @@ function createRenderer(options) {
 }
 
 // src/components/embed/Embed.tsx
-import { Fragment as Fragment26, jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
 var Loading = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     Flex,
     {
       $width: "100%",
@@ -24087,7 +24221,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx51(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ jsx52(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
@@ -24104,14 +24238,14 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx51(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx51(Text, { display: "heading1", children: "Error" }) }),
-        /* @__PURE__ */ jsx51(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx51(Text, { children: message }) })
+        /* @__PURE__ */ jsx52(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx52(Text, { display: "heading1", children: "Error" }) }),
+        /* @__PURE__ */ jsx52(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx52(Text, { children: message }) })
       ]
     }
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = useState20(/* @__PURE__ */ jsx51(Loading, {}));
+  const [children, setChildren] = useState20(/* @__PURE__ */ jsx52(Loading, {}));
   const theme = useContext5(et);
   const {
     data,
@@ -24161,13 +24295,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
     return stub();
   }
   if (error) {
-    return /* @__PURE__ */ jsx51(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx52(Error2, { message: error.message });
   }
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx51(Error2, { message: "Please provide an access token." });
+    return /* @__PURE__ */ jsx52(Error2, { message: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx52(
       Error2,
       {
         message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -24175,9 +24309,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
     );
   }
   if (isPending) {
-    return /* @__PURE__ */ jsx51(Loading, {});
+    return /* @__PURE__ */ jsx52(Loading, {});
   }
-  return /* @__PURE__ */ jsx51(Fragment26, { children });
+  return /* @__PURE__ */ jsx52(Fragment27, { children });
 };
 export {
   Box,