@schematichq/schematic-components 0.6.4 → 0.7.1

package/dist/schematic-components.cjs.js

@@ -2275,6 +2275,7 @@ __export(index_exports, {
   MeteredFeatures: () => MeteredFeatures,
   Modal: () => Modal,
   ModalHeader: () => ModalHeader,
+  Notice: () => Notice,
   PaymentMethod: () => PaymentMethod,
   PaymentMethodDetails: () => PaymentMethodDetails,
   PlanManager: () => PlanManager,
@@ -10721,7 +10722,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"]
   };
 }
 
@@ -10741,6 +10743,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"],
@@ -10767,6 +10770,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
     ),
@@ -10795,6 +10799,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"],
@@ -13107,7 +13112,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.4";
+      headers["X-Schematic-Components-Version"] = "0.7.1";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13183,6 +13188,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) {
@@ -13322,7 +13334,7 @@ function formatCurrency(amount, currency) {
       return `$${formatted}${symbol}`;
     };
     if (dollars >= 1e6) {
-      formatValue(dollars / 1e6, "M");
+      return formatValue(dollars / 1e6, "M");
     }
     if (dollars >= 1e3) {
       return formatValue(dollars / 1e3, "k");
@@ -13445,10 +13457,7 @@ var import_react20 = require("react");
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
   function reducer(acc, [key, value]) {
-    if (key.startsWith("$") && ![
-      "$viewport",
-      ...Object.values(TextPropNames).filter((prop) => prop !== "$color")
-    ].includes(key)) {
+    if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
         // keys will always be CSS properties
         attr(camelToHyphen(key.slice(1)), value)
@@ -13571,6 +13580,7 @@ var Button2 = (0, import_react16.forwardRef)(
     children,
     ...props
   }, ref) => {
+    const theme = nt();
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       Button,
       {
@@ -13581,7 +13591,7 @@ var Button2 = (0, import_react16.forwardRef)(
         disabled,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { $size: "sm", $isLoading: isLoading }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { $color: theme.primary, $size: "sm", $isLoading: isLoading }),
           children
         ]
       }
@@ -14089,7 +14099,7 @@ var Loader = dt.div`
   }
   return lt`
       border-color: ${color};
-      border-top-color: ${colorFn(color, 42.5)};
+      border-top-color: ${colorFn(color, 0.425)};
     `;
 }}
 
@@ -14269,8 +14279,11 @@ var ModalHeader = ({
 };
 
 // src/components/ui/progress-bar/styles.ts
-var Container3 = dt(Flex)`
+var Container3 = dt.div`
   position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 `;
 
 // src/components/ui/progress-bar/ProgressBar.tsx
@@ -14300,59 +14313,51 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    Container3,
-    {
-      $alignItems: "center",
-      $gap: `${16 / TEXT_BASE_SIZE}rem`,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Container3, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Flex,
+      {
+        $position: "relative",
+        $alignItems: "center",
+        $width: `${barWidth}`,
+        $maxWidth: "100%",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Flex,
           {
             $position: "relative",
-            $alignItems: "center",
-            $width: `${barWidth}`,
-            $maxWidth: "100%",
+            $overflow: "hidden",
+            $width: "100%",
+            $height: `${8 / TEXT_BASE_SIZE}rem`,
+            $backgroundColor: bgColor,
+            $borderRadius: "9999px",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              Flex,
+              Box,
               {
-                $position: "relative",
-                $overflow: "hidden",
-                $width: "100%",
-                $height: `${8 / TEXT_BASE_SIZE}rem`,
-                $backgroundColor: bgColor,
-                $borderRadius: "9999px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  Box,
-                  {
-                    $width: `${Math.min(progress, 100)}%`,
-                    $height: "100%",
-                    $backgroundColor: barColorMap[color],
-                    $borderRadius: "9999px"
-                  }
-                )
+                $width: `${Math.min(progress, 100)}%`,
+                $height: "100%",
+                $backgroundColor: barColorMap[color],
+                $borderRadius: "9999px"
               }
             )
           }
-        ),
-        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          Text,
-          {
-            $font: theme.typography.text.fontFamily,
-            $size: 14,
-            $weight: 500,
-            $color: theme.typography.text.color,
-            children: [
-              value,
-              "/",
-              total
-            ]
-          }
         )
-      ]
-    }
-  );
+      }
+    ),
+    total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      Text,
+      {
+        $font: theme.typography.text.fontFamily,
+        $size: 14,
+        $weight: 500,
+        $color: theme.typography.text.color,
+        children: [
+          value,
+          "/",
+          total
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/ui/text/styles.ts
@@ -14365,8 +14370,7 @@ var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
   TextPropNames2["Leading"] = "$leading";
   return TextPropNames2;
 })(TextPropNames || {});
-var Text = dt(Box).attrs(({ as = "span", onClick }) => ({
-  as,
+var Text = dt.span.attrs(({ onClick }) => ({
   ...onClick && { tabIndex: 0 }
 }))`
   ${({ $font }) => $font && lt`
@@ -14402,7 +14406,7 @@ var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/ui/tooltip/styles.ts
-var Trigger = dt(Box)``;
+var Trigger = dt.div``;
 var coords = (position2) => {
   let x2 = 0;
   let y2 = 0;
@@ -14469,7 +14473,7 @@ var grow = (translate) => {
     }
   `;
 };
-var Content = dt(Box).withConfig({
+var Content = dt.div.withConfig({
   shouldForwardProp: (prop) => !["x", "y", "position", "zIndex"].includes(prop)
 })(({ x: x2, y: y2, position: position2, zIndex }) => {
   const translate = coords(position2);
@@ -14586,6 +14590,7 @@ var Tooltip = ({
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
 var FussyChild = dt(Element)``;
+var Notice = dt(Box)``;
 var cardBoxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
 var StyledCard = dt.div(({ theme }) => {
   const { l: l2 } = hexToHSL(theme.card.background);
@@ -14613,6 +14618,11 @@ var StyledCard = dt.div(({ theme }) => {
             `}
       }
     }
+
+    ${Notice}:first-child {
+      border-top-left-radius: ${borderRadius};
+      border-top-right-radius: ${borderRadius};
+    }
   `;
 });
 
@@ -14667,11 +14677,12 @@ Column.displayName = "Column";
 var import_react22 = require("react");
 
 // src/components/layout/root/styles.ts
-var Container2 = dt(Box)`
+var Container2 = dt.div`
   all: initial;
   box-sizing: border-box;
   display: block;
   font-size: ${TEXT_BASE_SIZE}px;
+  line-height: 1.35;
   width: 100%;
   height: 100%;
 
@@ -14942,49 +14953,65 @@ var Sidebar = ({
   const isLightBackground = useIsLightBackground();
   const currentPlan = data.company?.plan;
   const currentAddOns = data.company?.addOns || [];
-  const currentUsageBasedEntitlements = data.activeUsageBasedEntitlements.reduce(
-    (acc, usageData) => {
-      const featureUsage = data.featureUsage?.features.find(
-        (usage2) => usage2.feature?.id === usageData.featureId
-      );
-      const allocation = featureUsage?.allocation || 0;
-      const usage = featureUsage?.usage || 0;
-      acc.push({
-        usageData,
-        allocation,
-        quantity: allocation ?? usage,
-        usage
-      });
-      return acc;
-    },
-    []
-  );
-  const payInAdvanceEntitlements = usageBasedEntitlements.filter(
-    ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
-  );
-  const payAsYouGoEntitlements = usageBasedEntitlements.filter(
-    ({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
-  );
+  const currentUsageBasedEntitlements = (0, import_react23.useMemo)(() => {
+    return (data.featureUsage?.features || []).reduce(
+      (acc, entitlement) => {
+        if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
+          const allocation = entitlement.allocation || 0;
+          const usage = entitlement.usage || 0;
+          acc.push({
+            ...entitlement,
+            allocation,
+            usage,
+            quantity: allocation ?? usage
+          });
+        }
+        return acc;
+      },
+      []
+    );
+  }, [data.featureUsage?.features, planPeriod]);
+  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = (0, import_react23.useMemo)(() => {
+    const payAsYouGoEntitlements2 = [];
+    const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
+      (entitlement) => {
+        if (entitlement.priceBehavior === "pay_as_you_go") {
+          payAsYouGoEntitlements2.push(entitlement);
+        }
+        return entitlement.priceBehavior === "pay_in_advance";
+      }
+    );
+    return { payAsYouGoEntitlements: payAsYouGoEntitlements2, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
+  }, [usageBasedEntitlements]);
   const subscriptionPrice = (0, import_react23.useMemo)(() => {
-    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;
     }
-    const addOnCost = addOns.reduce(
-      (sum, addOn) => sum + (addOn.isSelected ? (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0 : 0),
-      0
-    );
+    let total = 0;
+    if (planPrice) {
+      total += planPrice;
+    }
+    const addOnCost = addOns.reduce((sum, addOn) => {
+      if (addOn.isSelected) {
+        sum += getBillingPrice(
+          planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
+        )?.price ?? 0;
+      }
+      return sum;
+    }, 0);
     total += addOnCost;
     const payInAdvanceCost = payInAdvanceEntitlements.reduce(
-      (sum, { entitlement, quantity }) => sum + quantity * ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price ?? 0),
+      (sum, entitlement) => sum + entitlement.quantity * (getBillingPrice(
+        planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+      )?.price ?? 0),
       0
     );
     total += payInAdvanceCost;
@@ -15008,7 +15035,7 @@ var Sidebar = ({
     window.dispatchEvent(event);
   };
   const checkout = (0, import_react23.useCallback)(async () => {
-    const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
+    const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
     }
@@ -15021,7 +15048,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,
@@ -15032,8 +15059,8 @@ var Sidebar = ({
             return acc;
           }, []),
           payInAdvance: payInAdvanceEntitlements.reduce(
-            (acc, { entitlement, quantity }) => {
-              const priceId2 = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
+            (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+              const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
               if (priceId2) {
                 acc.push({
                   priceId: priceId2,
@@ -15101,48 +15128,62 @@ var Sidebar = ({
     ({ quantity, usage }) => quantity >= usage
   )) && !isLoading;
   const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
-  const changedUsageBasedEntitlements = [];
-  const addedUsageBasedEntitlements = usageBasedEntitlements.reduce(
-    (acc, selected) => {
-      const changed = currentUsageBasedEntitlements.find(
-        (current) => current.usageData.featureId === selected.entitlement.featureId && current.quantity !== selected.quantity
-      );
-      if (changed) {
-        changedUsageBasedEntitlements.push({
-          entitlement: selected.entitlement,
-          previous: changed,
-          next: {
-            allocation: selected.allocation,
-            quantity: selected.quantity,
-            usage: selected.usage
-          }
-        });
-      } else {
-        acc.push(selected);
-      }
-      return acc;
-    },
-    []
-  );
-  const removedUsageBasedEntitlements = currentUsageBasedEntitlements.reduce(
-    (acc, current) => {
-      const match2 = usageBasedEntitlements.every(
-        ({ entitlement }) => entitlement.featureId !== current.usageData.featureId
-      ) && data.featureUsage?.features.find(
-        (usage) => usage.feature?.id === current.usageData.featureId
-      );
-      if (match2) {
-        acc.push({
-          usage: match2,
-          allocation: current.allocation,
-          quantity: current.quantity
-        });
-      }
-      return acc;
-    },
-    []
-  );
-  const willUsageBasedEntitlementsChange = changedUsageBasedEntitlements.length > 0 || addedUsageBasedEntitlements.length > 0 || removedUsageBasedEntitlements.length > 0;
+  const {
+    changedUsageBasedEntitlements,
+    addedUsageBasedEntitlements,
+    removedUsageBasedEntitlements,
+    willUsageBasedEntitlementsChange
+  } = (0, import_react23.useMemo)(() => {
+    const changedUsageBasedEntitlements2 = [];
+    const addedUsageBasedEntitlements2 = selectedPlan ? usageBasedEntitlements.reduce(
+      (acc, selected) => {
+        const changed = currentUsageBasedEntitlements.find(
+          (current) => current.entitlementId === selected.id && current.quantity !== selected.quantity
+        );
+        if (changed) {
+          changedUsageBasedEntitlements2.push({
+            previous: changed,
+            next: selected
+          });
+        } else {
+          acc.push(selected);
+        }
+        return acc;
+      },
+      []
+    ) : [];
+    const removedUsageBasedEntitlements2 = selectedPlan ? currentUsageBasedEntitlements.reduce(
+      (acc, current) => {
+        const match2 = usageBasedEntitlements.every(
+          (entitlement) => entitlement.id !== current.entitlementId
+        ) && data.featureUsage?.features.find(
+          (usage) => usage.entitlementId === current.entitlementId
+        );
+        if (match2) {
+          acc.push({
+            ...match2,
+            allocation: current.allocation,
+            usage: current.usage,
+            quantity: current.quantity
+          });
+        }
+        return acc;
+      },
+      []
+    ) : [];
+    const willUsageBasedEntitlementsChange2 = changedUsageBasedEntitlements2.length > 0 || addedUsageBasedEntitlements2.length > 0 || removedUsageBasedEntitlements2.length > 0;
+    return {
+      changedUsageBasedEntitlements: changedUsageBasedEntitlements2,
+      addedUsageBasedEntitlements: addedUsageBasedEntitlements2,
+      removedUsageBasedEntitlements: removedUsageBasedEntitlements2,
+      willUsageBasedEntitlementsChange: willUsageBasedEntitlementsChange2
+    };
+  }, [
+    selectedPlan,
+    data.featureUsage?.features,
+    currentUsageBasedEntitlements,
+    usageBasedEntitlements
+  ]);
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id)
   );
@@ -15156,6 +15197,9 @@ var Sidebar = ({
   if (isTrialable && selectedPlan.trialDays) {
     trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
   }
+  const selectedPlanBillingPrice = getBillingPrice(
+    planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     Flex,
     {
@@ -15316,8 +15360,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__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                 "/",
@@ -15343,9 +15387,14 @@ 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;
+                  (acc, entitlement, index) => {
+                    if (typeof entitlement.allocation === "number" && entitlement.feature?.name) {
+                      const {
+                        price: entitlementPrice,
+                        currency: entitlementCurrency
+                      } = getBillingPrice(
+                        planPeriod === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice
+                      ) || {};
                       acc.push(
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           Flex,
@@ -15364,11 +15413,14 @@ var Sidebar = ({
                                   $size: theme.typography.heading4.fontSize,
                                   $weight: theme.typography.heading4.fontWeight,
                                   $color: theme.typography.heading4.color,
-                                  children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                    quantity,
+                                  children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.quantity,
                                     " ",
-                                    getFeatureName(usage.feature, quantity)
-                                  ] }) : usage.feature.name
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      entitlement.quantity
+                                    )
+                                  ] }) : entitlement.feature.name
                                 }
                               ) }),
                               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -15379,24 +15431,24 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
-                                        price * quantity,
-                                        (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
-                                        price,
-                                        (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
+                                        entitlementPrice ?? 0,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
-                                        getFeatureName(usage.feature, 1)
+                                        getFeatureName(entitlement.feature, 1)
                                       ] })
                                     ] })
                                   ]
@@ -15413,8 +15465,14 @@ var Sidebar = ({
                   []
                 ),
                 changedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, previous, next: next2 }, index) => {
-                    if (entitlement?.feature?.name) {
+                  (acc, { previous, next: next2 }, index) => {
+                    if (next2.feature?.name) {
+                      const {
+                        price: entitlementPrice,
+                        currency: entitlementCurrency
+                      } = getBillingPrice(
+                        planPeriod === "year" ? next2.meteredYearlyPrice : next2.meteredMonthlyPrice
+                      ) || {};
                       acc.push(
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { children: [
                           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -15437,7 +15495,7 @@ var Sidebar = ({
                                     children: [
                                       previous.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15450,8 +15508,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__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
@@ -15480,7 +15538,7 @@ var Sidebar = ({
                                     children: [
                                       next2.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15493,8 +15551,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__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
@@ -15514,9 +15572,14 @@ var Sidebar = ({
                   []
                 ),
                 addedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, quantity }, index) => {
+                  (acc, entitlement, 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__ */ (0, import_jsx_runtime13.jsxs)(
                           Flex,
@@ -15533,9 +15596,12 @@ var Sidebar = ({
                                   $weight: theme.typography.heading4.fontWeight,
                                   $color: theme.typography.heading4.color,
                                   children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                    quantity,
+                                    entitlement.quantity,
                                     " ",
-                                    getFeatureName(entitlement.feature, quantity)
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      entitlement.quantity
+                                    )
                                   ] }) : entitlement.feature.name
                                 }
                               ) }),
@@ -15547,20 +15613,20 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
-                                        price * quantity,
-                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
-                                        price,
-                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                        entitlementPrice ?? 0,
+                                        entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
@@ -15619,8 +15685,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__ */ (0, import_jsx_runtime13.jsx)("sub", { children: shortenPeriod(planPeriod) })
@@ -15642,89 +15708,93 @@ var Sidebar = ({
                     children: t2("Add-ons")
                   }
                 ) }),
-                removedAddOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                  Flex,
-                  {
-                    $justifyContent: "space-between",
-                    $alignItems: "center",
-                    $gap: "1rem",
-                    $opacity: "0.625",
-                    $textDecoration: "line-through",
-                    $color: theme.typography.heading4.color,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                        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__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                        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__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
-                              "/",
-                              shortenPeriod(addOn.planPeriod)
-                            ] })
-                          ]
-                        }
-                      ) })
-                    ]
-                  },
-                  index
-                )),
-                selectedAddOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                  Flex,
-                  {
-                    $justifyContent: "space-between",
-                    $alignItems: "center",
-                    $gap: "1rem",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                        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__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                        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__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
-                              "/",
-                              shortenPeriod(planPeriod)
-                            ] })
-                          ]
-                        }
-                      ) })
-                    ]
-                  },
-                  index
-                ))
+                removedAddOns.map((addOn, index) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    Flex,
+                    {
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $gap: "1rem",
+                      $opacity: "0.625",
+                      $textDecoration: "line-through",
+                      $color: theme.typography.heading4.color,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          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__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                          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__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
+                                "/",
+                                shortenPeriod(addOn.planPeriod)
+                              ] })
+                            ]
+                          }
+                        ) })
+                      ]
+                    },
+                    index
+                  );
+                }),
+                selectedAddOns.map((addOn, index) => {
+                  const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
+                    planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
+                  ) || {};
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    Flex,
+                    {
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $gap: "1rem",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          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__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                          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__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
+                                "/",
+                                shortenPeriod(planPeriod)
+                              ] })
+                            ]
+                          }
+                        ) })
+                      ]
+                    },
+                    index
+                  );
+                })
               ] }),
               proration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -15763,7 +15833,7 @@ var Sidebar = ({
                           $color: theme.typography.text.color,
                           children: formatCurrency(
                             proration,
-                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                            selectedPlanBillingPrice?.currency
                           )
                         }
                       ) })
@@ -15870,7 +15940,7 @@ var Sidebar = ({
                         $color: theme.typography.text.color,
                         children: formatCurrency(
                           newCharges / 100 * percentOff,
-                          (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          selectedPlanBillingPrice?.currency
                         )
                       }
                     ) })
@@ -15894,7 +15964,7 @@ var Sidebar = ({
                         children: t2("X off", {
                           amount: formatCurrency(
                             Math.abs(amountOff),
-                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                            selectedPlanBillingPrice?.currency
                           )
                         })
                       }
@@ -15910,7 +15980,7 @@ var Sidebar = ({
                           "-",
                           formatCurrency(
                             Math.abs(amountOff),
-                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                            selectedPlanBillingPrice?.currency
                           )
                         ]
                       }
@@ -15933,7 +16003,7 @@ var Sidebar = ({
                         $weight: theme.typography.text.fontWeight,
                         $color: theme.typography.text.color,
                         children: [
-                          planPeriod === "month" ? "Monthly" : "Yearly",
+                          planPeriod === "year" ? "Yearly" : "Monthly",
                           " total:"
                         ]
                       }
@@ -15986,7 +16056,7 @@ var Sidebar = ({
                         $color: theme.typography.text.color,
                         children: formatCurrency(
                           Math.max(0, dueNow),
-                          (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          selectedPlanBillingPrice?.currency
                         )
                       }
                     ) })
@@ -16016,7 +16086,7 @@ var Sidebar = ({
                     $color: theme.typography.text.color,
                     children: formatCurrency(
                       Math.abs(dueNow),
-                      (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                      selectedPlanBillingPrice?.currency
                     )
                   }
                 ) })
@@ -16083,6 +16153,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__ */ (0, import_jsx_runtime14.jsxs)(
           Flex,
           {
@@ -16126,10 +16199,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__ */ (0, import_jsx_runtime14.jsxs)(
@@ -16400,7 +16470,7 @@ var Checkout = ({
         $alignItems: "center",
         $flexGrow: 1,
         $marginTop: "-3.5rem",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { $size: "3xl" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { $color: theme.primary, $size: "3xl" })
       }
     );
   }
@@ -16628,7 +16698,9 @@ 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
         );
@@ -16758,7 +16830,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;
                           }
@@ -17002,8 +17076,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
   const unitPriceFontSize = 0.875 * theme.typography.text.fontSize;
   const unitPriceColor = hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
-    (acc, { entitlement, quantity, usage }, index) => {
+    (acc, entitlement, index) => {
       if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
+        const { price, currency } = getBillingPrice(
+          period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+        ) || {};
         acc.push(
           /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             Flex,
@@ -17058,8 +17135,8 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         {
                           $size: "lg",
                           type: "number",
-                          value: quantity,
-                          min: usage,
+                          value: entitlement.quantity,
+                          min: entitlement.usage,
                           autoFocus: true,
                           onFocus: (event) => event.target.select(),
                           onChange: (event) => {
@@ -17079,12 +17156,12 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $weight: theme.typography.text.fontWeight,
                           $color: unitPriceColor,
                           children: [
-                            quantity < usage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#DB6669" }, children: [
+                            entitlement.quantity < entitlement.usage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#DB6669" }, children: [
                               t2("Cannot downgrade entitlement"),
                               " "
                             ] }),
                             t2("Currently using", {
-                              quantity: usage,
+                              quantity: entitlement.usage,
                               unit: getFeatureName(entitlement.feature)
                             })
                           ]
@@ -17108,8 +17185,8 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $color: theme.typography.text.color,
                           children: [
                             formatCurrency(
-                              ((period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity,
-                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                              (price ?? 0) * entitlement.quantity,
+                              currency
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
                               "/",
@@ -17126,10 +17203,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__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
                               "/",
                               getFeatureName(entitlement.feature, 1),
@@ -17156,6 +17230,22 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
+  if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
+    const featureUsage = entitlements.find(
+      (usage2) => usage2.feature?.id === entitlement.feature?.id
+    );
+    const allocation = featureUsage?.allocation || 0;
+    const usage = featureUsage?.usage || 0;
+    acc.push({
+      ...entitlement,
+      allocation,
+      usage,
+      quantity: allocation
+    });
+  }
+  return acc;
+};
 var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -17189,34 +17279,21 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }))
   );
-  const createActiveUsageBasedEntitlementsReducer = (0, import_react26.useCallback)(
-    (period = planPeriod) => (acc, entitlement) => {
-      if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
-        const featureUsage = data.featureUsage?.features.find(
-          (usage2) => usage2.feature?.id === entitlement.feature?.id
-        );
-        const allocation = featureUsage?.allocation ?? 0;
-        const usage = featureUsage?.usage ?? 0;
-        acc.push({
-          entitlement,
-          allocation,
-          quantity: allocation,
-          usage
-        });
-      }
-      return acc;
-    },
-    [planPeriod, data.featureUsage?.features]
-  );
+  const currentEntitlements = (0, import_react26.useMemo)(() => {
+    return data.featureUsage?.features || [];
+  }, [data.featureUsage?.features]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react26.useState)(
     () => (selectedPlan?.entitlements || []).reduce(
-      createActiveUsageBasedEntitlementsReducer(),
+      createActiveUsageBasedEntitlementsReducer(
+        currentEntitlements,
+        planPeriod
+      ),
       []
     )
   );
   const payInAdvanceEntitlements = (0, import_react26.useMemo)(
     () => usageBasedEntitlements.filter(
-      ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+      (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
     [usageBasedEntitlements]
   );
@@ -17280,7 +17357,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;
       }
@@ -17295,7 +17372,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,
@@ -17308,8 +17385,8 @@ var CheckoutDialog = ({ top = 0 }) => {
               []
             ),
             payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
-              (acc, { entitlement, quantity }) => {
-                const priceId = (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
+              (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+                const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
                 if (priceId) {
                   acc.push({
                     priceId,
@@ -17358,7 +17435,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       }
       const period = updates.period || planPeriod;
       const entitlements = plan.entitlements.reduce(
-        createActiveUsageBasedEntitlementsReducer(period),
+        createActiveUsageBasedEntitlementsReducer(currentEntitlements, period),
         []
       );
       if (updates.plan) {
@@ -17369,16 +17446,11 @@ var CheckoutDialog = ({ top = 0 }) => {
         period,
         plan: updates.plan,
         payInAdvanceEntitlements: entitlements.filter(
-          ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+          ({ priceBehavior }) => priceBehavior === "pay_in_advance"
         )
       });
     },
-    [
-      planPeriod,
-      selectedPlan,
-      createActiveUsageBasedEntitlementsReducer,
-      previewCheckout
-    ]
+    [planPeriod, selectedPlan, currentEntitlements, previewCheckout]
   );
   const changePlanPeriod = (0, import_react26.useCallback)(
     (period) => {
@@ -17401,16 +17473,14 @@ var CheckoutDialog = ({ top = 0 }) => {
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
-          ({ entitlement, allocation, quantity, usage }) => entitlement.id === id ? {
-            entitlement,
-            allocation,
-            quantity: updatedQuantity,
-            usage
-          } : { entitlement, allocation, quantity, usage }
+          (entitlement) => entitlement.id === id ? {
+            ...entitlement,
+            quantity: updatedQuantity
+          } : entitlement
         );
         previewCheckout({
           payInAdvanceEntitlements: updated.filter(
-            ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+            ({ priceBehavior }) => priceBehavior === "pay_in_advance"
           )
         });
         return updated;
@@ -17539,7 +17609,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                                     $size: theme.typography.heading3.fontSize,
                                     $weight: theme.typography.heading3.fontWeight,
                                     $color: theme.typography.heading3.color,
-                                    $marginBottom: "0.5rem",
+                                    style: { marginBottom: "0.5rem" },
                                     children: activeCheckoutStage.label
                                   }
                                 ),
@@ -17760,8 +17830,10 @@ var PeriodToggle = ({
   const [tooltipZIndex, setTooltipZIndex] = (0, import_react28.useState)(1);
   const savingsPercentage = (0, import_react28.useMemo)(() => {
     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;
@@ -17812,11 +17884,11 @@ var PeriodToggle = ({
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Text,
               {
-                $flexShrink: 0,
                 $font: theme.typography.text.fontFamily,
                 $size: 15,
                 $weight: option === selectedOption ? 600 : 400,
                 $color: theme.typography.text.color,
+                style: { flexShrink: 0 },
                 children: t2("Billed", { period: adjectify(option) })
               }
             )
@@ -17876,23 +17948,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     ),
     [data.company?.plan, planPeriod, availablePlans]
   );
+  const currentEntitlements = data.featureUsage?.features || [];
   const usageBasedEntitlements = (selectedPlan?.entitlements || []).reduce(
-    (acc, entitlement) => {
-      if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.meteredMonthlyPrice || planPeriod === "year" && entitlement.meteredYearlyPrice)) {
-        const featureUsage = data.featureUsage?.features.find(
-          (usage2) => usage2.feature?.id === entitlement.feature?.id
-        );
-        const allocation = featureUsage?.allocation ?? 0;
-        const usage = featureUsage?.usage ?? 0;
-        acc.push({
-          entitlement,
-          allocation,
-          quantity: allocation,
-          usage
-        });
-      }
-      return acc;
-    },
+    createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
   const addOns = (0, import_react29.useMemo)(
@@ -18215,21 +18273,18 @@ var RenderLayout = ({ children }) => {
 };
 
 // src/components/layout/viewport/styles.ts
-var StyledViewport = dt(Box).attrs(({ theme }) => ({
-  $gridTemplateColumns: "repeat(1, minmax(300px, 1fr))",
-  $viewport: {
-    md: {
-      $gridTemplateColumns: `repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`
-    }
-  }
-})).withConfig({
+var StyledViewport = dt.div.withConfig({
   shouldForwardProp: (prop) => !["$numberOfColumns", "numberOfColumns"].includes(prop)
 })`
   display: grid;
-
+  grid-template-columns: repeat(1, minmax(300px, 1fr));
   margin-left: auto;
   margin-right: auto;
   gap: 1rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
+  }
 `;
 
 // src/components/layout/viewport/Viewport.tsx
@@ -18290,25 +18345,11 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const currency = (0, import_react31.useMemo)(() => {
-    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 = (0, import_react31.useMemo)(() => {
-    if (data.company?.plan?.planPeriod === "month") {
-      return monthlyUsageBasedPrice?.price;
-    }
-    if (data.company?.plan?.planPeriod === "year") {
-      return yearlyUsageBasedPrice?.price;
-    }
+  const { price, currency } = (0, import_react31.useMemo)(() => {
+    const { price: entitlementPrice, currency: entitlementCurrency } = getBillingPrice(
+      data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
+    ) || {};
+    return { price: entitlementPrice, currency: entitlementCurrency };
   }, [
     data.company?.plan?.planPeriod,
     monthlyUsageBasedPrice,
@@ -18742,7 +18783,8 @@ Invoices.displayName = "Invoices";
 var import_react34 = require("react");
 
 // src/components/elements/metered-features/styles.ts
-var Container4 = dt(Flex)`
+var Container4 = dt.div`
+  display: flex;
   flex-direction: column;
   gap: 1rem;
 
@@ -18850,7 +18892,9 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
     }, 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__ */ (0, import_jsx_runtime30.jsx)(
         ProgressBar,
         {
@@ -19549,7 +19593,7 @@ var PaymentMethodDetails = ({
         $zIndex: 1,
         $backgroundColor: "black",
         $opacity: 0.5,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { $size: "2xl" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { $color: theme.primary, $size: "2xl" })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
@@ -19713,8 +19757,10 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
   };
   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;
@@ -19737,11 +19783,14 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
   const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-      Box,
+      Notice,
       {
-        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
+        as: Flex,
+        $flexDirection: "column",
+        $gap: "0.5rem",
+        $padding: "1.5rem",
         $textAlign: "center",
-        $padding: "1rem",
+        $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,
@@ -19772,11 +19821,14 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
         ]
       }
     ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-      Box,
+      Notice,
       {
-        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
+        as: Flex,
+        $flexDirection: "column",
+        $gap: "0.5rem",
+        $padding: "1.5rem",
         $textAlign: "center",
-        $padding: "1rem",
+        $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,
@@ -19789,7 +19841,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               children: t2("Subscription canceled")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,
             {
               as: "p",
@@ -19797,14 +19849,14 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               $size: 0.8125 * theme.typography.text.fontSize,
               $weight: theme.typography.text.fontWeight,
               $color: theme.typography.text.color,
-              children: billingSubscription?.cancelAt ? t2("Access to plan will end on", {
+              children: t2("Access to plan will end on", {
                 date: toPrettyDate(
                   new Date(billingSubscription.cancelAt * 1e3),
                   {
                     month: "numeric"
                   }
                 )
-              }) : ""
+              })
             }
           )
         ]
@@ -19996,7 +20048,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                   ":",
                                   " ",
                                   formatCurrency(
-                                    entitlement.price,
+                                    entitlement.price ?? 0,
                                     entitlement.currency
                                   ),
                                   /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
@@ -20018,7 +20070,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                 $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__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
@@ -20039,7 +20091,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                 $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__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
@@ -20219,7 +20271,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
               $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(
@@ -20348,7 +20402,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                   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;
                                   }
@@ -20622,7 +20678,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
               $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__ */ (0, import_jsx_runtime35.jsxs)(
                   Flex,
                   {
@@ -21098,7 +21156,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader, { $size: "2xl", $color: "#194BFB" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };