@schematichq/schematic-components 2.11.0 → 2.12.0

package/dist/schematic-components.esm.js

@@ -5006,6 +5006,7 @@ var en_default = {
     Loading: "Loading",
     "Manage plan": "Manage plan",
     "Monthly total": "Monthly total",
+    "Quarterly total": "Quarterly total",
     Next: "Next",
     "No invoices created yet": "No invoices created yet",
     "No limit": "No limit",
@@ -5038,6 +5039,8 @@ var en_default = {
     "Save payment method": "Save payment method",
     "Save with yearly billing": "Save up to {{percent}}% with yearly billing",
     "Saving with yearly billing": "You are saving {{percent}}% with yearly billing",
+    "Save with quarterly billing": "Save up to {{percent}}% with quarterly billing",
+    "Saving with quarterly billing": "You are saving {{percent}}% with quarterly billing",
     "See all": "See all",
     "See balance details": "See balance details",
     "See less": "See less",
@@ -5111,6 +5114,7 @@ var en_default = {
     "$X/Y units/period": "{{cost}}/{{size}} {{units}}/{{period}}",
     day: "day",
     month: "month",
+    quarter: "quarter",
     year: "year",
     "one time": "one time",
     "billing period": "billing period",
@@ -5119,6 +5123,7 @@ var en_default = {
     use: "use",
     used: "used",
     "month, billed yearly": "month, billed yearly",
+    "month, billed quarterly": "month, billed quarterly",
     purchased: "purchased {{date}}",
     usage: {
       limited: "{{amount}} of {{allocation}} used",
@@ -7849,6 +7854,7 @@ function BillingProductPriceResponseDataFromJSONTyped(json, ignoreDiscriminator)
     currency: json["currency"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON(json["interval"]),
+    intervalCount: json["interval_count"],
     isActive: json["is_active"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     nickname: json["nickname"] == null ? void 0 : json["nickname"],
@@ -7894,6 +7900,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON(json["interval"]),
+    intervalCount: json["interval_count"],
     isActive: json["is_active"],
     meterEventName: json["meter_event_name"] == null ? void 0 : json["meter_event_name"],
     meterEventPayloadKey: json["meter_event_payload_key"] == null ? void 0 : json["meter_event_payload_key"],
@@ -8017,6 +8024,7 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     externalPriceId: json["external_price_id"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON(json["interval"]),
+    intervalCount: json["interval_count"],
     nickname: json["nickname"] == null ? void 0 : json["nickname"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -8305,6 +8313,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     externalId: json["external_id"],
     id: json["id"],
     interval: json["interval"],
+    intervalCount: json["interval_count"] == null ? void 0 : json["interval_count"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     name: json["name"],
     packageSize: json["package_size"],
@@ -9295,6 +9304,7 @@ function EntitlementCurrencyPricesResponseDataFromJSONTyped(json, ignoreDiscrimi
   return {
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["yearly_price"])
   };
 }
@@ -9375,6 +9385,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     featureId: json["feature_id"],
     id: json["id"],
     meteredMonthlyPrice: json["metered_monthly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_monthly_price"]),
+    meteredQuarterlyPrice: json["metered_quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_quarterly_price"]),
     meteredYearlyPrice: json["metered_yearly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_yearly_price"]),
     metricPeriod: json["metric_period"] == null ? void 0 : MetricPeriodFromJSON(json["metric_period"]),
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : MetricPeriodMonthResetFromJSON(json["metric_period_month_reset"]),
@@ -9649,6 +9660,7 @@ function PlanCurrencyPricesResponseDataFromJSONTyped(json, ignoreDiscriminator)
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["yearly_price"])
   };
 }
@@ -9766,6 +9778,7 @@ function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
     planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
     priceBehavior: json["price_behavior"] == null ? void 0 : EntitlementPriceBehaviorFromJSON(json["price_behavior"]),
+    quarterlyUsageBasedPrice: json["quarterly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["quarterly_usage_based_price"]),
     softLimit: json["soft_limit"] == null ? void 0 : json["soft_limit"],
     usage: json["usage"] == null ? void 0 : json["usage"],
     yearlyUsageBasedPrice: json["yearly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["yearly_usage_based_price"])
@@ -9824,6 +9837,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     name: json["name"],
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
     planType: PlanTypeFromJSON(json["plan_type"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["quarterly_price"]),
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
     usageViolations: json["usage_violations"].map(
@@ -9980,6 +9994,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     name: json["name"],
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
     planType: PlanTypeFromJSON(json["plan_type"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["quarterly_price"]),
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
     versions: json["versions"].map(
@@ -10084,6 +10099,7 @@ function UsageBasedEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminato
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : MetricPeriodMonthResetFromJSON(json["metric_period_month_reset"]),
     monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
     priceBehavior: json["price_behavior"] == null ? void 0 : EntitlementPriceBehaviorFromJSON(json["price_behavior"]),
+    quarterlyUsageBasedPrice: json["quarterly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["quarterly_usage_based_price"]),
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
     valueType: EntitlementValueTypeFromJSON(json["value_type"]),
@@ -11233,6 +11249,7 @@ function BillingPriceResponseDataFromJSONTyped9(json, ignoreDiscriminator) {
     externalPriceId: json["external_price_id"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON2(json["interval"]),
+    intervalCount: json["interval_count"],
     nickname: json["nickname"] == null ? void 0 : json["nickname"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -11368,6 +11385,7 @@ function BillingPriceViewFromJSONTyped9(json, ignoreDiscriminator) {
     currency: json["currency"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON2(json["interval"]),
+    intervalCount: json["interval_count"],
     isActive: json["is_active"],
     meterEventName: json["meter_event_name"] == null ? void 0 : json["meter_event_name"],
     meterEventPayloadKey: json["meter_event_payload_key"] == null ? void 0 : json["meter_event_payload_key"],
@@ -11655,6 +11673,7 @@ function EntitlementCurrencyPricesResponseDataFromJSONTyped3(json, ignoreDiscrim
   return {
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["monthly_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["yearly_price"])
   };
 }
@@ -12002,6 +12021,7 @@ function PlanEntitlementResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
     featureId: json["feature_id"],
     id: json["id"],
     meteredMonthlyPrice: json["metered_monthly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["metered_monthly_price"]),
+    meteredQuarterlyPrice: json["metered_quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["metered_quarterly_price"]),
     meteredYearlyPrice: json["metered_yearly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["metered_yearly_price"]),
     metricPeriod: json["metric_period"] == null ? void 0 : MetricPeriodFromJSON2(json["metric_period"]),
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : MetricPeriodMonthResetFromJSON2(json["metric_period_month_reset"]),
@@ -12079,6 +12099,7 @@ function PlanCurrencyPricesResponseDataFromJSONTyped5(json, ignoreDiscriminator)
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["monthly_price"]),
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["one_time_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["yearly_price"])
   };
 }
@@ -12163,6 +12184,7 @@ function PlanViewPublicResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     name: json["name"],
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["one_time_price"]),
     planType: PlanTypeFromJSON2(json["plan_type"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["quarterly_price"]),
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
     versions: json["versions"].map(
@@ -12250,6 +12272,24 @@ var ComponentspublicApi = class extends BaseAPI2 {
 };
 
 // src/utils/api/billing.ts
+function derivePeriod(interval, intervalCount) {
+  if (!interval) {
+    return void 0;
+  }
+  if (interval === "month" && intervalCount === 3) {
+    return "quarter";
+  }
+  return interval;
+}
+function getSubscriptionPeriod(billingSubscription) {
+  if (!billingSubscription) {
+    return void 0;
+  }
+  const product = billingSubscription.products?.find(
+    (p3) => p3.interval && p3.interval !== "one-time"
+  );
+  return derivePeriod(product?.interval, product?.intervalCount) ?? derivePeriod(billingSubscription.interval);
+}
 var ChargeType = {
   oneTime: "one_time",
   recurring: "recurring",
@@ -12259,19 +12299,32 @@ function getPriceValue(billingPrice) {
   const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return price;
 }
+function selectPriceForPeriod(source, period) {
+  switch (period) {
+    case "year":
+      return source.yearlyPrice;
+    case "quarter":
+      return source.quarterlyPrice;
+    default:
+      return source.monthlyPrice;
+  }
+}
+function selectAvailablePrice(source) {
+  return source.monthlyPrice ?? source.quarterlyPrice ?? source.yearlyPrice;
+}
 function getPlanPrice(plan, period = "month", options = { useSelectedPeriod: true }, currency) {
   if (currency && plan.currencyPrices?.length) {
     const currencyPrice = plan.currencyPrices.find(
       (cp) => cp.currency.toLowerCase() === currency.toLowerCase()
     );
     if (currencyPrice) {
-      const billingPrice2 = options.useSelectedPeriod ? period === "year" ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice : currencyPrice.yearlyPrice && !currencyPrice.monthlyPrice ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice;
+      const billingPrice2 = options.useSelectedPeriod ? selectPriceForPeriod(currencyPrice, period) : selectAvailablePrice(currencyPrice);
       if (billingPrice2) {
         return { ...billingPrice2, price: getPriceValue(billingPrice2) };
       }
     }
   }
-  const billingPrice = options.useSelectedPeriod ? period === "year" ? plan.yearlyPrice : plan.monthlyPrice : plan.yearlyPrice && !plan.monthlyPrice ? plan.yearlyPrice : plan.monthlyPrice;
+  const billingPrice = options.useSelectedPeriod ? selectPriceForPeriod(plan, period) : selectAvailablePrice(plan);
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -12282,13 +12335,13 @@ function getAddOnPrice(addOn, period = "month", currency) {
       (cp) => cp.currency.toLowerCase() === currency.toLowerCase()
     );
     if (currencyPrice) {
-      const billingPrice2 = addOn.chargeType === ChargeType.oneTime ? currencyPrice.oneTimePrice : period === "year" ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice;
+      const billingPrice2 = addOn.chargeType === ChargeType.oneTime ? currencyPrice.oneTimePrice : selectPriceForPeriod(currencyPrice, period);
       if (billingPrice2) {
         return { ...billingPrice2, price: getPriceValue(billingPrice2) };
       }
     }
   }
-  const billingPrice = addOn.chargeType === ChargeType.oneTime ? addOn.oneTimePrice : period === "year" ? addOn.yearlyPrice : addOn.monthlyPrice;
+  const billingPrice = addOn.chargeType === ChargeType.oneTime ? addOn.oneTimePrice : selectPriceForPeriod(addOn, period);
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -12312,14 +12365,28 @@ function getEntitlementPrice(entitlement, period = "month", currency) {
       (cp) => cp.currency.toLowerCase() === currency.toLowerCase()
     );
     if (currencyPrice) {
-      source = period === "year" ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice;
+      source = selectPriceForPeriod(currencyPrice, period);
     }
   }
   if (!source) {
     if ("valueType" in entitlement) {
-      source = period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice;
+      source = selectPriceForPeriod(
+        {
+          monthlyPrice: entitlement.meteredMonthlyPrice,
+          quarterlyPrice: entitlement.meteredQuarterlyPrice,
+          yearlyPrice: entitlement.meteredYearlyPrice
+        },
+        period
+      );
     } else if ("entitlementType" in entitlement) {
-      source = period === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice;
+      source = selectPriceForPeriod(
+        {
+          monthlyPrice: entitlement.monthlyUsageBasedPrice,
+          quarterlyPrice: entitlement.quarterlyUsageBasedPrice,
+          yearlyPrice: entitlement.yearlyUsageBasedPrice
+        },
+        period
+      );
     }
   }
   if (source) {
@@ -12371,7 +12438,15 @@ function calculateTieredCost(quantity, priceTiers, tiersMode) {
   return cost;
 }
 function getEntitlementCost(entitlement, period = "month", currency) {
-  const source = currency ? getEntitlementPrice(entitlement, period ?? "month", currency) : period === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice;
+  const resolvedPeriod = period ?? "month";
+  const source = currency ? getEntitlementPrice(entitlement, resolvedPeriod, currency) : selectPriceForPeriod(
+    {
+      monthlyPrice: entitlement.monthlyUsageBasedPrice,
+      quarterlyPrice: entitlement.quarterlyUsageBasedPrice,
+      yearlyPrice: entitlement.yearlyUsageBasedPrice
+    },
+    resolvedPeriod
+  );
   if (source) {
     const billingPrice = { ...source };
     if (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && typeof entitlement.allocation === "number" && entitlement.allocation > 0) {
@@ -12632,7 +12707,7 @@ function getMetricPeriodName(entitlement) {
   return name;
 }
 function getUsageDetails(entitlement, period, currency) {
-  const billingPrice = currency ? getEntitlementPrice(entitlement, period ?? "month", currency) : period === "year" ? entitlement.yearlyUsageBasedPrice : period === "month" ? entitlement.monthlyUsageBasedPrice : void 0;
+  const billingPrice = currency ? getEntitlementPrice(entitlement, period ?? "month", currency) : period === "year" ? entitlement.yearlyUsageBasedPrice : period === "quarter" ? entitlement.quarterlyUsageBasedPrice : period === "month" ? entitlement.monthlyUsageBasedPrice : void 0;
   let limit;
   if ((!entitlement.priceBehavior || entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance) && typeof entitlement.allocation === "number") {
     limit = entitlement.allocation;
@@ -12694,7 +12769,7 @@ function getCreditBasedEntitlementLimit(entitlement, credits) {
 }
 function extractCurrentUsageBasedEntitlements(features = [], planPeriod) {
   return features.reduce((acc, entitlement) => {
-    if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
+    if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "quarter" && entitlement.quarterlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
       const allocation = entitlement.allocation || 0;
       const usage = entitlement.usage || 0;
       const quantity = allocation ?? usage;
@@ -13216,6 +13291,8 @@ function shortenPeriod(period) {
   switch (period) {
     case "month":
       return "mo";
+    case "quarter":
+      return "qtr";
     case "year":
       return "yr";
   }
@@ -13603,7 +13680,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.11.0",
+  "X-Schematic-Components-Version": "2.12.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -14139,6 +14216,9 @@ function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true })
     if ((data?.activePlans || []).some((plan) => plan.monthlyPrice) || (data?.activeAddOns || []).some((addOn) => addOn.monthlyPrice)) {
       periods.push("month");
     }
+    if ((data?.activePlans || []).some((plan) => plan.quarterlyPrice) || (data?.activeAddOns || []).some((addOn) => addOn.quarterlyPrice)) {
+      periods.push("quarter");
+    }
     if ((data?.activePlans || []).some((plan) => plan.yearlyPrice) || (data?.activeAddOns || []).some((addOn) => addOn.yearlyPrice)) {
       periods.push("year");
     }
@@ -14148,9 +14228,9 @@ function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true })
     (plans) => {
       const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter((plan) => {
         if (options.useSelectedPeriod) {
-          return activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+          return activePeriod === "month" && plan.monthlyPrice || activePeriod === "quarter" && plan.quarterlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
         }
-        return plan.monthlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+        return plan.monthlyPrice || plan.quarterlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
       });
       return activePlans.map((plan) => ({ ...plan, isSelected: false }));
     },
@@ -16139,7 +16219,7 @@ var Plan = ({
       $gap: "1rem",
       $flexGrow: 1,
       children: plans.map((plan, planIndex) => {
-        const planPeriod = showPeriodToggle ? period : plan.yearlyPrice && !plan.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+        const planPeriod = showPeriodToggle ? period : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
         const { price: planPrice, currency: planCurrency } = getPlanPrice(
           plan,
           planPeriod,
@@ -16198,6 +16278,9 @@ var Plan = ({
                           children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t3("Custom price") : isUsageBasedPlan ? t3("Usage-based") : isFreePlan && showZeroPriceAsFree ? t3("Free") : showAsMonthlyPrices && planPeriod === BillingProductPriceInterval.Year ? formatCurrency((planPrice ?? 0) / 12, {
                             currency: planCurrency,
                             testSignificantDigits: false
+                          }) : showAsMonthlyPrices && planPeriod === "quarter" ? formatCurrency((planPrice ?? 0) / 3, {
+                            currency: planCurrency,
+                            testSignificantDigits: false
                           }) : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
@@ -16208,7 +16291,7 @@ var Plan = ({
                           $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
                           children: [
                             "/",
-                            showAsMonthlyPrices && planPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : t3(planPeriod)
+                            showAsMonthlyPrices && planPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : showAsMonthlyPrices && planPeriod === "quarter" ? t3("month, billed quarterly") : t3(planPeriod)
                           ]
                         }
                       )
@@ -16744,7 +16827,7 @@ var AddOns = ({
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
+  const periodKey = period === "year" ? "yearlyPrice" : period === "quarter" ? "quarterlyPrice" : "monthlyPrice";
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ jsx20(
     Box,
@@ -17224,9 +17307,9 @@ var Navigation = ({
 import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
   const hasCurrencyPrice = entitlement.currencyPrices?.some(
-    (cp) => period === "month" && cp.monthlyPrice || period === "year" && cp.yearlyPrice
+    (cp) => period === "month" && cp.monthlyPrice || period === "quarter" && cp.quarterlyPrice || period === "year" && cp.yearlyPrice
   );
-  if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice || hasCurrencyPrice)) {
+  if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "quarter" && entitlement.meteredQuarterlyPrice || period === "year" && entitlement.meteredYearlyPrice || hasCurrencyPrice)) {
     const featureUsage = entitlements.find(
       (usage2) => usage2.feature?.id === entitlement.feature?.id
     );
@@ -17286,15 +17369,16 @@ var CheckoutDialog = ({ top }) => {
     [data?.featureUsage?.features]
   );
   const getValidatedPeriod = () => {
-    const requestedPeriod = checkoutState?.period || data?.company?.plan?.planPeriod || "month";
+    const requestedPeriod = checkoutState?.period || getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month";
     if (checkoutState?.planId) {
       const requestedPlan = data?.activePlans?.find(
         (plan) => plan.id === checkoutState.planId
       );
       if (requestedPlan) {
-        const planSupportsRequestedPeriod = requestedPeriod === "month" && requestedPlan.monthlyPrice || requestedPeriod === "year" && requestedPlan.yearlyPrice;
+        const planSupportsRequestedPeriod = requestedPeriod === "month" && requestedPlan.monthlyPrice || requestedPeriod === "quarter" && requestedPlan.quarterlyPrice || requestedPeriod === "year" && requestedPlan.yearlyPrice;
         if (!planSupportsRequestedPeriod) {
           if (requestedPlan.yearlyPrice) return "year";
+          if (requestedPlan.quarterlyPrice) return "quarter";
           if (requestedPlan.monthlyPrice) return "month";
         }
       }
@@ -17611,7 +17695,7 @@ var CheckoutDialog = ({ top }) => {
         { useSelectedPeriod: true },
         resolvedCurrency
       ) : void 0;
-      const planPriceId = currencyPrice?.id ?? (period === "year" ? plan?.yearlyPrice?.id : plan?.monthlyPrice?.id);
+      const planPriceId = currencyPrice?.id ?? (period === "year" ? plan?.yearlyPrice?.id : period === "quarter" ? plan?.quarterlyPrice?.id : plan?.monthlyPrice?.id);
       const code = typeof updates.promoCode !== "undefined" ? updates.promoCode : promoCode;
       const skipTrial = !(updates.shouldTrial ?? shouldTrial);
       if (!plan || !planPriceId) {
@@ -17737,7 +17821,7 @@ var CheckoutDialog = ({ top }) => {
   const selectPlan = useCallback7(
     (updates) => {
       const plan = updates.plan;
-      const period = showPeriodToggle ? updates.period || planPeriod : plan.yearlyPrice && !plan.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+      const period = showPeriodToggle ? updates.period || planPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
       const updatedUsageBasedEntitlements = plan.entitlements.reduce(
         createActiveUsageBasedEntitlementsReducer(featureUsage, period),
         []
@@ -17795,12 +17879,60 @@ var CheckoutDialog = ({ top }) => {
   );
   const changePlanPeriod = useCallback7(
     (period) => {
-      if (period !== planPeriod) {
-        setPlanPeriod(period);
-        handlePreviewCheckout({ period });
+      if (period === planPeriod) {
+        return;
       }
+      setPlanPeriod(period);
+      const updatedUsageBasedEntitlements = (selectedPlan?.entitlements || []).reduce(
+        createActiveUsageBasedEntitlementsReducer(featureUsage, period),
+        [...[]]
+      );
+      setUsageBasedEntitlements(
+        (prev2) => updatedUsageBasedEntitlements.map((updated) => {
+          const current = prev2.find(
+            ({ featureId }) => featureId === updated.featureId
+          );
+          if (typeof current?.quantity === "number") {
+            return { ...updated, quantity: current.quantity };
+          }
+          return updated;
+        })
+      );
+      const updatedAddOnUsageBasedEntitlements = addOns.filter((addOn) => addOn.isSelected).flatMap(
+        (addOn) => addOn.entitlements.reduce(
+          createActiveUsageBasedEntitlementsReducer(featureUsage, period),
+          []
+        )
+      );
+      setAddOnUsageBasedEntitlements(
+        (prev2) => updatedAddOnUsageBasedEntitlements.map((updated) => {
+          const current = prev2.find(
+            ({ featureId }) => featureId === updated.featureId
+          );
+          if (typeof current?.quantity === "number") {
+            return { ...updated, quantity: current.quantity };
+          }
+          return updated;
+        })
+      );
+      handlePreviewCheckout({
+        period,
+        payInAdvanceEntitlements: updatedUsageBasedEntitlements.filter(
+          ({ priceBehavior }) => priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        ),
+        addOnPayInAdvanceEntitlements: updatedAddOnUsageBasedEntitlements.filter(
+          ({ priceBehavior }) => priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        )
+      });
     },
-    [planPeriod, setPlanPeriod, handlePreviewCheckout]
+    [
+      planPeriod,
+      selectedPlan?.entitlements,
+      featureUsage,
+      addOns,
+      setPlanPeriod,
+      handlePreviewCheckout
+    ]
   );
   const toggleAddOn = useCallback7(
     (id) => {
@@ -18705,6 +18837,10 @@ var PaymentForm = ({ onConfirm, financeData }) => {
 // src/components/shared/period-toggle/PeriodToggle.tsx
 import { useMemo as useMemo13 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
+var PERIOD_MONTH_COUNT = {
+  year: 12,
+  quarter: 3
+};
 var PeriodToggle = ({
   portal,
   options,
@@ -18715,14 +18851,23 @@ var PeriodToggle = ({
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const savingsPercentage = useMemo13(() => {
-    if (selectedPlan) {
-      const monthlyBillingPrice = getPlanPrice(selectedPlan, "month");
-      const yearlyBillingPrice = getPlanPrice(selectedPlan, "year");
-      const monthly = (monthlyBillingPrice?.price ?? 0) * 12;
-      const yearly = yearlyBillingPrice?.price ?? 0;
-      return Math.round((monthly - yearly) / monthly * 1e4) / 100;
+  const savingsByPeriod = useMemo13(() => {
+    const result = {};
+    if (!selectedPlan) {
+      return result;
+    }
+    const monthlyPrice = getPlanPrice(selectedPlan, "month")?.price ?? 0;
+    if (monthlyPrice <= 0) {
+      return result;
     }
+    for (const [period, months] of Object.entries(PERIOD_MONTH_COUNT)) {
+      const periodPrice = getPlanPrice(selectedPlan, period)?.price ?? 0;
+      if (periodPrice > 0) {
+        const baseline = monthlyPrice * months;
+        result[period] = Math.round((baseline - periodPrice) / baseline * 1e4) / 100;
+      }
+    }
+    return result;
   }, [selectedPlan]);
   return /* @__PURE__ */ jsx30(
     Flex,
@@ -18776,17 +18921,21 @@ var PeriodToggle = ({
           },
           option
         );
-        if (option === "year" && typeof savingsPercentage === "number") {
+        const savingsPercentage = savingsByPeriod[option];
+        if (typeof savingsPercentage === "number") {
+          const isOptionYear = option === "year";
           return /* @__PURE__ */ jsx30(
             Tooltip,
             {
               portal,
               trigger: element,
-              content: /* @__PURE__ */ jsx30(Text, { $size: 11, $leading: "none", children: selectedOption === "month" ? t3("Save with yearly billing", {
-                percent: savingsPercentage
-              }) : t3("Saving with yearly billing", {
-                percent: savingsPercentage
-              }) }),
+              content: /* @__PURE__ */ jsx30(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
+                isOptionYear ? "Saving with yearly billing" : "Saving with quarterly billing",
+                { percent: savingsPercentage }
+              ) : t3(
+                isOptionYear ? "Save with yearly billing" : "Save with quarterly billing",
+                { percent: savingsPercentage }
+              ) }),
               $flexGrow: 1,
               $flexBasis: "50%"
             },
@@ -19739,7 +19888,7 @@ var SubscriptionSidebar = forwardRef7(
         { useSelectedPeriod: true },
         currency
       ) : void 0;
-      const planPriceId = currencyPrice?.id ?? (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
+      const planPriceId = currencyPrice?.id ?? (planPeriod === "year" ? selectedPlan?.yearlyPrice : planPeriod === "quarter" ? selectedPlan?.quarterlyPrice : selectedPlan?.monthlyPrice)?.id;
       try {
         if (!planId || !planPriceId) {
           throw new Error(t3("Selected plan or associated price is missing."));
@@ -20033,7 +20182,9 @@ var SubscriptionSidebar = forwardRef7(
                           ),
                           /* @__PURE__ */ jsxs26("sub", { children: [
                             "/",
-                            shortenPeriod(currentPlan.planPeriod || planPeriod)
+                            shortenPeriod(
+                              getSubscriptionPeriod(billingSubscription) || currentPlan.planPeriod || planPeriod
+                            )
                           ] })
                         ] }) })
                       ]
@@ -20416,7 +20567,7 @@ var SubscriptionSidebar = forwardRef7(
                     $gap: "1rem",
                     children: [
                       /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs26(Text, { children: [
-                        planPeriod === "year" ? t3("Yearly total") : t3("Monthly total"),
+                        planPeriod === "year" ? t3("Yearly total") : planPeriod === "quarter" ? t3("Quarterly total") : t3("Monthly total"),
                         ":"
                       ] }) }),
                       /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
@@ -20600,7 +20751,7 @@ var UnsubscribeDialog = ({ top }) => {
   const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = useMemo18(() => {
     const cancelDate2 = data?.subscription?.cancelAt || data?.upcomingInvoice?.dueDate;
     return {
-      planPeriod: data?.company?.plan?.planPeriod || "month",
+      planPeriod: getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month",
       currentPlan: data?.company?.plan,
       currentAddOns: data?.company?.addOns || [],
       featureUsage: data?.featureUsage,
@@ -20608,6 +20759,7 @@ var UnsubscribeDialog = ({ top }) => {
     };
   }, [
     data?.company?.addOns,
+    data?.company?.billingSubscription,
     data?.company?.plan,
     data?.featureUsage,
     data?.subscription?.cancelAt,
@@ -21033,7 +21185,7 @@ var UsageDetails = ({ entitlement, layout }) => {
   } = entitlement;
   const { t: t3 } = useTranslation();
   const { data } = useEmbed();
-  const period = data?.company?.plan?.planPeriod || void 0;
+  const period = getSubscriptionPeriod(data?.company?.billingSubscription) ?? data?.company?.plan?.planPeriod ?? void 0;
   const showCredits = data?.displaySettings?.showCredits ?? true;
   const {
     price,
@@ -21910,7 +22062,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  const period = typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
+  const period = getSubscriptionPeriod(data?.company?.billingSubscription) ?? (typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0);
   const canCheckout = data?.capabilities?.checkout ?? false;
   const showCredits = data?.displaySettings?.showCredits ?? true;
   return /* @__PURE__ */ jsxs35(Container2, { ref, className, children: [
@@ -22502,7 +22654,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.4.0",
+    version: "9.6.0",
     startTime
   });
 };
@@ -22580,7 +22732,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("9.4.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("9.6.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);
@@ -22963,7 +23115,8 @@ import { forwardRef as forwardRef14, useMemo as useMemo26 } from "react";
 
 // src/components/elements/plan-manager/AddOn.tsx
 import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
-var AddOn = ({ addOn, currency, layout }) => {
+var AddOn = ({ addOn, currency, period, layout }) => {
+  const resolvedPeriod = addOn.planPeriod === "one-time" ? addOn.planPeriod : period ?? addOn.planPeriod;
   return /* @__PURE__ */ jsxs38(
     Flex,
     {
@@ -22973,9 +23126,9 @@ var AddOn = ({ addOn, currency, layout }) => {
       $gap: "1rem",
       children: [
         /* @__PURE__ */ jsx52(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsxs38(Text, { children: [
+        typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ jsxs38(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ jsx52("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
+          /* @__PURE__ */ jsx52("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
         ] })
       ]
     }
@@ -23227,7 +23380,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
     willSubscriptionCancel,
     isTrialSubscription
   } = useMemo26(() => {
-    const subscriptionInterval2 = billingSubscription?.interval;
+    const subscriptionInterval2 = getSubscriptionPeriod(billingSubscription) ?? billingSubscription?.interval;
     const subscriptionCurrency2 = billingSubscription?.currency;
     const isTrialSubscription2 = billingSubscription?.status === "trialing";
     const willSubscriptionCancel2 = typeof billingSubscription?.cancelAt === "number" && billingSubscription?.cancelAtPeriodEnd === true;
@@ -23238,6 +23391,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
       willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
+  const currentPlanPeriod = getSubscriptionPeriod(billingSubscription) ?? currentPlan?.planPeriod ?? void 0;
   const { isFreePlan, isUsageBasedPlan } = useMemo26(() => {
     const isFreePlan2 = currentPlan?.planPrice === 0;
     const isUsageBasedPlan2 = isFreePlan2 && usageBasedEntitlements.length > 0;
@@ -23406,9 +23560,9 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isFreePlan && currentPlan?.planPeriod && /* @__PURE__ */ jsx54(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs40("sub", { children: [
+                  !isFreePlan && currentPlanPeriod && /* @__PURE__ */ jsx54(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs40("sub", { children: [
                     "/",
-                    shortenPeriod(currentPlan.planPeriod)
+                    shortenPeriod(currentPlanPeriod)
                   ] }) })
                 ] })
               ]
@@ -23428,6 +23582,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               {
                 addOn,
                 currency: subscriptionCurrency,
+                period: currentPlanPeriod,
                 layout: props
               },
               addOnIndex
@@ -23447,7 +23602,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 UsageDetails2,
                 {
                   entitlement,
-                  period: currentPlan?.planPeriod || "month",
+                  period: currentPlanPeriod || "month",
                   currency: subscriptionCurrency,
                   showCredits,
                   layout: props
@@ -23778,7 +23933,8 @@ var AddOn2 = ({
     };
   }, [data?.capabilities?.checkout, data?.company?.addOns, data?.component]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  const isActiveAddOn = addOn.current && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
+  const currentAddOnPeriod = getSubscriptionPeriod(data?.company?.billingSubscription) ?? currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
+  const isActiveAddOn = addOn.current && selectedPeriod === currentAddOnPeriod;
   const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod, currency) || {};
   const displayableEntitlements = addOn.entitlements?.filter(
     (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && entitlement.priceBehavior !== EntitlementPriceBehavior.CreditBurndown
@@ -24238,7 +24394,7 @@ var Plan2 = ({
   };
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   const isStandalone = typeof data?.component === "undefined";
-  const currentPeriod = data?.company?.plan?.planPeriod || "month";
+  const currentPeriod = getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month";
   const canCheckout = isStandalone || (data?.capabilities?.checkout ?? true);
   const isTrialSubscription = data?.company?.billingSubscription?.status === "trialing";
   const showCredits = data?.displaySettings?.showCredits ?? true;
@@ -24308,10 +24464,13 @@ var Plan2 = ({
                     plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t3("Custom price") : isUsageBasedPlan ? t3("Usage-based") : isFreePlan && showZeroPriceAsFree ? t3("Free") : showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? formatCurrency((planPrice ?? 0) / 12, {
                       currency: planCurrency,
                       testSignificantDigits: false
+                    }) : showAsMonthlyPrices && selectedPeriod === "quarter" ? formatCurrency((planPrice ?? 0) / 3, {
+                      currency: planCurrency,
+                      testSignificantDigits: false
                     }) : formatCurrency(planPrice ?? 0, planCurrency),
                     !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs43("sub", { children: [
                       "/",
-                      showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : t3(selectedPeriod)
+                      showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : showAsMonthlyPrices && selectedPeriod === "quarter" ? t3("month, billed quarterly") : t3(selectedPeriod)
                     ] })
                   ]
                 }
@@ -24614,7 +24773,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
     []
   );
   const [selectedPeriod, setSelectedPeriod] = useState20(
-    () => data?.company?.plan?.planPeriod || "month"
+    () => getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month"
   );
   const { currencies, invalidFilterEntries } = useAvailableCurrenciesWithInvalid();
   const [selectedCurrency, setSelectedCurrency] = useState20(
@@ -24750,7 +24909,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
               $margin: 0,
               $listStyle: "none",
               children: plans.map((plan, index, self2) => {
-                const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+                const planPeriod = showPeriodToggle ? selectedPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
                 return /* @__PURE__ */ jsx58(
                   Plan2,
                   {
@@ -24802,7 +24961,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
               $margin: 0,
               $listStyle: "none",
               children: addOns.map((addOn, index) => {
-                const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+                const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.monthlyPrice ? BillingProductPriceInterval.Month : addOn.quarterlyPrice ? "quarter" : addOn.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
                 return /* @__PURE__ */ jsx58(
                   AddOn2,
                   {