@schematichq/schematic-components 1.1.3 → 1.1.4

package/dist/schematic-components.cjs.js

@@ -5317,7 +5317,7 @@ var Interpolator = class {
     };
     this.regexp = getOrResetRegExp(this.regexp, `${this.prefix}(.+?)${this.suffix}`);
     this.regexpUnescape = getOrResetRegExp(this.regexpUnescape, `${this.prefix}${this.unescapePrefix}(.+?)${this.unescapeSuffix}${this.suffix}`);
-    this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}(.+?)${this.nestingSuffix}`);
+    this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}((?:[^()"']+|"[^"]*"|'[^']*'|\\((?:[^()]|"[^"]*"|'[^']*')*\\))*?)${this.nestingSuffix}`);
   }
   interpolate(str, data, lng, options2) {
     let match2;
@@ -7319,17 +7319,24 @@ function BillingCreditBundleViewFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    billingInvoiceId: json["billing_invoice_id"] == null ? void 0 : json["billing_invoice_id"],
     bundleType: json["bundle_type"],
     createdAt: new Date(json["created_at"]),
+    creditDescription: json["credit_description"] == null ? void 0 : json["credit_description"],
+    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditId: json["credit_id"],
+    creditName: json["credit_name"],
     expiryType: json["expiry_type"],
     expiryUnit: json["expiry_unit"],
     expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     id: json["id"],
     name: json["name"],
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     price: json["price"] == null ? void 0 : BillingProductPriceResponseDataFromJSON(json["price"]),
     quantity: json["quantity"] == null ? void 0 : json["quantity"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     status: json["status"],
+    unitPrice: json["unit_price"] == null ? void 0 : BillingProductPriceResponseDataFromJSON(json["unit_price"]),
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -8190,6 +8197,32 @@ function FeatureDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/PlanCreditGrantView.ts
+function PlanCreditGrantViewFromJSON(json) {
+  return PlanCreditGrantViewFromJSONTyped(json, false);
+}
+function PlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    creditAmount: json["credit_amount"],
+    creditDescription: json["credit_description"],
+    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
+    creditId: json["credit_id"],
+    creditName: json["credit_name"],
+    id: json["id"],
+    planId: json["plan_id"],
+    planName: json["plan_name"],
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
+    resetCadence: json["reset_cadence"],
+    resetStart: json["reset_start"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/checkoutexternal/models/PlanResponseData.ts
 function PlanResponseDataFromJSON(json) {
   return PlanResponseDataFromJSONTyped(json, false);
@@ -8290,6 +8323,9 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    includedCreditGrants: json["included_credit_grants"].map(
+      PlanCreditGrantViewFromJSON
+    ),
     isCustom: json["is_custom"],
     isDefault: json["is_default"],
     isFree: json["is_free"],
@@ -8427,16 +8463,20 @@ function CreditCompanyGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     companyId: json["company_id"],
     companyName: json["company_name"],
     createdAt: new Date(json["created_at"]),
+    creditDescription: json["credit_description"],
+    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditName: json["credit_name"],
     expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
     grantReason: json["grant_reason"],
     id: json["id"],
     planId: json["plan_id"] == null ? void 0 : json["plan_id"],
     planName: json["plan_name"] == null ? void 0 : json["plan_name"],
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     price: json["price"] == null ? void 0 : BillingProductPriceResponseDataFromJSON(json["price"]),
     quantity: json["quantity"],
     quantityRemaining: json["quantity_remaining"],
     quantityUsed: json["quantity_used"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     sourceLabel: json["source_label"],
     updatedAt: new Date(json["updated_at"]),
     validFrom: json["valid_from"] == null ? void 0 : new Date(json["valid_from"]),
@@ -10188,7 +10228,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.1.3",
+      "X-Schematic-Components-Version": "1.1.4",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10592,8 +10632,8 @@ function useTrialEnd() {
     const end = typeof billingSubscription?.trialEnd === "number" ? new Date(billingSubscription.trialEnd * 1e3) : void 0;
     let formatted2;
     if (end) {
-      const today = /* @__PURE__ */ new Date();
-      const difference = end.getTime() - today.getTime();
+      const now = /* @__PURE__ */ new Date();
+      const difference = end.getTime() - now.getTime();
       let amount;
       let unit;
       if (difference >= DAYS_IN_MS) {
@@ -12335,8 +12375,8 @@ var Sidebar = ({
   const inEditMode = settings.mode === "edit";
   const hasPaymentMethod = typeof paymentMethod !== "undefined" || typeof paymentMethodId === "string";
   const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
-  const today = /* @__PURE__ */ new Date();
-  const trialEndsOn = new Date(today);
+  const now = /* @__PURE__ */ new Date();
+  const trialEndsOn = new Date(now);
   if (isSelectedPlanTrialable && selectedPlan.trialDays) {
     trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
   }
@@ -13138,7 +13178,7 @@ var PlanButtonGroup = ({
           children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: t2("Over usage limit") }),
+              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.") })
             }
           ) : t2("Start X day trial", { days: plan.trialDays })
@@ -13159,7 +13199,7 @@ var PlanButtonGroup = ({
           children: !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Tooltip,
             {
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: t2("Over usage limit") }),
+              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.") })
             }
           ) : t2("Choose plan")
@@ -13189,7 +13229,7 @@ var PlanButtonGroup = ({
       children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Tooltip,
         {
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: t2("Over usage limit") }),
+          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.") })
         }
       ) : t2("Choose plan")
@@ -14615,7 +14655,7 @@ var TieredPricingDetails = ({
       Y: formatCurrency(perUnitPrice, currency),
       unit: getFeatureName(entitlement.feature, 1),
       Z: formatCurrency(flatAmount, currency),
-      period: shortenPeriod(period)
+      period
     });
   }
 };
@@ -15016,7 +15056,8 @@ var UsageDetails = ({
     feature,
     priceBehavior,
     usage,
-    softLimit
+    softLimit,
+    metricResetAt
   } = entitlement;
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
@@ -15121,23 +15162,38 @@ var UsageDetails = ({
       );
       index += 1;
     }
-    if (acc) {
-      if (typeof cost === "number" && cost > 0) {
-        acc.push(
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
-            " \u2022 ",
-            formatCurrency(cost, currency)
-          ] }, index)
-        );
+    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 " }),
+          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: [
+          "/",
+          shortenPeriod(period)
+        ] }, index));
         index += 1;
-        if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
-          acc.push(/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
-            "/",
-            shortenPeriod(period)
-          ] }, index));
-          index += 1;
-        }
       }
+    }
+    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 " }),
+          t2("Resets", {
+            date: toPrettyDate(metricResetAt, {
+              month: "numeric",
+              day: "numeric",
+              year: void 0
+            })
+          })
+        ] }, index)
+      );
+      index += 1;
+    }
+    if (acc.length > 0) {
       return acc;
     }
     if (typeof usage === "number") {
@@ -15155,6 +15211,7 @@ var UsageDetails = ({
     priceBehavior,
     allocation,
     usage,
+    metricResetAt,
     billingPrice,
     cost
   ]);
@@ -15386,8 +15443,10 @@ function resolveDesignProps3(props) {
     }
   };
 }
-function formatInvoices(invoices) {
-  return (invoices || []).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
+function formatInvoices(invoices, options2) {
+  const { hideUpcoming = true } = options2 || {};
+  const now = /* @__PURE__ */ new Date();
+  return (invoices || []).filter(({ dueDate }) => !hideUpcoming || dueDate && +dueDate <= +now).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
     amount: formatCurrency(amountDue, currency),
     date: dueDate ? toPrettyDate(dueDate) : void 0,
     url: url || void 0
@@ -15648,7 +15707,7 @@ var Container2 = dt.div`
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t2 } = useTranslation();
-  const { feature, priceBehavior, usage, metricResetAt } = entitlement;
+  const { feature, priceBehavior, allocation, usage, metricResetAt } = entitlement;
   const { billingPrice, limit, cost, currentTier } = usageDetails;
   const acc = [];
   acc.push(
@@ -15659,15 +15718,15 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       feature: getFeatureName(feature)
     }) : priceBehavior === "overage" /* Overage */ && typeof limit === "number" ? t2("X included", {
       amount: formatNumber(limit)
-    }) : priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof usage === "number" ? `${formatNumber(usage)} ${t2("used")}` : priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof cost === "number" ? formatCurrency(cost, billingPrice?.currency) : typeof limit === "number" ? t2("Limit of", {
-      amount: formatNumber(limit)
+    }) : priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof usage === "number" ? `${formatNumber(usage)} ${t2("used")}` : priceBehavior === "pay_as_you_go" /* PayAsYouGo */ && typeof cost === "number" ? formatCurrency(cost, billingPrice?.currency) : typeof allocation === "number" ? t2("Limit of", {
+      amount: formatNumber(allocation)
     }) : t2("No limit")
   );
   if (metricResetAt) {
     acc.push(
       t2("Resets", {
         date: toPrettyDate(metricResetAt, {
-          month: "short",
+          month: "numeric",
           day: "numeric",
           year: void 0
         })
@@ -16060,9 +16119,9 @@ var PaymentMethod = (0, import_react45.forwardRef)(({ children, className, porta
       const paymentMethod2 = data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
       let monthsToExpiration2;
       if (typeof paymentMethod2?.cardExpYear === "number" && typeof paymentMethod2?.cardExpMonth === "number") {
-        const today = /* @__PURE__ */ new Date();
-        const currentYear = today.getFullYear();
-        const currentMonth = today.getMonth();
+        const now = /* @__PURE__ */ new Date();
+        const currentYear = now.getFullYear();
+        const currentMonth = now.getMonth();
         const timeToExpiration = Math.round(
           +new Date(paymentMethod2.cardExpYear, paymentMethod2.cardExpMonth - 1) - +new Date(currentYear, currentMonth)
         );
@@ -16136,7 +16195,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.6.1",
+    version: "7.8.0",
     startTime
   });
 };
@@ -16211,7 +16270,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.6.1", " 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("7.8.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);
@@ -16299,9 +16358,9 @@ var PaymentMethodDetails = ({
   const monthsToExpiration = (0, import_react46.useMemo)(() => {
     let expiration;
     if (typeof currentPaymentMethod?.cardExpYear === "number" && typeof currentPaymentMethod?.cardExpMonth === "number") {
-      const today = /* @__PURE__ */ new Date();
-      const currentYear = today.getFullYear();
-      const currentMonth = today.getMonth();
+      const now = /* @__PURE__ */ new Date();
+      const currentYear = now.getFullYear();
+      const currentMonth = now.getMonth();
       const timeToExpiration = Math.round(
         +new Date(
           currentPaymentMethod.cardExpYear,
@@ -17009,24 +17068,34 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                               rounded: true
                             }
                           ),
-                          entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $alignItems: "center", 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: [
-                            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: [
-                              formatNumber(entitlement.valueNumeric),
-                              " ",
-                              getFeatureName(
-                                entitlement.feature,
-                                entitlement.valueNumeric
-                              )
-                            ] }),
-                            metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-                              " ",
-                              t2("per"),
-                              " ",
-                              t2(metricPeriodName)
-                            ] })
-                          ] }) : entitlement.feature.name }) })
+                          /* @__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: [
+                              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: [
+                                formatNumber(entitlement.valueNumeric),
+                                " ",
+                                getFeatureName(
+                                  entitlement.feature,
+                                  entitlement.valueNumeric
+                                )
+                              ] }),
+                              metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                                " ",
+                                t2("per"),
+                                " ",
+                                t2(metricPeriodName)
+                              ] })
+                            ] }) : entitlement.feature.name }) }),
+                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime43.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
@@ -17106,85 +17175,95 @@ var Entitlement = ({
         rounded: true
       }
     ),
-    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $flexDirection: "column", $justifyContent: "center", $gap: "0.5rem", 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: [
-        formatCurrency(entitlementPrice, entitlementCurrency),
-        " ",
-        t2("per"),
-        " ",
-        entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.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.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: [
+          formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t2("per"),
           " ",
-          selectedPeriod
-        ] })
-      ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime44.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 === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
-          item: getFeatureName(entitlement.feature)
-        }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-          formatNumber(limit),
-          " ",
-          getFeatureName(entitlement.feature, limit)
-        ] }),
-        metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-          " ",
-          t2("per"),
-          " ",
-          t2(metricPeriodName)
-        ] })
-      ] }) : entitlement.feature.name }),
-      entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-        Text,
-        {
-          $size: 0.875 * settings.theme.typography.text.fontSize,
-          $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
-          children: [
-            t2("then"),
+          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+            entitlementPackageSize,
+            " "
+          ] }),
+          getFeatureName(entitlement.feature, entitlementPackageSize),
+          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
             " ",
-            formatCurrency(entitlementPrice, entitlementCurrency),
-            "/",
-            entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-              entitlementPackageSize,
-              " "
-            ] }),
-            getFeatureName(entitlement.feature, entitlementPackageSize),
-            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-              "/",
-              shortenPeriod(selectedPeriod)
-            ] })
-          ]
-        }
-      ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $alignItems: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          PricingTiersTooltip,
+            t2("per"),
+            " ",
+            selectedPeriod
+          ] })
+        ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          TieredPricingDetails,
           {
-            feature: entitlement.feature,
-            period: selectedPeriod,
-            currency: entitlementCurrency,
-            priceTiers: entitlementPriceTiers
+            entitlement,
+            period: selectedPeriod
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        ) : 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 */ && !entitlement.priceBehavior ? t2("Unlimited", {
+            item: getFeatureName(entitlement.feature)
+          }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+            formatNumber(limit),
+            " ",
+            getFeatureName(entitlement.feature, limit)
+          ] }),
+          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+            " ",
+            t2("per"),
+            " ",
+            t2(metricPeriodName)
+          ] })
+        ] }) : entitlement.feature.name }),
+        entitlement.priceBehavior === "overage" /* Overage */ && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           Text,
           {
-            style: { opacity: 0.54 },
             $size: 0.875 * settings.theme.typography.text.fontSize,
-            $color: settings.theme.typography.text.color,
-            children: t2("Tier-based")
+            $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
+            children: [
+              t2("then"),
+              " ",
+              formatCurrency(entitlementPrice, entitlementCurrency),
+              "/",
+              entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+                entitlementPackageSize,
+                " "
+              ] }),
+              getFeatureName(entitlement.feature, entitlementPackageSize),
+              entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+                "/",
+                shortenPeriod(selectedPeriod)
+              ] })
+            ]
           }
-        )
-      ] })
+        ) : entitlement.priceBehavior === "tier" /* Tiered */ && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex, { $alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            PricingTiersTooltip,
+            {
+              feature: entitlement.feature,
+              period: selectedPeriod,
+              currency: entitlementCurrency,
+              priceTiers: entitlementPriceTiers
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            Text,
+            {
+              style: { opacity: 0.54 },
+              $size: 0.875 * settings.theme.typography.text.fontSize,
+              $color: settings.theme.typography.text.color,
+              children: t2("Tier-based")
+            }
+          )
+        ] })
+      ] }),
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime44.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
+        }
+      )
     ] })
   ] });
 };
@@ -17200,7 +17279,7 @@ var Plan2 = ({
   entitlementCounts,
   handleToggleShowAll
 }) => {
-  const { layout, callToActionUrl, onCallToAction } = sharedProps;
+  const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
@@ -17232,9 +17311,24 @@ var Plan2 = ({
       isTrialSubscription: false,
       willSubscriptionCancel: false,
       isStandalone: true,
-      showCallToAction: typeof callToActionUrl === "string"
+      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function"
     };
-  }, [data, callToActionUrl]);
+  }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
+  const callToActionTarget = (0, import_react50.useMemo)(() => {
+    if (sharedProps.callToActionTarget) {
+      return sharedProps.callToActionTarget;
+    }
+    if (sharedProps.callToActionUrl) {
+      try {
+        const ctaUrlOrigin = new URL(sharedProps.callToActionUrl).origin;
+        if (ctaUrlOrigin === window.location.hostname) {
+          return "_self";
+        }
+      } catch {
+      }
+    }
+    return "_blank";
+  }, [sharedProps.callToActionUrl, sharedProps.callToActionTarget]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   const currentPlanIndex = plans.findIndex(
     (plan2) => isHydratedPlan(plan2) && plan2.current
@@ -17333,7 +17427,7 @@ var Plan2 = ({
                   Entitlement,
                   {
                     entitlement,
-                    sharedProps: { layout, callToActionUrl, onCallToAction },
+                    sharedProps: { layout },
                     selectedPeriod
                   },
                   idx
@@ -17411,14 +17505,14 @@ var Plan2 = ({
                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                     target: "_blank",
                     rel: "noreferrer"
-                  } : callToActionUrl ? {
+                  } : sharedProps.callToActionUrl ? {
                     as: "a",
-                    href: callToActionUrl,
-                    target: "_blank",
+                    href: sharedProps.callToActionUrl,
+                    target: callToActionTarget,
                     rel: "noreferrer"
                   } : {
                     onClick: () => {
-                      onCallToAction?.(plan);
+                      sharedProps.onCallToAction?.(plan);
                       if (!isStandalone && isHydratedPlan(plan) && !plan.custom) {
                         setCheckoutState({
                           period: selectedPeriod,
@@ -17432,7 +17526,7 @@ var Plan2 = ({
                   children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     Tooltip,
                     {
-                      trigger: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { children: t2("Over usage limit") }),
+                      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.") })
                     }
                   ) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
@@ -17467,12 +17561,14 @@ var resolveDesignProps8 = (props) => {
       },
       showInclusionText: props.plans?.showInclusionText ?? true,
       showFeatureIcons: props.plans?.showFeatureIcons ?? true,
+      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? true,
       showEntitlements: props.plans?.showEntitlements ?? true
     },
     addOns: {
       isVisible: props.addOns?.isVisible ?? true,
       showDescription: props.addOns?.showDescription ?? true,
       showFeatureIcons: props.addOns?.showFeatureIcons ?? true,
+      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? true,
       showEntitlements: props.addOns?.showEntitlements ?? true
     },
     upgrade: {
@@ -17487,181 +17583,183 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react51.forwardRef)(({ className, callToActionUrl, onCallToAction, ...rest }, ref) => {
-  const props = resolveDesignProps8(rest);
-  const { t: t2 } = useTranslation();
-  const { data, settings, hydratePublic } = useEmbed();
-  const { currentPeriod, isStandalone } = (0, import_react51.useMemo)(() => {
-    if (isCheckoutData(data)) {
-      const billingSubscription = data.company?.billingSubscription;
-      const isTrialSubscription = billingSubscription?.status === "trialing";
-      const willSubscriptionCancel = billingSubscription?.cancelAt;
-      return {
-        currentPeriod: data.company?.plan?.planPeriod || "month",
-        currentAddOns: data.company?.addOns || [],
-        canCheckout: data.capabilities?.checkout ?? true,
-        isTrialSubscription,
-        willSubscriptionCancel,
-        isStandalone: false,
-        showCallToAction: true
-      };
-    }
-    return {
-      currentPeriod: "month",
-      currentAddOns: [],
-      canCheckout: true,
-      isTrialSubscription: false,
-      willSubscriptionCancel: false,
-      isStandalone: true,
-      showCallToAction: typeof callToActionUrl === "string"
-    };
-  }, [data, callToActionUrl]);
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react51.useState)(currentPeriod);
-  const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react51.useState)(
-    () => plans.reduce(entitlementCountsReducer, {})
-  );
-  const handleToggleShowAll = (id) => {
-    setEntitlementCounts((prev2) => {
-      const count = prev2[id] ? { ...prev2[id] } : void 0;
-      if (count) {
+var PricingTable = (0, import_react51.forwardRef)(
+  ({ className, callToActionUrl, callToActionTarget, onCallToAction, ...rest }, ref) => {
+    const props = resolveDesignProps8(rest);
+    const { t: t2 } = useTranslation();
+    const { data, settings, hydratePublic } = useEmbed();
+    const { currentPeriod, isStandalone } = (0, import_react51.useMemo)(() => {
+      if (isCheckoutData(data)) {
+        const billingSubscription = data.company?.billingSubscription;
+        const isTrialSubscription = billingSubscription?.status === "trialing";
+        const willSubscriptionCancel = billingSubscription?.cancelAt;
         return {
-          ...prev2,
-          [id]: {
-            size: count.size,
-            limit: count.limit > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : count.size
-          }
+          currentPeriod: data.company?.plan?.planPeriod || "month",
+          currentAddOns: data.company?.addOns || [],
+          canCheckout: data.capabilities?.checkout ?? true,
+          isTrialSubscription,
+          willSubscriptionCancel,
+          isStandalone: false
         };
       }
-      return prev2;
-    });
-  };
-  (0, import_react51.useEffect)(() => {
-    if (isStandalone) {
-      hydratePublic();
-    }
-  }, [isStandalone, hydratePublic]);
-  (0, import_react51.useEffect)(() => {
-    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)(
-    FussyChild,
-    {
-      ref,
-      className: `sch-PricingTable ${className}`,
-      as: Flex,
-      $flexDirection: "column",
-      $gap: "2rem",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-            Flex,
-            {
-              $flexDirection: "column",
-              $justifyContent: "center",
-              $alignItems: "center",
-              $gap: "1rem",
-              $marginBottom: "1rem",
-              $viewport: {
-                md: {
-                  $flexDirection: "row",
-                  $justifyContent: "space-between"
-                }
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      return {
+        currentPeriod: "month",
+        currentAddOns: [],
+        canCheckout: true,
+        isTrialSubscription: false,
+        willSubscriptionCancel: false,
+        isStandalone: true
+      };
+    }, [data]);
+    const [selectedPeriod, setSelectedPeriod] = (0, import_react51.useState)(currentPeriod);
+    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
+    const [entitlementCounts, setEntitlementCounts] = (0, import_react51.useState)(
+      () => plans.reduce(entitlementCountsReducer, {})
+    );
+    const handleToggleShowAll = (id) => {
+      setEntitlementCounts((prev2) => {
+        const count = prev2[id] ? { ...prev2[id] } : void 0;
+        if (count) {
+          return {
+            ...prev2,
+            [id]: {
+              size: count.size,
+              limit: count.limit > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : count.size
+            }
+          };
+        }
+        return prev2;
+      });
+    };
+    (0, import_react51.useEffect)(() => {
+      if (isStandalone) {
+        hydratePublic();
+      }
+    }, [isStandalone, hydratePublic]);
+    (0, import_react51.useEffect)(() => {
+      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)(
+      FussyChild,
+      {
+        ref,
+        className: `sch-PricingTable ${className}`,
+        as: Flex,
+        $flexDirection: "column",
+        $gap: "2rem",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+              Flex,
+              {
+                $flexDirection: "column",
+                $justifyContent: "center",
+                $alignItems: "center",
+                $gap: "1rem",
+                $marginBottom: "1rem",
+                $viewport: {
+                  md: {
+                    $flexDirection: "row",
+                    $justifyContent: "space-between"
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    Text,
+                    {
+                      display: props.header.fontStyle,
+                      $color: settings.theme.card.background,
+                      children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
+                    }
+                  ),
+                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    PeriodToggle,
+                    {
+                      options: periods,
+                      selectedOption: selectedPeriod,
+                      onSelect: (period) => {
+                        if (period !== selectedPeriod) {
+                          setSelectedPeriod(period);
+                        }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.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)(
+                  Plan2,
+                  {
+                    plan,
+                    index,
+                    sharedProps: {
+                      layout: props,
+                      callToActionUrl,
+                      callToActionTarget,
+                      onCallToAction
+                    },
+                    plans: self2,
+                    selectedPeriod,
+                    entitlementCounts,
+                    handleToggleShowAll
+                  },
+                  index
+                ))
+              }
+            )
+          ] }),
+          /* @__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)(
+              Flex,
+              {
+                $justifyContent: "space-between",
+                $alignItems: "center",
+                $marginBottom: "1rem",
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   Text,
                   {
                     display: props.header.fontStyle,
                     $color: settings.theme.card.background,
-                    children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
-                  }
-                ),
-                props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                  PeriodToggle,
-                  {
-                    options: periods,
-                    selectedOption: selectedPeriod,
-                    onSelect: (period) => {
-                      if (period !== selectedPeriod) {
-                        setSelectedPeriod(period);
-                      }
-                    }
+                    children: t2("Add-ons")
                   }
                 )
-              ]
-            }
-          ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.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)(
-                Plan2,
-                {
-                  plan,
-                  index,
-                  sharedProps: {
-                    layout: props,
-                    callToActionUrl,
-                    onCallToAction
-                  },
-                  plans: self2,
-                  selectedPeriod,
-                  entitlementCounts,
-                  handleToggleShowAll
-                },
-                index
-              ))
-            }
-          )
-        ] }),
-        /* @__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)(
-            Flex,
-            {
-              $justifyContent: "space-between",
-              $alignItems: "center",
-              $marginBottom: "1rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                Text,
-                {
-                  display: props.header.fontStyle,
-                  $color: settings.theme.card.background,
-                  children: t2("Add-ons")
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            Box,
-            {
-              $display: "grid",
-              $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
-              $gap: "1rem",
-              children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                AddOn2,
-                {
-                  addOn,
-                  sharedProps: {
-                    layout: props,
-                    callToActionUrl,
-                    onCallToAction
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              Box,
+              {
+                $display: "grid",
+                $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+                $gap: "1rem",
+                children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  AddOn2,
+                  {
+                    addOn,
+                    sharedProps: {
+                      layout: props,
+                      callToActionUrl,
+                      callToActionTarget,
+                      onCallToAction
+                    },
+                    selectedPeriod
                   },
-                  selectedPeriod
-                },
-                index
-              ))
-            }
-          )
-        ] }) })
-      ]
-    }
-  ) });
-});
+                  index
+                ))
+              }
+            )
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx