@schematichq/schematic-components 0.6.1 → 0.6.2

package/dist/schematic-components.cjs.js

@@ -3945,6 +3945,7 @@ var TEXT_BASE_SIZE = 16;
 var VISIBLE_ENTITLEMENT_COUNT = 4;
 var MAX_VISIBLE_INVOICE_COUNT = 12;
 var DEBOUNCE_TIMEOUT = 250;
+var DEFAULT_CURRENCY = "USD";
 
 // src/hooks/useAvailablePlans.ts
 var import_react10 = require("react");
@@ -13105,7 +13106,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.1";
+      headers["X-Schematic-Components-Version"] = "0.6.2";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13173,9 +13174,12 @@ var import_pluralize = __toESM(require_pluralize());
 var getFeatureName = (feature, count = 0) => {
   const shouldBePlural = count === 0 || count > 1;
   const { name, singularName, pluralName } = feature;
-  if (pluralName && shouldBePlural) return pluralName;
-  if (singularName)
+  if (pluralName && shouldBePlural) {
+    return pluralName;
+  }
+  if (singularName) {
     return shouldBePlural ? (0, import_pluralize.default)(singularName, count) : singularName;
+  }
   return (0, import_pluralize.default)(name, count);
 };
 
@@ -13296,15 +13300,14 @@ function shortenPeriod(period) {
 }
 
 // src/utils/string.ts
-var DEFAULT_CURRENCY = "USD";
 function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
 function formatNumber(num) {
   return new Intl.NumberFormat("en-US").format(num);
 }
-function formatCurrency(amount, currency = DEFAULT_CURRENCY) {
-  const nonEmptyCurrency = currency ? currency.toUpperCase() : DEFAULT_CURRENCY;
+function formatCurrency(amount, currency) {
+  const resolvedCurrency = (currency || DEFAULT_CURRENCY).toUpperCase();
   try {
     const dollars = amount / 100;
     const formatValue = (value, symbol) => {
@@ -13312,8 +13315,8 @@ function formatCurrency(amount, currency = DEFAULT_CURRENCY) {
       if (formatted.endsWith(".0")) {
         formatted = formatted.slice(0, -2);
       }
-      if (nonEmptyCurrency !== DEFAULT_CURRENCY) {
-        return `${nonEmptyCurrency}${formatted}${symbol}`;
+      if (resolvedCurrency !== DEFAULT_CURRENCY) {
+        return `${resolvedCurrency}${formatted}${symbol}`;
       }
       return `$${formatted}${symbol}`;
     };
@@ -13324,14 +13327,16 @@ function formatCurrency(amount, currency = DEFAULT_CURRENCY) {
     } else {
       return new Intl.NumberFormat("en-US", {
         style: "currency",
-        currency: nonEmptyCurrency
+        currency: resolvedCurrency,
+        minimumSignificantDigits: 1,
+        maximumSignificantDigits: 4
       }).format(dollars);
     }
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
       style: "currency",
-      currency: nonEmptyCurrency
+      currency: resolvedCurrency
     }).format(amount / 100);
   }
 }
@@ -14583,7 +14588,6 @@ var StyledCard = dt.div(({ theme }) => {
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
   return lt`
     position: relative;
-    overflow: hidden;
 
     ${theme.sectionLayout === "merged" ? `&:not(:has(${FussyChild}))` : `${Element}:not(:is(${FussyChild}))`} {
       color: ${theme.typography.text.color};
@@ -14661,7 +14665,9 @@ var import_react22 = require("react");
 var Container2 = dt(Box)`
   all: initial;
   box-sizing: border-box;
+  display: block;
   font-size: ${TEXT_BASE_SIZE}px;
+  width: 100%;
 
   *,
   *::before,
@@ -16609,6 +16615,10 @@ var Plan = ({
         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 hasUsageBasedEntitlements = plan.entitlements.some(
+          (entitlement) => !!entitlement.priceBehavior
+        );
+        const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
         return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           Flex,
           {
@@ -16666,10 +16676,10 @@ var Plan = ({
                           $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") : formatCurrency(planPrice ?? 0, planCurrency)
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                         Text,
                         {
                           $font: theme.typography.heading2.fontFamily,
@@ -18239,11 +18249,10 @@ Viewport.displayName = "Viewport";
 var import_react31 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Details = ({
-  details,
   shouldWrapChildren,
+  featureUsage,
   ...props
 }) => {
-  const { featureUsage, usageData } = details;
   const {
     allocation,
     feature,
@@ -18252,7 +18261,7 @@ var Details = ({
     softLimit,
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
-  } = featureUsage || {};
+  } = featureUsage;
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
@@ -18304,25 +18313,23 @@ var Details = ({
     if (!feature) {
       return;
     }
-    if (usageData) {
-      let acc;
-      if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
-        acc = `${formatCurrency(price, currency)}/${getFeatureName(feature, 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
-      } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
-        acc = `${usage} ${getFeatureName(feature, usage)} ${t2("used")}`;
-      }
-      if (acc) {
-        if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
-          acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
-        } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
-          acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
-        } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
-          const cost = price * (usage - softLimit);
-          const period = feature.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
-          acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(price)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
-        }
-        return acc;
+    let acc;
+    if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
+      acc = `${formatCurrency(price, currency)}/${getFeatureName(feature, 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
+    } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
+      acc = `${usage} ${getFeatureName(feature, usage)} ${t2("used")}`;
+    }
+    if (acc) {
+      if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
+        acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
+      } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
+        acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
+      } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
+        const cost = price * (usage - softLimit);
+        const period = feature.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
+        acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(price)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
       }
+      return acc;
     }
     if (typeof usage === "number") {
       return typeof allocation === "number" ? t2("usage.limited", {
@@ -18341,8 +18348,7 @@ var Details = ({
     price,
     currency,
     softLimit,
-    usage,
-    usageData
+    usage
   ]);
   if (!text) {
     return null;
@@ -18420,38 +18426,28 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
   const [showCount, setShowCount] = (0, import_react32.useState)(VISIBLE_ENTITLEMENT_COUNT);
-  const orderedFeatureUsage = props.visibleFeatures?.reduce(
-    (acc, id) => {
-      const mappedFeatureUsage = data.featureUsage?.features.find(
-        (usage) => usage.feature?.id === id
-      );
-      if (mappedFeatureUsage) {
-        acc.push(mappedFeatureUsage);
-      }
-      return acc;
-    },
-    []
-  );
-  const entitlements = (orderedFeatureUsage || data.featureUsage?.features || []).reduce(
-    (acc, usage) => {
-      const mappedUsageData = data.activeUsageBasedEntitlements.find(
-        (entitlement) => entitlement.featureId === usage.feature?.id
-      );
-      acc.push({
-        featureUsage: usage,
-        usageData: mappedUsageData
-      });
-      return acc;
-    },
-    []
-  );
-  const featureListSize = entitlements.length;
+  const featureUsage = (0, import_react32.useMemo)(() => {
+    const orderedFeatureUsage = props.visibleFeatures?.reduce(
+      (acc, id) => {
+        const mappedFeatureUsage = data.featureUsage?.features.find(
+          (usage) => usage.feature?.id === id
+        );
+        if (mappedFeatureUsage) {
+          acc.push(mappedFeatureUsage);
+        }
+        return acc;
+      },
+      []
+    );
+    return orderedFeatureUsage || data.featureUsage?.features || [];
+  }, [props.visibleFeatures, data.featureUsage?.features]);
+  const featureListSize = featureUsage.length;
   const handleToggleShowAll = () => {
     setShowCount(
       (prev2) => prev2 > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : featureListSize
     );
   };
-  const shouldShowFeatures = entitlements.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -18476,8 +18472,8 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
             children: props.header.text
           }
         ) }),
-        entitlements.slice(0, showCount).map((entitlement, index) => {
-          const { entitlementExpirationDate, feature } = entitlement.featureUsage || {};
+        featureUsage.slice(0, showCount).map((usage, index) => {
+          const feature = usage.feature;
           const shouldShowDetails = feature?.name && (feature?.featureType === "event" || feature?.featureType === "trait");
           return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             Flex,
@@ -18521,7 +18517,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                           children: feature.name
                         }
                       ),
-                      props.entitlementExpiration.isVisible && entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                      props.entitlementExpiration.isVisible && usage.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                         Text,
                         {
                           $font: theme.typography[props.entitlementExpiration.fontStyle].fontFamily,
@@ -18532,7 +18528,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                           children: [
                             "Expires",
                             " ",
-                            toPrettyDate(entitlementExpirationDate, {
+                            toPrettyDate(usage.entitlementExpirationDate, {
                               month: "short"
                             })
                           ]
@@ -18544,7 +18540,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                 shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Details,
                   {
-                    details: entitlement,
+                    featureUsage: usage,
                     shouldWrapChildren,
                     ...props
                   }
@@ -18724,6 +18720,18 @@ var import_react34 = require("react");
 var Container4 = dt(Flex)`
   flex-direction: column;
 
+  &:last-child {
+    overflow: hidden;
+
+    ${({ theme }) => {
+  const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
+  return lt`
+        border-bottom-left-radius: ${borderRadius};
+        border-bottom-right-radius: ${borderRadius};
+      `;
+}}
+  }
+
   &:not(:last-child) {
     ${({ theme }) => {
   const { l: l2 } = hexToHSL(theme.card.background);
@@ -18772,8 +18780,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const meteredFeatures = (0, import_react34.useMemo)(() => {
-    return (props.visibleFeatures ? props.visibleFeatures.reduce(
+  const featureUsage = (0, import_react34.useMemo)(() => {
+    const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
           (usage) => usage.feature?.id === id
@@ -18784,16 +18792,17 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
         return acc;
       },
       []
-    ) : data.featureUsage?.features || []).filter(
+    );
+    return (orderedFeatureUsage || data.featureUsage?.features || []).filter(
       (usage) => usage.feature?.featureType === "event" || usage.feature?.featureType === "trait"
     );
   }, [props.visibleFeatures, data.featureUsage?.features]);
   const planPeriod = data.company?.plan?.planPeriod;
-  const shouldShowFeatures = meteredFeatures.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container4, { ref, className, children: meteredFeatures.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container4, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -18807,7 +18816,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
       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 progressBar = props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         ProgressBar,
         {
           progress: (isOverage ? softLimit / usage : usage / limit) * 100,
@@ -19685,6 +19694,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
   const subscriptionCurrency = billingSubscription?.currency;
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
+  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Box,
@@ -19810,13 +19820,13 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                       $size: theme.typography[props.header.price.fontStyle].fontSize,
                       $weight: theme.typography[props.header.price.fontStyle].fontWeight,
                       $color: theme.typography[props.header.price.fontStyle].color,
-                      children: formatCurrency(
+                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Text,
                     {
                       $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -20172,6 +20182,10 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                 const { price: planPrice, currency: planCurrency } = (selectedPeriod === "month" ? plan.monthlyPrice : selectedPeriod === "year" && plan.yearlyPrice) || {};
                 const count = entitlementCounts[plan.id];
                 const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
+                const hasUsageBasedEntitlements = plan.entitlements.some(
+                  (entitlement) => !!entitlement.priceBehavior
+                );
+                const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
                 return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                   Flex,
                   {
@@ -20224,10 +20238,10 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                   $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") : formatCurrency(planPrice ?? 0, planCurrency)
+                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                                 }
                               ),
-                              !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                              !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,

package/dist/schematic-components.esm.js

@@ -2253,7 +2253,7 @@ var require_debounce = __commonJS({
 });
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useRef as useRef7, useState as useState12 } from "react";
+import { forwardRef as forwardRef7, useMemo as useMemo9, useRef as useRef7, useState as useState12 } from "react";
 
 // node_modules/react-i18next/dist/es/Trans.js
 import { useContext } from "react";
@@ -3895,6 +3895,7 @@ var TEXT_BASE_SIZE = 16;
 var VISIBLE_ENTITLEMENT_COUNT = 4;
 var MAX_VISIBLE_INVOICE_COUNT = 12;
 var DEBOUNCE_TIMEOUT = 250;
+var DEFAULT_CURRENCY = "USD";
 
 // src/hooks/useAvailablePlans.ts
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
@@ -13055,7 +13056,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.1";
+      headers["X-Schematic-Components-Version"] = "0.6.2";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13123,9 +13124,12 @@ var import_pluralize = __toESM(require_pluralize());
 var getFeatureName = (feature, count = 0) => {
   const shouldBePlural = count === 0 || count > 1;
   const { name, singularName, pluralName } = feature;
-  if (pluralName && shouldBePlural) return pluralName;
-  if (singularName)
+  if (pluralName && shouldBePlural) {
+    return pluralName;
+  }
+  if (singularName) {
     return shouldBePlural ? (0, import_pluralize.default)(singularName, count) : singularName;
+  }
   return (0, import_pluralize.default)(name, count);
 };
 
@@ -13246,15 +13250,14 @@ function shortenPeriod(period) {
 }
 
 // src/utils/string.ts
-var DEFAULT_CURRENCY = "USD";
 function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
 function formatNumber(num) {
   return new Intl.NumberFormat("en-US").format(num);
 }
-function formatCurrency(amount, currency = DEFAULT_CURRENCY) {
-  const nonEmptyCurrency = currency ? currency.toUpperCase() : DEFAULT_CURRENCY;
+function formatCurrency(amount, currency) {
+  const resolvedCurrency = (currency || DEFAULT_CURRENCY).toUpperCase();
   try {
     const dollars = amount / 100;
     const formatValue = (value, symbol) => {
@@ -13262,8 +13265,8 @@ function formatCurrency(amount, currency = DEFAULT_CURRENCY) {
       if (formatted.endsWith(".0")) {
         formatted = formatted.slice(0, -2);
       }
-      if (nonEmptyCurrency !== DEFAULT_CURRENCY) {
-        return `${nonEmptyCurrency}${formatted}${symbol}`;
+      if (resolvedCurrency !== DEFAULT_CURRENCY) {
+        return `${resolvedCurrency}${formatted}${symbol}`;
       }
       return `$${formatted}${symbol}`;
     };
@@ -13274,14 +13277,16 @@ function formatCurrency(amount, currency = DEFAULT_CURRENCY) {
     } else {
       return new Intl.NumberFormat("en-US", {
         style: "currency",
-        currency: nonEmptyCurrency
+        currency: resolvedCurrency,
+        minimumSignificantDigits: 1,
+        maximumSignificantDigits: 4
       }).format(dollars);
     }
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
       style: "currency",
-      currency: nonEmptyCurrency
+      currency: resolvedCurrency
     }).format(amount / 100);
   }
 }
@@ -14533,7 +14538,6 @@ var StyledCard = dt.div(({ theme }) => {
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
   return lt`
     position: relative;
-    overflow: hidden;
 
     ${theme.sectionLayout === "merged" ? `&:not(:has(${FussyChild}))` : `${Element}:not(:is(${FussyChild}))`} {
       color: ${theme.typography.text.color};
@@ -14611,7 +14615,9 @@ import { forwardRef as forwardRef5 } from "react";
 var Container2 = dt(Box)`
   all: initial;
   box-sizing: border-box;
+  display: block;
   font-size: ${TEXT_BASE_SIZE}px;
+  width: 100%;
 
   *,
   *::before,
@@ -16569,6 +16575,10 @@ var Plan = ({
         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 hasUsageBasedEntitlements = plan.entitlements.some(
+          (entitlement) => !!entitlement.priceBehavior
+        );
+        const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
         return /* @__PURE__ */ jsxs12(
           Flex,
           {
@@ -16626,10 +16636,10 @@ var Plan = ({
                           $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") : formatCurrency(planPrice ?? 0, planCurrency)
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && /* @__PURE__ */ jsxs12(
+                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs12(
                         Text,
                         {
                           $font: theme.typography.heading2.fontFamily,
@@ -18203,11 +18213,10 @@ Viewport.displayName = "Viewport";
 import { useMemo as useMemo8 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var Details = ({
-  details,
   shouldWrapChildren,
+  featureUsage,
   ...props
 }) => {
-  const { featureUsage, usageData } = details;
   const {
     allocation,
     feature,
@@ -18216,7 +18225,7 @@ var Details = ({
     softLimit,
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
-  } = featureUsage || {};
+  } = featureUsage;
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
@@ -18268,25 +18277,23 @@ var Details = ({
     if (!feature) {
       return;
     }
-    if (usageData) {
-      let acc;
-      if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
-        acc = `${formatCurrency(price, currency)}/${getFeatureName(feature, 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
-      } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
-        acc = `${usage} ${getFeatureName(feature, usage)} ${t2("used")}`;
-      }
-      if (acc) {
-        if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
-          acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
-        } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
-          acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
-        } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
-          const cost = price * (usage - softLimit);
-          const period = feature.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
-          acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(price)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
-        }
-        return acc;
+    let acc;
+    if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
+      acc = `${formatCurrency(price, currency)}/${getFeatureName(feature, 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
+    } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
+      acc = `${usage} ${getFeatureName(feature, usage)} ${t2("used")}`;
+    }
+    if (acc) {
+      if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
+        acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
+      } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
+        acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
+      } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
+        const cost = price * (usage - softLimit);
+        const period = feature.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
+        acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(price)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
       }
+      return acc;
     }
     if (typeof usage === "number") {
       return typeof allocation === "number" ? t2("usage.limited", {
@@ -18305,8 +18312,7 @@ var Details = ({
     price,
     currency,
     softLimit,
-    usage,
-    usageData
+    usage
   ]);
   if (!text) {
     return null;
@@ -18384,38 +18390,28 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
   const [showCount, setShowCount] = useState12(VISIBLE_ENTITLEMENT_COUNT);
-  const orderedFeatureUsage = props.visibleFeatures?.reduce(
-    (acc, id) => {
-      const mappedFeatureUsage = data.featureUsage?.features.find(
-        (usage) => usage.feature?.id === id
-      );
-      if (mappedFeatureUsage) {
-        acc.push(mappedFeatureUsage);
-      }
-      return acc;
-    },
-    []
-  );
-  const entitlements = (orderedFeatureUsage || data.featureUsage?.features || []).reduce(
-    (acc, usage) => {
-      const mappedUsageData = data.activeUsageBasedEntitlements.find(
-        (entitlement) => entitlement.featureId === usage.feature?.id
-      );
-      acc.push({
-        featureUsage: usage,
-        usageData: mappedUsageData
-      });
-      return acc;
-    },
-    []
-  );
-  const featureListSize = entitlements.length;
+  const featureUsage = useMemo9(() => {
+    const orderedFeatureUsage = props.visibleFeatures?.reduce(
+      (acc, id) => {
+        const mappedFeatureUsage = data.featureUsage?.features.find(
+          (usage) => usage.feature?.id === id
+        );
+        if (mappedFeatureUsage) {
+          acc.push(mappedFeatureUsage);
+        }
+        return acc;
+      },
+      []
+    );
+    return orderedFeatureUsage || data.featureUsage?.features || [];
+  }, [props.visibleFeatures, data.featureUsage?.features]);
+  const featureListSize = featureUsage.length;
   const handleToggleShowAll = () => {
     setShowCount(
       (prev2) => prev2 > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : featureListSize
     );
   };
-  const shouldShowFeatures = entitlements.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -18440,8 +18436,8 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
             children: props.header.text
           }
         ) }),
-        entitlements.slice(0, showCount).map((entitlement, index) => {
-          const { entitlementExpirationDate, feature } = entitlement.featureUsage || {};
+        featureUsage.slice(0, showCount).map((usage, index) => {
+          const feature = usage.feature;
           const shouldShowDetails = feature?.name && (feature?.featureType === "event" || feature?.featureType === "trait");
           return /* @__PURE__ */ jsxs22(
             Flex,
@@ -18485,7 +18481,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           children: feature.name
                         }
                       ),
-                      props.entitlementExpiration.isVisible && entitlementExpirationDate && /* @__PURE__ */ jsxs22(
+                      props.entitlementExpiration.isVisible && usage.entitlementExpirationDate && /* @__PURE__ */ jsxs22(
                         Text,
                         {
                           $font: theme.typography[props.entitlementExpiration.fontStyle].fontFamily,
@@ -18496,7 +18492,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           children: [
                             "Expires",
                             " ",
-                            toPrettyDate(entitlementExpirationDate, {
+                            toPrettyDate(usage.entitlementExpirationDate, {
                               month: "short"
                             })
                           ]
@@ -18508,7 +18504,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                 shouldShowDetails && /* @__PURE__ */ jsx28(
                   Details,
                   {
-                    details: entitlement,
+                    featureUsage: usage,
                     shouldWrapChildren,
                     ...props
                   }
@@ -18682,12 +18678,24 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useMemo as useMemo9, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef9, useMemo as useMemo10, useRef as useRef8 } from "react";
 
 // src/components/elements/metered-features/styles.ts
 var Container4 = dt(Flex)`
   flex-direction: column;
 
+  &:last-child {
+    overflow: hidden;
+
+    ${({ theme }) => {
+  const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
+  return lt`
+        border-bottom-left-radius: ${borderRadius};
+        border-bottom-right-radius: ${borderRadius};
+      `;
+}}
+  }
+
   &:not(:last-child) {
     ${({ theme }) => {
   const { l: l2 } = hexToHSL(theme.card.background);
@@ -18736,8 +18744,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const meteredFeatures = useMemo9(() => {
-    return (props.visibleFeatures ? props.visibleFeatures.reduce(
+  const featureUsage = useMemo10(() => {
+    const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
           (usage) => usage.feature?.id === id
@@ -18748,16 +18756,17 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
         return acc;
       },
       []
-    ) : data.featureUsage?.features || []).filter(
+    );
+    return (orderedFeatureUsage || data.featureUsage?.features || []).filter(
       (usage) => usage.feature?.featureType === "event" || usage.feature?.featureType === "trait"
     );
   }, [props.visibleFeatures, data.featureUsage?.features]);
   const planPeriod = data.company?.plan?.planPeriod;
-  const shouldShowFeatures = meteredFeatures.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx30(Container4, { ref, className, children: meteredFeatures.map(
+  return /* @__PURE__ */ jsx30(Container4, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -18771,7 +18780,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       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 progressBar = props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx30(
+      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx30(
         ProgressBar,
         {
           progress: (isOverage ? softLimit / usage : usage / limit) * 100,
@@ -18995,10 +19004,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef10, useMemo as useMemo11 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo12 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
@@ -19173,7 +19182,7 @@ var PaymentListElement = ({
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
   const iconStyles = getIconStyles({ size: "lg", theme });
-  const expirationDate = useMemo10(() => {
+  const expirationDate = useMemo11(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth && !cardExpYear) {
       return "";
@@ -19288,10 +19297,10 @@ var resolveDesignProps4 = (props) => {
 var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const { data, setLayout } = useEmbed();
-  const paymentMethod = useMemo11(() => {
+  const paymentMethod = useMemo12(() => {
     return data.subscription?.paymentMethod;
   }, [data.subscription?.paymentMethod]);
-  const monthsToExpiration = useMemo11(() => {
+  const monthsToExpiration = useMemo12(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -19318,7 +19327,7 @@ PaymentMethod.displayName = "PaymentMethod";
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 import { Elements } from "@stripe/react-stripe-js";
-import { useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo12, useState as useState14 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo13, useState as useState14 } from "react";
 import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 var resolveDesignProps5 = () => {
   return {
@@ -19352,7 +19361,7 @@ var PaymentMethodDetails = ({
       setPaymentMethod(data.subscription.paymentMethod);
     }
   }, [data.subscription?.paymentMethod]);
-  const monthsToExpiration = useMemo12(() => {
+  const monthsToExpiration = useMemo13(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -19584,7 +19593,7 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef as forwardRef11, useMemo as useMemo13 } from "react";
+import { forwardRef as forwardRef11, useMemo as useMemo14 } from "react";
 import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 var resolveDesignProps6 = (props) => {
   return {
@@ -19638,7 +19647,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const trialEndDays = useMemo13(() => {
+  const trialEndDays = useMemo14(() => {
     const trialEnd = billingSubscription?.trialEnd;
     const trialEndDate = trialEnd ? new Date(trialEnd * 1e3) : /* @__PURE__ */ new Date();
     const todayDate = /* @__PURE__ */ new Date();
@@ -19649,6 +19658,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const subscriptionCurrency = billingSubscription?.currency;
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
+  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
   return /* @__PURE__ */ jsxs27(Fragment11, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
       Box,
@@ -19774,13 +19784,13 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       $size: theme.typography[props.header.price.fontStyle].fontSize,
                       $weight: theme.typography[props.header.price.fontStyle].fontWeight,
                       $color: theme.typography[props.header.price.fontStyle].color,
-                      children: formatCurrency(
+                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx34(
+                  !isUsageBasedPlan && /* @__PURE__ */ jsx34(
                     Text,
                     {
                       $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -20136,6 +20146,10 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                 const { price: planPrice, currency: planCurrency } = (selectedPeriod === "month" ? plan.monthlyPrice : selectedPeriod === "year" && plan.yearlyPrice) || {};
                 const count = entitlementCounts[plan.id];
                 const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
+                const hasUsageBasedEntitlements = plan.entitlements.some(
+                  (entitlement) => !!entitlement.priceBehavior
+                );
+                const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
                 return /* @__PURE__ */ jsxs28(
                   Flex,
                   {
@@ -20188,10 +20202,10 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $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") : formatCurrency(planPrice ?? 0, planCurrency)
+                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom Plan Price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                                 }
                               ),
-                              !plan.custom && /* @__PURE__ */ jsxs28(
+                              !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs28(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20778,7 +20792,7 @@ var UnsubscribeButton = forwardRef13(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef14, useMemo as useMemo14 } from "react";
+import { forwardRef as forwardRef14, useMemo as useMemo15 } from "react";
 import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 function resolveDesignProps9(props) {
   return {
@@ -20804,7 +20818,7 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = useMemo14(() => {
+  const { upcomingInvoice, discounts } = useMemo15(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,

package/package.json

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