@schematichq/schematic-components 1.8.0 → 1.9.1

package/dist/schematic-components.cjs.js

@@ -2213,6 +2213,25 @@ function getCreditBasedEntitlementLimit(entitlement, credits) {
     };
   }
 }
+function extractCurrentUsageBasedEntitlements(features = [], planPeriod) {
+  return features.reduce((acc, entitlement) => {
+    if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
+      const allocation = entitlement.allocation || 0;
+      const usage = entitlement.usage || 0;
+      const quantity = allocation ?? usage;
+      acc.push({
+        ...entitlement,
+        allocation,
+        usage,
+        quantity
+      });
+    }
+    return acc;
+  }, []);
+}
+function getEntitlementFeatureName(entitlement, defaultValue) {
+  return entitlement.feature?.pluralName || entitlement.feature?.name || entitlement.featureName || defaultValue || "";
+}
 
 // src/utils/pluralize.ts
 var pluralRules = [];
@@ -4792,7 +4811,12 @@ var Translator = class _Translator extends EventEmitter {
     };
     if (key == null) return false;
     const resolved = this.resolve(key, opt);
-    return resolved?.res !== void 0;
+    if (resolved?.res === void 0) return false;
+    const isObject2 = shouldHandleAsObject(resolved.res);
+    if (opt.returnObjects === false && isObject2) {
+      return false;
+    }
+    return true;
   }
   extractFromKey(key, opt) {
     let nsSeparator = opt.nsSeparator !== void 0 ? opt.nsSeparator : this.options.nsSeparator;
@@ -8112,6 +8136,85 @@ function EntityTraitDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/TraitDefinition.ts
+function TraitDefinitionFromJSON(json) {
+  return TraitDefinitionFromJSONTyped(json, false);
+}
+function TraitDefinitionFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    comparableType: json["comparable_type"],
+    entityType: json["entity_type"],
+    id: json["id"]
+  };
+}
+
+// src/api/checkoutexternal/models/Condition.ts
+function ConditionFromJSON(json) {
+  return ConditionFromJSONTyped(json, false);
+}
+function ConditionFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    comparisonTraitDefinition: json["comparison_trait_definition"] == null ? void 0 : TraitDefinitionFromJSON(json["comparison_trait_definition"]),
+    conditionType: json["condition_type"],
+    consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
+    creditId: json["credit_id"] == null ? void 0 : json["credit_id"],
+    environmentId: json["environment_id"],
+    eventSubtype: json["event_subtype"] == null ? void 0 : json["event_subtype"],
+    id: json["id"],
+    metricPeriod: json["metric_period"] == null ? void 0 : json["metric_period"],
+    metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : json["metric_period_month_reset"],
+    metricValue: json["metric_value"] == null ? void 0 : json["metric_value"],
+    operator: json["operator"],
+    resourceIds: json["resource_ids"],
+    traitDefinition: json["trait_definition"] == null ? void 0 : TraitDefinitionFromJSON(json["trait_definition"]),
+    traitValue: json["trait_value"]
+  };
+}
+
+// src/api/checkoutexternal/models/ConditionGroup.ts
+function ConditionGroupFromJSON(json) {
+  return ConditionGroupFromJSONTyped(json, false);
+}
+function ConditionGroupFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    conditions: json["conditions"].map(ConditionFromJSON)
+  };
+}
+
+// src/api/checkoutexternal/models/Rule.ts
+function RuleFromJSON(json) {
+  return RuleFromJSONTyped(json, false);
+}
+function RuleFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    conditionGroups: json["condition_groups"].map(
+      ConditionGroupFromJSON
+    ),
+    conditions: json["conditions"].map(ConditionFromJSON),
+    environmentId: json["environment_id"],
+    flagId: json["flag_id"] == null ? void 0 : json["flag_id"],
+    id: json["id"],
+    name: json["name"],
+    priority: json["priority"],
+    ruleType: json["rule_type"],
+    value: json["value"]
+  };
+}
+
 // src/api/checkoutexternal/models/GenericPreviewObject.ts
 function GenericPreviewObjectFromJSON(json) {
   return GenericPreviewObjectFromJSONTyped(json, false);
@@ -8164,6 +8267,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     plan: json["plan"] == null ? void 0 : CompanyPlanWithBillingSubViewFromJSON(json["plan"]),
     plans: json["plans"].map(GenericPreviewObjectFromJSON),
+    rules: json["rules"].map(RuleFromJSON),
     traits: json["traits"] == null ? void 0 : json["traits"],
     updatedAt: new Date(json["updated_at"]),
     userCount: json["user_count"]
@@ -8578,14 +8682,20 @@ function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
     creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
     creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
+    effectiveLimit: json["effective_limit"] == null ? void 0 : json["effective_limit"],
+    effectivePrice: json["effective_price"] == null ? void 0 : json["effective_price"],
     entitlementExpirationDate: json["entitlement_expiration_date"] == null ? void 0 : new Date(json["entitlement_expiration_date"]),
     entitlementId: json["entitlement_id"],
     entitlementSource: json["entitlement_source"] == null ? void 0 : json["entitlement_source"],
     entitlementType: json["entitlement_type"],
     feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
+    hasValidAllocation: json["has_valid_allocation"] == null ? void 0 : json["has_valid_allocation"],
+    isUnlimited: json["is_unlimited"] == null ? void 0 : json["is_unlimited"],
     metricResetAt: json["metric_reset_at"] == null ? void 0 : new Date(json["metric_reset_at"]),
     monthReset: json["month_reset"] == null ? void 0 : json["month_reset"],
     monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
+    overuse: json["overuse"] == null ? void 0 : json["overuse"],
+    percentUsed: json["percent_used"] == null ? void 0 : json["percent_used"],
     period: json["period"] == null ? void 0 : json["period"],
     plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
     planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
@@ -10666,7 +10776,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.8.0",
+      "X-Schematic-Components-Version": "1.9.1",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -12900,21 +13010,9 @@ var Sidebar = ({
         currentPlan: data.company?.plan,
         currentAddOns: data.company?.addOns || [],
         currentEntitlements: currentEntitlements2,
-        currentUsageBasedEntitlements: currentEntitlements2.reduce(
-          (acc, entitlement) => {
-            if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
-              const allocation = entitlement.allocation || 0;
-              const usage = entitlement.usage || 0;
-              acc.push({
-                ...entitlement,
-                allocation,
-                usage,
-                quantity: allocation ?? usage
-              });
-            }
-            return acc;
-          },
-          []
+        currentUsageBasedEntitlements: extractCurrentUsageBasedEntitlements(
+          data.featureUsage?.features,
+          planPeriod
         ),
         billingSubscription: data.company?.billingSubscription,
         paymentMethod: data.subscription?.paymentMethod,
@@ -13729,9 +13827,53 @@ var Sidebar = ({
 
 // src/components/shared/checkout-dialog/AddOns.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+function renderMeteredEntitlementPricing({
+  priceBehavior,
+  softLimit,
+  price,
+  currency,
+  packageSize,
+  feature,
+  featureName,
+  isTiered
+}) {
+  if (priceBehavior === "overage" /* Overage */ && softLimit) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      "Additional: ",
+      formatCurrency(price, currency),
+      "/",
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      formatCurrency(price, currency),
+      "/",
+      packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        packageSize,
+        " "
+      ] }),
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (isTiered) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "Tier-based pricing" });
+  }
+  return null;
+}
+function shouldShowUsageBased(price, displayableEntitlements) {
+  return price < 0.01 && displayableEntitlements.some((ent) => !ent.isUnlimited);
+}
 var AddOns = ({ addOns, toggle, isLoading, period }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
+  const isLightBackground = useIsLightBackground();
   const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -13744,29 +13886,40 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
         const { price, currency } = getAddOnPrice(addOn, period) || {};
         const isAddOnValid = isHydratedPlan(addOn) && addOn.valid;
         const isAddOnCurrent = isHydratedPlan(addOn) && addOn.current;
-        const overageEntitlement = addOn.entitlements?.find(
-          (entitlement) => entitlement.priceBehavior === "overage" /* Overage */
-        );
-        let overageInfo = null;
-        if (overageEntitlement) {
-          const priceData = period === "year" ? overageEntitlement.meteredYearlyPrice : overageEntitlement.meteredMonthlyPrice;
-          if (priceData?.priceTier && priceData.priceTier.length >= 2) {
-            const overageTier = priceData.priceTier[priceData.priceTier.length - 1];
-            overageInfo = {
-              softLimit: overageEntitlement.softLimit,
-              perUnitPrice: overageTier.perUnitPriceDecimal ? Number(overageTier.perUnitPriceDecimal) : overageTier.perUnitPrice || 0,
-              currency: priceData.currency || currency,
-              featureName: overageEntitlement.feature?.name
+        const displayableEntitlements = addOn.entitlements?.filter(
+          (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
+            "pay_as_you_go" /* PayAsYouGo */,
+            "pay_in_advance" /* PayInAdvance */,
+            "overage" /* Overage */,
+            "tier" /* Tiered */
+          ].includes(entitlement.priceBehavior)
+        ).map((entitlement) => {
+          if (entitlement.valueType === "unlimited" && !entitlement.priceBehavior) {
+            return {
+              isUnlimited: true,
+              featureName: entitlement.feature?.name,
+              feature: entitlement.feature
             };
           }
-        }
+          const priceData = getEntitlementPrice(entitlement, period);
+          return {
+            isUnlimited: false,
+            priceBehavior: entitlement.priceBehavior,
+            softLimit: entitlement.softLimit,
+            price: priceData?.price ?? 0,
+            currency: priceData?.currency || currency,
+            featureName: entitlement.feature?.name,
+            feature: entitlement.feature,
+            packageSize: priceData?.packageSize ?? 1,
+            isTiered: entitlement.priceBehavior === "tier" /* Tiered */
+          };
+        }) || [];
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           Flex,
           {
             $position: "relative",
             $flexDirection: "column",
-            $gap: "2rem",
-            $padding: `${cardPadding}rem`,
+            $padding: `${0.75 * cardPadding}rem 0`,
             $backgroundColor: settings.theme.card.background,
             $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
             $outlineWidth: "2px",
@@ -13776,86 +13929,180 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
               $boxShadow: cardBoxShadow
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading3", children: addOn.name }) }),
-                addOn.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: addOn.description }) }),
-                (addOn[periodKey] || addOn.chargeType === ChargeType.oneTime) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      Text,
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "0.75rem",
+                  $padding: `0 ${cardPadding}rem ${displayableEntitlements.length > 0 ? 0.75 * cardPadding : 0}rem`,
+                  $borderWidth: "0",
+                  $borderBottomWidth: displayableEntitlements.length > 0 ? "1px" : "0",
+                  $borderStyle: "solid",
+                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading3", children: addOn.name }) }),
+                    addOn.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: addOn.description }) }),
+                    (addOn[periodKey] || addOn.chargeType === ChargeType.oneTime) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: shouldShowUsageBased(price ?? 0, displayableEntitlements) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading2", children: t2("Usage-based") }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        Text,
+                        {
+                          display: "heading2",
+                          $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
+                          children: addOn.chargeType === ChargeType.oneTime ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                            " ",
+                            t2("one time")
+                          ] }) : `/${period}`
+                        }
+                      )
+                    ] }) }),
+                    isAddOnCurrent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Flex,
                       {
-                        display: "heading2",
-                        $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
-                        children: addOn.chargeType === ChargeType.oneTime ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-                          " ",
-                          t2("one time")
-                        ] }) : `/${period}`
+                        $position: "absolute",
+                        $right: "1rem",
+                        $top: "1rem",
+                        $backgroundColor: settings.theme.primary,
+                        $borderRadius: "9999px",
+                        $padding: "0.125rem 0.85rem",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                          Text,
+                          {
+                            $size: 0.75 * settings.theme.typography.text.fontSize,
+                            $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                            children: t2("Active")
+                          }
+                        )
                       }
                     )
-                  ] }),
-                  overageInfo && overageInfo.softLimit && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text, { $size: 0.875, style: { opacity: 0.8 }, children: [
-                    overageInfo.softLimit,
-                    " ",
-                    overageInfo.featureName || "units",
-                    " included, then",
-                    " ",
-                    formatCurrency(
-                      overageInfo.perUnitPrice,
-                      overageInfo.currency
-                    ),
-                    "/",
-                    overageInfo.featureName?.toLowerCase() || "unit"
-                  ] }) })
-                ] }),
-                isAddOnCurrent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  Flex,
-                  {
-                    $position: "absolute",
-                    $right: "1rem",
-                    $top: "1rem",
-                    $backgroundColor: settings.theme.primary,
-                    $borderRadius: "9999px",
-                    $padding: "0.125rem 0.85rem",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      Text,
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $justifyContent: "end",
+                  $flexGrow: 1,
+                  $gap: `${cardPadding}rem`,
+                  $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
+                  children: [
+                    displayableEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: displayableEntitlements.map((entitlement, idx) => {
+                      if (entitlement.isUnlimited) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                          Flex,
+                          {
+                            $flexWrap: "wrap",
+                            $justifyContent: "space-between",
+                            $alignItems: "center",
+                            $gap: "1rem",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $gap: "1rem", children: [
+                                entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                  Icon3,
+                                  {
+                                    name: entitlement.feature.icon,
+                                    color: settings.theme.primary,
+                                    background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                                    rounded: true
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                  Flex,
+                                  {
+                                    $flexDirection: "column",
+                                    $justifyContent: "center",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: entitlement.feature?.pluralName || entitlement.feature?.name || entitlement.featureName })
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                Text,
+                                {
+                                  style: { opacity: 0.54 },
+                                  $size: 0.875 * settings.theme.typography.text.fontSize,
+                                  $color: settings.theme.typography.text.color,
+                                  children: "Unlimited"
+                                }
+                              )
+                            ]
+                          },
+                          idx
+                        );
+                      }
+                      const meteredEntitlement = entitlement;
+                      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                        Flex,
+                        {
+                          $flexWrap: "wrap",
+                          $justifyContent: "space-between",
+                          $alignItems: "center",
+                          $gap: "1rem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $gap: "1rem", children: [
+                              meteredEntitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                Icon3,
+                                {
+                                  name: meteredEntitlement.feature.icon,
+                                  color: settings.theme.primary,
+                                  background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                                  rounded: true
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $justifyContent: "center",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: meteredEntitlement.priceBehavior === "overage" /* Overage */ && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) })
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                              Text,
+                              {
+                                style: { opacity: 0.54 },
+                                $size: 0.875 * settings.theme.typography.text.fontSize,
+                                $color: settings.theme.typography.text.color,
+                                children: renderMeteredEntitlementPricing(meteredEntitlement)
+                              }
+                            )
+                          ]
+                        },
+                        idx
+                      );
+                    }) }),
+                    !addOn.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Button,
                       {
-                        $size: 0.75 * settings.theme.typography.text.fontSize,
-                        $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                        children: t2("Active")
+                        type: "button",
+                        disabled: isLoading || !isAddOnValid,
+                        onClick: () => toggle(addOn.id),
+                        $size: "sm",
+                        $color: "primary",
+                        $variant: "outline",
+                        $fullWidth: true,
+                        children: t2("Choose add-on")
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Button,
+                      {
+                        type: "button",
+                        disabled: isLoading || !isAddOnValid,
+                        onClick: () => toggle(addOn.id),
+                        $size: "sm",
+                        $color: isAddOnCurrent ? "danger" : "primary",
+                        $variant: isAddOnCurrent ? "ghost" : "text",
+                        $fullWidth: true,
+                        children: isAddOnCurrent ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon3, { name: "check-rounded", size: "sm" }),
+                          t2("Selected")
+                        ] })
                       }
                     )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                Button,
-                {
-                  type: "button",
-                  disabled: isLoading || !isAddOnValid,
-                  onClick: () => toggle(addOn.id),
-                  $size: "sm",
-                  $color: "primary",
-                  $variant: "outline",
-                  $fullWidth: true,
-                  children: t2("Choose add-on")
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                Button,
-                {
-                  type: "button",
-                  disabled: isLoading || !isAddOnValid,
-                  onClick: () => toggle(addOn.id),
-                  $size: "sm",
-                  $color: isAddOnCurrent ? "danger" : "primary",
-                  $variant: isAddOnCurrent ? "ghost" : "text",
-                  $fullWidth: true,
-                  children: isAddOnCurrent ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon3, { name: "check-rounded", size: "sm" }),
-                    t2("Selected")
-                  ] })
+                  ]
                 }
-              ) })
+              )
             ]
           },
           index
@@ -17749,7 +17996,7 @@ PaymentMethod.displayName = "PaymentMethod";
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "basil";
+var RELEASE_TRAIN = "clover";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
@@ -17789,7 +18036,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.9.0",
+    version: "8.1.0",
     startTime
   });
 };
@@ -17864,7 +18111,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.9.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -18800,6 +19047,49 @@ var import_react52 = require("react");
 // src/components/elements/pricing-table/AddOn.tsx
 var import_react50 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
+function renderMeteredEntitlementPricing2({
+  priceBehavior,
+  softLimit,
+  price,
+  currency,
+  packageSize,
+  feature,
+  featureName,
+  isTiered
+}) {
+  if (priceBehavior === "overage" /* Overage */ && softLimit) {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      "Additional: ",
+      formatCurrency(price, currency),
+      "/",
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      formatCurrency(price, currency),
+      "/",
+      packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+        packageSize,
+        " "
+      ] }),
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (isTiered) {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: "Tier-based pricing" });
+  }
+  return null;
+}
+function shouldShowUsageBased2(price, displayableEntitlements) {
+  return price < 0.01 && displayableEntitlements.some((ent) => !ent.isUnlimited);
+}
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -18825,13 +19115,40 @@ 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) || {};
+  const displayableEntitlements = addOn.entitlements?.filter(
+    (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
+      "pay_as_you_go" /* PayAsYouGo */,
+      "pay_in_advance" /* PayInAdvance */,
+      "overage" /* Overage */,
+      "tier" /* Tiered */
+    ].includes(entitlement.priceBehavior)
+  ).map((entitlement) => {
+    if (entitlement.valueType === "unlimited" && !entitlement.priceBehavior) {
+      return {
+        isUnlimited: true,
+        featureName: entitlement.feature?.name,
+        feature: entitlement.feature
+      };
+    }
+    const priceData = getEntitlementPrice(entitlement, selectedPeriod);
+    return {
+      isUnlimited: false,
+      priceBehavior: entitlement.priceBehavior,
+      softLimit: entitlement.softLimit,
+      price: priceData?.price ?? 0,
+      currency: priceData?.currency || addOnCurrency,
+      featureName: entitlement.feature?.name,
+      feature: entitlement.feature,
+      packageSize: priceData?.packageSize ?? 1,
+      isTiered: entitlement.priceBehavior === "tier" /* Tiered */
+    };
+  }) || [];
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     Flex,
     {
       $position: "relative",
       $flexDirection: "column",
-      $gap: "2rem",
-      $padding: `${cardPadding}rem`,
+      $padding: `${0.75 * cardPadding}rem 0`,
       $backgroundColor: settings.theme.card.background,
       $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
       $outlineWidth: "2px",
@@ -18841,36 +19158,48 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
-          layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
-            formatCurrency(addOnPrice ?? 0, addOnCurrency),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
-              "/",
-              selectedPeriod
-            ] })
-          ] }) }),
-          isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            Flex,
-            {
-              $position: "absolute",
-              $right: "1rem",
-              $top: "1rem",
-              $backgroundColor: settings.theme.primary,
-              $borderRadius: "9999px",
-              $padding: "0.125rem 0.85rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                Text,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $gap: "0.75rem",
+            $padding: `0 ${cardPadding}rem ${displayableEntitlements.length > 0 ? 0.75 * cardPadding : 0}rem`,
+            $borderWidth: "0",
+            $borderBottomWidth: displayableEntitlements.length > 0 ? "1px" : "0",
+            $borderStyle: "solid",
+            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
+              layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: t2("Usage-based") }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
+                formatCurrency(addOnPrice ?? 0, addOnCurrency),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
+                  "/",
+                  selectedPeriod
+                ] })
+              ] }) }),
+              isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                Flex,
                 {
-                  $size: 0.75 * settings.theme.typography.text.fontSize,
-                  $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                  children: t2("Active")
+                  $position: "absolute",
+                  $right: "1rem",
+                  $top: "1rem",
+                  $backgroundColor: settings.theme.primary,
+                  $borderRadius: "9999px",
+                  $padding: "0.125rem 0.85rem",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    Text,
+                    {
+                      $size: 0.75 * settings.theme.typography.text.fontSize,
+                      $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                      children: t2("Active")
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           Flex,
           {
@@ -18878,25 +19207,20 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             $justifyContent: "end",
             $gap: `${cardPadding}rem`,
             $flexGrow: 1,
+            $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                Flex,
-                {
-                  $flexDirection: "column",
-                  $position: "relative",
-                  $gap: "1rem",
-                  $flexGrow: 1,
-                  children: addOn.entitlements.map((entitlement, entitlementIndex) => {
-                    const metricPeriodName = getMetricPeriodName(entitlement);
-                    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                      Flex,
-                      {
-                        $flexWrap: "wrap",
-                        $justifyContent: "space-between",
-                        $alignItems: "center",
-                        $gap: "1rem",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
-                          layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              displayableEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: displayableEntitlements.map((entitlement, idx) => {
+                if (entitlement.isUnlimited) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                    Flex,
+                    {
+                      $flexWrap: "wrap",
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $gap: "1rem",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
+                          entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                             Icon3,
                             {
                               name: entitlement.feature.icon,
@@ -18905,41 +19229,57 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                               rounded: true
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-                              entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
-                                item: getFeatureName(entitlement.feature)
-                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-                                formatNumber(entitlement.valueNumeric),
-                                " ",
-                                getFeatureName(
-                                  entitlement.feature,
-                                  entitlement.valueNumeric
-                                )
-                              ] }),
-                              metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-                                " ",
-                                t2("per"),
-                                " ",
-                                t2(metricPeriodName)
-                              ] })
-                            ] }) : entitlement.feature.name }) }),
-                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                              Text,
-                              {
-                                $size: 0.875 * settings.theme.typography.text.fontSize,
-                                $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
-                                children: entitlement.feature.description
-                              }
-                            )
-                          ] })
-                        ] })
-                      },
-                      entitlementIndex
-                    );
-                  })
+                          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: entitlement.feature?.pluralName || entitlement.feature?.name || entitlement.featureName }) })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                          Text,
+                          {
+                            style: { opacity: 0.54 },
+                            $size: 0.875 * settings.theme.typography.text.fontSize,
+                            $color: settings.theme.typography.text.color,
+                            children: "Unlimited"
+                          }
+                        )
+                      ]
+                    },
+                    idx
+                  );
                 }
-              ),
+                const meteredEntitlement = entitlement;
+                return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                  Flex,
+                  {
+                    $flexWrap: "wrap",
+                    $justifyContent: "space-between",
+                    $alignItems: "center",
+                    $gap: "1rem",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
+                        meteredEntitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                          Icon3,
+                          {
+                            name: meteredEntitlement.feature.icon,
+                            color: settings.theme.primary,
+                            background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                            rounded: true
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: meteredEntitlement.priceBehavior === "overage" /* Overage */ && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                        Text,
+                        {
+                          style: { opacity: 0.54 },
+                          $size: 0.875 * settings.theme.typography.text.fontSize,
+                          $color: settings.theme.typography.text.color,
+                          children: renderMeteredEntitlementPricing2(meteredEntitlement)
+                        }
+                      )
+                    ]
+                  },
+                  idx
+                );
+              }) }),
               showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 Button,
                 {