@schematichq/schematic-components 0.7.0 → 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,
@@ -13111,7 +13112,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.0";
+      headers["X-Schematic-Components-Version"] = "0.7.1";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13456,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)
@@ -13582,6 +13580,7 @@ var Button2 = (0, import_react16.forwardRef)(
     children,
     ...props
   }, ref) => {
+    const theme = nt();
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       Button,
       {
@@ -13592,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
         ]
       }
@@ -14100,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)};
     `;
 }}
 
@@ -14280,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
@@ -14311,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
@@ -14376,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`
@@ -14413,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;
@@ -14480,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);
@@ -14597,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);
@@ -14624,6 +14618,11 @@ var StyledCard = dt.div(({ theme }) => {
             `}
       }
     }
+
+    ${Notice}:first-child {
+      border-top-left-radius: ${borderRadius};
+      border-top-right-radius: ${borderRadius};
+    }
   `;
 });
 
@@ -14678,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%;
 
@@ -14953,29 +14953,36 @@ 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 planPrice;
     let currency;
@@ -14992,15 +14999,17 @@ var Sidebar = ({
     if (planPrice) {
       total += planPrice;
     }
-    const addOnCost = addOns.reduce(
-      (sum, addOn) => sum + (getBillingPrice(
-        planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
-      )?.price ?? 0),
-      0
-    );
+    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 * (getBillingPrice(
+      (sum, entitlement) => sum + entitlement.quantity * (getBillingPrice(
         planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
       )?.price ?? 0),
       0
@@ -15050,8 +15059,8 @@ var Sidebar = ({
             return acc;
           }, []),
           payInAdvance: payInAdvanceEntitlements.reduce(
-            (acc, { entitlement, quantity }) => {
-              const priceId2 = (planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
+            (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+              const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
               if (priceId2) {
                 acc.push({
                   priceId: priceId2,
@@ -15119,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)
   );
@@ -15364,13 +15387,13 @@ var Sidebar = ({
                   }
                 ) }),
                 removedUsageBasedEntitlements.reduce(
-                  (acc, { allocation, quantity, usage }, index) => {
-                    if (typeof allocation === "number" && usage.feature?.name) {
+                  (acc, entitlement, index) => {
+                    if (typeof entitlement.allocation === "number" && entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
                         currency: entitlementCurrency
                       } = getBillingPrice(
-                        planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
+                        planPeriod === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice
                       ) || {};
                       acc.push(
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -15390,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)(
@@ -15405,9 +15431,9 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    usage.priceBehavior === "pay_in_advance" && /* @__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(
-                                        (entitlementPrice ?? 0) * quantity,
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
@@ -15415,14 +15441,14 @@ var Sidebar = ({
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    usage.priceBehavior === "pay_as_you_go" && /* @__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(
                                         entitlementPrice ?? 0,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
-                                        getFeatureName(usage.feature, 1)
+                                        getFeatureName(entitlement.feature, 1)
                                       ] })
                                     ] })
                                   ]
@@ -15439,13 +15465,13 @@ 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" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+                        planPeriod === "year" ? next2.meteredYearlyPrice : next2.meteredMonthlyPrice
                       ) || {};
                       acc.push(
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { children: [
@@ -15469,7 +15495,7 @@ var Sidebar = ({
                                     children: [
                                       previous.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15512,7 +15538,7 @@ var Sidebar = ({
                                     children: [
                                       next2.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15546,7 +15572,7 @@ var Sidebar = ({
                   []
                 ),
                 addedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, quantity }, index) => {
+                  (acc, entitlement, index) => {
                     if (entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
@@ -15570,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
                                 }
                               ) }),
@@ -15586,7 +15615,7 @@ var Sidebar = ({
                                   children: [
                                     entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
-                                        (entitlementPrice ?? 0) * quantity,
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
@@ -16441,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" })
       }
     );
   }
@@ -17047,7 +17076,7 @@ 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
@@ -17106,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) => {
@@ -17127,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)
                             })
                           ]
@@ -17155,7 +17184,10 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $weight: theme.typography.text.fontWeight,
                           $color: theme.typography.text.color,
                           children: [
-                            formatCurrency((price ?? 0) * quantity, currency),
+                            formatCurrency(
+                              (price ?? 0) * entitlement.quantity,
+                              currency
+                            ),
                             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(period)
@@ -17198,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();
@@ -17231,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]
   );
@@ -17350,8 +17385,8 @@ var CheckoutDialog = ({ top = 0 }) => {
               []
             ),
             payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
-              (acc, { entitlement, quantity }) => {
-                const priceId = (period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
+              (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+                const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
                 if (priceId) {
                   acc.push({
                     priceId,
@@ -17400,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) {
@@ -17411,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) => {
@@ -17443,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;
@@ -17581,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
                                   }
                                 ),
@@ -17856,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) })
               }
             )
@@ -17920,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)(
@@ -18259,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
@@ -18772,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;
 
@@ -19581,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)(
@@ -19771,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,
@@ -19806,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,
@@ -19823,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",
@@ -19831,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"
                   }
                 )
-              }) : ""
+              })
             }
           )
         ]
@@ -21138,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" })
     }
   );
 };