@schematichq/schematic-components 1.1.4 → 1.2.0

package/dist/schematic-components.esm.js

@@ -1976,6 +1976,83 @@ function getEntitlementCost(entitlement, period = "month") {
   }
 }
 
+// src/utils/api/credit.ts
+function getResetCadencePeriod(cadence) {
+  switch (cadence) {
+    case "yearly" /* Year */:
+      return "year";
+    case "monthly" /* Month */:
+      return "month";
+    case "weekly" /* Week */:
+      return "week";
+    case "daily" /* Day */:
+      return "day";
+  }
+}
+function groupPlanCreditGrants(creditGrants) {
+  const map = creditGrants.reduce(
+    (acc, grant) => {
+      const key = grant.creditId;
+      acc[key] = {
+        id: grant.creditId,
+        name: grant.creditName,
+        singularName: grant.singularName,
+        pluralName: grant.pluralName,
+        description: grant.creditDescription,
+        icon: grant.creditIcon,
+        grantReason: "plan",
+        quantity: grant.creditAmount,
+        planId: grant.planId,
+        planName: grant.planName,
+        period: getResetCadencePeriod(grant.resetCadence)
+      };
+      return acc;
+    },
+    {}
+  );
+  return Object.values(map);
+}
+function groupCreditGrants(creditGrants, options2) {
+  const today = /* @__PURE__ */ new Date();
+  const map = creditGrants.reduce(
+    (acc, grant) => {
+      const isExpired = !!grant.expiresAt && grant.expiresAt <= today;
+      const isZeroedOut = !!grant.zeroedOutDate;
+      if (!isExpired && !isZeroedOut) {
+        const key = options2?.groupBy === "bundle" ? grant.billingCreditBundleId || grant.id : options2?.groupBy === "credit" ? grant.billingCreditId : grant.id;
+        const current = acc[key];
+        acc[key] = {
+          // credit-specific attributes
+          id: grant.billingCreditId,
+          name: grant.creditName,
+          singularName: grant.singularName,
+          pluralName: grant.pluralName,
+          description: grant.creditDescription,
+          icon: grant.creditIcon,
+          grantReason: grant.grantReason,
+          quantity: grant.quantity,
+          // shared attributes
+          companyId: grant.companyId,
+          companyName: grant.companyName,
+          planId: grant.planId,
+          planName: grant.planName,
+          bundleId: grant.billingCreditBundleId,
+          // custom attributes
+          total: {
+            value: (current?.total?.value ?? 0) + grant.quantity,
+            remaining: (current?.total?.remaining ?? 0) + grant.quantityRemaining,
+            used: (current?.total?.used ?? 0) + grant.quantityUsed
+          },
+          grants: [...current?.grants ?? [], grant]
+        };
+      }
+      return acc;
+    },
+    {}
+  );
+  return Object.values(map);
+}
+
 // src/utils/api/entitlement.ts
 var PeriodName = {
   billing: "billing period",
@@ -2555,6 +2632,11 @@ function shortenPeriod(period) {
       return "yr";
   }
 }
+function modifyDate(date, days) {
+  const copy3 = new Date(date);
+  copy3.setDate(copy3.getDate() + days);
+  return copy3;
+}
 
 // src/utils/error.ts
 function isError(value) {
@@ -4011,22 +4093,10 @@ function useAvailablePlans(activePeriod) {
   }, [data?.activePlans, data?.activeAddOns]);
   const getActivePlans = useCallback(
     (plans) => {
-      const customPlanExist = plans.some((plan) => plan.custom);
-      const plansWithSelected = settings.mode === "edit" ? plans.slice() : plans.filter(
+      const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter(
         (plan) => activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime
       );
-      if (!customPlanExist) {
-        plansWithSelected?.sort((a2, b2) => {
-          if (activePeriod === "year") {
-            return (a2.yearlyPrice?.price ?? 0) - (b2.yearlyPrice?.price ?? 0);
-          }
-          if (activePeriod === "month") {
-            return (a2.monthlyPrice?.price ?? 0) - (b2.monthlyPrice?.price ?? 0);
-          }
-          return 0;
-        });
-      }
-      return plansWithSelected?.map((plan) => ({ ...plan, isSelected: false }));
+      return activePlans.map((plan) => ({ ...plan, isSelected: false }));
     },
     [activePeriod, settings.mode]
   );
@@ -4036,12 +4106,7 @@ function useAvailablePlans(activePeriod) {
       addOns: getActivePlans(data?.activeAddOns || []),
       periods: getAvailablePeriods()
     };
-  }, [
-    data?.activePlans,
-    data?.activeAddOns,
-    getAvailablePeriods,
-    getActivePlans
-  ]);
+  }, [data, getAvailablePeriods, getActivePlans]);
 }
 
 // src/hooks/useEmbed.ts
@@ -6625,12 +6690,13 @@ var en_default = {
     "Error processing payment. Please try a different payment method.": "Error processing payment. Please try a different payment method.",
     "Error retrieving plan details. Please try again in a moment.": "Error retrieving plan details. Please try again in a moment.",
     "Error updating payment method. Please try again.": "Error updating payment method. Please try again.",
-    "Estimated bill.": "Estimated bill.",
+    "Estimated bill": "Estimated bill",
     "Everything in": "Everything in {{plan}}, plus",
     Expired: "Expired",
     "Expires in X months": "Expires in {{months}} mo",
     Expires: "Expires {{date}}",
     "Hide all": "Hide all",
+    "Hide balance details": "Hide balance details",
     "Hide details": "Hide details",
     "Invalid access token; your temporary access token will start with `token_`.": "Invalid access token; your temporary access token will start with `token_`.",
     "Invalid discount code.": "Invalid discount code.",
@@ -6667,6 +6733,7 @@ var en_default = {
     "Save with yearly billing": "Save up to {{percent}}% with yearly billing",
     "Saving with yearly billing": "You are saving {{percent}}% with yearly billing",
     "See all": "See all",
+    "See balance details": "See balance details",
     "See less": "See less",
     "See more": "See more",
     "Select add-ons": "Select add-ons",
@@ -6709,6 +6776,9 @@ var en_default = {
     "Use existing payment method": "Use existing payment method",
     "X additional": "{{amount}} additional",
     "X included": "{{amount}} included",
+    "X item bundle": "{{amount}} {{item}} bundle purchased {{createdAt}}",
+    "X item grant": "{{amount}} promotional {{item}} granted {{createdAt}}",
+    "X items included in plan": "{{amount}} {{item}} included in plan",
     "X off": "{{amount}} off",
     "X% off": "{{percent}}% off",
     "Yearly total": "Yearly total",
@@ -6720,7 +6790,9 @@ var en_default = {
     "one time": "one time",
     per: "per",
     then: "then",
+    use: "use",
     used: "used",
+    purchased: "purchased {{date}}",
     usage: {
       limited: "{{amount}} of {{allocation}} used",
       unlimited: "{{amount}} used"
@@ -10171,7 +10243,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.1.4",
+      "X-Schematic-Components-Version": "1.2.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10664,7 +10736,14 @@ var Box = dt.div((props) => {
   return styles;
 });
 var TransitionBox = dt(Box)`
-  height: auto;
+  ${({ $isExpanded = true }) => {
+  return $isExpanded ? lt`
+          height: auto;
+        ` : lt`
+          height: 0;
+          overflow: hidden;
+        `;
+}}
   opacity: 1;
   transition:
     height 0.1s ease-in,
@@ -10685,6 +10764,7 @@ var Icon2 = dt(Icon).attrs(({ name, title, onClick }) => ({
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
+  transition: 0.1s;
 
   ${({ onClick }) => onClick && lt`
       &:hover {
@@ -11845,11 +11925,7 @@ var EntitlementRow = (entitlement) => {
 // src/components/shared/sidebar/Proration.tsx
 import { useState as useState6 } from "react";
 import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var Proration = ({
-  currency,
-  charges,
-  selectedPlan
-}) => {
+var Proration = ({ currency, charges }) => {
   const { t: t2 } = useTranslation();
   const [open, setOpen] = useState6(false);
   const toggle = (e2) => {
@@ -11858,7 +11934,7 @@ var Proration = ({
     setOpen((open2) => !open2);
   };
   return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(Text, { $size: 14, children: charges.proration > 0 ? t2("Proration") : isHydratedPlan(selectedPlan) && !selectedPlan?.companyCanTrial && t2("Credits") }) }),
+    /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(Text, { $size: 14, children: t2("Proration") }) }),
     /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       open && charges?.upcomingInvoiceLineItems.map(
         ({ amount, description }, index) => {
@@ -11899,6 +11975,7 @@ var StageButton = ({
   checkoutStages,
   hasAddOns,
   hasPayInAdvanceEntitlements,
+  hasCreditBundles,
   hasPaymentMethod,
   hasPlan,
   inEditMode,
@@ -11956,7 +12033,7 @@ var StageButton = ({
       );
     }
     if (!isPaymentMethodRequired && !checkoutStages?.some(
-      (stage) => stage.id === "usage" || stage.id === "addons"
+      (stage) => stage.id === "usage" || stage.id === "addons" || stage.id === "credits"
     )) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
@@ -11967,7 +12044,7 @@ var StageButton = ({
         disabled: isDisabled,
         onClick: async () => {
           setCheckoutStage?.(
-            hasPayInAdvanceEntitlements ? "usage" : hasAddOns ? "addons" : "checkout"
+            hasPayInAdvanceEntitlements ? "usage" : hasAddOns ? "addons" : hasCreditBundles ? "credits" : "checkout"
           );
         },
         $isLoading: isLoading,
@@ -11976,14 +12053,16 @@ var StageButton = ({
           t2("Next"),
           ":",
           " ",
-          hasPayInAdvanceEntitlements ? t2("Usage") : hasAddOns ? t2("Addons") : t2("Checkout"),
+          hasPayInAdvanceEntitlements ? t2("Usage") : hasAddOns ? t2("Addons") : hasCreditBundles ? t2("Credits") : t2("Checkout"),
           /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
         ] })
       }
     );
   }
   if (checkoutStage === "usage") {
-    if (!isPaymentMethodRequired && !checkoutStages?.some((stage) => stage.id === "addons")) {
+    if (!isPaymentMethodRequired && !checkoutStages?.some(
+      (stage) => stage.id === "addons" || stage.id === "credits"
+    )) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
     return /* @__PURE__ */ jsx12(
@@ -11992,7 +12071,9 @@ var StageButton = ({
         type: "button",
         disabled: isDisabled,
         onClick: async () => {
-          setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
+          setCheckoutStage?.(
+            hasAddOns ? "addons" : hasCreditBundles ? "credits" : "checkout"
+          );
         },
         $isLoading: isLoading,
         $fullWidth: true,
@@ -12005,8 +12086,9 @@ var StageButton = ({
             $padding: "0 1rem",
             children: [
               t2("Next"),
-              ": ",
-              hasAddOns ? t2("Addons") : t2("Checkout"),
+              ":",
+              " ",
+              hasAddOns ? t2("Addons") : hasCreditBundles ? t2("Credits") : t2("Checkout"),
               /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
             ]
           }
@@ -12015,6 +12097,38 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "addons") {
+    if (!isPaymentMethodRequired && !checkoutStages?.some((stage) => stage.id === "credits")) {
+      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+    }
+    return /* @__PURE__ */ jsx12(
+      Button,
+      {
+        type: "button",
+        disabled: isDisabled,
+        onClick: async () => {
+          setCheckoutStage?.(hasCreditBundles ? "credits" : "checkout");
+        },
+        $isLoading: isLoading,
+        $fullWidth: true,
+        children: /* @__PURE__ */ jsxs8(
+          Flex,
+          {
+            $gap: "0.5rem",
+            $justifyContent: "center",
+            $alignItems: "center",
+            $padding: "0 1rem",
+            children: [
+              t2("Next"),
+              ": ",
+              hasCreditBundles ? t2("Credits") : t2("Checkout"),
+              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (checkoutStage === "credits") {
     if (!isPaymentMethodRequired) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
@@ -12070,6 +12184,7 @@ var Sidebar = ({
   planPeriod,
   selectedPlan,
   addOns,
+  creditBundles = [],
   usageBasedEntitlements,
   charges,
   checkoutRef,
@@ -12187,6 +12302,65 @@ var Sidebar = ({
       proration: charges?.proration ?? 0
     };
   }, [charges]);
+  const updatedUsageBasedEntitlements = useMemo7(() => {
+    const changedUsageBasedEntitlements = [];
+    const addedUsageBasedEntitlements = selectedPlan ? usageBasedEntitlements.reduce(
+      (acc, selected) => {
+        const changed = currentUsageBasedEntitlements.find(
+          (current) => current.entitlementId === selected.id && current.quantity !== selected.quantity
+        );
+        if (changed) {
+          changedUsageBasedEntitlements.push({
+            previous: changed,
+            next: selected
+          });
+        } else {
+          acc.push(selected);
+        }
+        return acc;
+      },
+      []
+    ) : [];
+    const removedUsageBasedEntitlements = selectedPlan ? currentUsageBasedEntitlements.reduce(
+      (acc, current) => {
+        const match2 = usageBasedEntitlements.every(
+          (entitlement) => entitlement.id !== current.entitlementId
+        ) && currentEntitlements.find(
+          (usage) => usage.entitlementId === current.entitlementId
+        );
+        if (match2) {
+          acc.push({
+            ...match2,
+            allocation: current.allocation,
+            usage: current.usage,
+            quantity: current.quantity
+          });
+        }
+        return acc;
+      },
+      []
+    ) : [];
+    const willUsageBasedEntitlementsChange = changedUsageBasedEntitlements.length > 0 || addedUsageBasedEntitlements.length > 0 || removedUsageBasedEntitlements.length > 0;
+    return {
+      changed: changedUsageBasedEntitlements,
+      added: addedUsageBasedEntitlements,
+      removed: removedUsageBasedEntitlements,
+      willChange: willUsageBasedEntitlementsChange
+    };
+  }, [
+    selectedPlan,
+    currentEntitlements,
+    currentUsageBasedEntitlements,
+    usageBasedEntitlements
+  ]);
+  const selectedAddOns = useMemo7(
+    () => addOns.filter((addOn) => addOn.isSelected),
+    [addOns]
+  );
+  const addedCreditBundles = useMemo7(
+    () => creditBundles.filter((bundle) => bundle.count > 0),
+    [creditBundles]
+  );
   const handleCheckout = useCallback8(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
@@ -12224,7 +12398,18 @@ var Sidebar = ({
           },
           []
         ),
-        creditBundles: [],
+        creditBundles: creditBundles.reduce(
+          (acc, { id, count }) => {
+            if (count > 0) {
+              acc.push({
+                bundleId: id,
+                quantity: count
+              });
+            }
+            return acc;
+          },
+          []
+        ),
         skipTrial: !willTrialWithoutPaymentMethod,
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
@@ -12245,6 +12430,7 @@ var Sidebar = ({
     planPeriod,
     selectedPlan,
     addOns,
+    creditBundles,
     setError,
     setIsLoading,
     setLayout,
@@ -12265,68 +12451,21 @@ var Sidebar = ({
       setError(t2("Unsubscribe failed"));
     }
   }, [t2, unsubscribe, setError, setIsLoading, setLayout]);
-  const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const updatedUsageBasedEntitlements = useMemo7(() => {
-    const changedUsageBasedEntitlements = [];
-    const addedUsageBasedEntitlements = selectedPlan ? usageBasedEntitlements.reduce(
-      (acc, selected) => {
-        const changed = currentUsageBasedEntitlements.find(
-          (current) => current.entitlementId === selected.id && current.quantity !== selected.quantity
-        );
-        if (changed) {
-          changedUsageBasedEntitlements.push({
-            previous: changed,
-            next: selected
-          });
-        } else {
-          acc.push(selected);
-        }
-        return acc;
-      },
-      []
-    ) : [];
-    const removedUsageBasedEntitlements = selectedPlan ? currentUsageBasedEntitlements.reduce(
-      (acc, current) => {
-        const match2 = usageBasedEntitlements.every(
-          (entitlement) => entitlement.id !== current.entitlementId
-        ) && currentEntitlements.find(
-          (usage) => usage.entitlementId === current.entitlementId
-        );
-        if (match2) {
-          acc.push({
-            ...match2,
-            allocation: current.allocation,
-            usage: current.usage,
-            quantity: current.quantity
-          });
-        }
-        return acc;
-      },
-      []
-    ) : [];
-    const willUsageBasedEntitlementsChange = changedUsageBasedEntitlements.length > 0 || addedUsageBasedEntitlements.length > 0 || removedUsageBasedEntitlements.length > 0;
+  const willPlanChange = isHydratedPlan(selectedPlan) && !selectedPlan.current;
+  const { removedAddOns, willAddOnsChange } = useMemo7(() => {
+    const addedAddOns = selectedAddOns.filter(
+      (selected) => !currentAddOns.some((current) => selected.id === current.id)
+    );
+    const removedAddOns2 = currentAddOns.filter(
+      (current) => !selectedAddOns.some((selected) => current.id === selected.id) && current.planPeriod !== "one-time"
+    );
+    const willAddOnsChange2 = removedAddOns2.length > 0 || addedAddOns.length > 0;
     return {
-      changed: changedUsageBasedEntitlements,
-      added: addedUsageBasedEntitlements,
-      removed: removedUsageBasedEntitlements,
-      willChange: willUsageBasedEntitlementsChange
+      addedAddOns,
+      removedAddOns: removedAddOns2,
+      willAddOnsChange: willAddOnsChange2
     };
-  }, [
-    selectedPlan,
-    currentEntitlements,
-    currentUsageBasedEntitlements,
-    usageBasedEntitlements
-  ]);
-  const willPlanChange = isHydratedPlan(selectedPlan) && !selectedPlan.current;
-  const removedAddOns = currentAddOns.filter(
-    (current) => !selectedAddOns.some((selected) => current.id === selected.id) && current.planPeriod !== "one-time"
-  );
-  const addedAddOns = selectedAddOns.filter(
-    (selected) => !currentAddOns.some((current) => selected.id === current.id)
-  );
-  const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
-  const inEditMode = settings.mode === "edit";
-  const hasPaymentMethod = typeof paymentMethod !== "undefined" || typeof paymentMethodId === "string";
+  }, [currentAddOns, selectedAddOns]);
   const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
   const now = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(now);
@@ -12611,6 +12750,48 @@ var Sidebar = ({
                   );
                 })
               ] }),
+              addedCreditBundles.length > 0 && /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(Text, { $size: 14, children: t2("Credits") }) }),
+                addedCreditBundles.reduce(
+                  (acc, bundle, index) => {
+                    const price = typeof bundle.price?.priceDecimal === "string" ? Number(bundle.price.priceDecimal) : typeof bundle.price?.price === "number" ? bundle.price.price : void 0;
+                    const amount = (bundle.quantity ?? 0) * bundle.count;
+                    if (price)
+                      acc.push(
+                        /* @__PURE__ */ jsxs9(
+                          Flex,
+                          {
+                            $justifyContent: "space-between",
+                            $alignItems: "center",
+                            $gap: "1rem",
+                            children: [
+                              /* @__PURE__ */ jsxs9(Box, { children: [
+                                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs9(Text, { display: "heading4", children: [
+                                  bundle.name,
+                                  " (",
+                                  bundle.count,
+                                  ")"
+                                ] }) }),
+                                /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsxs9(Text, { children: [
+                                  amount,
+                                  " ",
+                                  getFeatureName(bundle, amount)
+                                ] }) })
+                              ] }),
+                              bundle.count > 0 && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx13(Text, { children: formatCurrency(
+                                price * bundle.count,
+                                bundle.price?.currency
+                              ) }) })
+                            ]
+                          },
+                          index
+                        )
+                      );
+                    return acc;
+                  },
+                  []
+                )
+              ] }),
               proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx13(
                 Proration,
                 {
@@ -12759,9 +12940,10 @@ var Sidebar = ({
                   checkoutStages,
                   hasAddOns: addOns.length > 0,
                   hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
-                  hasPaymentMethod,
+                  hasCreditBundles: creditBundles.length > 0,
+                  hasPaymentMethod: typeof paymentMethod !== "undefined" || typeof paymentMethodId === "string",
                   hasPlan: typeof selectedPlan !== "undefined",
-                  inEditMode,
+                  inEditMode: settings.mode === "edit",
                   isLoading,
                   isPaymentMethodRequired,
                   isSelectedPlanTrialable,
@@ -12800,7 +12982,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
   const { settings } = useEmbed();
   const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ jsx14(Fragment5, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx14(
     Box,
     {
       $display: "grid",
@@ -12897,7 +13079,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
         );
       })
     }
-  ) });
+  );
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
@@ -12964,8 +13146,75 @@ var Checkout = ({
   ] });
 };
 
+// src/components/shared/checkout-dialog/Credits.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var Credits = ({ bundles, updateCount }) => {
+  const { settings } = useEmbed();
+  const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
+  return /* @__PURE__ */ jsx16(
+    Box,
+    {
+      $display: "grid",
+      $gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+      $gap: "1rem",
+      children: bundles.map((bundle, index) => {
+        const billingPrice = bundle.price;
+        const price = typeof billingPrice?.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : typeof billingPrice?.price === "number" ? billingPrice.price : void 0;
+        return /* @__PURE__ */ jsxs12(
+          Flex,
+          {
+            $position: "relative",
+            $flexDirection: "column",
+            $gap: "2rem",
+            $padding: `${cardPadding}rem`,
+            $backgroundColor: settings.theme.card.background,
+            $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+            ...settings.theme.card.hasShadow && {
+              $boxShadow: cardBoxShadow
+            },
+            children: [
+              /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+                /* @__PURE__ */ jsxs12(Box, { children: [
+                  /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(Text, { display: "heading3", children: bundle.name }) }),
+                  /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsxs12(Text, { display: "heading6", children: [
+                    bundle.quantity ?? 0,
+                    " ",
+                    getFeatureName(bundle)
+                  ] }) })
+                ] }),
+                typeof price === "number" && /* @__PURE__ */ jsx16(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx16(Text, { children: formatCurrency(price, bundle.price?.currency) }) })
+              ] }),
+              /* @__PURE__ */ jsx16(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx16(
+                Input,
+                {
+                  $size: "lg",
+                  type: "number",
+                  value: bundle.count,
+                  min: 0,
+                  autoFocus: true,
+                  onFocus: (event) => {
+                    event.target.select();
+                  },
+                  onChange: (event) => {
+                    event.preventDefault();
+                    const value = parseInt(event.target.value);
+                    if (!isNaN(value)) {
+                      updateCount(bundle.id, value);
+                    }
+                  }
+                }
+              ) })
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+};
+
 // src/components/shared/checkout-dialog/Navigation.tsx
-import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var Navigation = ({
   name,
   index,
@@ -12975,9 +13224,9 @@ var Navigation = ({
 }) => {
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  return /* @__PURE__ */ jsxs12(Fragment7, { children: [
-    /* @__PURE__ */ jsxs12(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
+    /* @__PURE__ */ jsxs13(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+      /* @__PURE__ */ jsx17(
         Box,
         {
           $display: "none",
@@ -12986,7 +13235,7 @@ var Navigation = ({
               $display: "block"
             }
           },
-          children: index >= activeIndex ? /* @__PURE__ */ jsx16(
+          children: index >= activeIndex ? /* @__PURE__ */ jsx17(
             Box,
             {
               $width: `${20 / TEXT_BASE_SIZE}rem`,
@@ -12996,7 +13245,7 @@ var Navigation = ({
               $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
               $borderRadius: "9999px"
             }
-          ) : /* @__PURE__ */ jsx16(
+          ) : /* @__PURE__ */ jsx17(
             Icon3,
             {
               name: "check",
@@ -13012,7 +13261,7 @@ var Navigation = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs12(
+      /* @__PURE__ */ jsxs13(
         Box,
         {
           $whiteSpace: "nowrap",
@@ -13035,7 +13284,7 @@ var Navigation = ({
         }
       )
     ] }),
-    !isLast && /* @__PURE__ */ jsx16(
+    !isLast && /* @__PURE__ */ jsx17(
       Icon3,
       {
         name: "chevron-right",
@@ -13050,7 +13299,7 @@ var Navigation = ({
 
 // src/components/shared/checkout-dialog/Plan.tsx
 import { useEffect as useEffect4, useMemo as useMemo8, useState as useState8 } from "react";
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
@@ -13060,7 +13309,7 @@ var Selected = ({ isCurrent = false, isTrial = false }) => {
     }
     return isTrial ? t2("Trial selected") : t2("Plan selected");
   }, [t2, isCurrent, isTrial]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     Flex,
     {
       $justifyContent: "center",
@@ -13068,8 +13317,8 @@ var Selected = ({ isCurrent = false, isTrial = false }) => {
       $gap: "0.25rem",
       $padding: "0.625rem 0",
       children: [
-        /* @__PURE__ */ jsx17(Icon3, { name: "check-rounded", color: settings.theme.primary }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(Icon3, { name: "check-rounded", color: settings.theme.primary }),
+        /* @__PURE__ */ jsx18(
           Text,
           {
             $size: 0.9375 * settings.theme.typography.text.fontSize,
@@ -13105,8 +13354,8 @@ var PlanButtonGroup = ({
     };
   }, [data, plan]);
   if (isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable) {
-    return /* @__PURE__ */ jsxs13(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      !isTrialing && /* @__PURE__ */ jsx17(Fragment8, { children: isSelected && shouldTrial ? /* @__PURE__ */ jsx17(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
+      !isTrialing && /* @__PURE__ */ jsx18(Fragment8, { children: isSelected && shouldTrial ? /* @__PURE__ */ jsx18(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ jsx18(
         Button,
         {
           type: "button",
@@ -13128,16 +13377,16 @@ var PlanButtonGroup = ({
           $color: "primary",
           $variant: "filled",
           $fullWidth: true,
-          children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx17(
+          children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx18(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ jsx17(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ jsx17(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+              trigger: /* @__PURE__ */ jsx18(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ jsx18(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Start X day trial", { days: plan.trialDays })
         }
       ) }),
-      !plan.custom && /* @__PURE__ */ jsx17(Fragment8, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ jsx17(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx17(
+      !plan.custom && /* @__PURE__ */ jsx18(Fragment8, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ jsx18(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx18(
         Button,
         {
           type: "button",
@@ -13149,18 +13398,18 @@ var PlanButtonGroup = ({
           $color: "primary",
           $variant: isTrialing ? "filled" : "text",
           $fullWidth: true,
-          children: !isValidPlan ? /* @__PURE__ */ jsx17(
+          children: !isValidPlan ? /* @__PURE__ */ jsx18(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ jsx17(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ jsx17(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+              trigger: /* @__PURE__ */ jsx18(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ jsx18(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Choose plan")
         }
       ) })
     ] });
   }
-  return isSelected ? /* @__PURE__ */ jsx17(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx17(
+  return isSelected ? /* @__PURE__ */ jsx18(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsx18(
     Button,
     {
       type: "button",
@@ -13179,11 +13428,11 @@ var PlanButtonGroup = ({
       $color: "primary",
       $variant: "filled",
       $fullWidth: true,
-      children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx17(
+      children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx18(
         Tooltip,
         {
-          trigger: /* @__PURE__ */ jsx17(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-          content: /* @__PURE__ */ jsx17(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+          trigger: /* @__PURE__ */ jsx18(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+          content: /* @__PURE__ */ jsx18(Text, { children: t2("Current usage exceeds the limit of this plan.") })
         }
       ) : t2("Choose plan")
     }
@@ -13226,7 +13475,7 @@ var Plan = ({
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ jsx17(Fragment8, { children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Box,
     {
       $display: "grid",
@@ -13235,6 +13484,7 @@ var Plan = ({
       $flexGrow: 1,
       children: plans.map((plan, planIndex) => {
         const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, period) || {};
+        const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
@@ -13242,7 +13492,7 @@ var Plan = ({
         const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? settings.theme.typography.heading3 : settings.theme.typography.heading2;
         const count = entitlementCounts[plan.id];
         const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
-        return /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsxs14(
           Flex,
           {
             $position: "relative",
@@ -13257,7 +13507,7 @@ var Plan = ({
               $boxShadow: cardBoxShadow
             },
             children: [
-              /* @__PURE__ */ jsxs13(
+              /* @__PURE__ */ jsxs14(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -13273,10 +13523,10 @@ var Plan = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsx17(Box, { children: /* @__PURE__ */ jsx17(Text, { display: "heading2", children: plan.name }) }),
-                    /* @__PURE__ */ jsx17(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ jsx17(Text, { children: plan.description }) }),
-                    /* @__PURE__ */ jsxs13(Box, { children: [
-                      /* @__PURE__ */ jsx17(
+                    /* @__PURE__ */ jsx18(Box, { children: /* @__PURE__ */ jsx18(Text, { display: "heading2", children: plan.name }) }),
+                    /* @__PURE__ */ jsx18(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ jsx18(Text, { children: plan.description }) }),
+                    /* @__PURE__ */ jsxs14(Box, { children: [
+                      /* @__PURE__ */ jsx18(
                         Text,
                         {
                           $font: headerPriceFontStyle.fontFamily,
@@ -13286,7 +13536,7 @@ var Plan = ({
                           children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs13(
+                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs14(
                         Text,
                         {
                           display: "heading2",
@@ -13298,7 +13548,58 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ jsx17(
+                    credits.length > 0 && /* @__PURE__ */ jsx18(
+                      Flex,
+                      {
+                        $flexDirection: "column",
+                        $gap: "1rem",
+                        $flexGrow: 1,
+                        $marginTop: "0.5rem",
+                        children: credits.map((credit, creditIndex) => {
+                          return /* @__PURE__ */ jsx18(
+                            Flex,
+                            {
+                              $flexWrap: "wrap",
+                              $justifyContent: "space-between",
+                              $alignItems: "center",
+                              $gap: "1rem",
+                              children: /* @__PURE__ */ jsxs14(Flex, { $gap: "1rem", children: [
+                                credit.icon && /* @__PURE__ */ jsx18(
+                                  Icon3,
+                                  {
+                                    name: credit.icon,
+                                    color: settings.theme.primary,
+                                    background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                                    rounded: true
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx18(
+                                  Flex,
+                                  {
+                                    $flexDirection: "column",
+                                    $justifyContent: "center",
+                                    $gap: "0.5rem",
+                                    children: /* @__PURE__ */ jsxs14(Text, { children: [
+                                      credit.quantity,
+                                      " ",
+                                      getFeatureName(credit, credit.quantity),
+                                      credit.period && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                        " ",
+                                        t2("per"),
+                                        " ",
+                                        credit.period
+                                      ] })
+                                    ] })
+                                  }
+                                )
+                              ] })
+                            },
+                            creditIndex
+                          );
+                        })
+                      }
+                    ),
+                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ jsx18(
                       Flex,
                       {
                         $position: "absolute",
@@ -13307,7 +13608,7 @@ var Plan = ({
                         $backgroundColor: settings.theme.primary,
                         $borderRadius: "9999px",
                         $padding: "0.125rem 0.85rem",
-                        children: /* @__PURE__ */ jsx17(
+                        children: /* @__PURE__ */ jsx18(
                           Text,
                           {
                             $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -13320,7 +13621,7 @@ var Plan = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs13(
+              /* @__PURE__ */ jsxs14(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -13329,55 +13630,115 @@ var Plan = ({
                   $gap: `${cardPadding}rem`,
                   $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                   children: [
-                    /* @__PURE__ */ jsxs13(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                      plan.entitlements.reduce(
-                        (acc, entitlement, entitlementIndex) => {
-                          const hasNumericValue = entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */;
-                          const limit = entitlement.softLimit ?? entitlement.valueNumeric;
-                          const {
-                            price: entitlementPrice,
-                            priceTier: entitlementPriceTiers,
-                            currency: entitlementCurrency,
-                            packageSize: entitlementPackageSize = 1
-                          } = getEntitlementPrice(entitlement, period) || {};
-                          const metricPeriodName = getMetricPeriodName(entitlement);
-                          if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
-                            return acc;
-                          }
-                          acc.push(
-                            /* @__PURE__ */ jsx17(
-                              Flex,
-                              {
-                                $flexWrap: "wrap",
-                                $justifyContent: "space-between",
-                                $alignItems: "center",
-                                $gap: "1rem",
-                                children: /* @__PURE__ */ jsxs13(Flex, { $gap: "1rem", children: [
-                                  entitlement.feature?.icon && /* @__PURE__ */ jsx17(
-                                    Icon3,
-                                    {
-                                      name: entitlement.feature.icon,
-                                      color: settings.theme.primary,
-                                      background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
-                                      rounded: true
-                                    }
-                                  ),
-                                  entitlement.feature?.name && /* @__PURE__ */ jsxs13(
-                                    Flex,
-                                    {
-                                      $flexDirection: "column",
-                                      $justifyContent: "center",
-                                      $gap: "0.5rem",
-                                      children: [
-                                        /* @__PURE__ */ jsx17(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
-                                          formatCurrency(
+                    plan.entitlements.length > 0 && /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
+                      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 {
+                          price: entitlementPrice,
+                          priceTier: entitlementPriceTiers,
+                          currency: entitlementCurrency,
+                          packageSize: entitlementPackageSize = 1
+                        } = getEntitlementPrice(entitlement, period) || {};
+                        const metricPeriodName = getMetricPeriodName(entitlement);
+                        return /* @__PURE__ */ jsx18(
+                          Flex,
+                          {
+                            $flexWrap: "wrap",
+                            $justifyContent: "space-between",
+                            $alignItems: "center",
+                            $gap: "1rem",
+                            children: /* @__PURE__ */ jsxs14(Flex, { $gap: "1rem", children: [
+                              entitlement.feature?.icon && /* @__PURE__ */ jsx18(
+                                Icon3,
+                                {
+                                  name: entitlement.feature.icon,
+                                  color: settings.theme.primary,
+                                  background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                                  rounded: true
+                                }
+                              ),
+                              entitlement.feature?.name && /* @__PURE__ */ jsxs14(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $justifyContent: "center",
+                                  $gap: "0.5rem",
+                                  children: [
+                                    /* @__PURE__ */ jsx18(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      formatCurrency(
+                                        entitlementPrice,
+                                        entitlementCurrency
+                                      ),
+                                      " ",
+                                      t2("per"),
+                                      " ",
+                                      entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                        entitlementPackageSize,
+                                        " "
+                                      ] }),
+                                      getFeatureName(
+                                        entitlement.feature,
+                                        entitlementPackageSize
+                                      ),
+                                      entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                        " ",
+                                        t2("per"),
+                                        " ",
+                                        period
+                                      ] })
+                                    ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx18(
+                                      TieredPricingDetails,
+                                      {
+                                        entitlement,
+                                        period
+                                      }
+                                    ) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      entitlement.consumptionRate,
+                                      " ",
+                                      getFeatureName(
+                                        entitlement.valueCredit,
+                                        entitlement.consumptionRate || void 0
+                                      ),
+                                      " ",
+                                      t2("per"),
+                                      " ",
+                                      getFeatureName(entitlement.feature, 1)
+                                    ] }) : hasNumericValue ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                      entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
+                                        item: getFeatureName(
+                                          entitlement.feature
+                                        )
+                                      }) : typeof limit === "number" && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                        formatNumber(limit),
+                                        " ",
+                                        getFeatureName(
+                                          entitlement.feature,
+                                          limit
+                                        )
+                                      ] }),
+                                      metricPeriodName && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                        " ",
+                                        t2("per"),
+                                        " ",
+                                        t2(metricPeriodName)
+                                      ] })
+                                    ] }) : entitlement.feature.name }),
+                                    entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs14(
+                                      Text,
+                                      {
+                                        style: { opacity: 0.54 },
+                                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                                        $color: settings.theme.typography.text.color,
+                                        children: [
+                                          t2("then"),
+                                          " ",
+                                          formatCurrency(
                                             entitlementPrice,
                                             entitlementCurrency
                                           ),
-                                          " ",
-                                          t2("per"),
-                                          " ",
-                                          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs13(Fragment8, { children: [
+                                          "/",
+                                          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs14(Fragment8, { children: [
                                             entitlementPackageSize,
                                             " "
                                           ] }),
@@ -13385,99 +13746,41 @@ var Plan = ({
                                             entitlement.feature,
                                             entitlementPackageSize
                                           ),
-                                          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs13(Fragment8, { children: [
-                                            " ",
-                                            t2("per"),
-                                            " ",
-                                            period
-                                          ] })
-                                        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx17(
-                                          TieredPricingDetails,
-                                          {
-                                            entitlement,
-                                            period
-                                          }
-                                        ) : hasNumericValue ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
-                                          entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
-                                            item: getFeatureName(
-                                              entitlement.feature
-                                            )
-                                          }) : typeof limit === "number" && /* @__PURE__ */ jsxs13(Fragment8, { children: [
-                                            formatNumber(limit),
-                                            " ",
-                                            getFeatureName(
-                                              entitlement.feature,
-                                              limit
-                                            )
-                                          ] }),
-                                          metricPeriodName && /* @__PURE__ */ jsxs13(Fragment8, { children: [
-                                            " ",
-                                            t2("per"),
-                                            " ",
-                                            t2(metricPeriodName)
+                                          entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
+                                            "/",
+                                            shortenPeriod(period)
                                           ] })
-                                        ] }) : entitlement.feature.name }),
-                                        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs13(
-                                          Text,
-                                          {
-                                            style: { opacity: 0.54 },
-                                            $size: 0.875 * settings.theme.typography.text.fontSize,
-                                            $color: settings.theme.typography.text.color,
-                                            children: [
-                                              t2("then"),
-                                              " ",
-                                              formatCurrency(
-                                                entitlementPrice,
-                                                entitlementCurrency
-                                              ),
-                                              "/",
-                                              entitlementPackageSize > 1 && /* @__PURE__ */ jsxs13(Fragment8, { children: [
-                                                entitlementPackageSize,
-                                                " "
-                                              ] }),
-                                              getFeatureName(
-                                                entitlement.feature,
-                                                entitlementPackageSize
-                                              ),
-                                              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs13(Fragment8, { children: [
-                                                "/",
-                                                shortenPeriod(period)
-                                              ] })
-                                            ]
-                                          }
-                                        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs13(Flex, { $alignItems: "center", children: [
-                                          /* @__PURE__ */ jsx17(
-                                            PricingTiersTooltip,
-                                            {
-                                              feature: entitlement.feature,
-                                              period,
-                                              currency: entitlementCurrency,
-                                              priceTiers: entitlementPriceTiers
-                                            }
-                                          ),
-                                          /* @__PURE__ */ jsx17(
-                                            Text,
-                                            {
-                                              style: { opacity: 0.54 },
-                                              $size: 0.875 * settings.theme.typography.text.fontSize,
-                                              $color: settings.theme.typography.text.color,
-                                              children: t2("Tier-based")
-                                            }
-                                          )
-                                        ] })
-                                      ]
-                                    }
-                                  )
-                                ] })
-                              },
-                              entitlementIndex
-                            )
-                          );
-                          return acc;
-                        },
-                        []
-                      ).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
-                      (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs13(
+                                        ]
+                                      }
+                                    ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs14(Flex, { $alignItems: "center", children: [
+                                      /* @__PURE__ */ jsx18(
+                                        PricingTiersTooltip,
+                                        {
+                                          feature: entitlement.feature,
+                                          period,
+                                          currency: entitlementCurrency,
+                                          priceTiers: entitlementPriceTiers
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx18(
+                                        Text,
+                                        {
+                                          style: { opacity: 0.54 },
+                                          $size: 0.875 * settings.theme.typography.text.fontSize,
+                                          $color: settings.theme.typography.text.color,
+                                          children: t2("Tier-based")
+                                        }
+                                      )
+                                    ] })
+                                  ]
+                                }
+                              )
+                            ] })
+                          },
+                          entitlementIndex
+                        );
+                      }).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
+                      (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs14(
                         Flex,
                         {
                           $alignItems: "center",
@@ -13485,14 +13788,14 @@ var Plan = ({
                           $gap: "0.5rem",
                           $marginTop: "1rem",
                           children: [
-                            /* @__PURE__ */ jsx17(
+                            /* @__PURE__ */ jsx18(
                               Icon3,
                               {
                                 name: isExpanded ? "chevron-up" : "chevron-down",
                                 color: "#D0D0D0"
                               }
                             ),
-                            /* @__PURE__ */ jsx17(
+                            /* @__PURE__ */ jsx18(
                               Text,
                               {
                                 onClick: () => handleToggleShowAll(plan.id),
@@ -13512,7 +13815,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx17(
+                    /* @__PURE__ */ jsx18(
                       PlanButtonGroup,
                       {
                         plan,
@@ -13531,147 +13834,144 @@ var Plan = ({
         );
       })
     }
-  ) });
+  );
 };
 
 // src/components/shared/checkout-dialog/Usage.tsx
-import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var Usage = ({ entitlements, updateQuantity, period }) => {
   const { settings } = useEmbed();
   const { t: t2 } = useTranslation();
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   const unitPriceFontSize = 0.875 * settings.theme.typography.text.fontSize;
-  return /* @__PURE__ */ jsx18(Fragment9, { children: /* @__PURE__ */ jsx18(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
-    (acc, entitlement, index) => {
-      if (entitlement.feature) {
-        const {
-          price,
-          currency,
-          packageSize = 1
-        } = getEntitlementPrice(entitlement, period) || {};
-        acc.push(
-          /* @__PURE__ */ jsxs14(
-            Flex,
-            {
-              $justifyContent: "space-between",
-              $alignItems: "center",
-              $gap: "1rem",
-              $padding: `${cardPadding}rem`,
-              $backgroundColor: settings.theme.card.background,
-              $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
-              ...settings.theme.card.hasShadow && {
-                $boxShadow: cardBoxShadow
-              },
-              children: [
-                /* @__PURE__ */ jsxs14(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $gap: "0.75rem",
-                    $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
-                    children: [
-                      /* @__PURE__ */ jsx18(Box, { children: /* @__PURE__ */ jsx18(Text, { display: "heading2", children: entitlement.feature.name }) }),
-                      entitlement.feature.description && /* @__PURE__ */ jsx18(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx18(Text, { children: entitlement.feature.description }) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs14(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $gap: "0.5rem",
-                    $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
-                    children: [
-                      /* @__PURE__ */ jsx18(
-                        Input,
-                        {
-                          $size: "lg",
-                          type: "number",
-                          value: entitlement.quantity,
-                          min: 1,
-                          autoFocus: true,
-                          onFocus: (event) => {
-                            event.target.select();
-                          },
-                          onChange: (event) => {
-                            event.preventDefault();
-                            const value = parseInt(event.target.value);
-                            if (!isNaN(value) && value > 0) {
-                              updateQuantity(entitlement.id, value);
-                            }
+  return /* @__PURE__ */ jsx19(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce((acc, entitlement, index) => {
+    if (entitlement.feature) {
+      const {
+        price,
+        currency,
+        packageSize = 1
+      } = getEntitlementPrice(entitlement, period) || {};
+      acc.push(
+        /* @__PURE__ */ jsxs15(
+          Flex,
+          {
+            $justifyContent: "space-between",
+            $alignItems: "center",
+            $gap: "1rem",
+            $padding: `${cardPadding}rem`,
+            $backgroundColor: settings.theme.card.background,
+            $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+            ...settings.theme.card.hasShadow && {
+              $boxShadow: cardBoxShadow
+            },
+            children: [
+              /* @__PURE__ */ jsxs15(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "0.75rem",
+                  $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
+                  children: [
+                    /* @__PURE__ */ jsx19(Box, { children: /* @__PURE__ */ jsx19(Text, { display: "heading2", children: entitlement.feature.name }) }),
+                    entitlement.feature.description && /* @__PURE__ */ jsx19(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx19(Text, { children: entitlement.feature.description }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs15(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "0.5rem",
+                  $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
+                  children: [
+                    /* @__PURE__ */ jsx19(
+                      Input,
+                      {
+                        $size: "lg",
+                        type: "number",
+                        value: entitlement.quantity,
+                        min: 1,
+                        autoFocus: true,
+                        onFocus: (event) => {
+                          event.target.select();
+                        },
+                        onChange: (event) => {
+                          event.preventDefault();
+                          const value = parseInt(event.target.value);
+                          if (!isNaN(value) && value > 0) {
+                            updateQuantity(entitlement.id, value);
                           }
                         }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx19(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: unitPriceFontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: t2("Currently using", {
+                          quantity: entitlement.usage,
+                          unit: getFeatureName(entitlement.feature)
+                        })
+                      }
+                    ),
+                    entitlement.quantity < entitlement.usage && /* @__PURE__ */ jsx19(Text, { $size: unitPriceFontSize, $color: "#DB6669", children: t2("Cannot downgrade entitlement") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs15(
+                Box,
+                {
+                  $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
+                  $textAlign: "right",
+                  children: [
+                    /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs15(Text, { children: [
+                      formatCurrency(
+                        (price ?? 0) * entitlement.quantity,
+                        currency
                       ),
-                      /* @__PURE__ */ jsx18(
-                        Text,
-                        {
-                          style: { opacity: 0.54 },
-                          $size: unitPriceFontSize,
-                          $color: settings.theme.typography.text.color,
-                          children: t2("Currently using", {
-                            quantity: entitlement.usage,
-                            unit: getFeatureName(entitlement.feature)
-                          })
-                        }
-                      ),
-                      entitlement.quantity < entitlement.usage && /* @__PURE__ */ jsx18(Text, { $size: unitPriceFontSize, $color: "#DB6669", children: t2("Cannot downgrade entitlement") })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs14(
-                  Box,
-                  {
-                    $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
-                    $textAlign: "right",
-                    children: [
-                      /* @__PURE__ */ jsx18(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs14(Text, { children: [
-                        formatCurrency(
-                          (price ?? 0) * entitlement.quantity,
-                          currency
-                        ),
-                        /* @__PURE__ */ jsxs14("sub", { children: [
-                          "/",
-                          shortenPeriod(period)
-                        ] })
-                      ] }) }),
-                      /* @__PURE__ */ jsx18(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs14(
-                        Text,
-                        {
-                          style: { opacity: 0.54 },
-                          $size: unitPriceFontSize,
-                          $color: settings.theme.typography.text.color,
-                          children: [
-                            formatCurrency(price ?? 0, currency),
-                            /* @__PURE__ */ jsxs14("sub", { children: [
-                              "/",
-                              packageSize > 1 && /* @__PURE__ */ jsxs14(Fragment9, { children: [
-                                packageSize,
-                                " "
-                              ] }),
-                              getFeatureName(entitlement.feature, packageSize),
-                              "/",
-                              shortenPeriod(period)
-                            ] })
-                          ]
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ]
-            },
-            index
-          )
-        );
-      }
-      return acc;
-    },
-    []
-  ) }) });
+                      /* @__PURE__ */ jsxs15("sub", { children: [
+                        "/",
+                        shortenPeriod(period)
+                      ] })
+                    ] }) }),
+                    /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs15(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: unitPriceFontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          formatCurrency(price ?? 0, currency),
+                          /* @__PURE__ */ jsxs15("sub", { children: [
+                            "/",
+                            packageSize > 1 && /* @__PURE__ */ jsxs15(Fragment9, { children: [
+                              packageSize,
+                              " "
+                            ] }),
+                            getFeatureName(entitlement.feature, packageSize),
+                            "/",
+                            shortenPeriod(period)
+                          ] })
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          },
+          index
+        )
+      );
+    }
+    return acc;
+  }, []) });
 };
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
   if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
     const featureUsage = entitlements.find(
@@ -13748,6 +14048,15 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return [];
   });
+  const [creditBundles, setCreditBundles] = useState9(() => {
+    if (isCheckoutData(data)) {
+      return data.creditBundles.map((bundle) => ({
+        ...bundle,
+        count: 0
+      }));
+    }
+    return [];
+  });
   const [usageBasedEntitlements, setUsageBasedEntitlements] = useState9(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
@@ -13772,7 +14081,7 @@ var CheckoutDialog = ({ top = 0 }) => {
   const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
   const checkoutStages = useMemo9(() => {
     const stages = [];
-    if (availablePlans) {
+    if (availablePlans.length > 0) {
       stages.push({
         id: "plan",
         name: t2("Plan"),
@@ -13797,6 +14106,14 @@ var CheckoutDialog = ({ top = 0 }) => {
         description: t2("Optionally add features to your subscription")
       });
     }
+    if (creditBundles.length > 0) {
+      stages.push({
+        id: "credits",
+        name: t2("Credits"),
+        label: t2("Select credits"),
+        description: t2("Optionally add credit bundles to your subscription")
+      });
+    }
     if (isPaymentMethodRequired) {
       stages.push({
         id: "checkout",
@@ -13808,11 +14125,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   }, [
     t2,
     availablePlans,
-    addOns,
-    payInAdvanceEntitlements,
-    shouldTrial,
     willTrialWithoutPaymentMethod,
+    payInAdvanceEntitlements,
+    addOns,
     isSelectedPlanTrialable,
+    shouldTrial,
+    creditBundles,
     isPaymentMethodRequired
   ]);
   const [checkoutStage, setCheckoutStage] = useState9(() => {
@@ -13822,8 +14140,11 @@ var CheckoutDialog = ({ top = 0 }) => {
     if (checkoutState?.usage) {
       return "usage";
     }
+    if (checkoutState?.credits) {
+      return "credits";
+    }
     if (checkoutState?.planId !== currentPlanId) {
-      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : "plan";
+      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : "plan";
     }
     return "plan";
   });
@@ -13873,7 +14194,18 @@ var CheckoutDialog = ({ top = 0 }) => {
             },
             []
           ),
-          creditBundles: [],
+          creditBundles: (updates.creditBundles || creditBundles).reduce(
+            (acc, { id, count }) => {
+              if (count > 0) {
+                acc.push({
+                  bundleId: id,
+                  quantity: count
+                });
+              }
+              return acc;
+            },
+            []
+          ),
           skipTrial,
           ...code && { promoCode: code }
         });
@@ -13919,6 +14251,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       selectedPlan,
       payInAdvanceEntitlements,
       addOns,
+      creditBundles,
       shouldTrial,
       promoCode
     ]
@@ -14015,6 +14348,21 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
+  const updateCreditBundleCount = useCallback9(
+    (id, updatedCount) => {
+      setCreditBundles((prev2) => {
+        const updated = prev2.map(
+          (bundle) => bundle.id === id ? {
+            ...bundle,
+            count: updatedCount
+          } : bundle
+        );
+        handlePreviewCheckout({ creditBundles: updated });
+        return updated;
+      });
+    },
+    [handlePreviewCheckout]
+  );
   const updatePromoCode = useCallback9(
     async (code) => {
       handlePreviewCheckout({ promoCode: code });
@@ -14067,8 +14415,8 @@ var CheckoutDialog = ({ top = 0 }) => {
   const activeCheckoutStage = checkoutStages.find(
     (stage) => stage.id === checkoutStage
   );
-  return /* @__PURE__ */ jsxs15(Modal2, { size: "lg", top, contentRef, children: [
-    /* @__PURE__ */ jsx19(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs16(Modal2, { size: "lg", top, contentRef, children: [
+    /* @__PURE__ */ jsx20(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx20(
       Flex,
       {
         $flexWrap: "wrap",
@@ -14078,7 +14426,7 @@ var CheckoutDialog = ({ top = 0 }) => {
             $gap: "1rem"
           }
         },
-        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ jsx19(
+        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ jsx20(
           Navigation,
           {
             name: stage.name,
@@ -14093,7 +14441,7 @@ var CheckoutDialog = ({ top = 0 }) => {
         ))
       }
     ) }),
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16(
       Flex,
       {
         $position: "relative",
@@ -14106,7 +14454,7 @@ var CheckoutDialog = ({ top = 0 }) => {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsxs16(
             Flex,
             {
               $flexDirection: "column",
@@ -14121,7 +14469,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                 }
               },
               children: [
-                /* @__PURE__ */ jsxs15(
+                /* @__PURE__ */ jsxs16(
                   Flex,
                   {
                     $flexDirection: "column",
@@ -14136,8 +14484,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                       }
                     },
                     children: [
-                      activeCheckoutStage && /* @__PURE__ */ jsxs15(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
-                        activeCheckoutStage.label && /* @__PURE__ */ jsx19(
+                      activeCheckoutStage && /* @__PURE__ */ jsxs16(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
+                        activeCheckoutStage.label && /* @__PURE__ */ jsx20(
                           Text,
                           {
                             as: "h3",
@@ -14146,9 +14494,9 @@ var CheckoutDialog = ({ top = 0 }) => {
                             children: activeCheckoutStage.label
                           }
                         ),
-                        activeCheckoutStage.description && /* @__PURE__ */ jsx19(Text, { as: "p", children: activeCheckoutStage.description })
+                        activeCheckoutStage.description && /* @__PURE__ */ jsx20(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
-                      checkoutStage === "plan" && availablePeriods.length > 1 && /* @__PURE__ */ jsx19(
+                      checkoutStage === "plan" && availablePeriods.length > 1 && /* @__PURE__ */ jsx20(
                         PeriodToggle,
                         {
                           options: availablePeriods,
@@ -14160,7 +14508,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     ]
                   }
                 ),
-                checkoutStage === "plan" && /* @__PURE__ */ jsx19(
+                checkoutStage === "plan" && /* @__PURE__ */ jsx20(
                   Plan,
                   {
                     isLoading,
@@ -14171,7 +14519,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     shouldTrial
                   }
                 ),
-                checkoutStage === "usage" && /* @__PURE__ */ jsx19(
+                checkoutStage === "usage" && /* @__PURE__ */ jsx20(
                   Usage,
                   {
                     isLoading,
@@ -14181,7 +14529,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     updateQuantity: updateUsageBasedEntitlementQuantity
                   }
                 ),
-                checkoutStage === "addons" && /* @__PURE__ */ jsx19(
+                checkoutStage === "addons" && /* @__PURE__ */ jsx20(
                   AddOns,
                   {
                     isLoading,
@@ -14190,7 +14538,15 @@ var CheckoutDialog = ({ top = 0 }) => {
                     toggle: (id) => toggleAddOn(id)
                   }
                 ),
-                checkoutStage === "checkout" && /* @__PURE__ */ jsx19(
+                checkoutStage === "credits" && /* @__PURE__ */ jsx20(
+                  Credits,
+                  {
+                    isLoading,
+                    bundles: creditBundles,
+                    updateCount: updateCreditBundleCount
+                  }
+                ),
+                checkoutStage === "checkout" && /* @__PURE__ */ jsx20(
                   Checkout,
                   {
                     isPaymentMethodRequired,
@@ -14201,13 +14557,14 @@ var CheckoutDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             Sidebar,
             {
               planPeriod,
               selectedPlan,
               addOns,
               usageBasedEntitlements,
+              creditBundles,
               charges,
               checkoutRef,
               checkoutStage,
@@ -14233,13 +14590,13 @@ var CheckoutDialog = ({ top = 0 }) => {
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
 import { useRef as useRef7 } from "react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const contentRef = useRef7(null);
-  return /* @__PURE__ */ jsxs16(Modal2, { size: "md", top, contentRef, children: [
-    /* @__PURE__ */ jsx20(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx20(Text, { $size: 18, children: t2("Edit payment method") }) }),
-    /* @__PURE__ */ jsx20(PaymentMethodDetails, {})
+  return /* @__PURE__ */ jsxs17(Modal2, { size: "md", top, contentRef, children: [
+    /* @__PURE__ */ jsx21(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx21(Text, { $size: 18, children: t2("Edit payment method") }) }),
+    /* @__PURE__ */ jsx21(PaymentMethodDetails, {})
   ] });
 };
 
@@ -14250,7 +14607,7 @@ import {
   useStripe
 } from "@stripe/react-stripe-js";
 import { useState as useState10 } from "react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
   const stripe = useStripe();
@@ -14289,7 +14646,7 @@ var PaymentForm = ({ onConfirm }) => {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "form",
     {
       id: "payment-form",
@@ -14301,7 +14658,7 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx21(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx22(
           PaymentElement,
           {
             id: "payment-element",
@@ -14310,7 +14667,7 @@ var PaymentForm = ({ onConfirm }) => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Button,
           {
             id: "submit",
@@ -14322,7 +14679,7 @@ var PaymentForm = ({ onConfirm }) => {
             children: isLoading ? t2("Loading") : t2("Save payment method")
           }
         ),
-        message && /* @__PURE__ */ jsx21(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx21(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
+        message && /* @__PURE__ */ jsx22(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx22(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
       ]
     }
   );
@@ -14330,7 +14687,7 @@ var PaymentForm = ({ onConfirm }) => {
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
 import { useMemo as useMemo10 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var PeriodToggle = ({
   options: options2,
   selectedOption,
@@ -14350,7 +14707,7 @@ var PeriodToggle = ({
     }
     return 0;
   }, [selectedPlan]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     Flex,
     {
       $margin: 0,
@@ -14366,7 +14723,7 @@ var PeriodToggle = ({
         }
       },
       children: options2.map((option) => {
-        const element = /* @__PURE__ */ jsx22(
+        const element = /* @__PURE__ */ jsx23(
           Flex,
           {
             tabIndex: 0,
@@ -14386,7 +14743,7 @@ var PeriodToggle = ({
               $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
             },
             $borderRadius: "2.5rem",
-            children: /* @__PURE__ */ jsx22(
+            children: /* @__PURE__ */ jsx23(
               Text,
               {
                 style: { flexShrink: 0 },
@@ -14399,11 +14756,11 @@ var PeriodToggle = ({
           option
         );
         if (option === "year" && savingsPercentage > 0) {
-          return /* @__PURE__ */ jsx22(
+          return /* @__PURE__ */ jsx23(
             Tooltip,
             {
               trigger: element,
-              content: /* @__PURE__ */ jsx22(Text, { $size: 11, $leading: 1, children: selectedOption === "month" ? t2("Save with yearly billing", {
+              content: /* @__PURE__ */ jsx23(Text, { $size: 11, $leading: 1, children: selectedOption === "month" ? t2("Save with yearly billing", {
                 percent: savingsPercentage
               }) : t2("Saving with yearly billing", {
                 percent: savingsPercentage
@@ -14424,7 +14781,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 jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var PriceText = ({
   feature,
   period,
@@ -14434,42 +14791,42 @@ var PriceText = ({
 }) => {
   const text = useMemo11(() => {
     if (!flatAmount && perUnitPrice) {
-      return /* @__PURE__ */ jsxs18(Fragment10, { children: [
+      return /* @__PURE__ */ jsxs19(Fragment10, { children: [
         formatCurrency(perUnitPrice, currency),
-        /* @__PURE__ */ jsxs18("sub", { children: [
+        /* @__PURE__ */ jsxs19("sub", { children: [
           "/",
           getFeatureName(feature, 1)
         ] })
       ] });
     }
     if (flatAmount && !perUnitPrice) {
-      return /* @__PURE__ */ jsxs18(Fragment10, { children: [
+      return /* @__PURE__ */ jsxs19(Fragment10, { children: [
         formatCurrency(flatAmount, currency),
-        period && /* @__PURE__ */ jsxs18("sub", { children: [
+        period && /* @__PURE__ */ jsxs19("sub", { children: [
           "/",
           shortenPeriod(period)
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsxs18(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs19(Fragment10, { children: [
       formatCurrency(perUnitPrice, currency),
-      /* @__PURE__ */ jsxs18("sub", { children: [
+      /* @__PURE__ */ jsxs19("sub", { children: [
         "/",
         getFeatureName(feature, 1)
       ] }),
       " + ",
       formatCurrency(flatAmount, currency),
-      period && /* @__PURE__ */ jsxs18("sub", { children: [
+      period && /* @__PURE__ */ jsxs19("sub", { children: [
         "/",
         shortenPeriod(period)
       ] })
     ] });
   }, [feature, period, currency, flatAmount, perUnitPrice]);
-  return /* @__PURE__ */ jsx23(Text, { $leading: 1, children: text });
+  return /* @__PURE__ */ jsx24(Text, { $leading: 1, children: text });
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-import { Fragment as Fragment11, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var PricingTiersTooltip = ({
   feature,
   period,
@@ -14497,10 +14854,10 @@ var PricingTiersTooltip = ({
   if (!priceTiers.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Tooltip,
     {
-      trigger: /* @__PURE__ */ jsx24(
+      trigger: /* @__PURE__ */ jsx25(
         Icon3,
         {
           title: "tiered pricing",
@@ -14509,22 +14866,23 @@ var PricingTiersTooltip = ({
           style: { marginLeft: `-${1 / 3}rem` }
         }
       ),
-      content: /* @__PURE__ */ jsxs19(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ jsx24("dl", { children: tiers.map((tier, index) => {
+      content: /* @__PURE__ */ jsxs20(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ jsx25("dl", { children: tiers.map((tier, index) => {
           const flatAmount = typeof tier.flatAmount === "number" ? tier.flatAmount : void 0;
           const perUnitPrice = typeof tier.perUnitPriceDecimal === "string" ? Number(tier.perUnitPriceDecimal) : typeof tier.perUnitPrice === "number" ? tier.perUnitPrice : void 0;
-          return /* @__PURE__ */ jsxs19(
+          return /* @__PURE__ */ jsxs20(
             Flex,
             {
               $justifyContent: "space-between",
+              $alignItems: "center",
               $gap: "1rem",
               $padding: "0.5rem",
               children: [
-                /* @__PURE__ */ jsx24("dt", { children: /* @__PURE__ */ jsxs19(Text, { children: [
+                /* @__PURE__ */ jsx25("dt", { children: /* @__PURE__ */ jsxs20(Text, { children: [
                   tier.from,
-                  tier.to === Infinity ? "+" : `\u2013${tier.to}`
+                  tier.from !== tier.to && /* @__PURE__ */ jsx25(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
                 ] }) }),
-                /* @__PURE__ */ jsx24("dd", { children: /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx25("dd", { children: /* @__PURE__ */ jsx25(
                   PriceText,
                   {
                     period,
@@ -14539,8 +14897,8 @@ var PricingTiersTooltip = ({
             index
           );
         }) }),
-        (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ jsxs19(Fragment11, { children: [
-          /* @__PURE__ */ jsx24(
+        (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ jsxs20(Fragment11, { children: [
+          /* @__PURE__ */ jsx25(
             "hr",
             {
               style: {
@@ -14550,7 +14908,7 @@ var PricingTiersTooltip = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx24(Box, { children: /* @__PURE__ */ jsxs19(Text, { children: [
+          /* @__PURE__ */ jsx25(Box, { children: /* @__PURE__ */ jsxs20(Text, { children: [
             "\u2139\uFE0F",
             " ",
             tiersMode === "volume" /* Volume */ ? t2("Price by unit based on final tier reached.") : t2("Tiers apply progressively as quantity increases.")
@@ -14619,7 +14977,7 @@ var TieredPricingDetails = ({
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
 import { useMemo as useMemo14, useRef as useRef8, useState as useState11 } from "react";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
@@ -14663,9 +15021,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     })),
     [currentAddOns, availableAddOns]
   );
-  return /* @__PURE__ */ jsxs20(Modal2, { size: "auto", top, contentRef, children: [
-    /* @__PURE__ */ jsx25(ModalHeader, {}),
-    /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(Modal2, { size: "auto", top, contentRef, children: [
+    /* @__PURE__ */ jsx26(ModalHeader, {}),
+    /* @__PURE__ */ jsxs21(
       Flex,
       {
         $position: "relative",
@@ -14676,7 +15034,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsxs21(
             Flex,
             {
               $flexDirection: "column",
@@ -14686,9 +15044,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               $marginTop: "-2.5rem",
               $padding: "0 2.5rem 2.5rem",
               children: [
-                /* @__PURE__ */ jsxs20(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ jsx25(Text, { as: "h2", display: "heading2", children: t2("Cancel subscription") }),
-                  /* @__PURE__ */ jsxs20(Text, { as: "p", children: [
+                /* @__PURE__ */ jsxs21(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ jsx26(Text, { as: "h2", display: "heading2", children: t2("Cancel subscription") }),
+                  /* @__PURE__ */ jsxs21(Text, { as: "p", children: [
                     t2(
                       "You will retain access to your plan until the end of the billing period, on"
                     ),
@@ -14698,9 +15056,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                     })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs20(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ jsx25(Text, { as: "p", children: t2("Not ready to cancel?") }),
-                  /* @__PURE__ */ jsx25(
+                /* @__PURE__ */ jsxs21(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ jsx26(Text, { as: "p", children: t2("Not ready to cancel?") }),
+                  /* @__PURE__ */ jsx26(
                     Button,
                     {
                       type: "button",
@@ -14721,7 +15079,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Sidebar,
             {
               planPeriod,
@@ -14742,11 +15100,11 @@ var UnsubscribeDialog = ({ top = 0 }) => {
 };
 
 // src/components/ui/badge/Badge.tsx
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     Flex,
     {
       as: "a",
@@ -14759,82 +15117,82 @@ var Badge = () => {
       $gridColumn: "1 / -1",
       $color: settings.theme.typography.text.color,
       children: [
-        /* @__PURE__ */ jsxs21(Text, { $size: 12, children: [
+        /* @__PURE__ */ jsxs22(Text, { $size: 12, children: [
           t2("Powered by"),
           " "
         ] }),
-        /* @__PURE__ */ jsxs21("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsxs22("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "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",
@@ -14848,9 +15206,9 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var Disabled = () => {
-  return /* @__PURE__ */ jsx27(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx27(Card, { children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx28(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx28(Card, { children: /* @__PURE__ */ jsxs23(
     Element,
     {
       as: Flex,
@@ -14859,8 +15217,8 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx27(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx27(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
-        /* @__PURE__ */ jsx27(Text, { as: "p", children: "Please try again later." })
+        /* @__PURE__ */ jsx28(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx28(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
+        /* @__PURE__ */ jsx28(Text, { as: "p", children: "Please try again later." })
       ]
     }
   ) }) });
@@ -14869,7 +15227,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx27(Disabled, {});
+      return /* @__PURE__ */ jsx28(Disabled, {});
     default:
       return children;
   }
@@ -14894,7 +15252,7 @@ var StyledViewport = dt.div.withConfig({
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var Viewport = forwardRef5(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
@@ -14920,24 +15278,24 @@ var Viewport = forwardRef5(
         parent.style.overflow = "";
       };
     }, [portal, layout]);
-    return /* @__PURE__ */ jsxs23(Fragment12, { children: [
-      /* @__PURE__ */ jsxs23(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ jsx28(RenderLayout, { children }),
-        isBadgeVisible && /* @__PURE__ */ jsx28(Badge, {})
+    return /* @__PURE__ */ jsxs24(Fragment12, { children: [
+      /* @__PURE__ */ jsxs24(StyledViewport, { ref, ...props, children: [
+        /* @__PURE__ */ jsx29(RenderLayout, { children }),
+        isBadgeVisible && /* @__PURE__ */ jsx29(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx28(CheckoutDialog, { top }), portal || document.body),
+      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx29(CheckoutDialog, { top }), portal || document.body),
       layout === "unsubscribe" && createPortal2(
-        /* @__PURE__ */ jsx28(UnsubscribeDialog, { top }),
+        /* @__PURE__ */ jsx29(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && createPortal2(/* @__PURE__ */ jsx28(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && createPortal2(/* @__PURE__ */ jsx29(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/elements/button/Button.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -14968,7 +15326,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     Element,
     {
       as: Flex,
@@ -14976,7 +15334,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         Button,
         {
           as: "a",
@@ -15001,7 +15359,7 @@ import { forwardRef as forwardRef7, useMemo as useMemo17, useRef as useRef9, use
 
 // src/components/elements/included-features/UsageDetails.tsx
 import { Fragment as Fragment13, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment14, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var UsageDetails = ({
   entitlement,
   shouldWrapChildren,
@@ -15011,6 +15369,7 @@ var UsageDetails = ({
     allocation,
     allocationType,
     feature,
+    planEntitlement,
     priceBehavior,
     usage,
     softLimit,
@@ -15031,19 +15390,19 @@ var UsageDetails = ({
     }
     const { price, currency, packageSize = 1 } = billingPrice || {};
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof allocation === "number") {
-      return /* @__PURE__ */ jsxs24(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
       ] });
     }
     if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof price === "number") {
-      return /* @__PURE__ */ jsxs24(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
         formatCurrency(price, currency),
         " ",
         t2("per"),
         " ",
-        packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment14, { children: [
+        packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment14, { children: [
           packageSize,
           " "
         ] }),
@@ -15051,22 +15410,36 @@ var UsageDetails = ({
       ] });
     }
     if (priceBehavior === "overage" /* Overage */ && typeof softLimit === "number") {
-      return /* @__PURE__ */ jsxs24(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
         formatNumber(softLimit),
         " ",
         getFeatureName(feature, softLimit)
       ] });
     }
     if (priceBehavior === "tier" /* Tiered */) {
-      return /* @__PURE__ */ jsx30(Fragment14, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
+      return /* @__PURE__ */ jsx31(Fragment14, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
         feature: getFeatureName(feature)
       }) : t2("Up to X units in this tier", {
         amount: formatNumber(currentTier.to),
         feature: getFeatureName(feature, currentTier?.to)
       })) });
     }
+    if (priceBehavior === "credit_burndown" /* Credit */ && planEntitlement?.valueCredit && typeof planEntitlement?.consumptionRate === "number") {
+      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
+        planEntitlement.consumptionRate,
+        " ",
+        getFeatureName(
+          planEntitlement.valueCredit,
+          planEntitlement.consumptionRate
+        ),
+        " ",
+        t2("per"),
+        " ",
+        t2("use")
+      ] });
+    }
     if (!priceBehavior && typeof allocation === "number") {
-      return /* @__PURE__ */ jsxs24(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs25(Fragment14, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
@@ -15080,6 +15453,7 @@ var UsageDetails = ({
     allocation,
     allocationType,
     feature,
+    planEntitlement,
     priceBehavior,
     softLimit,
     billingPrice,
@@ -15094,10 +15468,10 @@ var UsageDetails = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ jsxs24(Fragment13, { children: [
+        /* @__PURE__ */ jsxs25(Fragment13, { children: [
           formatCurrency(price, currency),
           "/",
-          packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment14, { children: [
+          packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment14, { children: [
             packageSize,
             " "
           ] }),
@@ -15107,9 +15481,9 @@ var UsageDetails = ({
         ] }, index)
       );
       index += 1;
-    } else if ((priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && typeof usage === "number") {
+    } else if ((priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */ || priceBehavior === "credit_burndown" /* Credit */) && typeof usage === "number") {
       acc.push(
-        /* @__PURE__ */ jsxs24(Fragment13, { children: [
+        /* @__PURE__ */ jsxs25(Fragment13, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -15121,14 +15495,14 @@ var UsageDetails = ({
     }
     if (typeof cost === "number" && cost > 0) {
       acc.push(
-        /* @__PURE__ */ jsxs24(Fragment13, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx30(Fragment14, { children: " \u2022 " }),
+        /* @__PURE__ */ jsxs25(Fragment13, { children: [
+          acc.length > 0 && /* @__PURE__ */ jsx31(Fragment14, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
       index += 1;
       if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
-        acc.push(/* @__PURE__ */ jsxs24(Fragment13, { children: [
+        acc.push(/* @__PURE__ */ jsxs25(Fragment13, { children: [
           "/",
           shortenPeriod(period)
         ] }, index));
@@ -15137,8 +15511,8 @@ var UsageDetails = ({
     }
     if (metricResetAt) {
       acc.push(
-        /* @__PURE__ */ jsxs24(Fragment13, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx30(Fragment14, { children: " \u2022 " }),
+        /* @__PURE__ */ jsxs25(Fragment13, { children: [
+          acc.length > 0 && /* @__PURE__ */ jsx31(Fragment14, { children: " \u2022 " }),
           t2("Resets", {
             date: toPrettyDate(metricResetAt, {
               month: "numeric",
@@ -15175,16 +15549,16 @@ var UsageDetails = ({
   if (!text || !feature?.name) {
     return null;
   }
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     Box,
     {
       $flexBasis: "min-content",
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        layout.entitlement.isVisible && /* @__PURE__ */ jsx30(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx30(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
-        layout.usage.isVisible && usageText && /* @__PURE__ */ jsxs24(Flex, { $justifyContent: "end", $alignItems: "center", $whiteSpace: "nowrap", children: [
-          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx30(
+        layout.entitlement.isVisible && /* @__PURE__ */ jsx31(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx31(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
+        layout.usage.isVisible && usageText && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "end", $alignItems: "center", $whiteSpace: "nowrap", children: [
+          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx31(
             PricingTiersTooltip,
             {
               feature,
@@ -15193,7 +15567,7 @@ var UsageDetails = ({
               priceTiers: billingPrice?.priceTier
             }
           ),
-          /* @__PURE__ */ jsx30(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText })
+          /* @__PURE__ */ jsx31(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText })
         ] })
       ]
     }
@@ -15201,7 +15575,7 @@ var UsageDetails = ({
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -15276,7 +15650,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     Element,
     {
       as: Flex,
@@ -15285,10 +15659,10 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx31(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx31(Text, { display: props.header.fontStyle, children: props.header.text }) }),
+        props.header.isVisible && /* @__PURE__ */ jsx32(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx32(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__ */ jsxs25(
+          return /* @__PURE__ */ jsxs26(
             Flex,
             {
               ref: (el) => {
@@ -15301,7 +15675,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ jsxs25(
+                /* @__PURE__ */ jsxs26(
                   Flex,
                   {
                     $alignItems: "center",
@@ -15309,7 +15683,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx31(
+                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx32(
                         Icon3,
                         {
                           name: entitlement.feature.icon,
@@ -15318,8 +15692,8 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           rounded: true
                         }
                       ),
-                      entitlement.feature?.name && /* @__PURE__ */ jsx31(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
-                      props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsxs25(
+                      entitlement.feature?.name && /* @__PURE__ */ jsx32(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
+                      props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsxs26(
                         Text,
                         {
                           display: props.entitlementExpiration.fontStyle,
@@ -15336,7 +15710,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx31(
+                shouldShowDetails && /* @__PURE__ */ jsx32(
                   UsageDetails,
                   {
                     entitlement,
@@ -15349,15 +15723,15 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
             index
           );
         }),
-        shouldShowExpand && /* @__PURE__ */ jsxs25(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ jsx31(
+        shouldShowExpand && /* @__PURE__ */ jsxs26(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
+          /* @__PURE__ */ jsx32(
             Icon3,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -15375,7 +15749,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef8, useCallback as useCallback10, useEffect as useEffect6, useState as useState14 } from "react";
-import { Fragment as Fragment15, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -15445,9 +15819,9 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs26(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx32(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx32(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(Element, { ref, className, children: [
+    /* @__PURE__ */ jsx33(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx33(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ jsxs27(
       Flex,
       {
         as: TransitionBox,
@@ -15456,8 +15830,8 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx32(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
+          /* @__PURE__ */ jsx33(
             Button,
             {
               type: "button",
@@ -15470,12 +15844,12 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx32(TransitionBox, { children: /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && /* @__PURE__ */ jsx32(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx32(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
-      invoices.length > 0 ? /* @__PURE__ */ jsxs26(Fragment15, { children: [
-        /* @__PURE__ */ jsx32(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-          return /* @__PURE__ */ jsxs26(Flex, { $justifyContent: "space-between", children: [
-            props.date.isVisible && /* @__PURE__ */ jsx32(
+    ) : !isLoading && /* @__PURE__ */ jsx33(TransitionBox, { children: /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && /* @__PURE__ */ jsx33(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx33(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
+      invoices.length > 0 ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
+        /* @__PURE__ */ jsx33(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+          return /* @__PURE__ */ jsxs27(Flex, { $justifyContent: "space-between", children: [
+            props.date.isVisible && /* @__PURE__ */ jsx33(
               Text,
               {
                 display: props.date.fontStyle,
@@ -15489,18 +15863,18 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
                 children: date
               }
             ),
-            props.amount.isVisible && /* @__PURE__ */ jsx32(Text, { display: props.amount.fontStyle, children: amount })
+            props.amount.isVisible && /* @__PURE__ */ jsx33(Text, { display: props.amount.fontStyle, children: amount })
           ] }, index);
         }) }),
-        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs26(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ jsx32(
+        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          /* @__PURE__ */ jsx33(
             Icon3,
             {
               name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Text,
             {
               onClick: toggleListSize,
@@ -15512,24 +15886,24 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsx32(Text, { display: "heading2", children: t2("No invoices created yet") })
+      ] }) : /* @__PURE__ */ jsx33(Text, { display: "heading2", children: t2("No invoices created yet") })
     ] }) })
   ] });
 });
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useMemo as useMemo18, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback11, useMemo as useMemo18, useRef as useRef10, useState as useState15 } from "react";
 
 // src/components/elements/metered-features/Meter.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } 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__ */ jsx33(
+  const meter = /* @__PURE__ */ jsx34(
     ProgressBar,
     {
       progress: Math.min(usage, limit) / Math.max(usage, limit) * 100,
@@ -15546,7 +15920,7 @@ var Meter = ({ entitlement, usageDetails }) => {
 };
 
 // src/components/elements/metered-features/PriceDetails.tsx
-import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 var PriceDetails = ({
   entitlement,
   usageDetails,
@@ -15573,7 +15947,7 @@ var PriceDetails = ({
   if (!feature || typeof currentTierPerUnitPrice !== "number") {
     return null;
   }
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     Flex,
     {
       $justifyContent: "space-between",
@@ -15587,30 +15961,30 @@ var PriceDetails = ({
         $borderBottomRightRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`
       },
       children: [
-        priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs27(Text, { children: [
+        priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs28(Text, { children: [
           t2("Additional"),
           ": ",
           formatCurrency(currentTierPerUnitPrice, currency),
-          /* @__PURE__ */ jsxs27(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ jsxs28(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment16, { children: [
+            packageSize > 1 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(feature, packageSize),
-            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ jsxs27(Fragment16, { children: [
+            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ jsxs28(Fragment16, { children: [
               "/",
               shortenPeriod(period)
             ] })
           ] })
-        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ jsxs27(Text, { children: [
+        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs28(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          /* @__PURE__ */ jsxs28(Text, { children: [
             t2("Tier"),
             ": ",
             currentTier?.from || 1,
-            typeof currentTier?.to === "number" && (currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}`)
+            typeof currentTier?.to === "number" && (currentTier?.from || 1) !== currentTier?.to && /* @__PURE__ */ jsx35(Fragment16, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
           ] }),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             PricingTiersTooltip,
             {
               period,
@@ -15621,19 +15995,19 @@ var PriceDetails = ({
             }
           )
         ] }),
-        typeof amount === "number" && /* @__PURE__ */ jsx34(Fragment16, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs27(Text, { children: [
+        typeof amount === "number" && /* @__PURE__ */ jsx35(Fragment16, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ jsxs28(Text, { children: [
           formatNumber(amount),
           " ",
           getFeatureName(feature, amount),
           " \xB7 ",
           formatCurrency(currentTierPerUnitPrice * amount, currency),
-          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ jsxs27(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ jsxs28(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
-        ] }) : priceBehavior === "tier" /* Tiered */ && typeof cost === "number" && /* @__PURE__ */ jsxs27(Text, { children: [
+        ] }) : priceBehavior === "tier" /* Tiered */ && typeof cost === "number" && /* @__PURE__ */ jsxs28(Text, { children: [
           formatCurrency(cost, currency),
-          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ jsxs27(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ jsxs28(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
@@ -15661,7 +16035,7 @@ var Container2 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment17, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t2 } = useTranslation();
   const { feature, priceBehavior, allocation, usage, metricResetAt } = entitlement;
@@ -15690,7 +16064,7 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       })
     );
   }
-  return /* @__PURE__ */ jsx35(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx35(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
+  return /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx36(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
 };
 function resolveDesignProps4(props) {
   return {
@@ -15724,7 +16098,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { meteredFeatures, period } = useMemo18(() => {
+  const { period, meteredFeatures, creditGroups } = useMemo18(() => {
     if (isCheckoutData(data)) {
       const period2 = typeof data.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
@@ -15740,122 +16114,292 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
         []
       );
       return {
+        period: period2,
         meteredFeatures: (orderedFeatureUsage || data.featureUsage?.features || []).filter(
-          ({ feature }) => feature?.featureType === "event" /* Event */ || feature?.featureType === "trait" /* Trait */
+          ({ 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 */)
+          )
         ),
-        period: period2
+        creditGroups: groupCreditGrants(data.creditGrants, {
+          groupBy: "credit"
+        })
       };
     }
     return {
+      period: void 0,
       meteredFeatures: [],
-      period: void 0
+      creditGroups: []
     };
   }, [props.visibleFeatures, data]);
+  const [creditVisibility, setCreditVisibility] = useState15(
+    creditGroups.map(({ id }) => ({ id, isExpanded: false }))
+  );
+  const toggleBalanceDetails = useCallback11((id) => {
+    setCreditVisibility(
+      (prev2) => prev2.map(
+        (item) => item.id === id ? { ...item, isExpanded: !item.isExpanded } : item
+      )
+    );
+  }, []);
   const shouldShowFeatures = meteredFeatures.length > 0;
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx35(Container2, { ref, className, children: meteredFeatures.reduce((acc, entitlement, index) => {
-    if (!entitlement.feature) {
+  return /* @__PURE__ */ jsxs29(Container2, { ref, className, children: [
+    meteredFeatures.reduce((acc, entitlement, index) => {
+      if (!entitlement.feature) {
+        return acc;
+      }
+      const { feature, priceBehavior, usage } = entitlement;
+      const usageDetails = getUsageDetails(entitlement, period);
+      const { limit } = usageDetails;
+      acc.push(
+        /* @__PURE__ */ jsxs29(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
+          /* @__PURE__ */ jsxs29(Flex, { $gap: "1.5rem", children: [
+            props.icon.isVisible && /* @__PURE__ */ jsx36(
+              Icon3,
+              {
+                name: feature.icon,
+                color: settings.theme.primary,
+                background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                rounded: true
+              }
+            ),
+            /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ jsxs29(
+                Flex,
+                {
+                  ref: (el) => {
+                    if (el) {
+                      elements.current.push(el);
+                    }
+                  },
+                  $flexWrap: "wrap",
+                  $gap: "1rem",
+                  children: [
+                    /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+                      /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.header.fontStyle, children: feature.name }) }),
+                      props.description.isVisible && /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.description.fontStyle, children: feature.description }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs29(
+                      Box,
+                      {
+                        $flexBasis: "min-content",
+                        $flexGrow: 1,
+                        $textAlign: shouldWrapChildren ? "left" : "right",
+                        children: [
+                          props.usage.isVisible && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx36(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                            typeof limit === "number" && /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                              formatNumber(limit),
+                              " "
+                            ] }),
+                            getFeatureName(feature, limit)
+                          ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                            formatNumber(usage),
+                            " ",
+                            getFeatureName(feature, usage),
+                            " ",
+                            t2("used")
+                          ] }) }) }),
+                          props.allocation.isVisible && /* @__PURE__ */ jsx36(
+                            Limit,
+                            {
+                              entitlement,
+                              usageDetails,
+                              fontStyle: props.allocation.fontStyle
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ jsx36(
+                Meter,
+                {
+                  entitlement,
+                  usageDetails
+                }
+              ),
+              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx36(
+                Button,
+                {
+                  type: "button",
+                  onClick: () => {
+                    setCheckoutState({ usage: true });
+                  },
+                  style: { whiteSpace: "nowrap" },
+                  children: t2("Add More")
+                }
+              )
+            ] })
+          ] }),
+          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsx36(
+            PriceDetails,
+            {
+              entitlement,
+              usageDetails,
+              period
+            }
+          )
+        ] }, index)
+      );
       return acc;
-    }
-    const { feature, priceBehavior, usage } = entitlement;
-    const usageDetails = getUsageDetails(entitlement, period);
-    const { limit } = usageDetails;
-    acc.push(
-      /* @__PURE__ */ jsxs28(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
-        /* @__PURE__ */ jsxs28(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && /* @__PURE__ */ jsx35(
+    }, []),
+    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__ */ jsx36(
             Icon3,
             {
-              name: feature.icon,
+              name: credit.icon,
               color: settings.theme.primary,
               background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
               rounded: true
             }
           ),
-          /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ jsxs28(
-              Flex,
-              {
-                ref: (el) => {
-                  if (el) {
-                    elements.current.push(el);
-                  }
-                },
-                $flexWrap: "wrap",
-                $gap: "1rem",
-                children: [
-                  /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                    /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(Text, { display: props.header.fontStyle, children: feature.name }) }),
-                    props.description.isVisible && /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(Text, { display: props.description.fontStyle, children: feature.description }) })
-                  ] }),
-                  /* @__PURE__ */ jsxs28(
-                    Box,
-                    {
-                      $flexBasis: "min-content",
-                      $flexGrow: 1,
-                      $textAlign: shouldWrapChildren ? "left" : "right",
-                      children: [
-                        props.usage.isVisible && /* @__PURE__ */ jsx35(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx35(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ jsxs28(Fragment17, { children: [
-                          typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment17, { children: [
-                            formatNumber(limit),
-                            " "
-                          ] }),
-                          getFeatureName(feature, limit)
-                        ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs28(Fragment17, { children: [
-                          formatNumber(usage),
-                          " ",
-                          getFeatureName(feature, usage),
-                          " ",
-                          t2("used")
-                        ] }) }) }),
-                        props.allocation.isVisible && /* @__PURE__ */ jsx35(
-                          Limit,
-                          {
-                            entitlement,
-                            usageDetails,
-                            fontStyle: props.allocation.fontStyle
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ jsx35(
-              Meter,
-              {
-                entitlement,
-                usageDetails
-              }
-            ),
-            priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx35(
-              Button,
-              {
-                type: "button",
-                onClick: () => {
-                  setCheckoutState({ usage: true });
-                },
-                style: { whiteSpace: "nowrap" },
-                children: t2("Add More")
-              }
-            )
+          /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+            /* @__PURE__ */ jsx36(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.header.fontStyle, children: credit.name }) }),
+              props.description.isVisible && /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: props.description.fontStyle, children: credit.description }) })
+            ] }) }),
+            /* @__PURE__ */ jsxs29(Flex, { $gap: "1rem", children: [
+              /* @__PURE__ */ jsx36(
+                ProgressBar,
+                {
+                  progress: credit.total.used / credit.total.value * 100,
+                  value: credit.total.used,
+                  total: credit.total.value,
+                  color: progressColorMap[Math.floor(
+                    credit.total.used / credit.total.value * (progressColorMap.length - 1)
+                  )]
+                }
+              ),
+              /* @__PURE__ */ jsx36(
+                Button,
+                {
+                  type: "button",
+                  onClick: () => {
+                    setCheckoutState({ credits: true });
+                  },
+                  style: { whiteSpace: "nowrap" },
+                  $size: "sm",
+                  children: t2("Buy More")
+                }
+              )
+            ] })
           ] })
         ] }),
-        (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsx35(
-          PriceDetails,
+        /* @__PURE__ */ jsx36(
+          Box,
           {
-            entitlement,
-            usageDetails,
-            period
+            $width: `calc(100% + ${2 * settings.theme.card.padding / TEXT_BASE_SIZE}rem)`,
+            $margin: `0 0 0 -${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
+            children: /* @__PURE__ */ jsx36(
+              TransitionBox,
+              {
+                $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0375)" : "hsla(0, 0%, 100%, 0.075)",
+                $isExpanded: isExpanded,
+                children: credit.grants.map((grant, index2) => {
+                  const paddingX = settings.theme.card.padding / TEXT_BASE_SIZE;
+                  const padding = index2 > 0 ? `0 ${paddingX}rem 1rem` : `1rem ${paddingX}rem`;
+                  return /* @__PURE__ */ jsx36(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                    /* @__PURE__ */ jsx36(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx36(Text, { children: t2("X items included in plan", {
+                      amount: grant.quantity,
+                      item: getFeatureName(credit, grant.quantity)
+                    }) }) }),
+                    /* @__PURE__ */ jsx36(
+                      Box,
+                      {
+                        $display: "table-cell",
+                        $padding: padding,
+                        $textAlign: "right",
+                        $whiteSpace: "nowrap",
+                        children: grant.expiresAt && /* @__PURE__ */ jsx36(Text, { children: t2("Resets", {
+                          date: toPrettyDate(
+                            modifyDate(grant.expiresAt, 1),
+                            {
+                              day: "2-digit",
+                              month: "2-digit",
+                              year: "2-digit"
+                            }
+                          )
+                        }) })
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs29(Fragment17, { children: [
+                    /* @__PURE__ */ jsx36(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx36(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ jsx36(Fragment17, { children: t2("X item bundle", {
+                      amount: grant.quantity,
+                      item: getFeatureName(credit, 1),
+                      createdAt: toPrettyDate(grant.createdAt, {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "2-digit"
+                      })
+                    }) }) : /* @__PURE__ */ jsx36(Fragment17, { children: t2("X item grant", {
+                      amount: grant.quantity,
+                      item: getFeatureName(
+                        credit,
+                        grant.quantity
+                      ),
+                      createdAt: toPrettyDate(grant.createdAt, {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "2-digit"
+                      })
+                    }) }) }) }),
+                    /* @__PURE__ */ jsx36(
+                      Box,
+                      {
+                        $display: "table-cell",
+                        $padding: padding,
+                        $textAlign: "right",
+                        $whiteSpace: "nowrap",
+                        children: grant.expiresAt && /* @__PURE__ */ jsx36(Text, { children: t2("Expires", {
+                          date: toPrettyDate(
+                            modifyDate(grant.expiresAt, 1),
+                            {
+                              day: "2-digit",
+                              month: "2-digit",
+                              year: "2-digit"
+                            }
+                          )
+                        }) })
+                      }
+                    )
+                  ] }) }, grant.id);
+                })
+              }
+            )
           }
-        )
-      ] }, index)
-    );
-    return acc;
-  }, []) });
+        ),
+        /* @__PURE__ */ jsxs29(Flex, { $gap: "0.25rem", children: [
+          /* @__PURE__ */ jsx36(
+            Icon3,
+            {
+              name: "chevron-down",
+              color: isLightBackground ? "hsla(0, 0%, 0%, 0.8)" : "hsla(0, 0%, 100%, 0.4)",
+              style: {
+                marginLeft: `-${1 / 3}rem`,
+                ...isExpanded && { transform: "rotate(180deg)" }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx36(
+            Text,
+            {
+              onClick: () => toggleBalanceDetails(credit.id),
+              display: "link",
+              children: isExpanded ? t2("Hide balance details") : t2("See balance details")
+            }
+          )
+        ] })
+      ] }, index);
+    })
+  ] });
 });
 MeteredFeatures.displayName = "MeteredFeatures";
 
@@ -15864,24 +16408,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 jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
   iconTitle,
   label,
   paymentLast4
 }) => {
-  return /* @__PURE__ */ jsx36(Text, { children: /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ jsx36(Icon3, { name: iconName, title: iconTitle }),
-    (label || paymentLast4) && /* @__PURE__ */ jsxs29(Box, { $flexGrow: 1, children: [
-      label && /* @__PURE__ */ jsx36(Text, { children: label }),
+  return /* @__PURE__ */ jsx37(Text, { children: /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ jsx37(Icon3, { name: iconName, title: iconTitle }),
+    (label || paymentLast4) && /* @__PURE__ */ jsxs30(Box, { $flexGrow: 1, children: [
+      label && /* @__PURE__ */ jsx37(Text, { children: label }),
       " ",
-      paymentLast4 && /* @__PURE__ */ jsx36(Text, { children: paymentLast4 })
+      paymentLast4 && /* @__PURE__ */ jsx37(Text, { children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
-  return /* @__PURE__ */ jsx36(Text, { children: /* @__PURE__ */ jsx36(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx36(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx36(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
+  return /* @__PURE__ */ jsx37(Text, { children: /* @__PURE__ */ jsx37(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx37(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx37(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -15946,12 +16490,12 @@ var PaymentMethodElement = ({
   const { t: t2 } = useTranslation();
   const isLightBackground = useIsLightBackground();
   const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
-  return /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ jsxs29(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx36(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx36(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
+  return /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ jsxs30(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ jsx37(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx37(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
     ] }),
-    /* @__PURE__ */ jsxs29(
+    /* @__PURE__ */ jsxs30(
       Flex,
       {
         $justifyContent: "space-between",
@@ -15960,8 +16504,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod ? /* @__PURE__ */ jsx36(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx36(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx36(
+          paymentMethod ? /* @__PURE__ */ jsx37(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx37(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx37(
             Text,
             {
               onClick: onEdit,
@@ -15994,7 +16538,7 @@ var PaymentListElement = ({
     }
     return `${cardExpMonth}/${formatedYear}`;
   }, [paymentMethod]);
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     Flex,
     {
       $flexDirection: "row",
@@ -16006,21 +16550,21 @@ var PaymentListElement = ({
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
       children: [
-        iconName && /* @__PURE__ */ jsx36(Icon3, { name: iconName, title: iconTitle }),
-        (label || paymentLast4) && /* @__PURE__ */ jsxs29(Box, { $flexGrow: 1, children: [
-          label && /* @__PURE__ */ jsx36(Text, { children: label }),
+        iconName && /* @__PURE__ */ jsx37(Icon3, { name: iconName, title: iconTitle }),
+        (label || paymentLast4) && /* @__PURE__ */ jsxs30(Box, { $flexGrow: 1, children: [
+          label && /* @__PURE__ */ jsx37(Text, { children: label }),
           " ",
-          paymentLast4 && /* @__PURE__ */ jsx36(Text, { children: paymentLast4 })
+          paymentLast4 && /* @__PURE__ */ jsx37(Text, { children: paymentLast4 })
         ] }),
-        expirationDate && /* @__PURE__ */ jsx36(
+        expirationDate && /* @__PURE__ */ jsx37(
           Box,
           {
             $flexGrow: 1,
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ jsx36(Text, { children: t("Expires", { date: expirationDate }) })
+            children: /* @__PURE__ */ jsx37(Text, { children: t("Expires", { date: expirationDate }) })
           }
         ),
-        /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(
           Text,
           {
             onClick: () => {
@@ -16033,7 +16577,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           Icon3,
           {
             tabIndex: 0,
@@ -16055,7 +16599,7 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -16096,7 +16640,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
       monthsToExpiration: void 0
     };
   }, [data]);
-  return /* @__PURE__ */ jsx37(Element, { ref, className, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(Element, { ref, className, children: /* @__PURE__ */ jsx38(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -16264,8 +16808,8 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-import { useCallback as useCallback11, useEffect as useEffect7, useMemo as useMemo21, useState as useState15 } from "react";
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useEffect as useEffect7, useMemo as useMemo21, useState as useState16 } from "react";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -16305,13 +16849,13 @@ var PaymentMethodDetails = ({
     };
   }, [data]);
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState15(false);
-  const [error, setError] = useState15();
-  const [showPaymentForm, setShowPaymentForm] = useState15(false);
-  const [stripe, setStripe] = useState15(null);
-  const [setupIntent, setSetupIntent] = useState15();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState15(false);
-  const [currentPaymentMethod, setCurrentPaymentMethod] = useState15(subscription?.paymentMethod || defaultPaymentMethod);
+  const [isLoading, setIsLoading] = useState16(false);
+  const [error, setError] = useState16();
+  const [showPaymentForm, setShowPaymentForm] = useState16(false);
+  const [stripe, setStripe] = useState16(null);
+  const [setupIntent, setSetupIntent] = useState16();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState16(false);
+  const [currentPaymentMethod, setCurrentPaymentMethod] = useState16(subscription?.paymentMethod || defaultPaymentMethod);
   const monthsToExpiration = useMemo21(() => {
     let expiration;
     if (typeof currentPaymentMethod?.cardExpYear === "number" && typeof currentPaymentMethod?.cardExpMonth === "number") {
@@ -16335,7 +16879,7 @@ var PaymentMethodDetails = ({
   const toggleShowPaymentMethods = () => {
     setShowDifferentPaymentMethods((prev2) => !prev2);
   };
-  const initializePaymentMethod = useCallback11(async () => {
+  const initializePaymentMethod = useCallback12(async () => {
     try {
       setIsLoading(true);
       const response = await createSetupIntent();
@@ -16351,7 +16895,7 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, createSetupIntent]);
-  const handleUpdatePaymentMethod = useCallback11(
+  const handleUpdatePaymentMethod = useCallback12(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -16370,7 +16914,7 @@ var PaymentMethodDetails = ({
     },
     [t2, setPaymentMethodId, updatePaymentMethod]
   );
-  const handleDeletePaymentMethod = useCallback11(
+  const handleDeletePaymentMethod = useCallback12(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -16404,8 +16948,8 @@ var PaymentMethodDetails = ({
     showPaymentForm,
     initializePaymentMethod
   ]);
-  return /* @__PURE__ */ jsxs30(Flex, { $position: "relative", children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs31(Flex, { $position: "relative", children: [
+    /* @__PURE__ */ jsx39(
       Flex,
       {
         $position: "absolute",
@@ -16414,7 +16958,7 @@ var PaymentMethodDetails = ({
         $alignItems: "center",
         $width: "100%",
         $height: "100%",
-        children: /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx39(
           Loader,
           {
             $color: settings.theme.primary,
@@ -16424,7 +16968,7 @@ var PaymentMethodDetails = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs31(
       Flex,
       {
         $position: "relative",
@@ -16437,7 +16981,7 @@ var PaymentMethodDetails = ({
         $visibility: isLoading ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
         children: [
-          setupIntent && showPaymentForm ? /* @__PURE__ */ jsxs30(
+          setupIntent && showPaymentForm ? /* @__PURE__ */ jsxs31(
             Elements,
             {
               stripe,
@@ -16467,7 +17011,7 @@ var PaymentMethodDetails = ({
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
               children: [
-                /* @__PURE__ */ jsx38(
+                /* @__PURE__ */ jsx39(
                   PaymentForm,
                   {
                     onConfirm: async (paymentMethodId) => {
@@ -16477,7 +17021,7 @@ var PaymentMethodDetails = ({
                     }
                   }
                 ),
-                currentPaymentMethod && /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(
+                currentPaymentMethod && /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
                   Text,
                   {
                     onClick: focusExistingPaymentMethods,
@@ -16490,8 +17034,8 @@ var PaymentMethodDetails = ({
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ jsx38(
+          ) : /* @__PURE__ */ jsxs31(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+            /* @__PURE__ */ jsx39(
               PaymentMethodElement,
               {
                 paymentMethod: currentPaymentMethod,
@@ -16499,8 +17043,8 @@ var PaymentMethodDetails = ({
                 ...props
               }
             ),
-            paymentMethods.length > 0 && /* @__PURE__ */ jsxs30(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-              /* @__PURE__ */ jsx38(
+            paymentMethods.length > 0 && /* @__PURE__ */ jsxs31(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+              /* @__PURE__ */ jsx39(
                 Text,
                 {
                   onClick: toggleShowPaymentMethods,
@@ -16511,17 +17055,17 @@ var PaymentMethodDetails = ({
                   children: t2("Choose different payment method")
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 Icon3,
                 {
                   name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down"
                 }
               )
             ] }),
-            showDifferentPaymentMethods && /* @__PURE__ */ jsxs30(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
-              /* @__PURE__ */ jsx38(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
+            showDifferentPaymentMethods && /* @__PURE__ */ jsxs31(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
+              /* @__PURE__ */ jsx39(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
                 (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
-              ) || []).map((paymentMethod) => /* @__PURE__ */ jsx38(
+              ) || []).map((paymentMethod) => /* @__PURE__ */ jsx39(
                 PaymentListElement,
                 {
                   paymentMethod,
@@ -16530,7 +17074,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod.id
               )) }),
-              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx38(
+              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ jsx39(
                 Button,
                 {
                   type: "button",
@@ -16542,7 +17086,7 @@ var PaymentMethodDetails = ({
               )
             ] })
           ] }),
-          !isLoading && error && /* @__PURE__ */ jsx38(Box, { children: /* @__PURE__ */ jsx38(Text, { $weight: 500, $color: "#DB6669", children: error }) })
+          !isLoading && error && /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(Text, { $weight: 500, $color: "#DB6669", children: error }) })
         ]
       }
     )
@@ -16553,9 +17097,9 @@ var PaymentMethodDetails = ({
 import { forwardRef as forwardRef11, useMemo as useMemo23 } from "react";
 
 // src/components/elements/plan-manager/AddOn.tsx
-import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 var AddOn = ({ addOn, currency, layout }) => {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     Flex,
     {
       $justifyContent: "space-between",
@@ -16563,10 +17107,10 @@ var AddOn = ({ addOn, currency, layout }) => {
       $flexWrap: "wrap",
       $gap: "1rem",
       children: [
-        /* @__PURE__ */ jsx39(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsxs31(Text, { children: [
+        /* @__PURE__ */ jsx40(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
+        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsxs32(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ jsx39("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
+          /* @__PURE__ */ jsx40("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
         ] })
       ]
     }
@@ -16575,7 +17119,7 @@ var AddOn = ({ addOn, currency, layout }) => {
 
 // src/components/elements/plan-manager/UsageDetails.tsx
 import { Fragment as Fragment18, useMemo as useMemo22 } from "react";
-import { Fragment as Fragment19, jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 var UsageDetails2 = ({
   entitlement,
   period,
@@ -16597,9 +17141,9 @@ var UsageDetails2 = ({
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ jsx40(Fragment18, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ jsx41(Fragment18, { children: t2("X additional", {
           amount
-        }) }, index) : /* @__PURE__ */ jsxs32(Fragment18, { children: [
+        }) }, index) : /* @__PURE__ */ jsxs33(Fragment18, { children: [
           t2("Additional"),
           ": "
         ] }, index)
@@ -16610,16 +17154,16 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ jsxs32(Fragment18, { children: [
+        /* @__PURE__ */ jsxs33(Fragment18, { children: [
           formatCurrency(price, billingPrice?.currency),
-          /* @__PURE__ */ jsxs32("sub", { children: [
+          /* @__PURE__ */ jsxs33("sub", { children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ jsxs32(Fragment19, { children: [
+            packageSize > 1 && /* @__PURE__ */ jsxs33(Fragment19, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(entitlement.feature, packageSize),
-            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs32(Fragment19, { children: [
+            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33(Fragment19, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -16628,13 +17172,40 @@ var UsageDetails2 = ({
       );
       index += 1;
     }
+    if (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,
+          " ",
+          getFeatureName(
+            entitlement.planEntitlement.valueCredit,
+            creditAmount
+          ),
+          " ",
+          t2("used")
+        ] }, index) : /* @__PURE__ */ jsxs33(Fragment18, { children: [
+          entitlement.planEntitlement.consumptionRate,
+          " ",
+          getFeatureName(
+            entitlement.planEntitlement.valueCredit,
+            entitlement.planEntitlement.consumptionRate
+          ),
+          " ",
+          t2("per"),
+          " ",
+          t2("use")
+        ] }, index)
+      );
+      index += 1;
+    }
     return acc;
   }, [t2, period, entitlement, billingPrice, amount]);
   if (!entitlement.feature?.name) {
     return null;
   }
   const quantity = limit || amount;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     Flex,
     {
       $justifyContent: "space-between",
@@ -16642,13 +17213,13 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ jsx40(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs32(Fragment19, { children: [
+        /* @__PURE__ */ jsx41(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs33(Fragment19, { children: [
           quantity,
           " ",
-          getFeatureName(entitlement.feature, quantity)
-        ] }) : getFeatureName(entitlement.feature) }),
-        /* @__PURE__ */ jsxs32(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          description.length > 0 && /* @__PURE__ */ jsx40(
+          entitlement.feature.name
+        ] }) : entitlement.feature.name }),
+        /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          description.length > 0 && /* @__PURE__ */ jsx41(
             Text,
             {
               style: { opacity: 0.54 },
@@ -16657,8 +17228,8 @@ var UsageDetails2 = ({
               children: description
             }
           ),
-          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsxs32(Flex, { $alignItems: "center", children: [
-            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx40(
+          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", children: [
+            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsx41(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -16667,9 +17238,9 @@ var UsageDetails2 = ({
                 priceTiers: billingPrice?.priceTier
               }
             ),
-            /* @__PURE__ */ jsxs32(Text, { children: [
+            /* @__PURE__ */ jsxs33(Text, { children: [
               formatCurrency(cost, billingPrice?.currency),
-              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs32("sub", { children: [
+              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33("sub", { children: [
                 "/",
                 shortenPeriod(period)
               ] })
@@ -16682,7 +17253,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { Fragment as Fragment20, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -16720,6 +17291,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const {
     currentPlan,
     currentAddOns,
+    creditBundles,
+    creditGroups,
     billingSubscription,
     canCheckout,
     defaultPlan,
@@ -16727,19 +17300,32 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     trialPaymentMethodRequired
   } = useMemo23(() => {
     if (isCheckoutData(data)) {
+      const {
+        company,
+        creditBundles: creditBundles2,
+        creditGrants,
+        capabilities,
+        defaultPlan: defaultPlan2,
+        featureUsage: featureUsage2,
+        trialPaymentMethodRequired: trialPaymentMethodRequired2
+      } = data;
       return {
-        currentPlan: data.company?.plan,
-        currentAddOns: data.company?.addOns || [],
-        billingSubscription: data.company?.billingSubscription,
-        canCheckout: data.capabilities?.checkout ?? true,
-        defaultPlan: data.defaultPlan,
-        featureUsage: data.featureUsage?.features || [],
-        trialPaymentMethodRequired: data.trialPaymentMethodRequired
+        currentPlan: company?.plan,
+        currentAddOns: company?.addOns || [],
+        creditBundles: creditBundles2,
+        creditGroups: groupCreditGrants(creditGrants, { groupBy: "bundle" }),
+        billingSubscription: company?.billingSubscription,
+        canCheckout: capabilities?.checkout ?? true,
+        defaultPlan: defaultPlan2,
+        featureUsage: featureUsage2?.features || [],
+        trialPaymentMethodRequired: trialPaymentMethodRequired2
       };
     }
     return {
       currentPlan: void 0,
       currentAddOns: [],
+      creditBundles: [],
+      creditGroups: [],
       billingSubscription: void 0,
       canCheckout: false,
       defaultPlan: void 0,
@@ -16751,19 +17337,26 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     () => featureUsage.filter((usage) => typeof usage.priceBehavior === "string"),
     [featureUsage]
   );
-  const { subscriptionCurrency, willSubscriptionCancel, isTrialSubscription } = useMemo23(() => {
+  const {
+    subscriptionInterval,
+    subscriptionCurrency,
+    willSubscriptionCancel,
+    isTrialSubscription
+  } = useMemo23(() => {
+    const subscriptionInterval2 = billingSubscription?.interval;
     const subscriptionCurrency2 = billingSubscription?.currency;
     const isTrialSubscription2 = billingSubscription?.status === "trialing";
     const willSubscriptionCancel2 = typeof billingSubscription?.cancelAt === "number" && billingSubscription?.cancelAtPeriodEnd === true;
     return {
+      subscriptionInterval: subscriptionInterval2,
       subscriptionCurrency: subscriptionCurrency2,
-      willSubscriptionCancel: willSubscriptionCancel2,
-      isTrialSubscription: isTrialSubscription2
+      isTrialSubscription: isTrialSubscription2,
+      willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
-  return /* @__PURE__ */ jsxs33(Fragment20, { children: [
-    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(Fragment20, { children: [
+    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs34(
       Notice,
       {
         as: Flex,
@@ -16773,15 +17366,15 @@ 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__ */ jsx41(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
-          /* @__PURE__ */ jsx41(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
+          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ jsx42(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
+          /* @__PURE__ */ jsx42(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
             defaultPlanName: defaultPlan?.name
           }) : t2("After the trial, cancel no default", {
             planName: currentPlan?.name
           }) })
         ]
       }
-    ) : willSubscriptionCancel && /* @__PURE__ */ jsxs33(
+    ) : willSubscriptionCancel && /* @__PURE__ */ jsxs34(
       Notice,
       {
         as: Flex,
@@ -16791,8 +17384,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__ */ jsx41(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
-          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx42(
             Text,
             {
               as: "p",
@@ -16810,7 +17403,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         ]
       }
     ),
-    /* @__PURE__ */ jsxs33(
+    /* @__PURE__ */ jsxs34(
       Element,
       {
         as: Flex,
@@ -16819,20 +17412,19 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs33(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs34(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
-              $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ jsxs33(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx41(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx41(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ jsx42(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx42(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs33(Box, { children: [
-                  /* @__PURE__ */ jsx41(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs34(Box, { children: [
+                  /* @__PURE__ */ jsx42(
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -16842,7 +17434,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx41(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs33("sub", { children: [
+                  !isUsageBasedPlan && /* @__PURE__ */ jsx42(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -16850,8 +17442,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               ]
             }
           ),
-          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs33(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx41(
+          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx42(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -16859,7 +17451,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Add-ons")
               }
             ),
-            currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx42(
               AddOn,
               {
                 addOn,
@@ -16867,10 +17459,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 layout: props
               },
               addOnIndex
-            ))
+            )) })
           ] }),
-          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs33(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx41(
+          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx42(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -16878,8 +17470,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Usage-based")
               }
             ),
-            usageBasedEntitlements.map((entitlement, entitlementIndex) => {
-              return /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
+              return /* @__PURE__ */ jsx42(
                 UsageDetails2,
                 {
                   entitlement,
@@ -16888,9 +17480,81 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 },
                 entitlementIndex
               );
-            })
+            }) })
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx41(
+          props.addOns.isVisible && creditGroups.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx42(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Credits")
+              }
+            ),
+            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.reduce(
+              (acc, group, groupIndex) => {
+                const bundle = group.grantReason === "purchased" /* Purchased */ && group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
+                acc.push(
+                  /* @__PURE__ */ jsxs34(
+                    Flex,
+                    {
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $flexWrap: "wrap",
+                      $gap: "0.5rem",
+                      children: [
+                        group.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                          group.quantity,
+                          " ",
+                          getFeatureName(group, group.quantity),
+                          " ",
+                          subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment20, { children: [
+                            t2("per"),
+                            " ",
+                            t2(subscriptionInterval)
+                          ] })
+                        ] }) : bundle ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                          group.grants.length > 1 && /* @__PURE__ */ jsxs34(Text, { style: { opacity: 0.5 }, children: [
+                            "(",
+                            group.grants.length,
+                            ")",
+                            " "
+                          ] }),
+                          bundle.name,
+                          " (",
+                          group.quantity,
+                          " ",
+                          getFeatureName(group, group.quantity),
+                          ")"
+                        ] }) : /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                          group.quantity,
+                          " ",
+                          getFeatureName(group, group.quantity)
+                        ] }),
+                        group.total.used > 0 && /* @__PURE__ */ jsxs34(
+                          Text,
+                          {
+                            style: { opacity: 0.54 },
+                            $size: 0.875 * settings.theme.typography.text.fontSize,
+                            $color: settings.theme.typography.text.color,
+                            children: [
+                              group.total.used,
+                              " ",
+                              t2("used")
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    groupIndex
+                  )
+                );
+                return acc;
+              },
+              []
+            ) })
+          ] }),
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx42(
             Button,
             {
               type: "button",
@@ -16916,16 +17580,16 @@ PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
 import {
-  Fragment as Fragment23,
+  Fragment as Fragment24,
   forwardRef as forwardRef12,
   useEffect as useEffect8,
   useMemo as useMemo26,
-  useState as useState16
+  useState as useState17
 } from "react";
 
 // src/components/elements/pricing-table/AddOn.tsx
 import { useMemo as useMemo24 } from "react";
-import { Fragment as Fragment21, jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -16951,7 +17615,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const isCurrentAddOn = isHydratedPlan(addOn) && addOn.current;
   const isActiveAddOn = isCurrentAddOn && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
   const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     Flex,
     {
       $position: "relative",
@@ -16967,17 +17631,17 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-          /* @__PURE__ */ jsx42(Box, { children: /* @__PURE__ */ jsx42(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
-          layout.addOns.showDescription && /* @__PURE__ */ jsx42(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx42(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-          /* @__PURE__ */ jsx42(Box, { children: /* @__PURE__ */ jsxs34(Text, { display: layout.plans.name.fontStyle, children: [
+        /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+          /* @__PURE__ */ jsx43(Box, { children: /* @__PURE__ */ jsx43(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
+          layout.addOns.showDescription && /* @__PURE__ */ jsx43(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx43(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+          /* @__PURE__ */ jsx43(Box, { children: /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
             formatCurrency(addOnPrice ?? 0, addOnCurrency),
-            /* @__PURE__ */ jsxs34("sub", { children: [
+            /* @__PURE__ */ jsxs35("sub", { children: [
               "/",
               selectedPeriod
             ] })
           ] }) }),
-          isActiveAddOn && /* @__PURE__ */ jsx42(
+          isActiveAddOn && /* @__PURE__ */ jsx43(
             Flex,
             {
               $position: "absolute",
@@ -16986,7 +17650,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
               $backgroundColor: settings.theme.primary,
               $borderRadius: "9999px",
               $padding: "0.125rem 0.85rem",
-              children: /* @__PURE__ */ jsx42(
+              children: /* @__PURE__ */ jsx43(
                 Text,
                 {
                   $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -16997,7 +17661,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs34(
+        /* @__PURE__ */ jsxs35(
           Flex,
           {
             $flexDirection: "column",
@@ -17005,7 +17669,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             $gap: `${cardPadding}rem`,
             $flexGrow: 1,
             children: [
-              layout.addOns.showEntitlements && /* @__PURE__ */ jsx42(
+              layout.addOns.showEntitlements && /* @__PURE__ */ jsx43(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -17014,15 +17678,15 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   $flexGrow: 1,
                   children: addOn.entitlements.map((entitlement, entitlementIndex) => {
                     const metricPeriodName = getMetricPeriodName(entitlement);
-                    return /* @__PURE__ */ jsx42(
+                    return /* @__PURE__ */ jsx43(
                       Flex,
                       {
                         $flexWrap: "wrap",
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
-                        children: /* @__PURE__ */ jsxs34(Flex, { $gap: "1rem", children: [
-                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx42(
+                        children: /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
+                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx43(
                             Icon3,
                             {
                               name: entitlement.feature.icon,
@@ -17031,11 +17695,11 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                               rounded: true
                             }
                           ),
-                          /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            entitlement.feature?.name && /* @__PURE__ */ jsx42(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx42(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs34(Fragment21, { children: [
+                          /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                            entitlement.feature?.name && /* @__PURE__ */ jsx43(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx43(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment21, { children: [
                               entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
                                 item: getFeatureName(entitlement.feature)
-                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs34(Fragment21, { children: [
+                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs35(Fragment21, { children: [
                                 formatNumber(entitlement.valueNumeric),
                                 " ",
                                 getFeatureName(
@@ -17043,14 +17707,14 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                                   entitlement.valueNumeric
                                 )
                               ] }),
-                              metricPeriodName && /* @__PURE__ */ jsxs34(Fragment21, { children: [
+                              metricPeriodName && /* @__PURE__ */ jsxs35(Fragment21, { children: [
                                 " ",
                                 t2("per"),
                                 " ",
                                 t2(metricPeriodName)
                               ] })
                             ] }) : entitlement.feature.name }) }),
-                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx42(
+                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx43(
                               Text,
                               {
                                 $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -17066,7 +17730,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   })
                 }
               ),
-              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx42(
+              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx43(
                 Button,
                 {
                   type: "button",
@@ -17107,7 +17771,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 import { useMemo as useMemo25 } from "react";
 
 // src/components/elements/pricing-table/Entitlement.tsx
-import { Fragment as Fragment22, jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
 var Entitlement = ({
   entitlement,
   sharedProps,
@@ -17128,8 +17792,8 @@ var Entitlement = ({
   }
   const limit = entitlement.softLimit ?? entitlement.valueNumeric;
   const metricPeriodName = getMetricPeriodName(entitlement);
-  return /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
-    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs36(Flex, { $gap: "1rem", children: [
+    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx44(
       Icon3,
       {
         name: entitlement.feature.icon,
@@ -17138,46 +17802,46 @@ var Entitlement = ({
         rounded: true
       }
     ),
-    entitlement.feature?.name && /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ jsx43(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs35(Fragment22, { children: [
+    entitlement.feature?.name && /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+      /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
+        /* @__PURE__ */ jsx44(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t2("per"),
           " ",
-          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs35(Fragment22, { children: [
+          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
             entitlementPackageSize,
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
-          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs35(Fragment22, { children: [
+          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
             " ",
             t2("per"),
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx43(
+        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx44(
           TieredPricingDetails,
           {
             entitlement,
             period: selectedPeriod
           }
-        ) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment22, { children: [
+        ) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
           entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : typeof limit === "number" && /* @__PURE__ */ jsxs35(Fragment22, { children: [
+          }) : typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment22, { children: [
             formatNumber(limit),
             " ",
             getFeatureName(entitlement.feature, limit)
           ] }),
-          metricPeriodName && /* @__PURE__ */ jsxs35(Fragment22, { children: [
+          metricPeriodName && /* @__PURE__ */ jsxs36(Fragment22, { children: [
             " ",
             t2("per"),
             " ",
             t2(metricPeriodName)
           ] })
         ] }) : entitlement.feature.name }),
-        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs35(
+        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsxs36(
           Text,
           {
             $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -17187,19 +17851,19 @@ var Entitlement = ({
               " ",
               formatCurrency(entitlementPrice, entitlementCurrency),
               "/",
-              entitlementPackageSize > 1 && /* @__PURE__ */ jsxs35(Fragment22, { children: [
+              entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
                 entitlementPackageSize,
                 " "
               ] }),
               getFeatureName(entitlement.feature, entitlementPackageSize),
-              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs35(Fragment22, { children: [
+              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
                 "/",
                 shortenPeriod(selectedPeriod)
               ] })
             ]
           }
-        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs35(Flex, { $alignItems: "center", children: [
-          /* @__PURE__ */ jsx43(
+        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ jsxs36(Flex, { $alignItems: "center", children: [
+          /* @__PURE__ */ jsx44(
             PricingTiersTooltip,
             {
               feature: entitlement.feature,
@@ -17208,7 +17872,7 @@ var Entitlement = ({
               priceTiers: entitlementPriceTiers
             }
           ),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx44(
             Text,
             {
               style: { opacity: 0.54 },
@@ -17219,7 +17883,7 @@ var Entitlement = ({
           )
         ] })
       ] }),
-      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx43(
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx44(
         Text,
         {
           $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -17232,7 +17896,7 @@ var Entitlement = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
 var Plan2 = ({
   plan,
   index,
@@ -17298,6 +17962,7 @@ var Plan2 = ({
   );
   const isActivePlan = isHydratedPlan(plan) && plan.current && currentPeriod === selectedPeriod;
   const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, selectedPeriod) || {};
+  const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
@@ -17305,7 +17970,7 @@ var Plan2 = ({
   const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? settings.theme.typography.heading3 : settings.theme.typography[layout.plans.name.fontStyle];
   const count = entitlementCounts[plan.id];
   const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     Flex,
     {
       className: "sch-PricingTable_Plan",
@@ -17322,7 +17987,7 @@ var Plan2 = ({
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsxs37(
           Flex,
           {
             $flexDirection: "column",
@@ -17333,9 +17998,9 @@ var Plan2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ jsx44(Box, { children: /* @__PURE__ */ jsx44(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
-              layout.plans.description.isVisible && /* @__PURE__ */ jsx44(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx44(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
-              /* @__PURE__ */ jsx44(Box, { children: /* @__PURE__ */ jsxs36(
+              /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
+              layout.plans.description.isVisible && /* @__PURE__ */ jsx45(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
+              /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsxs37(
                 Text,
                 {
                   $font: headerPriceFontStyle.fontFamily,
@@ -17344,14 +18009,55 @@ var Plan2 = ({
                   $color: headerPriceFontStyle.color,
                   children: [
                     plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs36("sub", { children: [
+                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs37("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
                   ]
                 }
               ) }),
-              isActivePlan && /* @__PURE__ */ jsx44(
+              credits.length > 0 && /* @__PURE__ */ jsx45(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $flexGrow: 1,
+                  $marginTop: "0.5rem",
+                  children: credits.map((credit, idx) => {
+                    return /* @__PURE__ */ jsxs37(Flex, { $gap: "1rem", children: [
+                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx45(
+                        Icon3,
+                        {
+                          name: credit.icon,
+                          color: settings.theme.primary,
+                          background: `color-mix(in oklch, ${settings.theme.card.background} 87.5%, ${isLightBackground ? "black" : "white"})`,
+                          rounded: true
+                        }
+                      ),
+                      credit.name && /* @__PURE__ */ jsx45(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $justifyContent: "center",
+                          $gap: "0.5rem",
+                          children: /* @__PURE__ */ jsxs37(Text, { children: [
+                            credit.quantity,
+                            " ",
+                            getFeatureName(credit, credit.quantity),
+                            credit.period && /* @__PURE__ */ jsxs37(Fragment23, { children: [
+                              " ",
+                              t2("per"),
+                              " ",
+                              credit.period
+                            ] })
+                          ] })
+                        }
+                      )
+                    ] }, idx);
+                  })
+                }
+              ),
+              isActivePlan && /* @__PURE__ */ jsx45(
                 Flex,
                 {
                   $position: "absolute",
@@ -17360,7 +18066,7 @@ var Plan2 = ({
                   $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,
@@ -17373,7 +18079,7 @@ var Plan2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsxs37(
           Flex,
           {
             $flexDirection: "column",
@@ -17382,11 +18088,11 @@ var Plan2 = ({
             $gap: `${cardPadding}rem`,
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.plans.showEntitlements && /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx44(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx44(Text, { children: t2("Everything in", {
+              layout.plans.showEntitlements && /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
+                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx45(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx45(Text, { children: t2("Everything in", {
                   plan: plans[index - 1].name
                 }) }) }),
-                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ jsx44(
+                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ jsx45(
                   Entitlement,
                   {
                     entitlement,
@@ -17395,7 +18101,7 @@ var Plan2 = ({
                   },
                   idx
                 )).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
-                (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs36(
+                (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs37(
                   Flex,
                   {
                     $justifyContent: "start",
@@ -17403,14 +18109,14 @@ var Plan2 = ({
                     $gap: "0.5rem",
                     $marginTop: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx44(
+                      /* @__PURE__ */ jsx45(
                         Icon3,
                         {
                           name: isExpanded ? "chevron-up" : "chevron-down",
                           color: "#D0D0D0"
                         }
                       ),
-                      /* @__PURE__ */ jsx44(
+                      /* @__PURE__ */ jsx45(
                         Text,
                         {
                           onClick: () => handleToggleShowAll(plan.id),
@@ -17430,7 +18136,7 @@ var Plan2 = ({
                   }
                 )
               ] }),
-              isActivePlan ? /* @__PURE__ */ jsxs36(
+              isActivePlan ? /* @__PURE__ */ jsxs37(
                 Flex,
                 {
                   $justifyContent: "center",
@@ -17438,7 +18144,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ jsx44(
+                    /* @__PURE__ */ jsx45(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -17446,10 +18152,10 @@ var Plan2 = ({
                         color: settings.theme.primary
                       }
                     ),
-                    /* @__PURE__ */ jsx44(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
+                    /* @__PURE__ */ jsx45(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
                   ]
                 }
-              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx44(
+              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx45(
                 Button,
                 {
                   type: "button",
@@ -17486,11 +18192,11 @@ var Plan2 = ({
                     }
                   },
                   $fullWidth: true,
-                  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ jsx44(
+                  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ jsx45(
                     Tooltip,
                     {
-                      trigger: /* @__PURE__ */ jsx44(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-                      content: /* @__PURE__ */ jsx44(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+                      trigger: /* @__PURE__ */ jsx45(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+                      content: /* @__PURE__ */ jsx45(Text, { children: t2("Current usage exceeds the limit of this plan.") })
                     }
                   ) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
                 }
@@ -17504,7 +18210,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-import { Fragment as Fragment24, jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -17574,9 +18280,9 @@ var PricingTable = forwardRef12(
         isStandalone: true
       };
     }, [data]);
-    const [selectedPeriod, setSelectedPeriod] = useState16(currentPeriod);
+    const [selectedPeriod, setSelectedPeriod] = useState17(currentPeriod);
     const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
-    const [entitlementCounts, setEntitlementCounts] = useState16(
+    const [entitlementCounts, setEntitlementCounts] = useState17(
       () => plans.reduce(entitlementCountsReducer, {})
     );
     const handleToggleShowAll = (id) => {
@@ -17602,8 +18308,8 @@ var PricingTable = forwardRef12(
     useEffect8(() => {
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
-    const Wrapper = isStandalone ? Container : Fragment23;
-    return /* @__PURE__ */ jsx45(Wrapper, { children: /* @__PURE__ */ jsxs37(
+    const Wrapper = isStandalone ? Container : Fragment24;
+    return /* @__PURE__ */ jsx46(Wrapper, { children: /* @__PURE__ */ jsxs38(
       FussyChild,
       {
         ref,
@@ -17612,8 +18318,8 @@ var PricingTable = forwardRef12(
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          /* @__PURE__ */ jsxs37(Box, { children: [
-            /* @__PURE__ */ jsxs37(
+          /* @__PURE__ */ jsxs38(Box, { children: [
+            /* @__PURE__ */ jsxs38(
               Flex,
               {
                 $flexDirection: "column",
@@ -17628,7 +18334,7 @@ var PricingTable = forwardRef12(
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx45(
+                  /* @__PURE__ */ jsx46(
                     Text,
                     {
                       display: props.header.fontStyle,
@@ -17636,7 +18342,7 @@ var PricingTable = forwardRef12(
                       children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                     }
                   ),
-                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx45(
+                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx46(
                     PeriodToggle,
                     {
                       options: periods,
@@ -17651,13 +18357,13 @@ var PricingTable = forwardRef12(
                 ]
               }
             ),
-            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx45(
+            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx46(
               Box,
               {
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: plans.map((plan, index, self2) => /* @__PURE__ */ jsx45(
+                children: plans.map((plan, index, self2) => /* @__PURE__ */ jsx46(
                   Plan2,
                   {
                     plan,
@@ -17678,14 +18384,14 @@ var PricingTable = forwardRef12(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx45(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs37(Fragment24, { children: [
-            props.header.isVisible && /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment25, { children: [
+            props.header.isVisible && /* @__PURE__ */ jsx46(
               Flex,
               {
                 $justifyContent: "space-between",
                 $alignItems: "center",
                 $marginBottom: "1rem",
-                children: /* @__PURE__ */ jsx45(
+                children: /* @__PURE__ */ jsx46(
                   Text,
                   {
                     display: props.header.fontStyle,
@@ -17695,13 +18401,13 @@ var PricingTable = forwardRef12(
                 )
               }
             ),
-            /* @__PURE__ */ jsx45(
+            /* @__PURE__ */ jsx46(
               Box,
               {
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: addOns.map((addOn, index) => /* @__PURE__ */ jsx45(
+                children: addOns.map((addOn, index) => /* @__PURE__ */ jsx46(
                   AddOn2,
                   {
                     addOn,
@@ -17727,7 +18433,7 @@ PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -17739,7 +18445,7 @@ var resolveDesignProps9 = (props) => {
 };
 var TextElement = forwardRef13(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
-  return /* @__PURE__ */ jsx46(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx47(
     Text,
     {
       display: props.text.fontStyle,
@@ -17753,7 +18459,7 @@ TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 import { forwardRef as forwardRef14, useMemo as useMemo27 } from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var buttonStyles = {
   primary: {
     color: "primary",
@@ -17789,7 +18495,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     Element,
     {
       as: Flex,
@@ -17797,7 +18503,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx48(
         Button,
         {
           type: "button",
@@ -17818,8 +18524,8 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef15, useCallback as useCallback12, useEffect as useEffect9, useMemo as useMemo28, useState as useState17 } from "react";
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { forwardRef as forwardRef15, useCallback as useCallback13, useEffect as useEffect9, useMemo as useMemo28, useState as useState18 } from "react";
+import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -17843,9 +18549,9 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const { t: t2 } = useTranslation();
   const { data, settings, getUpcomingInvoice } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState17(false);
-  const [error, setError] = useState17();
-  const [upcomingInvoice, setUpcomingInvoice] = useState17();
+  const [isLoading, setIsLoading] = useState18(false);
+  const [error, setError] = useState18();
+  const [upcomingInvoice, setUpcomingInvoice] = useState18();
   const discounts = useMemo28(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
@@ -17858,7 +18564,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       })
     );
   }, [data]);
-  const getInvoice = useCallback12(async () => {
+  const getInvoice = useCallback13(async () => {
     if (isCheckoutData(data) && data.component?.id && data.subscription && !data.subscription.cancelAt) {
       try {
         setError(void 0);
@@ -17880,9 +18586,9 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
     return null;
   }
-  return /* @__PURE__ */ jsxs38(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx48(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx48(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(Element, { ref, className, children: [
+    /* @__PURE__ */ jsx49(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx49(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ jsxs39(
       Flex,
       {
         as: TransitionBox,
@@ -17891,8 +18597,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx48(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ jsx49(
             Button,
             {
               type: "button",
@@ -17905,36 +18611,36 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx48(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs38(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs38(Text, { display: props.header.fontStyle, children: [
+    ) : !isLoading && /* @__PURE__ */ jsx49(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,
         " ",
         toPrettyDate(upcomingInvoice.dueDate)
       ] }),
-      /* @__PURE__ */ jsxs38(
+      /* @__PURE__ */ jsxs39(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            props.price.isVisible && /* @__PURE__ */ jsx48(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+            props.price.isVisible && /* @__PURE__ */ jsx49(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
               upcomingInvoice.amountDue,
               upcomingInvoice.currency
             ) }),
-            /* @__PURE__ */ jsx48(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx48(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill.") }) })
+            /* @__PURE__ */ jsx49(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx49(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
           ]
         }
       ),
-      discounts.length > 0 && /* @__PURE__ */ jsxs38(
+      discounts.length > 0 && /* @__PURE__ */ jsxs39(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ jsx48(Text, { $weight: 600, children: t2("Discount") }),
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx49(Text, { $weight: 600, children: t2("Discount") }),
+            /* @__PURE__ */ jsx49(
               Flex,
               {
                 $flexDirection: "column",
@@ -17944,13 +18650,13 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                   (acc, discount) => {
                     if (typeof discount.percentOff === "number" || typeof discount.amountOff === "number") {
                       acc.push(
-                        /* @__PURE__ */ jsxs38(
+                        /* @__PURE__ */ jsxs39(
                           Flex,
                           {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ jsx48(
+                              discount.customerFacingCode && /* @__PURE__ */ jsx49(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -17959,7 +18665,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__ */ jsx48(
+                                  children: /* @__PURE__ */ jsx49(
                                     Text,
                                     {
                                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -17969,7 +18675,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
+                              /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
                                 percent: discount.percentOff
                               }) : t2("Amount off", {
                                 amount: formatCurrency(
@@ -17993,7 +18699,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           ]
         }
       )
-    ] }) : /* @__PURE__ */ jsx48(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+    ] }) : /* @__PURE__ */ jsx49(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
   ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
@@ -22173,7 +22879,7 @@ var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
 var inflate_1 = inflate;
 
 // src/components/embed/Embed.tsx
-import { useContext as useContext5, useEffect as useEffect10, useState as useState18 } from "react";
+import { useContext as useContext5, useEffect as useEffect10, useState as useState19 } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -22253,10 +22959,10 @@ function createRenderer(options2) {
 }
 
 // src/components/embed/Embed.tsx
-import { Fragment as Fragment25, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 var Loading = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     Flex,
     {
       $width: "100%",
@@ -22264,13 +22970,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx49(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ jsx50(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     Flex,
     {
       $flexDirection: "column",
@@ -22281,14 +22987,14 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx49(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx49(Text, { display: "heading1", children: "Error" }) }),
-        /* @__PURE__ */ jsx49(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx49(Text, { children: message }) })
+        /* @__PURE__ */ jsx50(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx50(Text, { display: "heading1", children: "Error" }) }),
+        /* @__PURE__ */ jsx50(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx50(Text, { children: message }) })
       ]
     }
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = useState18(/* @__PURE__ */ jsx49(Loading, {}));
+  const [children, setChildren] = useState19(/* @__PURE__ */ jsx50(Loading, {}));
   const theme = useContext5(et);
   const {
     data,
@@ -22335,13 +23041,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
     return stub();
   }
   if (error) {
-    return /* @__PURE__ */ jsx49(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx50(Error2, { message: error.message });
   }
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx49(Error2, { message: "Please provide an access token." });
+    return /* @__PURE__ */ jsx50(Error2, { message: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       Error2,
       {
         message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -22349,9 +23055,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
     );
   }
   if (isPending) {
-    return /* @__PURE__ */ jsx49(Loading, {});
+    return /* @__PURE__ */ jsx50(Loading, {});
   }
-  return /* @__PURE__ */ jsx49(Fragment25, { children });
+  return /* @__PURE__ */ jsx50(Fragment26, { children });
 };
 export {
   Box,