@schematichq/schematic-components 0.6.3 → 0.7.0

package/dist/schematic-components.esm.js

@@ -3896,6 +3896,7 @@ var VISIBLE_ENTITLEMENT_COUNT = 4;
 var MAX_VISIBLE_INVOICE_COUNT = 12;
 var DEBOUNCE_TIMEOUT = 250;
 var DEFAULT_CURRENCY = "USD";
+var MAXIMUM_SIGNIFICANT_DIGITS = 6;
 
 // src/hooks/useAvailablePlans.ts
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
@@ -10670,7 +10671,8 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     externalPriceId: json["external_price_id"],
     id: json["id"],
     interval: json["interval"],
-    price: json["price"]
+    price: json["price"],
+    priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"]
   };
 }
 
@@ -10690,6 +10692,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     isActive: json["is_active"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     price: json["price"],
+    priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
     priceId: json["price_id"],
     productExternalId: json["product_external_id"],
@@ -10716,6 +10719,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     externalId: json["external_id"],
     name: json["name"],
     price: json["price"],
+    priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     prices: json["prices"].map(
       BillingPriceResponseDataFromJSON
     ),
@@ -10744,6 +10748,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     name: json["name"],
     price: json["price"],
+    priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
     priceId: json["price_id"],
     quantity: json["quantity"],
@@ -12199,8 +12204,7 @@ var en_default = {
     "Current plan": "Current plan",
     "Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
     "Currently using": "Currently using {{quantity}} {{unit}}",
-    "Custom Plan Price": "Custom price",
-    "Custom Plan CTA": "Talk to support",
+    "Custom price": "Custom price",
     Discount: "Discount",
     "Due today": "Due today",
     "Edit payment method": "Edit payment method",
@@ -12256,6 +12260,7 @@ var en_default = {
     "Subscribe and close": "Subscribe and close",
     Subscription: "Subscription",
     "Subscription canceled": "Subscription canceled",
+    "Talk to support": "Talk to support",
     Trial: "Trial",
     "Trial ends in": "Trial ends in {{days}} days",
     "Trial plan": "Try free for {{days}} days",
@@ -13056,7 +13061,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.3";
+      headers["X-Schematic-Components-Version"] = "0.7.0";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13132,6 +13137,13 @@ var getFeatureName = (feature, count = 0) => {
   }
   return (0, import_pluralize.default)(name, count);
 };
+function getBillingPrice(billingPrice) {
+  if (!billingPrice) {
+    return;
+  }
+  const price = typeof billingPrice.priceDecimal === "string" ? parseFloat(billingPrice.priceDecimal) : billingPrice.price;
+  return { ...billingPrice, price };
+}
 
 // src/utils/color.ts
 function hexToHSL(color) {
@@ -13272,16 +13284,20 @@ function formatCurrency(amount, currency) {
     };
     if (dollars >= 1e6) {
       return formatValue(dollars / 1e6, "M");
-    } else if (dollars >= 1e3) {
+    }
+    if (dollars >= 1e3) {
       return formatValue(dollars / 1e3, "k");
-    } else {
-      return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: resolvedCurrency,
-        minimumSignificantDigits: 1,
-        maximumSignificantDigits: 4
-      }).format(dollars);
     }
+    const hasManySignificantDigits = /[1-9]/.test(
+      (amount % 1).toFixed(MAXIMUM_SIGNIFICANT_DIGITS)
+    );
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: resolvedCurrency,
+      ...hasManySignificantDigits && {
+        minimumSignificantDigits: 1
+      }
+    }).format(dollars);
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
@@ -14921,25 +14937,32 @@ var Sidebar = ({
     ({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
   );
   const subscriptionPrice = useMemo4(() => {
-    let total = 0;
     let planPrice;
     let currency;
     if (selectedPlan) {
-      planPrice = planPeriod === "month" ? selectedPlan.monthlyPrice?.price : selectedPlan.yearlyPrice?.price;
-      currency = planPeriod === "month" ? selectedPlan.monthlyPrice?.currency : selectedPlan.yearlyPrice?.currency;
-      if (planPrice) {
-        total += planPrice;
-      }
+      const planBillingPrice = getBillingPrice(
+        planPeriod === "year" ? selectedPlan.yearlyPrice : selectedPlan.monthlyPrice
+      );
+      planPrice = planBillingPrice?.price;
+      currency = planBillingPrice?.currency;
     } else if (typeof currentPlan?.planPrice === "number") {
       planPrice = currentPlan.planPrice;
     }
+    let total = 0;
+    if (planPrice) {
+      total += planPrice;
+    }
     const addOnCost = addOns.reduce(
-      (sum, addOn) => sum + (addOn.isSelected ? (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0 : 0),
+      (sum, addOn) => sum + (getBillingPrice(
+        planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
+      )?.price ?? 0),
       0
     );
     total += addOnCost;
     const payInAdvanceCost = payInAdvanceEntitlements.reduce(
-      (sum, { entitlement, quantity }) => sum + quantity * ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price ?? 0),
+      (sum, { entitlement, quantity }) => sum + quantity * (getBillingPrice(
+        planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+      )?.price ?? 0),
       0
     );
     total += payInAdvanceCost;
@@ -14963,7 +14986,7 @@ var Sidebar = ({
     window.dispatchEvent(event);
   };
   const checkout = useCallback7(async () => {
-    const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
+    const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
     }
@@ -14976,7 +14999,7 @@ var Sidebar = ({
           newPriceId: priceId,
           addOnIds: addOns.reduce((acc, addOn) => {
             if (addOn.isSelected && !selectedPlan.companyCanTrial) {
-              const addOnPriceId = (planPeriod === "month" ? addOn?.monthlyPrice : addOn?.yearlyPrice)?.id;
+              const addOnPriceId = (planPeriod === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
               if (addOnPriceId) {
                 acc.push({
                   addOnId: addOn.id,
@@ -14988,7 +15011,7 @@ var Sidebar = ({
           }, []),
           payInAdvance: payInAdvanceEntitlements.reduce(
             (acc, { entitlement, quantity }) => {
-              const priceId2 = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
+              const priceId2 = (planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
               if (priceId2) {
                 acc.push({
                   priceId: priceId2,
@@ -15111,6 +15134,9 @@ var Sidebar = ({
   if (isTrialable && selectedPlan.trialDays) {
     trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
   }
+  const selectedPlanBillingPrice = getBillingPrice(
+    planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice
+  );
   return /* @__PURE__ */ jsxs8(
     Flex,
     {
@@ -15271,8 +15297,8 @@ var Sidebar = ({
                             $color: theme.typography.text.color,
                             children: [
                               formatCurrency(
-                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0,
-                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
+                                selectedPlanBillingPrice?.price ?? 0,
+                                selectedPlanBillingPrice?.currency
                               ),
                               /* @__PURE__ */ jsxs8("sub", { children: [
                                 "/",
@@ -15300,7 +15326,12 @@ var Sidebar = ({
                 removedUsageBasedEntitlements.reduce(
                   (acc, { allocation, quantity, usage }, index) => {
                     if (typeof allocation === "number" && usage.feature?.name) {
-                      const price = (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.price;
+                      const {
+                        price: entitlementPrice,
+                        currency: entitlementCurrency
+                      } = getBillingPrice(
+                        planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
+                      ) || {};
                       acc.push(
                         /* @__PURE__ */ jsxs8(
                           Flex,
@@ -15334,20 +15365,20 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                                    usage.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                                       formatCurrency(
-                                        price * quantity,
-                                        (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
+                                        (entitlementPrice ?? 0) * quantity,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                                    usage.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                                       formatCurrency(
-                                        price,
-                                        (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
+                                        entitlementPrice ?? 0,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
@@ -15370,6 +15401,12 @@ var Sidebar = ({
                 changedUsageBasedEntitlements.reduce(
                   (acc, { entitlement, previous, next: next2 }, index) => {
                     if (entitlement?.feature?.name) {
+                      const {
+                        price: entitlementPrice,
+                        currency: entitlementCurrency
+                      } = getBillingPrice(
+                        planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+                      ) || {};
                       acc.push(
                         /* @__PURE__ */ jsxs8(Box, { children: [
                           /* @__PURE__ */ jsxs8(
@@ -15405,8 +15442,8 @@ var Sidebar = ({
                                     $color: theme.typography.text.color,
                                     children: [
                                       formatCurrency(
-                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * previous.quantity,
-                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                        (entitlementPrice ?? 0) * previous.quantity,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
@@ -15448,8 +15485,8 @@ var Sidebar = ({
                                     $color: theme.typography.text.color,
                                     children: [
                                       formatCurrency(
-                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * next2.quantity,
-                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                        (entitlementPrice ?? 0) * next2.quantity,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
@@ -15471,7 +15508,12 @@ var Sidebar = ({
                 addedUsageBasedEntitlements.reduce(
                   (acc, { entitlement, quantity }, index) => {
                     if (entitlement.feature?.name) {
-                      const price = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
+                      const {
+                        price: entitlementPrice,
+                        currency: entitlementCurrency
+                      } = getBillingPrice(
+                        planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+                      ) || {};
                       acc.push(
                         /* @__PURE__ */ jsxs8(
                           Flex,
@@ -15502,20 +15544,20 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                                    entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                                       formatCurrency(
-                                        price * quantity,
-                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                        (entitlementPrice ?? 0) * quantity,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                                    entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                                       formatCurrency(
-                                        price,
-                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                        entitlementPrice ?? 0,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
@@ -15574,8 +15616,8 @@ var Sidebar = ({
                           children: [
                             "-",
                             formatCurrency(
-                              (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0,
-                              (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
+                              selectedPlanBillingPrice?.price ?? 0,
+                              selectedPlanBillingPrice?.currency
                             ),
                             "/",
                             /* @__PURE__ */ jsx13("sub", { children: shortenPeriod(planPeriod) })
@@ -15597,89 +15639,93 @@ var Sidebar = ({
                     children: t2("Add-ons")
                   }
                 ) }),
-                removedAddOns.map((addOn, index) => /* @__PURE__ */ jsxs8(
-                  Flex,
-                  {
-                    $justifyContent: "space-between",
-                    $alignItems: "center",
-                    $gap: "1rem",
-                    $opacity: "0.625",
-                    $textDecoration: "line-through",
-                    $color: theme.typography.heading4.color,
-                    children: [
-                      /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
-                        Text,
-                        {
-                          $font: theme.typography.heading4.fontFamily,
-                          $size: theme.typography.heading4.fontSize,
-                          $weight: theme.typography.heading4.fontWeight,
-                          $color: theme.typography.heading4.color,
-                          children: addOn.name
-                        }
-                      ) }),
-                      typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
-                        Text,
-                        {
-                          $font: theme.typography.text.fontFamily,
-                          $size: theme.typography.text.fontSize,
-                          $weight: theme.typography.text.fontWeight,
-                          $color: theme.typography.text.color,
-                          children: [
-                            formatCurrency(
-                              addOn.planPrice,
-                              (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
-                            ),
-                            /* @__PURE__ */ jsxs8("sub", { children: [
-                              "/",
-                              shortenPeriod(addOn.planPeriod)
-                            ] })
-                          ]
-                        }
-                      ) })
-                    ]
-                  },
-                  index
-                )),
-                selectedAddOns.map((addOn, index) => /* @__PURE__ */ jsxs8(
-                  Flex,
-                  {
-                    $justifyContent: "space-between",
-                    $alignItems: "center",
-                    $gap: "1rem",
-                    children: [
-                      /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
-                        Text,
-                        {
-                          $font: theme.typography.heading4.fontFamily,
-                          $size: theme.typography.heading4.fontSize,
-                          $weight: theme.typography.heading4.fontWeight,
-                          $color: theme.typography.heading4.color,
-                          children: addOn.name
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
-                        Text,
-                        {
-                          $font: theme.typography.text.fontFamily,
-                          $size: theme.typography.text.fontSize,
-                          $weight: theme.typography.text.fontWeight,
-                          $color: theme.typography.text.color,
-                          children: [
-                            formatCurrency(
-                              (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0,
-                              (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.currency
-                            ),
-                            /* @__PURE__ */ jsxs8("sub", { children: [
-                              "/",
-                              shortenPeriod(planPeriod)
-                            ] })
-                          ]
-                        }
-                      ) })
-                    ]
-                  },
-                  index
-                ))
+                removedAddOns.map((addOn, index) => {
+                  return /* @__PURE__ */ jsxs8(
+                    Flex,
+                    {
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $gap: "1rem",
+                      $opacity: "0.625",
+                      $textDecoration: "line-through",
+                      $color: theme.typography.heading4.color,
+                      children: [
+                        /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                          Text,
+                          {
+                            $font: theme.typography.heading4.fontFamily,
+                            $size: theme.typography.heading4.fontSize,
+                            $weight: theme.typography.heading4.fontWeight,
+                            $color: theme.typography.heading4.color,
+                            children: addOn.name
+                          }
+                        ) }),
+                        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                          Text,
+                          {
+                            $font: theme.typography.text.fontFamily,
+                            $size: theme.typography.text.fontSize,
+                            $weight: theme.typography.text.fontWeight,
+                            $color: theme.typography.text.color,
+                            children: [
+                              formatCurrency(
+                                addOn.planPrice,
+                                selectedPlanBillingPrice?.currency
+                              ),
+                              /* @__PURE__ */ jsxs8("sub", { children: [
+                                "/",
+                                shortenPeriod(addOn.planPeriod)
+                              ] })
+                            ]
+                          }
+                        ) })
+                      ]
+                    },
+                    index
+                  );
+                }),
+                selectedAddOns.map((addOn, index) => {
+                  const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
+                    planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
+                  ) || {};
+                  return /* @__PURE__ */ jsxs8(
+                    Flex,
+                    {
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $gap: "1rem",
+                      children: [
+                        /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+                          Text,
+                          {
+                            $font: theme.typography.heading4.fontFamily,
+                            $size: theme.typography.heading4.fontSize,
+                            $weight: theme.typography.heading4.fontWeight,
+                            $color: theme.typography.heading4.color,
+                            children: addOn.name
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                          Text,
+                          {
+                            $font: theme.typography.text.fontFamily,
+                            $size: theme.typography.text.fontSize,
+                            $weight: theme.typography.text.fontWeight,
+                            $color: theme.typography.text.color,
+                            children: [
+                              formatCurrency(addOnPrice ?? 0, addOnCurrency),
+                              /* @__PURE__ */ jsxs8("sub", { children: [
+                                "/",
+                                shortenPeriod(planPeriod)
+                              ] })
+                            ]
+                          }
+                        ) })
+                      ]
+                    },
+                    index
+                  );
+                })
               ] }),
               proration !== 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                 /* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
@@ -15718,7 +15764,7 @@ var Sidebar = ({
                           $color: theme.typography.text.color,
                           children: formatCurrency(
                             proration,
-                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                            selectedPlanBillingPrice?.currency
                           )
                         }
                       ) })
@@ -15825,7 +15871,7 @@ var Sidebar = ({
                         $color: theme.typography.text.color,
                         children: formatCurrency(
                           newCharges / 100 * percentOff,
-                          (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          selectedPlanBillingPrice?.currency
                         )
                       }
                     ) })
@@ -15849,7 +15895,7 @@ var Sidebar = ({
                         children: t2("X off", {
                           amount: formatCurrency(
                             Math.abs(amountOff),
-                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                            selectedPlanBillingPrice?.currency
                           )
                         })
                       }
@@ -15865,7 +15911,7 @@ var Sidebar = ({
                           "-",
                           formatCurrency(
                             Math.abs(amountOff),
-                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                            selectedPlanBillingPrice?.currency
                           )
                         ]
                       }
@@ -15888,7 +15934,7 @@ var Sidebar = ({
                         $weight: theme.typography.text.fontWeight,
                         $color: theme.typography.text.color,
                         children: [
-                          planPeriod === "month" ? "Monthly" : "Yearly",
+                          planPeriod === "year" ? "Yearly" : "Monthly",
                           " total:"
                         ]
                       }
@@ -15941,7 +15987,7 @@ var Sidebar = ({
                         $color: theme.typography.text.color,
                         children: formatCurrency(
                           Math.max(0, dueNow),
-                          (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          selectedPlanBillingPrice?.currency
                         )
                       }
                     ) })
@@ -15971,7 +16017,7 @@ var Sidebar = ({
                     $color: theme.typography.text.color,
                     children: formatCurrency(
                       Math.abs(dueNow),
-                      (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                      selectedPlanBillingPrice?.currency
                     )
                   }
                 ) })
@@ -16038,6 +16084,9 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
       $gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
       $gap: "1rem",
       children: addOns.map((addOn, index) => {
+        const { price, currency } = getBillingPrice(
+          period === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
+        ) || {};
         return /* @__PURE__ */ jsxs9(
           Flex,
           {
@@ -16081,10 +16130,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                       $size: theme.typography.heading2.fontSize,
                       $weight: theme.typography.heading2.fontWeight,
                       $color: theme.typography.heading2.color,
-                      children: formatCurrency(
-                        (period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0,
-                        (period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.currency
-                      )
+                      children: formatCurrency(price ?? 0, currency)
                     }
                   ),
                   /* @__PURE__ */ jsxs9(
@@ -16107,12 +16153,19 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     $position: "absolute",
                     $right: "1rem",
                     $top: "1rem",
-                    $fontSize: "0.75rem",
-                    $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                     $backgroundColor: theme.primary,
                     $borderRadius: "9999px",
                     $padding: "0.125rem 0.85rem",
-                    children: t2("Active")
+                    children: /* @__PURE__ */ jsx14(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: 0.75 * theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                        children: t2("Active")
+                      }
+                    )
                   }
                 )
               ] }),
@@ -16576,11 +16629,14 @@ var Plan = ({
       children: plans.map((plan, planIndex) => {
         const count = entitlementCounts[plan.id];
         const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
-        const { price: planPrice, currency: planCurrency } = (period === "month" ? plan.monthlyPrice : period === "year" && plan.yearlyPrice) || {};
+        const { price: planPrice, currency: planCurrency } = getBillingPrice(
+          period === "year" ? plan.yearlyPrice : plan.monthlyPrice
+        ) || {};
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
         const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+        const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography.heading2;
         return /* @__PURE__ */ jsxs12(
           Flex,
           {
@@ -16634,11 +16690,11 @@ var Plan = ({
                       /* @__PURE__ */ jsx17(
                         Text,
                         {
-                          $font: theme.typography.heading2.fontFamily,
-                          $size: theme.typography.heading2.fontSize,
-                          $weight: theme.typography.heading2.fontWeight,
-                          $color: theme.typography.heading2.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          $font: headerPriceFontStyle.fontFamily,
+                          $size: headerPriceFontStyle.fontSize,
+                          $weight: headerPriceFontStyle.fontWeight,
+                          $color: headerPriceFontStyle.color,
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
                       !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs12(
@@ -16661,12 +16717,19 @@ var Plan = ({
                         $position: "absolute",
                         $right: "1rem",
                         $top: "1rem",
-                        $fontSize: "0.75rem",
-                        $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                         $backgroundColor: theme.primary,
                         $borderRadius: "9999px",
                         $padding: "0.125rem 0.85rem",
-                        children: t2("Active")
+                        children: /* @__PURE__ */ jsx17(
+                          Text,
+                          {
+                            $font: theme.typography.text.fontFamily,
+                            $size: 0.75 * theme.typography.text.fontSize,
+                            $weight: theme.typography.text.fontWeight,
+                            $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                            children: t2("Active")
+                          }
+                        )
                       }
                     )
                   ]
@@ -16698,7 +16761,9 @@ var Plan = ({
                           const {
                             price: entitlementPrice,
                             currency: entitlementCurrency
-                          } = (period === "month" ? entitlement.meteredMonthlyPrice : period === "year" && entitlement.meteredYearlyPrice) || {};
+                          } = getBillingPrice(
+                            period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+                          ) || {};
                           if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                             return acc;
                           }
@@ -16908,7 +16973,7 @@ var Plan = ({
                           {
                             href: plan.customPlanConfig?.ctaWebSite ?? "#",
                             target: "_blank",
-                            children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                            children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                           }
                         ) : !plan.valid ? /* @__PURE__ */ jsx17(
                           Tooltip,
@@ -16944,6 +17009,9 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
   return /* @__PURE__ */ jsx18(Fragment8, { children: /* @__PURE__ */ jsx18(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
     (acc, { entitlement, quantity, usage }, index) => {
       if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
+        const { price, currency } = getBillingPrice(
+          period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+        ) || {};
         acc.push(
           /* @__PURE__ */ jsxs13(
             Flex,
@@ -17047,10 +17115,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $weight: theme.typography.text.fontWeight,
                           $color: theme.typography.text.color,
                           children: [
-                            formatCurrency(
-                              ((period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity,
-                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
-                            ),
+                            formatCurrency((price ?? 0) * quantity, currency),
                             /* @__PURE__ */ jsxs13("sub", { children: [
                               "/",
                               shortenPeriod(period)
@@ -17066,10 +17131,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $weight: theme.typography.text.fontWeight,
                           $color: unitPriceColor,
                           children: [
-                            formatCurrency(
-                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0,
-                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
-                            ),
+                            formatCurrency(price ?? 0, currency),
                             /* @__PURE__ */ jsxs13("sub", { children: [
                               "/",
                               getFeatureName(entitlement.feature, 1),
@@ -17220,7 +17282,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     async (updates) => {
       const period = updates.period || planPeriod;
       const plan = updates.plan || selectedPlan;
-      const planPriceId = period === "month" ? plan?.monthlyPrice?.id : plan?.yearlyPrice?.id;
+      const planPriceId = period === "year" ? plan?.yearlyPrice?.id : plan?.monthlyPrice?.id;
       if (!api || !plan || !planPriceId) {
         return;
       }
@@ -17235,7 +17297,7 @@ var CheckoutDialog = ({ top = 0 }) => {
             addOnIds: (updates.addOns || addOns).reduce(
               (acc, addOn) => {
                 if (addOn.isSelected) {
-                  const addOnPriceId = (period === "month" ? addOn?.monthlyPrice : addOn?.yearlyPrice)?.id;
+                  const addOnPriceId = (period === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
                   if (addOnPriceId) {
                     acc.push({
                       addOnId: addOn.id,
@@ -17249,7 +17311,7 @@ var CheckoutDialog = ({ top = 0 }) => {
             ),
             payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
               (acc, { entitlement, quantity }) => {
-                const priceId = (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
+                const priceId = (period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
                 if (priceId) {
                   acc.push({
                     priceId,
@@ -17704,8 +17766,10 @@ var PeriodToggle = ({
   const [tooltipZIndex, setTooltipZIndex] = useState9(1);
   const savingsPercentage = useMemo6(() => {
     if (selectedPlan) {
-      const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
-      const yearly = selectedPlan?.yearlyPrice?.price || 0;
+      const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
+      const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
+      const monthly = (monthlyBillingPrice?.price ?? 0) * 12;
+      const yearly = yearlyBillingPrice?.price ?? 0;
       return Math.round((monthly - yearly) / monthly * 1e4) / 100;
     }
     return 0;
@@ -18234,25 +18298,11 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const currency = useMemo8(() => {
-    if (data.company?.plan?.planPeriod === "month") {
-      return monthlyUsageBasedPrice?.currency;
-    }
-    if (data.company?.plan?.planPeriod === "year") {
-      return yearlyUsageBasedPrice?.currency;
-    }
-  }, [
-    data.company?.plan?.planPeriod,
-    monthlyUsageBasedPrice,
-    yearlyUsageBasedPrice
-  ]);
-  const price = useMemo8(() => {
-    if (data.company?.plan?.planPeriod === "month") {
-      return monthlyUsageBasedPrice?.price;
-    }
-    if (data.company?.plan?.planPeriod === "year") {
-      return yearlyUsageBasedPrice?.price;
-    }
+  const { price, currency } = useMemo8(() => {
+    const { price: entitlementPrice, currency: entitlementCurrency } = getBillingPrice(
+      data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
+    ) || {};
+    return { price: entitlementPrice, currency: entitlementCurrency };
   }, [
     data.company?.plan?.planPeriod,
     monthlyUsageBasedPrice,
@@ -18688,6 +18738,7 @@ import { forwardRef as forwardRef9, useMemo as useMemo10, useRef as useRef8 } fr
 // src/components/elements/metered-features/styles.ts
 var Container4 = dt(Flex)`
   flex-direction: column;
+  gap: 1rem;
 
   &:last-child {
     overflow: hidden;
@@ -18712,6 +18763,15 @@ var Container4 = dt(Flex)`
           `;
 }}
   }
+
+  ${({ theme }) => {
+  return theme.sectionLayout === "separate" && lt`
+        ${Element}:not(:is(${FussyChild})) {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      `;
+}}
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
@@ -18784,7 +18844,9 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
     }, index) => {
       const limit = softLimit ?? allocation ?? 0;
       const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
-      const { price, currency } = (planPeriod === "month" ? monthlyUsageBasedPrice : planPeriod === "year" && yearlyUsageBasedPrice) || {};
+      const { price, currency } = getBillingPrice(
+        planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
+      ) || {};
       const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx30(
         ProgressBar,
         {
@@ -18806,6 +18868,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
             $alignItems: "center",
             $padding: `${0.4375 * theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding / TEXT_BASE_SIZE}rem`,
             $backgroundColor: isLightBackground ? darken(theme.card.background, 0.05) : lighten(theme.card.background, 0.1),
+            ...theme.sectionLayout === "separate" && {
+              $borderBottomLeftRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+              $borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
+            },
             children: [
               /* @__PURE__ */ jsx30(
                 Text,
@@ -19643,8 +19709,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   };
   const usageBasedEntitlements = (featureUsage?.features || []).reduce(
     (acc, usage) => {
-      const { price, currency } = (currentPlan?.planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice) || {};
-      if (usage.priceBehavior && typeof price === "number") {
+      const { price, currency } = getBillingPrice(
+        currentPlan?.planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
+      ) || {};
+      if (usage.priceBehavior) {
         acc.push({ ...usage, price, currency });
       }
       return acc;
@@ -19664,6 +19732,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
   return /* @__PURE__ */ jsxs27(Fragment11, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
       Box,
@@ -19785,10 +19854,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                   /* @__PURE__ */ jsx34(
                     Text,
                     {
-                      $font: theme.typography[props.header.price.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.price.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.price.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.price.fontStyle].color,
+                      $font: headerPriceFontStyle.fontFamily,
+                      $size: headerPriceFontStyle.fontSize,
+                      $weight: headerPriceFontStyle.fontWeight,
+                      $color: headerPriceFontStyle.color,
                       children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
@@ -19925,7 +19994,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                   ":",
                                   " ",
                                   formatCurrency(
-                                    entitlement.price,
+                                    entitlement.price ?? 0,
                                     entitlement.currency
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
@@ -19947,7 +20016,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
                                 children: [
                                   formatCurrency(
-                                    entitlement.price,
+                                    entitlement.price ?? 0,
                                     entitlement.currency
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
@@ -19968,7 +20037,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 $color: theme.typography.text.color,
                                 children: [
                                   formatCurrency(
-                                    entitlement.price * amount,
+                                    (entitlement.price ?? 0) * amount,
                                     entitlement.currency
                                   ),
                                   (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
@@ -20148,13 +20217,16 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               $gap: "1rem",
               children: plans.map((plan, planIndex, self2) => {
                 const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
-                const { price: planPrice, currency: planCurrency } = (selectedPeriod === "month" ? plan.monthlyPrice : selectedPeriod === "year" && plan.yearlyPrice) || {};
+                const { price: planPrice, currency: planCurrency } = getBillingPrice(
+                  selectedPeriod === "year" ? plan.yearlyPrice : plan.monthlyPrice
+                ) || {};
                 const count = entitlementCounts[plan.id];
                 const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
                 const hasUsageBasedEntitlements = plan.entitlements.some(
                   (entitlement) => !!entitlement.priceBehavior
                 );
                 const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+                const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.plans.name.fontStyle];
                 return /* @__PURE__ */ jsxs28(
                   Flex,
                   {
@@ -20203,11 +20275,11 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                               /* @__PURE__ */ jsx35(
                                 Text,
                                 {
-                                  $font: theme.typography[props.plans.name.fontStyle].fontFamily,
-                                  $size: theme.typography[props.plans.name.fontStyle].fontSize,
-                                  $weight: theme.typography[props.plans.name.fontStyle].fontWeight,
-                                  $color: theme.typography[props.plans.name.fontStyle].color,
-                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                                  $font: headerPriceFontStyle.fontFamily,
+                                  $size: headerPriceFontStyle.fontSize,
+                                  $weight: headerPriceFontStyle.fontWeight,
+                                  $color: headerPriceFontStyle.color,
+                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                                 }
                               ),
                               !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs28(
@@ -20230,12 +20302,19 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $position: "absolute",
                                 $right: "1rem",
                                 $top: "1rem",
-                                $fontSize: "0.75rem",
-                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
                                 $padding: "0.125rem 0.85rem",
-                                children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
+                                children: /* @__PURE__ */ jsx35(
+                                  Text,
+                                  {
+                                    $font: theme.typography.text.fontFamily,
+                                    $size: 0.75 * theme.typography.text.fontSize,
+                                    $weight: theme.typography.text.fontWeight,
+                                    $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                    children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
+                                  }
+                                )
                               }
                             )
                           ]
@@ -20269,7 +20348,9 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   const {
                                     price: entitlementPrice,
                                     currency: entitlementCurrency
-                                  } = (selectedPeriod === "month" ? entitlement.meteredMonthlyPrice : selectedPeriod === "year" && entitlement.meteredYearlyPrice) || {};
+                                  } = getBillingPrice(
+                                    selectedPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+                                  ) || {};
                                   if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                                     return acc;
                                   }
@@ -20492,7 +20573,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
-                                    children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                                    children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                                   }
                                 ) : !plan.valid ? /* @__PURE__ */ jsx35(
                                   Tooltip,
@@ -20543,7 +20624,9 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               $gap: "1rem",
               children: addOns.map((addOn, addOnIndex) => {
                 const isActiveAddOn = addOn.current && selectedPeriod === data.company?.addOns.find((a2) => a2.id === addOn.id)?.planPeriod;
-                const { price: addOnPrice, currency: addOnCurrency } = (selectedPeriod === "month" ? addOn.monthlyPrice : selectedPeriod === "year" && addOn.yearlyPrice) || {};
+                const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
+                  selectedPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
+                ) || {};
                 return /* @__PURE__ */ jsxs28(
                   Flex,
                   {
@@ -20610,12 +20693,19 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             $position: "absolute",
                             $right: "1rem",
                             $top: "1rem",
-                            $fontSize: "0.75rem",
-                            $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                             $backgroundColor: theme.primary,
                             $borderRadius: "9999px",
                             $padding: "0.125rem 0.85rem",
-                            children: t2("Active")
+                            children: /* @__PURE__ */ jsx35(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 0.75 * theme.typography.text.fontSize,
+                                $weight: theme.typography.text.fontWeight,
+                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                children: t2("Active")
+                              }
+                            )
                           }
                         )
                       ] }),