@schematichq/schematic-components 0.6.2 → 0.6.4

package/dist/schematic-components.cjs.js

@@ -2167,7 +2167,7 @@ var require_debounce = __commonJS({
     var FUNC_ERROR_TEXT = "Expected a function";
     var nativeMax = Math.max;
     var nativeMin = Math.min;
-    function debounce2(func, wait, options) {
+    function debounce3(func, wait, options) {
       var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
       if (typeof func != "function") {
         throw new TypeError(FUNC_ERROR_TEXT);
@@ -2248,7 +2248,7 @@ var require_debounce = __commonJS({
       debounced.flush = flush;
       return debounced;
     }
-    module2.exports = debounce2;
+    module2.exports = debounce3;
   }
 });
 
@@ -3946,6 +3946,7 @@ var VISIBLE_ENTITLEMENT_COUNT = 4;
 var MAX_VISIBLE_INVOICE_COUNT = 12;
 var DEBOUNCE_TIMEOUT = 250;
 var DEFAULT_CURRENCY = "USD";
+var MAXIMUM_SIGNIFICANT_DIGITS = 6;
 
 // src/hooks/useAvailablePlans.ts
 var import_react10 = require("react");
@@ -12249,8 +12250,7 @@ var en_default = {
     "Current plan": "Current plan",
     "Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
     "Currently using": "Currently using {{quantity}} {{unit}}",
-    "Custom Plan Price": "Custom price",
-    "Custom Plan CTA": "Talk to support",
+    "Custom price": "Custom price",
     Discount: "Discount",
     "Due today": "Due today",
     "Edit payment method": "Edit payment method",
@@ -12306,6 +12306,7 @@ var en_default = {
     "Subscribe and close": "Subscribe and close",
     Subscription: "Subscription",
     "Subscription canceled": "Subscription canceled",
+    "Talk to support": "Talk to support",
     Trial: "Trial",
     "Trial ends in": "Trial ends in {{days}} days",
     "Trial plan": "Try free for {{days}} days",
@@ -13106,7 +13107,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.2";
+      headers["X-Schematic-Components-Version"] = "0.6.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13321,17 +13322,21 @@ function formatCurrency(amount, currency) {
       return `$${formatted}${symbol}`;
     };
     if (dollars >= 1e6) {
-      return formatValue(dollars / 1e6, "M");
-    } else if (dollars >= 1e3) {
+      formatValue(dollars / 1e6, "M");
+    }
+    if (dollars >= 1e3) {
       return formatValue(dollars / 1e3, "k");
-    } else {
-      return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: resolvedCurrency,
-        minimumSignificantDigits: 1,
-        maximumSignificantDigits: 4
-      }).format(dollars);
     }
+    const hasManySignificantDigits = /[1-9]/.test(
+      (amount % 1).toFixed(MAXIMUM_SIGNIFICANT_DIGITS)
+    );
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: resolvedCurrency,
+      ...hasManySignificantDigits && {
+        minimumSignificantDigits: 1
+      }
+    }).format(dollars);
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
@@ -14668,6 +14673,7 @@ var Container2 = dt(Box)`
   display: block;
   font-size: ${TEXT_BASE_SIZE}px;
   width: 100%;
+  height: 100%;
 
   *,
   *::before,
@@ -14700,6 +14706,7 @@ var Root = (0, import_react22.forwardRef)(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
+var import_debounce2 = __toESM(require_debounce());
 var import_react30 = require("react");
 var import_react_dom2 = require("react-dom");
 
@@ -16145,12 +16152,19 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     $position: "absolute",
                     $right: "1rem",
                     $top: "1rem",
-                    $fontSize: "0.75rem",
-                    $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                     $backgroundColor: theme.primary,
                     $borderRadius: "9999px",
                     $padding: "0.125rem 0.85rem",
-                    children: t2("Active")
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: 0.75 * theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                        children: t2("Active")
+                      }
+                    )
                   }
                 )
               ] }),
@@ -16619,6 +16633,7 @@ var Plan = ({
           (entitlement) => !!entitlement.priceBehavior
         );
         const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+        const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography.heading2;
         return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           Flex,
           {
@@ -16672,11 +16687,11 @@ var Plan = ({
                       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                         Text,
                         {
-                          $font: theme.typography.heading2.fontFamily,
-                          $size: theme.typography.heading2.fontSize,
-                          $weight: theme.typography.heading2.fontWeight,
-                          $color: theme.typography.heading2.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          $font: headerPriceFontStyle.fontFamily,
+                          $size: headerPriceFontStyle.fontSize,
+                          $weight: headerPriceFontStyle.fontWeight,
+                          $color: headerPriceFontStyle.color,
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
                       !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -16699,12 +16714,19 @@ var Plan = ({
                         $position: "absolute",
                         $right: "1rem",
                         $top: "1rem",
-                        $fontSize: "0.75rem",
-                        $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                         $backgroundColor: theme.primary,
                         $borderRadius: "9999px",
                         $padding: "0.125rem 0.85rem",
-                        children: t2("Active")
+                        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                          Text,
+                          {
+                            $font: theme.typography.text.fontFamily,
+                            $size: 0.75 * theme.typography.text.fontSize,
+                            $weight: theme.typography.text.fontWeight,
+                            $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                            children: t2("Active")
+                          }
+                        )
                       }
                     )
                   ]
@@ -16946,7 +16968,7 @@ var Plan = ({
                           {
                             href: plan.customPlanConfig?.ctaWebSite ?? "#",
                             target: "_blank",
-                            children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                            children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                           }
                         ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                           Tooltip,
@@ -18219,16 +18241,19 @@ var Viewport = (0, import_react30.forwardRef)(
     const canCheckout = data.capabilities?.checkout ?? true;
     (0, import_react30.useLayoutEffect)(() => {
       const parent = portal || document.body;
-      setTop(
-        Math.abs(
+      const setModalY = (0, import_debounce2.default)(() => {
+        const value = Math.abs(
           (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
-        )
-      );
+        );
+        setTop(value);
+      }, 250);
       parent.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
+      window.addEventListener("scroll", setModalY);
       return () => {
+        window.removeEventListener("scroll", setModalY);
         parent.style.overflow = "";
       };
-    }, [layout, portal]);
+    }, [portal, layout]);
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledViewport, { ref, ...props, children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RenderLayout, { children }),
@@ -18719,6 +18744,7 @@ var import_react34 = require("react");
 // src/components/elements/metered-features/styles.ts
 var Container4 = dt(Flex)`
   flex-direction: column;
+  gap: 1rem;
 
   &:last-child {
     overflow: hidden;
@@ -18743,6 +18769,15 @@ var Container4 = dt(Flex)`
           `;
 }}
   }
+
+  ${({ theme }) => {
+  return theme.sectionLayout === "separate" && lt`
+        ${Element}:not(:is(${FussyChild})) {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      `;
+}}
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
@@ -18837,6 +18872,10 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
             $alignItems: "center",
             $padding: `${0.4375 * theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding / TEXT_BASE_SIZE}rem`,
             $backgroundColor: isLightBackground ? darken(theme.card.background, 0.05) : lighten(theme.card.background, 0.1),
+            ...theme.sectionLayout === "separate" && {
+              $borderBottomLeftRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+              $borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
+            },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Text,
@@ -19695,6 +19734,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Box,
@@ -19816,10 +19856,10 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                   /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Text,
                     {
-                      $font: theme.typography[props.header.price.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.price.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.price.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.price.fontStyle].color,
+                      $font: headerPriceFontStyle.fontFamily,
+                      $size: headerPriceFontStyle.fontSize,
+                      $weight: headerPriceFontStyle.fontWeight,
+                      $color: headerPriceFontStyle.color,
                       children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
@@ -20186,6 +20226,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                   (entitlement) => !!entitlement.priceBehavior
                 );
                 const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+                const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.plans.name.fontStyle];
                 return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                   Flex,
                   {
@@ -20234,11 +20275,11 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                               /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 Text,
                                 {
-                                  $font: theme.typography[props.plans.name.fontStyle].fontFamily,
-                                  $size: theme.typography[props.plans.name.fontStyle].fontSize,
-                                  $weight: theme.typography[props.plans.name.fontStyle].fontWeight,
-                                  $color: theme.typography[props.plans.name.fontStyle].color,
-                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                                  $font: headerPriceFontStyle.fontFamily,
+                                  $size: headerPriceFontStyle.fontSize,
+                                  $weight: headerPriceFontStyle.fontWeight,
+                                  $color: headerPriceFontStyle.color,
+                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                                 }
                               ),
                               !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -20261,12 +20302,19 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 $position: "absolute",
                                 $right: "1rem",
                                 $top: "1rem",
-                                $fontSize: "0.75rem",
-                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
                                 $padding: "0.125rem 0.85rem",
-                                children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
+                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                  Text,
+                                  {
+                                    $font: theme.typography.text.fontFamily,
+                                    $size: 0.75 * theme.typography.text.fontSize,
+                                    $weight: theme.typography.text.fontWeight,
+                                    $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                    children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
+                                  }
+                                )
                               }
                             )
                           ]
@@ -20523,7 +20571,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
-                                    children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                                    children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                                   }
                                 ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                   Tooltip,
@@ -20641,12 +20689,19 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                             $position: "absolute",
                             $right: "1rem",
                             $top: "1rem",
-                            $fontSize: "0.75rem",
-                            $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                             $backgroundColor: theme.primary,
                             $borderRadius: "9999px",
                             $padding: "0.125rem 0.85rem",
-                            children: t2("Active")
+                            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 0.75 * theme.typography.text.fontSize,
+                                $weight: theme.typography.text.fontWeight,
+                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                children: t2("Active")
+                              }
+                            )
                           }
                         )
                       ] }),

package/dist/schematic-components.esm.js

@@ -2167,7 +2167,7 @@ var require_debounce = __commonJS({
     var FUNC_ERROR_TEXT = "Expected a function";
     var nativeMax = Math.max;
     var nativeMin = Math.min;
-    function debounce2(func, wait, options) {
+    function debounce3(func, wait, options) {
       var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
       if (typeof func != "function") {
         throw new TypeError(FUNC_ERROR_TEXT);
@@ -2248,7 +2248,7 @@ var require_debounce = __commonJS({
       debounced.flush = flush;
       return debounced;
     }
-    module.exports = debounce2;
+    module.exports = debounce3;
   }
 });
 
@@ -3896,6 +3896,7 @@ var VISIBLE_ENTITLEMENT_COUNT = 4;
 var MAX_VISIBLE_INVOICE_COUNT = 12;
 var DEBOUNCE_TIMEOUT = 250;
 var DEFAULT_CURRENCY = "USD";
+var MAXIMUM_SIGNIFICANT_DIGITS = 6;
 
 // src/hooks/useAvailablePlans.ts
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
@@ -12199,8 +12200,7 @@ var en_default = {
     "Current plan": "Current plan",
     "Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
     "Currently using": "Currently using {{quantity}} {{unit}}",
-    "Custom Plan Price": "Custom price",
-    "Custom Plan CTA": "Talk to support",
+    "Custom price": "Custom price",
     Discount: "Discount",
     "Due today": "Due today",
     "Edit payment method": "Edit payment method",
@@ -12256,6 +12256,7 @@ var en_default = {
     "Subscribe and close": "Subscribe and close",
     Subscription: "Subscription",
     "Subscription canceled": "Subscription canceled",
+    "Talk to support": "Talk to support",
     Trial: "Trial",
     "Trial ends in": "Trial ends in {{days}} days",
     "Trial plan": "Try free for {{days}} days",
@@ -13056,7 +13057,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.2";
+      headers["X-Schematic-Components-Version"] = "0.6.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13271,17 +13272,21 @@ function formatCurrency(amount, currency) {
       return `$${formatted}${symbol}`;
     };
     if (dollars >= 1e6) {
-      return formatValue(dollars / 1e6, "M");
-    } else if (dollars >= 1e3) {
+      formatValue(dollars / 1e6, "M");
+    }
+    if (dollars >= 1e3) {
       return formatValue(dollars / 1e3, "k");
-    } else {
-      return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: resolvedCurrency,
-        minimumSignificantDigits: 1,
-        maximumSignificantDigits: 4
-      }).format(dollars);
     }
+    const hasManySignificantDigits = /[1-9]/.test(
+      (amount % 1).toFixed(MAXIMUM_SIGNIFICANT_DIGITS)
+    );
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: resolvedCurrency,
+      ...hasManySignificantDigits && {
+        minimumSignificantDigits: 1
+      }
+    }).format(dollars);
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
@@ -14618,6 +14623,7 @@ var Container2 = dt(Box)`
   display: block;
   font-size: ${TEXT_BASE_SIZE}px;
   width: 100%;
+  height: 100%;
 
   *,
   *::before,
@@ -14650,6 +14656,7 @@ var Root = forwardRef5(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
+var import_debounce2 = __toESM(require_debounce());
 import { forwardRef as forwardRef6, useLayoutEffect as useLayoutEffect6, useState as useState11 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -16105,12 +16112,19 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                     $position: "absolute",
                     $right: "1rem",
                     $top: "1rem",
-                    $fontSize: "0.75rem",
-                    $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                     $backgroundColor: theme.primary,
                     $borderRadius: "9999px",
                     $padding: "0.125rem 0.85rem",
-                    children: t2("Active")
+                    children: /* @__PURE__ */ jsx14(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: 0.75 * theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                        children: t2("Active")
+                      }
+                    )
                   }
                 )
               ] }),
@@ -16579,6 +16593,7 @@ var Plan = ({
           (entitlement) => !!entitlement.priceBehavior
         );
         const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+        const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography.heading2;
         return /* @__PURE__ */ jsxs12(
           Flex,
           {
@@ -16632,11 +16647,11 @@ var Plan = ({
                       /* @__PURE__ */ jsx17(
                         Text,
                         {
-                          $font: theme.typography.heading2.fontFamily,
-                          $size: theme.typography.heading2.fontSize,
-                          $weight: theme.typography.heading2.fontWeight,
-                          $color: theme.typography.heading2.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          $font: headerPriceFontStyle.fontFamily,
+                          $size: headerPriceFontStyle.fontSize,
+                          $weight: headerPriceFontStyle.fontWeight,
+                          $color: headerPriceFontStyle.color,
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
                       !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs12(
@@ -16659,12 +16674,19 @@ var Plan = ({
                         $position: "absolute",
                         $right: "1rem",
                         $top: "1rem",
-                        $fontSize: "0.75rem",
-                        $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                         $backgroundColor: theme.primary,
                         $borderRadius: "9999px",
                         $padding: "0.125rem 0.85rem",
-                        children: t2("Active")
+                        children: /* @__PURE__ */ jsx17(
+                          Text,
+                          {
+                            $font: theme.typography.text.fontFamily,
+                            $size: 0.75 * theme.typography.text.fontSize,
+                            $weight: theme.typography.text.fontWeight,
+                            $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                            children: t2("Active")
+                          }
+                        )
                       }
                     )
                   ]
@@ -16906,7 +16928,7 @@ var Plan = ({
                           {
                             href: plan.customPlanConfig?.ctaWebSite ?? "#",
                             target: "_blank",
-                            children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                            children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                           }
                         ) : !plan.valid ? /* @__PURE__ */ jsx17(
                           Tooltip,
@@ -18183,16 +18205,19 @@ var Viewport = forwardRef6(
     const canCheckout = data.capabilities?.checkout ?? true;
     useLayoutEffect6(() => {
       const parent = portal || document.body;
-      setTop(
-        Math.abs(
+      const setModalY = (0, import_debounce2.default)(() => {
+        const value = Math.abs(
           (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
-        )
-      );
+        );
+        setTop(value);
+      }, 250);
       parent.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
+      window.addEventListener("scroll", setModalY);
       return () => {
+        window.removeEventListener("scroll", setModalY);
         parent.style.overflow = "";
       };
-    }, [layout, portal]);
+    }, [portal, layout]);
     return /* @__PURE__ */ jsxs20(Fragment9, { children: [
       /* @__PURE__ */ jsxs20(StyledViewport, { ref, ...props, children: [
         /* @__PURE__ */ jsx26(RenderLayout, { children }),
@@ -18683,6 +18708,7 @@ import { forwardRef as forwardRef9, useMemo as useMemo10, useRef as useRef8 } fr
 // src/components/elements/metered-features/styles.ts
 var Container4 = dt(Flex)`
   flex-direction: column;
+  gap: 1rem;
 
   &:last-child {
     overflow: hidden;
@@ -18707,6 +18733,15 @@ var Container4 = dt(Flex)`
           `;
 }}
   }
+
+  ${({ theme }) => {
+  return theme.sectionLayout === "separate" && lt`
+        ${Element}:not(:is(${FussyChild})) {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      `;
+}}
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
@@ -18801,6 +18836,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
             $alignItems: "center",
             $padding: `${0.4375 * theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding / TEXT_BASE_SIZE}rem`,
             $backgroundColor: isLightBackground ? darken(theme.card.background, 0.05) : lighten(theme.card.background, 0.1),
+            ...theme.sectionLayout === "separate" && {
+              $borderBottomLeftRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+              $borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
+            },
             children: [
               /* @__PURE__ */ jsx30(
                 Text,
@@ -19659,6 +19698,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
   return /* @__PURE__ */ jsxs27(Fragment11, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
       Box,
@@ -19780,10 +19820,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                   /* @__PURE__ */ jsx34(
                     Text,
                     {
-                      $font: theme.typography[props.header.price.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.price.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.price.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.price.fontStyle].color,
+                      $font: headerPriceFontStyle.fontFamily,
+                      $size: headerPriceFontStyle.fontSize,
+                      $weight: headerPriceFontStyle.fontWeight,
+                      $color: headerPriceFontStyle.color,
                       children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
@@ -20150,6 +20190,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                   (entitlement) => !!entitlement.priceBehavior
                 );
                 const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+                const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.plans.name.fontStyle];
                 return /* @__PURE__ */ jsxs28(
                   Flex,
                   {
@@ -20198,11 +20239,11 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                               /* @__PURE__ */ jsx35(
                                 Text,
                                 {
-                                  $font: theme.typography[props.plans.name.fontStyle].fontFamily,
-                                  $size: theme.typography[props.plans.name.fontStyle].fontSize,
-                                  $weight: theme.typography[props.plans.name.fontStyle].fontWeight,
-                                  $color: theme.typography[props.plans.name.fontStyle].color,
-                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                                  $font: headerPriceFontStyle.fontFamily,
+                                  $size: headerPriceFontStyle.fontSize,
+                                  $weight: headerPriceFontStyle.fontWeight,
+                                  $color: headerPriceFontStyle.color,
+                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                                 }
                               ),
                               !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs28(
@@ -20225,12 +20266,19 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $position: "absolute",
                                 $right: "1rem",
                                 $top: "1rem",
-                                $fontSize: "0.75rem",
-                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
                                 $padding: "0.125rem 0.85rem",
-                                children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
+                                children: /* @__PURE__ */ jsx35(
+                                  Text,
+                                  {
+                                    $font: theme.typography.text.fontFamily,
+                                    $size: 0.75 * theme.typography.text.fontSize,
+                                    $weight: theme.typography.text.fontWeight,
+                                    $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                    children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
+                                  }
+                                )
                               }
                             )
                           ]
@@ -20487,7 +20535,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
-                                    children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                                    children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                                   }
                                 ) : !plan.valid ? /* @__PURE__ */ jsx35(
                                   Tooltip,
@@ -20605,12 +20653,19 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             $position: "absolute",
                             $right: "1rem",
                             $top: "1rem",
-                            $fontSize: "0.75rem",
-                            $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                             $backgroundColor: theme.primary,
                             $borderRadius: "9999px",
                             $padding: "0.125rem 0.85rem",
-                            children: t2("Active")
+                            children: /* @__PURE__ */ jsx35(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 0.75 * theme.typography.text.fontSize,
+                                $weight: theme.typography.text.fontWeight,
+                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                children: t2("Active")
+                              }
+                            )
                           }
                         )
                       ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",