@schematichq/schematic-components 1.1.4 → 1.2.0

package/dist/schematic-components.cjs.js

@@ -2040,6 +2040,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",
@@ -2619,6 +2696,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) {
@@ -4075,22 +4157,10 @@ function useAvailablePlans(activePeriod) {
   }, [data?.activePlans, data?.activeAddOns]);
   const getActivePlans = (0, import_react2.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]
   );
@@ -4100,12 +4170,7 @@ function useAvailablePlans(activePeriod) {
       addOns: getActivePlans(data?.activeAddOns || []),
       periods: getAvailablePeriods()
     };
-  }, [
-    data?.activePlans,
-    data?.activeAddOns,
-    getAvailablePeriods,
-    getActivePlans
-  ]);
+  }, [data, getAvailablePeriods, getActivePlans]);
 }
 
 // src/hooks/useEmbed.ts
@@ -6689,12 +6754,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.",
@@ -6731,6 +6797,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",
@@ -6773,6 +6840,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",
@@ -6784,7 +6854,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"
@@ -10228,7 +10300,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.1.4",
+      "X-Schematic-Components-Version": "1.2.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10721,7 +10793,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,
@@ -10742,6 +10821,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 {
@@ -11892,11 +11972,7 @@ var EntitlementRow = (entitlement) => {
 // src/components/shared/sidebar/Proration.tsx
 var import_react26 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Proration = ({
-  currency,
-  charges,
-  selectedPlan
-}) => {
+var Proration = ({ currency, charges }) => {
   const { t: t2 } = useTranslation();
   const [open, setOpen] = (0, import_react26.useState)(false);
   const toggle = (e2) => {
@@ -11905,7 +11981,7 @@ var Proration = ({
     setOpen((open2) => !open2);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { $size: 14, children: charges.proration > 0 ? t2("Proration") : isHydratedPlan(selectedPlan) && !selectedPlan?.companyCanTrial && t2("Credits") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { $size: 14, children: t2("Proration") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       open && charges?.upcomingInvoiceLineItems.map(
         ({ amount, description }, index) => {
@@ -11946,6 +12022,7 @@ var StageButton = ({
   checkoutStages,
   hasAddOns,
   hasPayInAdvanceEntitlements,
+  hasCreditBundles,
   hasPaymentMethod,
   hasPlan,
   inEditMode,
@@ -12003,7 +12080,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__ */ (0, import_jsx_runtime13.jsx)(NoPaymentRequired, {});
     }
@@ -12014,7 +12091,7 @@ var StageButton = ({
         disabled: isDisabled,
         onClick: async () => {
           setCheckoutStage?.(
-            hasPayInAdvanceEntitlements ? "usage" : hasAddOns ? "addons" : "checkout"
+            hasPayInAdvanceEntitlements ? "usage" : hasAddOns ? "addons" : hasCreditBundles ? "credits" : "checkout"
           );
         },
         $isLoading: isLoading,
@@ -12023,14 +12100,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__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)(NoPaymentRequired, {});
     }
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -12039,7 +12118,9 @@ var StageButton = ({
         type: "button",
         disabled: isDisabled,
         onClick: async () => {
-          setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
+          setCheckoutStage?.(
+            hasAddOns ? "addons" : hasCreditBundles ? "credits" : "checkout"
+          );
         },
         $isLoading: isLoading,
         $fullWidth: true,
@@ -12052,8 +12133,9 @@ var StageButton = ({
             $padding: "0 1rem",
             children: [
               t2("Next"),
-              ": ",
-              hasAddOns ? t2("Addons") : t2("Checkout"),
+              ":",
+              " ",
+              hasAddOns ? t2("Addons") : hasCreditBundles ? t2("Credits") : t2("Checkout"),
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon3, { name: "arrow-right" })
             ]
           }
@@ -12062,6 +12144,38 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "addons") {
+    if (!isPaymentMethodRequired && !checkoutStages?.some((stage) => stage.id === "credits")) {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NoPaymentRequired, {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Button,
+      {
+        type: "button",
+        disabled: isDisabled,
+        onClick: async () => {
+          setCheckoutStage?.(hasCreditBundles ? "credits" : "checkout");
+        },
+        $isLoading: isLoading,
+        $fullWidth: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Flex,
+          {
+            $gap: "0.5rem",
+            $justifyContent: "center",
+            $alignItems: "center",
+            $padding: "0 1rem",
+            children: [
+              t2("Next"),
+              ": ",
+              hasCreditBundles ? t2("Credits") : t2("Checkout"),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon3, { name: "arrow-right" })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (checkoutStage === "credits") {
     if (!isPaymentMethodRequired) {
       return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NoPaymentRequired, {});
     }
@@ -12117,6 +12231,7 @@ var Sidebar = ({
   planPeriod,
   selectedPlan,
   addOns,
+  creditBundles = [],
   usageBasedEntitlements,
   charges,
   checkoutRef,
@@ -12234,6 +12349,65 @@ var Sidebar = ({
       proration: charges?.proration ?? 0
     };
   }, [charges]);
+  const updatedUsageBasedEntitlements = (0, import_react27.useMemo)(() => {
+    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 = (0, import_react27.useMemo)(
+    () => addOns.filter((addOn) => addOn.isSelected),
+    [addOns]
+  );
+  const addedCreditBundles = (0, import_react27.useMemo)(
+    () => creditBundles.filter((bundle) => bundle.count > 0),
+    [creditBundles]
+  );
   const handleCheckout = (0, import_react27.useCallback)(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
@@ -12271,7 +12445,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 }
@@ -12292,6 +12477,7 @@ var Sidebar = ({
     planPeriod,
     selectedPlan,
     addOns,
+    creditBundles,
     setError,
     setIsLoading,
     setLayout,
@@ -12312,68 +12498,21 @@ var Sidebar = ({
       setError(t2("Unsubscribe failed"));
     }
   }, [t2, unsubscribe, setError, setIsLoading, setLayout]);
-  const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const updatedUsageBasedEntitlements = (0, import_react27.useMemo)(() => {
-    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 } = (0, import_react27.useMemo)(() => {
+    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);
@@ -12658,6 +12797,48 @@ var Sidebar = ({
                   );
                 })
               ] }),
+              addedCreditBundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(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__ */ (0, import_jsx_runtime14.jsxs)(
+                          Flex,
+                          {
+                            $justifyContent: "space-between",
+                            $alignItems: "center",
+                            $gap: "1rem",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box, { children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { display: "heading4", children: [
+                                  bundle.name,
+                                  " (",
+                                  bundle.count,
+                                  ")"
+                                ] }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { children: [
+                                  amount,
+                                  " ",
+                                  getFeatureName(bundle, amount)
+                                ] }) })
+                              ] }),
+                              bundle.count > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { children: formatCurrency(
+                                price * bundle.count,
+                                bundle.price?.currency
+                              ) }) })
+                            ]
+                          },
+                          index
+                        )
+                      );
+                    return acc;
+                  },
+                  []
+                )
+              ] }),
               proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 Proration,
                 {
@@ -12806,9 +12987,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,
@@ -12847,7 +13029,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__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     Box,
     {
       $display: "grid",
@@ -12944,7 +13126,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
         );
       })
     }
-  ) });
+  );
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
@@ -13011,8 +13193,75 @@ var Checkout = ({
   ] });
 };
 
-// src/components/shared/checkout-dialog/Navigation.tsx
+// src/components/shared/checkout-dialog/Credits.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var Credits = ({ bundles, updateCount }) => {
+  const { settings } = useEmbed();
+  const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    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__ */ (0, import_jsx_runtime17.jsxs)(
+          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__ */ (0, import_jsx_runtime17.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { display: "heading3", children: bundle.name }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Text, { display: "heading6", children: [
+                    bundle.quantity ?? 0,
+                    " ",
+                    getFeatureName(bundle)
+                  ] }) })
+                ] }),
+                typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: formatCurrency(price, bundle.price?.currency) }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                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
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Navigation = ({
   name,
   index,
@@ -13022,9 +13271,9 @@ var Navigation = ({
 }) => {
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Box,
         {
           $display: "none",
@@ -13033,7 +13282,7 @@ var Navigation = ({
               $display: "block"
             }
           },
-          children: index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          children: index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Box,
             {
               $width: `${20 / TEXT_BASE_SIZE}rem`,
@@ -13043,7 +13292,7 @@ var Navigation = ({
               $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
               $borderRadius: "9999px"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Icon3,
             {
               name: "check",
@@ -13059,7 +13308,7 @@ var Navigation = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         Box,
         {
           $whiteSpace: "nowrap",
@@ -13082,7 +13331,7 @@ var Navigation = ({
         }
       )
     ] }),
-    !isLast && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    !isLast && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Icon3,
       {
         name: "chevron-right",
@@ -13097,7 +13346,7 @@ var Navigation = ({
 
 // src/components/shared/checkout-dialog/Plan.tsx
 var import_react29 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
@@ -13107,7 +13356,7 @@ var Selected = ({ isCurrent = false, isTrial = false }) => {
     }
     return isTrial ? t2("Trial selected") : t2("Plan selected");
   }, [t2, isCurrent, isTrial]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     Flex,
     {
       $justifyContent: "center",
@@ -13115,8 +13364,8 @@ var Selected = ({ isCurrent = false, isTrial = false }) => {
       $gap: "0.25rem",
       $padding: "0.625rem 0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon3, { name: "check-rounded", color: settings.theme.primary }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon3, { name: "check-rounded", color: settings.theme.primary }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Text,
           {
             $size: 0.9375 * settings.theme.typography.text.fontSize,
@@ -13152,8 +13401,8 @@ var PlanButtonGroup = ({
     };
   }, [data, plan]);
   if (isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      !isTrialing && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: isSelected && shouldTrial ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
+      !isTrialing && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: isSelected && shouldTrial ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Button,
         {
           type: "button",
@@ -13175,16 +13424,16 @@ var PlanButtonGroup = ({
           $color: "primary",
           $variant: "filled",
           $fullWidth: true,
-          children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Start X day trial", { days: plan.trialDays })
         }
       ) }),
-      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Button,
         {
           type: "button",
@@ -13196,18 +13445,18 @@ var PlanButtonGroup = ({
           $color: "primary",
           $variant: isTrialing ? "filled" : "text",
           $fullWidth: true,
-          children: !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          children: !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-              content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Choose plan")
         }
       ) })
     ] });
   }
-  return isSelected ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return isSelected ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Button,
     {
       type: "button",
@@ -13226,11 +13475,11 @@ var PlanButtonGroup = ({
       $color: "primary",
       $variant: "filled",
       $fullWidth: true,
-      children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Tooltip,
         {
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-          content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
         }
       ) : t2("Choose plan")
     }
@@ -13273,7 +13522,7 @@ var Plan = ({
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Box,
     {
       $display: "grid",
@@ -13282,6 +13531,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
         );
@@ -13289,7 +13539,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__ */ (0, import_jsx_runtime18.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           Flex,
           {
             $position: "relative",
@@ -13304,7 +13554,7 @@ var Plan = ({
               $boxShadow: cardBoxShadow
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -13320,10 +13570,10 @@ var Plan = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { display: "heading2", children: plan.name }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: plan.description }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Box, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { display: "heading2", children: plan.name }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: plan.description }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Box, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         Text,
                         {
                           $font: headerPriceFontStyle.fontFamily,
@@ -13333,7 +13583,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__ */ (0, import_jsx_runtime18.jsxs)(
+                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                         Text,
                         {
                           display: "heading2",
@@ -13345,7 +13595,58 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      Flex,
+                      {
+                        $flexDirection: "column",
+                        $gap: "1rem",
+                        $flexGrow: 1,
+                        $marginTop: "0.5rem",
+                        children: credits.map((credit, creditIndex) => {
+                          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                            Flex,
+                            {
+                              $flexWrap: "wrap",
+                              $justifyContent: "space-between",
+                              $alignItems: "center",
+                              $gap: "1rem",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $gap: "1rem", children: [
+                                credit.icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                  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__ */ (0, import_jsx_runtime19.jsx)(
+                                  Flex,
+                                  {
+                                    $flexDirection: "column",
+                                    $justifyContent: "center",
+                                    $gap: "0.5rem",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text, { children: [
+                                      credit.quantity,
+                                      " ",
+                                      getFeatureName(credit, credit.quantity),
+                                      credit.period && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                        " ",
+                                        t2("per"),
+                                        " ",
+                                        credit.period
+                                      ] })
+                                    ] })
+                                  }
+                                )
+                              ] })
+                            },
+                            creditIndex
+                          );
+                        })
+                      }
+                    ),
+                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       Flex,
                       {
                         $position: "absolute",
@@ -13354,7 +13655,7 @@ var Plan = ({
                         $backgroundColor: settings.theme.primary,
                         $borderRadius: "9999px",
                         $padding: "0.125rem 0.85rem",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                           Text,
                           {
                             $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -13367,7 +13668,7 @@ var Plan = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -13376,55 +13677,115 @@ var Plan = ({
                   $gap: `${cardPadding}rem`,
                   $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(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__ */ (0, import_jsx_runtime18.jsx)(
-                              Flex,
-                              {
-                                $flexWrap: "wrap",
-                                $justifyContent: "space-between",
-                                $alignItems: "center",
-                                $gap: "1rem",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex, { $gap: "1rem", children: [
-                                  entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                                    Icon3,
-                                    {
-                                      name: entitlement.feature.icon,
-                                      color: settings.theme.primary,
-                                      background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
-                                      rounded: true
-                                    }
-                                  ),
-                                  entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                                    Flex,
-                                    {
-                                      $flexDirection: "column",
-                                      $justifyContent: "center",
-                                      $gap: "0.5rem",
-                                      children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+                    plan.entitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(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__ */ (0, import_jsx_runtime19.jsx)(
+                          Flex,
+                          {
+                            $flexWrap: "wrap",
+                            $justifyContent: "space-between",
+                            $alignItems: "center",
+                            $gap: "1rem",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $gap: "1rem", children: [
+                              entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                Icon3,
+                                {
+                                  name: entitlement.feature.icon,
+                                  color: settings.theme.primary,
+                                  background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                                  rounded: true
+                                }
+                              ),
+                              entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $justifyContent: "center",
+                                  $gap: "0.5rem",
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                      formatCurrency(
+                                        entitlementPrice,
+                                        entitlementCurrency
+                                      ),
+                                      " ",
+                                      t2("per"),
+                                      " ",
+                                      entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                        entitlementPackageSize,
+                                        " "
+                                      ] }),
+                                      getFeatureName(
+                                        entitlement.feature,
+                                        entitlementPackageSize
+                                      ),
+                                      entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                        " ",
+                                        t2("per"),
+                                        " ",
+                                        period
+                                      ] })
+                                    ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                      TieredPricingDetails,
+                                      {
+                                        entitlement,
+                                        period
+                                      }
+                                    ) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                      entitlement.consumptionRate,
+                                      " ",
+                                      getFeatureName(
+                                        entitlement.valueCredit,
+                                        entitlement.consumptionRate || void 0
+                                      ),
+                                      " ",
+                                      t2("per"),
+                                      " ",
+                                      getFeatureName(entitlement.feature, 1)
+                                    ] }) : hasNumericValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                      entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
+                                        item: getFeatureName(
+                                          entitlement.feature
+                                        )
+                                      }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                        formatNumber(limit),
+                                        " ",
+                                        getFeatureName(
+                                          entitlement.feature,
+                                          limit
+                                        )
+                                      ] }),
+                                      metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                        " ",
+                                        t2("per"),
+                                        " ",
+                                        t2(metricPeriodName)
+                                      ] })
+                                    ] }) : entitlement.feature.name }),
+                                    entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                                      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__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+                                          "/",
+                                          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
                                             entitlementPackageSize,
                                             " "
                                           ] }),
@@ -13432,99 +13793,41 @@ var Plan = ({
                                             entitlement.feature,
                                             entitlementPackageSize
                                           ),
-                                          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                                            " ",
-                                            t2("per"),
-                                            " ",
-                                            period
-                                          ] })
-                                        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                                          TieredPricingDetails,
-                                          {
-                                            entitlement,
-                                            period
-                                          }
-                                        ) : hasNumericValue ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                                          entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
-                                            item: getFeatureName(
-                                              entitlement.feature
-                                            )
-                                          }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                                            formatNumber(limit),
-                                            " ",
-                                            getFeatureName(
-                                              entitlement.feature,
-                                              limit
-                                            )
-                                          ] }),
-                                          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                                            " ",
-                                            t2("per"),
-                                            " ",
-                                            t2(metricPeriodName)
+                                          entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                                            "/",
+                                            shortenPeriod(period)
                                           ] })
-                                        ] }) : entitlement.feature.name }),
-                                        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                                          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__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                                                entitlementPackageSize,
-                                                " "
-                                              ] }),
-                                              getFeatureName(
-                                                entitlement.feature,
-                                                entitlementPackageSize
-                                              ),
-                                              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                                                "/",
-                                                shortenPeriod(period)
-                                              ] })
-                                            ]
-                                          }
-                                        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex, { $alignItems: "center", children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                                            PricingTiersTooltip,
-                                            {
-                                              feature: entitlement.feature,
-                                              period,
-                                              currency: entitlementCurrency,
-                                              priceTiers: entitlementPriceTiers
-                                            }
-                                          ),
-                                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                                            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__ */ (0, import_jsx_runtime18.jsxs)(
+                                        ]
+                                      }
+                                    ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $alignItems: "center", children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                        PricingTiersTooltip,
+                                        {
+                                          feature: entitlement.feature,
+                                          period,
+                                          currency: entitlementCurrency,
+                                          priceTiers: entitlementPriceTiers
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                        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__ */ (0, import_jsx_runtime19.jsxs)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -13532,14 +13835,14 @@ var Plan = ({
                           $gap: "0.5rem",
                           $marginTop: "1rem",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               Icon3,
                               {
                                 name: isExpanded ? "chevron-up" : "chevron-down",
                                 color: "#D0D0D0"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               Text,
                               {
                                 onClick: () => handleToggleShowAll(plan.id),
@@ -13559,7 +13862,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       PlanButtonGroup,
                       {
                         plan,
@@ -13578,147 +13881,144 @@ var Plan = ({
         );
       })
     }
-  ) });
+  );
 };
 
 // src/components/shared/checkout-dialog/Usage.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("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__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(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__ */ (0, import_jsx_runtime19.jsxs)(
-            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__ */ (0, import_jsx_runtime19.jsxs)(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $gap: "0.75rem",
-                    $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { display: "heading2", children: entitlement.feature.name }) }),
-                      entitlement.feature.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: entitlement.feature.description }) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $gap: "0.5rem",
-                    $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                        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__ */ (0, import_jsx_runtime20.jsx)(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__ */ (0, import_jsx_runtime20.jsxs)(
+          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__ */ (0, import_jsx_runtime20.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "0.75rem",
+                  $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { display: "heading2", children: entitlement.feature.name }) }),
+                    entitlement.feature.description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { children: entitlement.feature.description }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "0.5rem",
+                  $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      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__ */ (0, import_jsx_runtime20.jsx)(
+                      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__ */ (0, import_jsx_runtime20.jsx)(Text, { $size: unitPriceFontSize, $color: "#DB6669", children: t2("Cannot downgrade entitlement") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                Box,
+                {
+                  $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
+                  $textAlign: "right",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Text, { children: [
+                      formatCurrency(
+                        (price ?? 0) * entitlement.quantity,
+                        currency
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                        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__ */ (0, import_jsx_runtime19.jsx)(Text, { $size: unitPriceFontSize, $color: "#DB6669", children: t2("Cannot downgrade entitlement") })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                  Box,
-                  {
-                    $flexBasis: `calc(${100 / 3}% - 0.375rem)`,
-                    $textAlign: "right",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text, { children: [
-                        formatCurrency(
-                          (price ?? 0) * entitlement.quantity,
-                          currency
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("sub", { children: [
-                          "/",
-                          shortenPeriod(period)
-                        ] })
-                      ] }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                        Text,
-                        {
-                          style: { opacity: 0.54 },
-                          $size: unitPriceFontSize,
-                          $color: settings.theme.typography.text.color,
-                          children: [
-                            formatCurrency(price ?? 0, currency),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("sub", { children: [
-                              "/",
-                              packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-                                packageSize,
-                                " "
-                              ] }),
-                              getFeatureName(entitlement.feature, packageSize),
-                              "/",
-                              shortenPeriod(period)
-                            ] })
-                          ]
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ]
-            },
-            index
-          )
-        );
-      }
-      return acc;
-    },
-    []
-  ) }) });
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("sub", { children: [
+                        "/",
+                        shortenPeriod(period)
+                      ] })
+                    ] }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: unitPriceFontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          formatCurrency(price ?? 0, currency),
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("sub", { children: [
+                            "/",
+                            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+                              packageSize,
+                              " "
+                            ] }),
+                            getFeatureName(entitlement.feature, packageSize),
+                            "/",
+                            shortenPeriod(period)
+                          ] })
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          },
+          index
+        )
+      );
+    }
+    return acc;
+  }, []) });
 };
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
   if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
     const featureUsage = entitlements.find(
@@ -13795,6 +14095,15 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return [];
   });
+  const [creditBundles, setCreditBundles] = (0, import_react30.useState)(() => {
+    if (isCheckoutData(data)) {
+      return data.creditBundles.map((bundle) => ({
+        ...bundle,
+        count: 0
+      }));
+    }
+    return [];
+  });
   const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react30.useState)(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
@@ -13819,7 +14128,7 @@ var CheckoutDialog = ({ top = 0 }) => {
   const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
   const checkoutStages = (0, import_react30.useMemo)(() => {
     const stages = [];
-    if (availablePlans) {
+    if (availablePlans.length > 0) {
       stages.push({
         id: "plan",
         name: t2("Plan"),
@@ -13844,6 +14153,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",
@@ -13855,11 +14172,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   }, [
     t2,
     availablePlans,
-    addOns,
-    payInAdvanceEntitlements,
-    shouldTrial,
     willTrialWithoutPaymentMethod,
+    payInAdvanceEntitlements,
+    addOns,
     isSelectedPlanTrialable,
+    shouldTrial,
+    creditBundles,
     isPaymentMethodRequired
   ]);
   const [checkoutStage, setCheckoutStage] = (0, import_react30.useState)(() => {
@@ -13869,8 +14187,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";
   });
@@ -13920,7 +14241,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 }
         });
@@ -13966,6 +14298,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       selectedPlan,
       payInAdvanceEntitlements,
       addOns,
+      creditBundles,
       shouldTrial,
       promoCode
     ]
@@ -14062,6 +14395,21 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
+  const updateCreditBundleCount = (0, import_react30.useCallback)(
+    (id, updatedCount) => {
+      setCreditBundles((prev2) => {
+        const updated = prev2.map(
+          (bundle) => bundle.id === id ? {
+            ...bundle,
+            count: updatedCount
+          } : bundle
+        );
+        handlePreviewCheckout({ creditBundles: updated });
+        return updated;
+      });
+    },
+    [handlePreviewCheckout]
+  );
   const updatePromoCode = (0, import_react30.useCallback)(
     async (code) => {
       handlePreviewCheckout({ promoCode: code });
@@ -14114,8 +14462,8 @@ var CheckoutDialog = ({ top = 0 }) => {
   const activeCheckoutStage = checkoutStages.find(
     (stage) => stage.id === checkoutStage
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Modal2, { size: "lg", top, contentRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Modal2, { size: "lg", top, contentRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Flex,
       {
         $flexWrap: "wrap",
@@ -14125,7 +14473,7 @@ var CheckoutDialog = ({ top = 0 }) => {
             $gap: "1rem"
           }
         },
-        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Navigation,
           {
             name: stage.name,
@@ -14140,7 +14488,7 @@ var CheckoutDialog = ({ top = 0 }) => {
         ))
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       Flex,
       {
         $position: "relative",
@@ -14153,7 +14501,7 @@ var CheckoutDialog = ({ top = 0 }) => {
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             Flex,
             {
               $flexDirection: "column",
@@ -14168,7 +14516,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                   Flex,
                   {
                     $flexDirection: "column",
@@ -14183,8 +14531,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                       }
                     },
                     children: [
-                      activeCheckoutStage && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
-                        activeCheckoutStage.label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      activeCheckoutStage && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
+                        activeCheckoutStage.label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                           Text,
                           {
                             as: "h3",
@@ -14193,9 +14541,9 @@ var CheckoutDialog = ({ top = 0 }) => {
                             children: activeCheckoutStage.label
                           }
                         ),
-                        activeCheckoutStage.description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: "p", children: activeCheckoutStage.description })
+                        activeCheckoutStage.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
-                      checkoutStage === "plan" && availablePeriods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      checkoutStage === "plan" && availablePeriods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         PeriodToggle,
                         {
                           options: availablePeriods,
@@ -14207,7 +14555,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     ]
                   }
                 ),
-                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Plan,
                   {
                     isLoading,
@@ -14218,7 +14566,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     shouldTrial
                   }
                 ),
-                checkoutStage === "usage" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                checkoutStage === "usage" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Usage,
                   {
                     isLoading,
@@ -14228,7 +14576,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     updateQuantity: updateUsageBasedEntitlementQuantity
                   }
                 ),
-                checkoutStage === "addons" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                checkoutStage === "addons" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   AddOns,
                   {
                     isLoading,
@@ -14237,7 +14585,15 @@ var CheckoutDialog = ({ top = 0 }) => {
                     toggle: (id) => toggleAddOn(id)
                   }
                 ),
-                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                checkoutStage === "credits" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  Credits,
+                  {
+                    isLoading,
+                    bundles: creditBundles,
+                    updateCount: updateCreditBundleCount
+                  }
+                ),
+                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Checkout,
                   {
                     isPaymentMethodRequired,
@@ -14248,13 +14604,14 @@ var CheckoutDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             Sidebar,
             {
               planPeriod,
               selectedPlan,
               addOns,
               usageBasedEntitlements,
+              creditBundles,
               charges,
               checkoutRef,
               checkoutStage,
@@ -14280,20 +14637,20 @@ var CheckoutDialog = ({ top = 0 }) => {
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
 var import_react31 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const contentRef = (0, import_react31.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Modal2, { size: "md", top, contentRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { $size: 18, children: t2("Edit payment method") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaymentMethodDetails, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Modal2, { size: "md", top, contentRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { $size: 18, children: t2("Edit payment method") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaymentMethodDetails, {})
   ] });
 };
 
 // src/components/shared/payment-form/PaymentForm.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_react32 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
   const stripe = (0, import_react_stripe_js.useStripe)();
@@ -14332,7 +14689,7 @@ var PaymentForm = ({ onConfirm }) => {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "form",
     {
       id: "payment-form",
@@ -14344,7 +14701,7 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           import_react_stripe_js.PaymentElement,
           {
             id: "payment-element",
@@ -14353,7 +14710,7 @@ var PaymentForm = ({ onConfirm }) => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Button,
           {
             id: "submit",
@@ -14365,7 +14722,7 @@ var PaymentForm = ({ onConfirm }) => {
             children: isLoading ? t2("Loading") : t2("Save payment method")
           }
         ),
-        message && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $margin: "1rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
+        message && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Box, { $margin: "1rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
       ]
     }
   );
@@ -14373,7 +14730,7 @@ var PaymentForm = ({ onConfirm }) => {
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
 var import_react33 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options: options2,
   selectedOption,
@@ -14393,7 +14750,7 @@ var PeriodToggle = ({
     }
     return 0;
   }, [selectedPlan]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Flex,
     {
       $margin: 0,
@@ -14409,7 +14766,7 @@ var PeriodToggle = ({
         }
       },
       children: options2.map((option) => {
-        const element = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        const element = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Flex,
           {
             tabIndex: 0,
@@ -14429,7 +14786,7 @@ var PeriodToggle = ({
               $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
             },
             $borderRadius: "2.5rem",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Text,
               {
                 style: { flexShrink: 0 },
@@ -14442,11 +14799,11 @@ var PeriodToggle = ({
           option
         );
         if (option === "year" && savingsPercentage > 0) {
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Tooltip,
             {
               trigger: element,
-              content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { $size: 11, $leading: 1, children: selectedOption === "month" ? t2("Save with yearly billing", {
+              content: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { $size: 11, $leading: 1, children: selectedOption === "month" ? t2("Save with yearly billing", {
                 percent: savingsPercentage
               }) : t2("Saving with yearly billing", {
                 percent: savingsPercentage
@@ -14467,7 +14824,7 @@ var import_react35 = require("react");
 
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
 var import_react34 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var PriceText = ({
   feature,
   period,
@@ -14477,42 +14834,42 @@ var PriceText = ({
 }) => {
   const text = (0, import_react34.useMemo)(() => {
     if (!flatAmount && perUnitPrice) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
         formatCurrency(perUnitPrice, currency),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("sub", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("sub", { children: [
           "/",
           getFeatureName(feature, 1)
         ] })
       ] });
     }
     if (flatAmount && !perUnitPrice) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
         formatCurrency(flatAmount, currency),
-        period && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("sub", { children: [
+        period && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("sub", { children: [
           "/",
           shortenPeriod(period)
         ] })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
       formatCurrency(perUnitPrice, currency),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("sub", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("sub", { children: [
         "/",
         getFeatureName(feature, 1)
       ] }),
       " + ",
       formatCurrency(flatAmount, currency),
-      period && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("sub", { children: [
+      period && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("sub", { children: [
         "/",
         shortenPeriod(period)
       ] })
     ] });
   }, [feature, period, currency, flatAmount, perUnitPrice]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { $leading: 1, children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { $leading: 1, children: text });
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var PricingTiersTooltip = ({
   feature,
   period,
@@ -14540,10 +14897,10 @@ var PricingTiersTooltip = ({
   if (!priceTiers.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Tooltip,
     {
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Icon3,
         {
           title: "tiered pricing",
@@ -14552,22 +14909,23 @@ var PricingTiersTooltip = ({
           style: { marginLeft: `-${1 / 3}rem` }
         }
       ),
-      content: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dl", { children: tiers.map((tier, index) => {
+      content: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime25.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
+              $alignItems: "center",
               $gap: "1rem",
               $padding: "0.5rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Text, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Text, { children: [
                   tier.from,
-                  tier.to === Infinity ? "+" : `\u2013${tier.to}`
+                  tier.from !== tier.to && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   PriceText,
                   {
                     period,
@@ -14582,8 +14940,8 @@ var PricingTiersTooltip = ({
             index
           );
         }) }),
-        (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "hr",
             {
               style: {
@@ -14593,7 +14951,7 @@ var PricingTiersTooltip = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Text, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Text, { children: [
             "\u2139\uFE0F",
             " ",
             tiersMode === "volume" /* Volume */ ? t2("Price by unit based on final tier reached.") : t2("Tiers apply progressively as quantity increases.")
@@ -14662,7 +15020,7 @@ var TieredPricingDetails = ({
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
 var import_react37 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
@@ -14706,9 +15064,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     })),
     [currentAddOns, availableAddOns]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Modal2, { size: "auto", top, contentRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ModalHeader, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Modal2, { size: "auto", top, contentRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ModalHeader, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       Flex,
       {
         $position: "relative",
@@ -14719,7 +15077,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
             Flex,
             {
               $flexDirection: "column",
@@ -14729,9 +15087,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               $marginTop: "-2.5rem",
               $padding: "0 2.5rem 2.5rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { as: "h2", display: "heading2", children: t2("Cancel subscription") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Text, { as: "p", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { as: "h2", display: "heading2", children: t2("Cancel subscription") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Text, { as: "p", children: [
                     t2(
                       "You will retain access to your plan until the end of the billing period, on"
                     ),
@@ -14741,9 +15099,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                     })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { as: "p", children: t2("Not ready to cancel?") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { as: "p", children: t2("Not ready to cancel?") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     Button,
                     {
                       type: "button",
@@ -14764,7 +15122,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Sidebar,
             {
               planPeriod,
@@ -14785,11 +15143,11 @@ var UnsubscribeDialog = ({ top = 0 }) => {
 };
 
 // src/components/ui/badge/Badge.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Flex,
     {
       as: "a",
@@ -14802,82 +15160,82 @@ var Badge = () => {
       $gridColumn: "1 / -1",
       $color: settings.theme.typography.text.color,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Text, { $size: 12, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Text, { $size: 12, children: [
           t2("Powered by"),
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
@@ -14891,9 +15249,9 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Disabled = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Element,
     {
       as: Flex,
@@ -14902,8 +15260,8 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { as: "p", children: "Please try again later." })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { as: "p", children: "Please try again later." })
       ]
     }
   ) }) });
@@ -14912,7 +15270,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Disabled, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Disabled, {});
     default:
       return children;
   }
@@ -14937,7 +15295,7 @@ var StyledViewport = dt.div.withConfig({
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Viewport = (0, import_react38.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
@@ -14963,24 +15321,24 @@ var Viewport = (0, import_react38.forwardRef)(
         parent.style.overflow = "";
       };
     }, [portal, layout]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RenderLayout, { children }),
-        isBadgeVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Badge, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(StyledViewport, { ref, ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RenderLayout, { children }),
+        isBadgeVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckoutDialog, { top }), portal || document.body),
+      canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckoutDialog, { top }), portal || document.body),
       layout === "unsubscribe" && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UnsubscribeDialog, { top }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/elements/button/Button.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -15011,7 +15369,7 @@ var ButtonElement = (0, import_react39.forwardRef)(({ children, className, ...re
       variant: "text"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Element,
     {
       as: Flex,
@@ -15019,7 +15377,7 @@ var ButtonElement = (0, import_react39.forwardRef)(({ children, className, ...re
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Button,
         {
           as: "a",
@@ -15044,7 +15402,7 @@ var import_react41 = require("react");
 
 // src/components/elements/included-features/UsageDetails.tsx
 var import_react40 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var UsageDetails = ({
   entitlement,
   shouldWrapChildren,
@@ -15054,6 +15412,7 @@ var UsageDetails = ({
     allocation,
     allocationType,
     feature,
+    planEntitlement,
     priceBehavior,
     usage,
     softLimit,
@@ -15074,19 +15433,19 @@ var UsageDetails = ({
     }
     const { price, currency, packageSize = 1 } = billingPrice || {};
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof allocation === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
       ] });
     }
     if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof price === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         formatCurrency(price, currency),
         " ",
         t2("per"),
         " ",
-        packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
           packageSize,
           " "
         ] }),
@@ -15094,22 +15453,36 @@ var UsageDetails = ({
       ] });
     }
     if (priceBehavior === "overage" /* Overage */ && typeof softLimit === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         formatNumber(softLimit),
         " ",
         getFeatureName(feature, softLimit)
       ] });
     }
     if (priceBehavior === "tier" /* Tiered */) {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: typeof currentTier?.to === "number" && (currentTier?.to === Infinity ? t2("Unlimited in this tier", {
         feature: getFeatureName(feature)
       }) : t2("Up to X units in this tier", {
         amount: formatNumber(currentTier.to),
         feature: getFeatureName(feature, currentTier?.to)
       })) });
     }
+    if (priceBehavior === "credit_burndown" /* Credit */ && planEntitlement?.valueCredit && typeof planEntitlement?.consumptionRate === "number") {
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        planEntitlement.consumptionRate,
+        " ",
+        getFeatureName(
+          planEntitlement.valueCredit,
+          planEntitlement.consumptionRate
+        ),
+        " ",
+        t2("per"),
+        " ",
+        t2("use")
+      ] });
+    }
     if (!priceBehavior && typeof allocation === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         formatNumber(allocation),
         " ",
         getFeatureName(feature, allocation)
@@ -15123,6 +15496,7 @@ var UsageDetails = ({
     allocation,
     allocationType,
     feature,
+    planEntitlement,
     priceBehavior,
     softLimit,
     billingPrice,
@@ -15137,10 +15511,10 @@ var UsageDetails = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react40.Fragment, { children: [
           formatCurrency(price, currency),
           "/",
-          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
             packageSize,
             " "
           ] }),
@@ -15150,9 +15524,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__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react40.Fragment, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -15164,14 +15538,14 @@ var UsageDetails = ({
     }
     if (typeof cost === "number" && cost > 0) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
-          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: " \u2022 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react40.Fragment, { children: [
+          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
       index += 1;
       if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
-        acc.push(/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
+        acc.push(/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react40.Fragment, { children: [
           "/",
           shortenPeriod(period)
         ] }, index));
@@ -15180,8 +15554,8 @@ var UsageDetails = ({
     }
     if (metricResetAt) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
-          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: " \u2022 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react40.Fragment, { children: [
+          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: " \u2022 " }),
           t2("Resets", {
             date: toPrettyDate(metricResetAt, {
               month: "numeric",
@@ -15218,16 +15592,16 @@ var UsageDetails = ({
   if (!text || !feature?.name) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     Box,
     {
       $flexBasis: "min-content",
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        layout.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
-        layout.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $justifyContent: "end", $alignItems: "center", $whiteSpace: "nowrap", children: [
-          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        layout.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { display: layout.entitlement.fontStyle, $leading: 1, children: text }) }),
+        layout.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $justifyContent: "end", $alignItems: "center", $whiteSpace: "nowrap", children: [
+          priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             PricingTiersTooltip,
             {
               feature,
@@ -15236,7 +15610,7 @@ var UsageDetails = ({
               priceTiers: billingPrice?.priceTier
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { display: layout.usage.fontStyle, $leading: 1, children: usageText })
         ] })
       ]
     }
@@ -15244,7 +15618,7 @@ var UsageDetails = ({
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -15319,7 +15693,7 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     Element,
     {
       as: Flex,
@@ -15328,10 +15702,10 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { display: props.header.fontStyle, children: props.header.text }) }),
+        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { display: props.header.fontStyle, children: props.header.text }) }),
         featureUsage.slice(0, showCount).map((entitlement, index) => {
           const shouldShowDetails = entitlement.feature?.name && (entitlement.feature?.featureType === "event" /* Event */ || entitlement.feature?.featureType === "trait" /* Trait */);
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             Flex,
             {
               ref: (el) => {
@@ -15344,7 +15718,7 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                   Flex,
                   {
                     $alignItems: "center",
@@ -15352,7 +15726,7 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         Icon3,
                         {
                           name: entitlement.feature.icon,
@@ -15361,8 +15735,8 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
                           rounded: true
                         }
                       ),
-                      entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
-                      props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                      entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
+                      props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                         Text,
                         {
                           display: props.entitlementExpiration.fontStyle,
@@ -15379,7 +15753,7 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   UsageDetails,
                   {
                     entitlement,
@@ -15392,15 +15766,15 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
             index
           );
         }),
-        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Icon3,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -15418,7 +15792,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 var import_react42 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -15488,9 +15862,9 @@ var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Flex,
       {
         as: TransitionBox,
@@ -15499,8 +15873,8 @@ var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your invoices.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Button,
             {
               type: "button",
@@ -15513,12 +15887,12 @@ var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TransitionBox, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
-      invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $justifyContent: "space-between", children: [
-            props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TransitionBox, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { display: props.header.fontStyle, children: t2("Invoices") }) }),
+      invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $justifyContent: "space-between", children: [
+            props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               Text,
               {
                 display: props.date.fontStyle,
@@ -15532,18 +15906,18 @@ var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref
                 children: date
               }
             ),
-            props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { display: props.amount.fontStyle, children: amount })
+            props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { display: props.amount.fontStyle, children: amount })
           ] }, index);
         }) }),
-        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Icon3,
             {
               name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,
             {
               onClick: toggleListSize,
@@ -15555,7 +15929,7 @@ var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { display: "heading2", children: t2("No invoices created yet") })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { display: "heading2", children: t2("No invoices created yet") })
     ] }) })
   ] });
 });
@@ -15565,14 +15939,14 @@ Invoices.displayName = "Invoices";
 var import_react43 = require("react");
 
 // src/components/elements/metered-features/Meter.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Meter = ({ entitlement, usageDetails }) => {
   const { priceBehavior, usage } = entitlement;
   const limit = usageDetails.limit ?? usageDetails.currentTier?.to;
   if (typeof usage !== "number" || !limit || limit === Infinity) {
     return null;
   }
-  const meter = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const meter = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     ProgressBar,
     {
       progress: Math.min(usage, limit) / Math.max(usage, limit) * 100,
@@ -15589,7 +15963,7 @@ var Meter = ({ entitlement, usageDetails }) => {
 };
 
 // src/components/elements/metered-features/PriceDetails.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var PriceDetails = ({
   entitlement,
   usageDetails,
@@ -15616,7 +15990,7 @@ var PriceDetails = ({
   if (!feature || typeof currentTierPerUnitPrice !== "number") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -15630,30 +16004,30 @@ var PriceDetails = ({
         $borderBottomRightRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`
       },
       children: [
-        priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+        priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Text, { children: [
           t2("Additional"),
           ": ",
           formatCurrency(currentTierPerUnitPrice, currency),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(feature, packageSize),
-            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            feature.featureType === "trait" /* Trait */ && period && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
               "/",
               shortenPeriod(period)
             ] })
           ] })
-        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+        ] }) : priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(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__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             PricingTiersTooltip,
             {
               period,
@@ -15664,19 +16038,19 @@ var PriceDetails = ({
             }
           )
         ] }),
-        typeof amount === "number" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+        typeof amount === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: priceBehavior === "overage" /* Overage */ ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Text, { children: [
           formatNumber(amount),
           " ",
           getFeatureName(feature, amount),
           " \xB7 ",
           formatCurrency(currentTierPerUnitPrice * amount, currency),
-          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
-        ] }) : priceBehavior === "tier" /* Tiered */ && typeof cost === "number" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+        ] }) : priceBehavior === "tier" /* Tiered */ && typeof cost === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Text, { children: [
           formatCurrency(cost, currency),
-          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === "trait" /* Trait */ && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
@@ -15704,7 +16078,7 @@ var Container2 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t2 } = useTranslation();
   const { feature, priceBehavior, allocation, usage, metricResetAt } = entitlement;
@@ -15733,7 +16107,7 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: fontStyle, children: acc.join(" \u2022 ") }) });
 };
 function resolveDesignProps4(props) {
   return {
@@ -15767,7 +16141,7 @@ var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, re
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { meteredFeatures, period } = (0, import_react43.useMemo)(() => {
+  const { period, meteredFeatures, creditGroups } = (0, import_react43.useMemo)(() => {
     if (isCheckoutData(data)) {
       const period2 = typeof data.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
@@ -15783,122 +16157,292 @@ var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, re
         []
       );
       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] = (0, import_react43.useState)(
+    creditGroups.map(({ id }) => ({ id, isExpanded: false }))
+  );
+  const toggleBalanceDetails = (0, import_react43.useCallback)((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__ */ (0, import_jsx_runtime36.jsx)(Container2, { ref, className, children: meteredFeatures.reduce((acc, entitlement, index) => {
-    if (!entitlement.feature) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(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__ */ (0, import_jsx_runtime37.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $gap: "1.5rem", children: [
+            props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              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__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                Flex,
+                {
+                  ref: (el) => {
+                    if (el) {
+                      elements.current.push(el);
+                    }
+                  },
+                  $flexWrap: "wrap",
+                  $gap: "1rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: props.header.fontStyle, children: feature.name }) }),
+                      props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: props.description.fontStyle, children: feature.description }) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                      Box,
+                      {
+                        $flexBasis: "min-content",
+                        $flexGrow: 1,
+                        $textAlign: shouldWrapChildren ? "left" : "right",
+                        children: [
+                          props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                            typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                              formatNumber(limit),
+                              " "
+                            ] }),
+                            getFeatureName(feature, limit)
+                          ] }) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                            formatNumber(usage),
+                            " ",
+                            getFeatureName(feature, usage),
+                            " ",
+                            t2("used")
+                          ] }) }) }),
+                          props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                            Limit,
+                            {
+                              entitlement,
+                              usageDetails,
+                              fontStyle: props.allocation.fontStyle
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                Meter,
+                {
+                  entitlement,
+                  usageDetails
+                }
+              ),
+              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                Button,
+                {
+                  type: "button",
+                  onClick: () => {
+                    setCheckoutState({ usage: true });
+                  },
+                  style: { whiteSpace: "nowrap" },
+                  children: t2("Add More")
+                }
+              )
+            ] })
+          ] }),
+          (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            PriceDetails,
+            {
+              entitlement,
+              usageDetails,
+              period
+            }
+          )
+        ] }, index)
+      );
       return acc;
-    }
-    const { feature, priceBehavior, usage } = entitlement;
-    const usageDetails = getUsageDetails(entitlement, period);
-    const { limit } = usageDetails;
-    acc.push(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    }, []),
+    creditGroups.map((credit, index) => {
+      const isExpanded = creditVisibility.find(({ id }) => credit.id === id)?.isExpanded ?? false;
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             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__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-              Flex,
-              {
-                ref: (el) => {
-                  if (el) {
-                    elements.current.push(el);
-                  }
-                },
-                $flexWrap: "wrap",
-                $gap: "1rem",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: props.header.fontStyle, children: feature.name }) }),
-                    props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: props.description.fontStyle, children: feature.description }) })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-                    Box,
-                    {
-                      $flexBasis: "min-content",
-                      $flexGrow: 1,
-                      $textAlign: shouldWrapChildren ? "left" : "right",
-                      children: [
-                        props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: props.usage.fontStyle, children: priceBehavior === "pay_in_advance" /* PayInAdvance */ ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-                          typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-                            formatNumber(limit),
-                            " "
-                          ] }),
-                          getFeatureName(feature, limit)
-                        ] }) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-                          formatNumber(usage),
-                          " ",
-                          getFeatureName(feature, usage),
-                          " ",
-                          t2("used")
-                        ] }) }) }),
-                        props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                          Limit,
-                          {
-                            entitlement,
-                            usageDetails,
-                            fontStyle: props.allocation.fontStyle
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            props.isVisible && priceBehavior !== "pay_as_you_go" /* PayAsYouGo */ && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              Meter,
-              {
-                entitlement,
-                usageDetails
-              }
-            ),
-            priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              Button,
-              {
-                type: "button",
-                onClick: () => {
-                  setCheckoutState({ usage: true });
-                },
-                style: { whiteSpace: "nowrap" },
-                children: t2("Add More")
-              }
-            )
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: props.header.fontStyle, children: credit.name }) }),
+              props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: props.description.fontStyle, children: credit.description }) })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $gap: "1rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                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__ */ (0, import_jsx_runtime37.jsx)(
+                Button,
+                {
+                  type: "button",
+                  onClick: () => {
+                    setCheckoutState({ credits: true });
+                  },
+                  style: { whiteSpace: "nowrap" },
+                  $size: "sm",
+                  children: t2("Buy More")
+                }
+              )
+            ] })
           ] })
         ] }),
-        (priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          PriceDetails,
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          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__ */ (0, import_jsx_runtime37.jsx)(
+              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__ */ (0, import_jsx_runtime37.jsx)(Box, { $display: "table-row", children: grant.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: t2("X items included in plan", {
+                      amount: grant.quantity,
+                      item: getFeatureName(credit, grant.quantity)
+                    }) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      Box,
+                      {
+                        $display: "table-cell",
+                        $padding: padding,
+                        $textAlign: "right",
+                        $whiteSpace: "nowrap",
+                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: t2("Resets", {
+                          date: toPrettyDate(
+                            modifyDate(grant.expiresAt, 1),
+                            {
+                              day: "2-digit",
+                              month: "2-digit",
+                              year: "2-digit"
+                            }
+                          )
+                        }) })
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: grant.grantReason === "purchased" /* Purchased */ ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { 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__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { 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__ */ (0, import_jsx_runtime37.jsx)(
+                      Box,
+                      {
+                        $display: "table-cell",
+                        $padding: padding,
+                        $textAlign: "right",
+                        $whiteSpace: "nowrap",
+                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(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__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $gap: "0.25rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            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__ */ (0, import_jsx_runtime37.jsx)(
+            Text,
+            {
+              onClick: () => toggleBalanceDetails(credit.id),
+              display: "link",
+              children: isExpanded ? t2("Hide balance details") : t2("See balance details")
+            }
+          )
+        ] })
+      ] }, index);
+    })
+  ] });
 });
 MeteredFeatures.displayName = "MeteredFeatures";
 
@@ -15907,24 +16451,24 @@ var import_react45 = require("react");
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 var import_react44 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
   iconTitle,
   label,
   paymentLast4
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon3, { name: iconName, title: iconTitle }),
-    (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { $flexGrow: 1, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon3, { name: iconName, title: iconTitle }),
+    (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { $flexGrow: 1, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: label }),
       " ",
-      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: paymentLast4 })
+      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -15989,12 +16533,12 @@ var PaymentMethodElement = ({
   const { t: t2 } = useTranslation();
   const isLightBackground = useIsLightBackground();
   const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: props.header.fontStyle, children: t2("Payment Method") }),
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t2("Expires in X months", { months: monthsToExpiration }) : t2("Expired") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -16003,8 +16547,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          paymentMethod ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Text,
             {
               onClick: onEdit,
@@ -16037,7 +16581,7 @@ var PaymentListElement = ({
     }
     return `${cardExpMonth}/${formatedYear}`;
   }, [paymentMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     Flex,
     {
       $flexDirection: "row",
@@ -16049,21 +16593,21 @@ var PaymentListElement = ({
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
       children: [
-        iconName && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon3, { name: iconName, title: iconTitle }),
-        (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { $flexGrow: 1, children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: label }),
+        iconName && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon3, { name: iconName, title: iconTitle }),
+        (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { $flexGrow: 1, children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: label }),
           " ",
-          paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: paymentLast4 })
+          paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: paymentLast4 })
         ] }),
-        expirationDate && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        expirationDate && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Box,
           {
             $flexGrow: 1,
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: t("Expires", { date: expirationDate }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t("Expires", { date: expirationDate }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Text,
           {
             onClick: () => {
@@ -16076,7 +16620,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Icon3,
           {
             tabIndex: 0,
@@ -16098,7 +16642,7 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -16139,7 +16683,7 @@ var PaymentMethod = (0, import_react45.forwardRef)(({ children, className, porta
       monthsToExpiration: void 0
     };
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -16308,7 +16852,7 @@ var loadStripe = function loadStripe2() {
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 var import_react46 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -16447,8 +16991,8 @@ var PaymentMethodDetails = ({
     showPaymentForm,
     initializePaymentMethod
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $position: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Flex, { $position: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Flex,
       {
         $position: "absolute",
@@ -16457,7 +17001,7 @@ var PaymentMethodDetails = ({
         $alignItems: "center",
         $width: "100%",
         $height: "100%",
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Loader,
           {
             $color: settings.theme.primary,
@@ -16467,7 +17011,7 @@ var PaymentMethodDetails = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       Flex,
       {
         $position: "relative",
@@ -16480,7 +17024,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__ */ (0, import_jsx_runtime39.jsxs)(
+          setupIntent && showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
             import_react_stripe_js2.Elements,
             {
               stripe,
@@ -16510,7 +17054,7 @@ var PaymentMethodDetails = ({
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   PaymentForm,
                   {
                     onConfirm: async (paymentMethodId) => {
@@ -16520,7 +17064,7 @@ var PaymentMethodDetails = ({
                     }
                   }
                 ),
-                currentPaymentMethod && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                currentPaymentMethod && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   Text,
                   {
                     onClick: focusExistingPaymentMethods,
@@ -16533,8 +17077,8 @@ var PaymentMethodDetails = ({
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               PaymentMethodElement,
               {
                 paymentMethod: currentPaymentMethod,
@@ -16542,8 +17086,8 @@ var PaymentMethodDetails = ({
                 ...props
               }
             ),
-            paymentMethods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            paymentMethods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Text,
                 {
                   onClick: toggleShowPaymentMethods,
@@ -16554,17 +17098,17 @@ var PaymentMethodDetails = ({
                   children: t2("Choose different payment method")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Icon3,
                 {
                   name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down"
                 }
               )
             ] }),
-            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
+            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
                 (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
-              ) || []).map((paymentMethod) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              ) || []).map((paymentMethod) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 PaymentListElement,
                 {
                   paymentMethod,
@@ -16573,7 +17117,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod.id
               )) }),
-              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Button,
                 {
                   type: "button",
@@ -16585,7 +17129,7 @@ var PaymentMethodDetails = ({
               )
             ] })
           ] }),
-          !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }) })
+          !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }) })
         ]
       }
     )
@@ -16596,9 +17140,9 @@ var PaymentMethodDetails = ({
 var import_react48 = require("react");
 
 // src/components/elements/plan-manager/AddOn.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var AddOn = ({ addOn, currency, layout }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -16606,10 +17150,10 @@ var AddOn = ({ addOn, currency, layout }) => {
       $flexWrap: "wrap",
       $gap: "1rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
+        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
         ] })
       ]
     }
@@ -16618,7 +17162,7 @@ var AddOn = ({ addOn, currency, layout }) => {
 
 // src/components/elements/plan-manager/UsageDetails.tsx
 var import_react47 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var UsageDetails2 = ({
   entitlement,
   period,
@@ -16640,9 +17184,9 @@ var UsageDetails2 = ({
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react47.Fragment, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react47.Fragment, { children: t2("X additional", {
           amount
-        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react47.Fragment, { children: [
+        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react47.Fragment, { children: [
           t2("Additional"),
           ": "
         ] }, index)
@@ -16653,16 +17197,16 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react47.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react47.Fragment, { children: [
           formatCurrency(price, billingPrice?.currency),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("sub", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("sub", { children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(entitlement.feature, packageSize),
-            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -16671,13 +17215,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__ */ (0, import_jsx_runtime42.jsxs)(import_react47.Fragment, { children: [
+          creditAmount,
+          " ",
+          getFeatureName(
+            entitlement.planEntitlement.valueCredit,
+            creditAmount
+          ),
+          " ",
+          t2("used")
+        ] }, index) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react47.Fragment, { 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__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -16685,13 +17256,13 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
           quantity,
           " ",
-          getFeatureName(entitlement.feature, quantity)
-        ] }) : getFeatureName(entitlement.feature) }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          description.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          entitlement.feature.name
+        ] }) : entitlement.feature.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          description.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Text,
             {
               style: { opacity: 0.54 },
@@ -16700,8 +17271,8 @@ var UsageDetails2 = ({
               children: description
             }
           ),
-          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Flex, { $alignItems: "center", children: [
-            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          (cost > 0 || entitlement.priceBehavior === "tier" /* Tiered */) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $alignItems: "center", children: [
+            entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -16710,9 +17281,9 @@ var UsageDetails2 = ({
                 priceTiers: billingPrice?.priceTier
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Text, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Text, { children: [
               formatCurrency(cost, billingPrice?.currency),
-              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("sub", { children: [
+              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("sub", { children: [
                 "/",
                 shortenPeriod(period)
               ] })
@@ -16725,7 +17296,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -16763,6 +17334,8 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
   const {
     currentPlan,
     currentAddOns,
+    creditBundles,
+    creditGroups,
     billingSubscription,
     canCheckout,
     defaultPlan,
@@ -16770,19 +17343,32 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
     trialPaymentMethodRequired
   } = (0, import_react48.useMemo)(() => {
     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,
@@ -16794,19 +17380,26 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
     () => featureUsage.filter((usage) => typeof usage.priceBehavior === "string"),
     [featureUsage]
   );
-  const { subscriptionCurrency, willSubscriptionCancel, isTrialSubscription } = (0, import_react48.useMemo)(() => {
+  const {
+    subscriptionInterval,
+    subscriptionCurrency,
+    willSubscriptionCancel,
+    isTrialSubscription
+  } = (0, import_react48.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       Notice,
       {
         as: Flex,
@@ -16816,15 +17409,15 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(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__ */ (0, import_jsx_runtime43.jsx)(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(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__ */ (0, import_jsx_runtime42.jsxs)(
+    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       Notice,
       {
         as: Flex,
@@ -16834,8 +17427,8 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
-          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             Text,
             {
               as: "p",
@@ -16853,7 +17446,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       Element,
       {
         as: Flex,
@@ -16862,20 +17455,19 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
-              $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -16885,7 +17477,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("sub", { children: [
+                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -16893,8 +17485,8 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
               ]
             }
           ),
-          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -16902,7 +17494,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
                 children: t2("Add-ons")
               }
             ),
-            currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               AddOn,
               {
                 addOn,
@@ -16910,10 +17502,10 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
                 layout: props
               },
               addOnIndex
-            ))
+            )) })
           ] }),
-          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -16921,8 +17513,8 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
                 children: t2("Usage-based")
               }
             ),
-            usageBasedEntitlements.map((entitlement, entitlementIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 UsageDetails2,
                 {
                   entitlement,
@@ -16931,9 +17523,81 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
                 },
                 entitlementIndex
               );
-            })
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Credits")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(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__ */ (0, import_jsx_runtime43.jsxs)(
+                    Flex,
+                    {
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $flexWrap: "wrap",
+                      $gap: "0.5rem",
+                      children: [
+                        group.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                          group.quantity,
+                          " ",
+                          getFeatureName(group, group.quantity),
+                          " ",
+                          subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                            t2("per"),
+                            " ",
+                            t2(subscriptionInterval)
+                          ] })
+                        ] }) : bundle ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                          group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { style: { opacity: 0.5 }, children: [
+                            "(",
+                            group.grants.length,
+                            ")",
+                            " "
+                          ] }),
+                          bundle.name,
+                          " (",
+                          group.quantity,
+                          " ",
+                          getFeatureName(group, group.quantity),
+                          ")"
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                          group.quantity,
+                          " ",
+                          getFeatureName(group, group.quantity)
+                        ] }),
+                        group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                          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__ */ (0, import_jsx_runtime42.jsx)(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             Button,
             {
               type: "button",
@@ -16962,7 +17626,7 @@ var import_react51 = require("react");
 
 // src/components/elements/pricing-table/AddOn.tsx
 var import_react49 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -16988,7 +17652,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const isCurrentAddOn = isHydratedPlan(addOn) && addOn.current;
   const isActiveAddOn = isCurrentAddOn && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
   const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     Flex,
     {
       $position: "relative",
@@ -17004,17 +17668,17 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
-          layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
+          layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
             formatCurrency(addOnPrice ?? 0, addOnCurrency),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("sub", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
               "/",
               selectedPeriod
             ] })
           ] }) }),
-          isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             Flex,
             {
               $position: "absolute",
@@ -17023,7 +17687,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
               $backgroundColor: settings.theme.primary,
               $borderRadius: "9999px",
               $padding: "0.125rem 0.85rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 Text,
                 {
                   $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -17034,7 +17698,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -17042,7 +17706,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             $gap: `${cardPadding}rem`,
             $flexGrow: 1,
             children: [
-              layout.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              layout.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -17051,15 +17715,15 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   $flexGrow: 1,
                   children: addOn.entitlements.map((entitlement, entitlementIndex) => {
                     const metricPeriodName = getMetricPeriodName(entitlement);
-                    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                       Flex,
                       {
                         $flexWrap: "wrap",
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $gap: "1rem", children: [
-                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $gap: "1rem", children: [
+                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                             Icon3,
                             {
                               name: entitlement.feature.icon,
@@ -17068,11 +17732,11 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                               rounded: true
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                            entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
                               entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
                                 item: getFeatureName(entitlement.feature)
-                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
                                 formatNumber(entitlement.valueNumeric),
                                 " ",
                                 getFeatureName(
@@ -17080,14 +17744,14 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                                   entitlement.valueNumeric
                                 )
                               ] }),
-                              metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                              metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
                                 " ",
                                 t2("per"),
                                 " ",
                                 t2(metricPeriodName)
                               ] })
                             ] }) : entitlement.feature.name }) }),
-                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                               Text,
                               {
                                 $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -17103,7 +17767,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                   })
                 }
               ),
-              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 Button,
                 {
                   type: "button",
@@ -17144,7 +17808,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 var import_react50 = require("react");
 
 // src/components/elements/pricing-table/Entitlement.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Entitlement = ({
   entitlement,
   sharedProps,
@@ -17165,8 +17829,8 @@ var Entitlement = ({
   }
   const limit = entitlement.softLimit ?? entitlement.valueNumeric;
   const metricPeriodName = getMetricPeriodName(entitlement);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $gap: "1rem", children: [
-    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $gap: "1rem", children: [
+    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Icon3,
       {
         name: entitlement.feature.icon,
@@ -17175,46 +17839,46 @@ var Entitlement = ({
         rounded: true
       }
     ),
-    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t2("per"),
           " ",
-          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
             entitlementPackageSize,
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
-          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
             " ",
             t2("per"),
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           TieredPricingDetails,
           {
             entitlement,
             period: selectedPeriod
           }
-        ) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+        ) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
           entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+          }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
             formatNumber(limit),
             " ",
             getFeatureName(entitlement.feature, limit)
           ] }),
-          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
             " ",
             t2("per"),
             " ",
             t2(metricPeriodName)
           ] })
         ] }) : entitlement.feature.name }),
-        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           Text,
           {
             $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -17224,19 +17888,19 @@ var Entitlement = ({
               " ",
               formatCurrency(entitlementPrice, entitlementCurrency),
               "/",
-              entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+              entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
                 entitlementPackageSize,
                 " "
               ] }),
               getFeatureName(entitlement.feature, entitlementPackageSize),
-              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
                 "/",
                 shortenPeriod(selectedPeriod)
               ] })
             ]
           }
-        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             PricingTiersTooltip,
             {
               feature: entitlement.feature,
@@ -17245,7 +17909,7 @@ var Entitlement = ({
               priceTiers: entitlementPriceTiers
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             Text,
             {
               style: { opacity: 0.54 },
@@ -17256,7 +17920,7 @@ var Entitlement = ({
           )
         ] })
       ] }),
-      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         Text,
         {
           $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -17269,7 +17933,7 @@ var Entitlement = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Plan2 = ({
   plan,
   index,
@@ -17335,6 +17999,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
   );
@@ -17342,7 +18007,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__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     Flex,
     {
       className: "sch-PricingTable_Plan",
@@ -17359,7 +18024,7 @@ var Plan2 = ({
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -17370,9 +18035,9 @@ var Plan2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
-              layout.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: plan.name }) }),
+              layout.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                 Text,
                 {
                   $font: headerPriceFontStyle.fontFamily,
@@ -17381,14 +18046,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__ */ (0, import_jsx_runtime45.jsxs)("sub", { children: [
+                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
                   ]
                 }
               ) }),
-              isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $flexGrow: 1,
+                  $marginTop: "0.5rem",
+                  children: credits.map((credit, idx) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
+                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                        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__ */ (0, import_jsx_runtime46.jsx)(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $justifyContent: "center",
+                          $gap: "0.5rem",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text, { children: [
+                            credit.quantity,
+                            " ",
+                            getFeatureName(credit, credit.quantity),
+                            credit.period && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+                              " ",
+                              t2("per"),
+                              " ",
+                              credit.period
+                            ] })
+                          ] })
+                        }
+                      )
+                    ] }, idx);
+                  })
+                }
+              ),
+              isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 Flex,
                 {
                   $position: "absolute",
@@ -17397,7 +18103,7 @@ var Plan2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -17410,7 +18116,7 @@ var Plan2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -17419,11 +18125,11 @@ var Plan2 = ({
             $gap: `${cardPadding}rem`,
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { children: t2("Everything in", {
+              layout.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
+                layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: t2("Everything in", {
                   plan: plans[index - 1].name
                 }) }) }),
-                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                plan.entitlements.map((entitlement, idx) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   Entitlement,
                   {
                     entitlement,
@@ -17432,7 +18138,7 @@ var Plan2 = ({
                   },
                   idx
                 )).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
-                (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                   Flex,
                   {
                     $justifyContent: "start",
@@ -17440,14 +18146,14 @@ var Plan2 = ({
                     $gap: "0.5rem",
                     $marginTop: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                         Icon3,
                         {
                           name: isExpanded ? "chevron-up" : "chevron-down",
                           color: "#D0D0D0"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                         Text,
                         {
                           onClick: () => handleToggleShowAll(plan.id),
@@ -17467,7 +18173,7 @@ var Plan2 = ({
                   }
                 )
               ] }),
-              isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                 Flex,
                 {
                   $justifyContent: "center",
@@ -17475,7 +18181,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -17483,10 +18189,10 @@ var Plan2 = ({
                         color: settings.theme.primary
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
                   ]
                 }
-              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 Button,
                 {
                   type: "button",
@@ -17523,11 +18229,11 @@ var Plan2 = ({
                     }
                   },
                   $fullWidth: true,
-                  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     Tooltip,
                     {
-                      trigger: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
-                      content: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
+                      trigger: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { as: Box, $align: "center", children: t2("Over usage limit") }),
+                      content: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
                     }
                   ) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
                 }
@@ -17541,7 +18247,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -17640,7 +18346,7 @@ var PricingTable = (0, import_react51.forwardRef)(
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
     const Wrapper = isStandalone ? Container : import_react51.Fragment;
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       FussyChild,
       {
         ref,
@@ -17649,8 +18355,8 @@ var PricingTable = (0, import_react51.forwardRef)(
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
               Flex,
               {
                 $flexDirection: "column",
@@ -17665,7 +18371,7 @@ var PricingTable = (0, import_react51.forwardRef)(
                   }
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     Text,
                     {
                       display: props.header.fontStyle,
@@ -17673,7 +18379,7 @@ var PricingTable = (0, import_react51.forwardRef)(
                       children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                     }
                   ),
-                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     PeriodToggle,
                     {
                       options: periods,
@@ -17688,13 +18394,13 @@ var PricingTable = (0, import_react51.forwardRef)(
                 ]
               }
             ),
-            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Box,
               {
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: plans.map((plan, index, self2) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                children: plans.map((plan, index, self2) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Plan2,
                   {
                     plan,
@@ -17715,14 +18421,14 @@ var PricingTable = (0, import_react51.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-            props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+            props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Flex,
               {
                 $justifyContent: "space-between",
                 $alignItems: "center",
                 $marginBottom: "1rem",
-                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Text,
                   {
                     display: props.header.fontStyle,
@@ -17732,13 +18438,13 @@ var PricingTable = (0, import_react51.forwardRef)(
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Box,
               {
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   AddOn2,
                   {
                     addOn,
@@ -17764,7 +18470,7 @@ PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
 var import_react52 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -17776,7 +18482,7 @@ var resolveDesignProps9 = (props) => {
 };
 var TextElement = (0, import_react52.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     Text,
     {
       display: props.text.fontStyle,
@@ -17790,7 +18496,7 @@ TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 var import_react53 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var buttonStyles = {
   primary: {
     color: "primary",
@@ -17826,7 +18532,7 @@ var UnsubscribeButton = (0, import_react53.forwardRef)(({ children, className, .
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Element,
     {
       as: Flex,
@@ -17834,7 +18540,7 @@ var UnsubscribeButton = (0, import_react53.forwardRef)(({ children, className, .
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Button,
         {
           type: "button",
@@ -17856,7 +18562,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 var import_react54 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -17917,9 +18623,9 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       Flex,
       {
         as: TransitionBox,
@@ -17928,8 +18634,8 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Button,
             {
               type: "button",
@@ -17942,36 +18648,36 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Text, { display: props.header.fontStyle, children: [
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Text, { display: props.header.fontStyle, children: [
         props.header.prefix,
         " ",
         toPrettyDate(upcomingInvoice.dueDate)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
               upcomingInvoice.amountDue,
               upcomingInvoice.currency
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill.") }) })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill") }) })
           ]
         }
       ),
-      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { $weight: 600, children: t2("Discount") }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { $weight: 600, children: t2("Discount") }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Flex,
               {
                 $flexDirection: "column",
@@ -17981,13 +18687,13 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
                   (acc, discount) => {
                     if (typeof discount.percentOff === "number" || typeof discount.amountOff === "number") {
                       acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                           Flex,
                           {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -17996,7 +18702,7 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
                                   $borderStyle: "solid",
                                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                                   $borderRadius: "0.3125rem",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                                     Text,
                                     {
                                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -18006,7 +18712,7 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
+                              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
                                 percent: discount.percentOff
                               }) : t2("Amount off", {
                                 amount: formatCurrency(
@@ -18030,7 +18736,7 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
           ]
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
   ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
@@ -22290,10 +22996,10 @@ function createRenderer(options2) {
 }
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Loading = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Flex,
     {
       $width: "100%",
@@ -22301,13 +23007,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     Flex,
     {
       $flexDirection: "column",
@@ -22318,14 +23024,14 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: "heading1", children: "Error" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: message }) })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { display: "heading1", children: "Error" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: message }) })
       ]
     }
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = (0, import_react56.useState)(/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Loading, {}));
+  const [children, setChildren] = (0, import_react56.useState)(/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loading, {}));
   const theme = (0, import_react56.useContext)(et);
   const {
     data,
@@ -22372,13 +23078,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
     return stub();
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Error2, { message: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Error2, { message: error.message });
   }
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Error2, { message: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Error2, { message: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Error2,
       {
         message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -22386,9 +23092,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
     );
   }
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Loading, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loading, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children });
 };
 /*! Bundled license information: