npm - @schematichq/schematic-components - Versions diffs - 0.7.6 → 0.7.8 - Mend

@schematichq/schematic-components 0.7.6 → 0.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/schematic-components.cjs.js +239 -194
package/dist/schematic-components.d.ts +12 -0
package/dist/schematic-components.esm.js +249 -204
package/package.json +1 -1

package/dist/schematic-components.cjs.js CHANGED Viewed

@@ -10765,6 +10765,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     interval: json["interval"],
     isActive: json["is_active"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
+    packageSize: json["package_size"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
@@ -10826,6 +10827,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     interval: json["interval"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     name: json["name"],
+    packageSize: json["package_size"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
@@ -13193,7 +13195,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.6";
+      headers["X-Schematic-Components-Version"] = "0.7.8";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -16391,158 +16393,6 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
   ) });
 };
-// node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "basil";
-var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
-  return version === 3 ? "v3" : version;
-};
-var ORIGIN = "https://js.stripe.com";
-var STRIPE_JS_URL = "".concat(ORIGIN, "/").concat(RELEASE_TRAIN, "/stripe.js");
-var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
-var STRIPE_JS_URL_REGEX = /^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;
-var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
-var isStripeJSURL = function isStripeJSURL2(url) {
-  return V3_URL_REGEX.test(url) || STRIPE_JS_URL_REGEX.test(url);
-};
-var findScript = function findScript2() {
-  var scripts = document.querySelectorAll('script[src^="'.concat(ORIGIN, '"]'));
-  for (var i2 = 0; i2 < scripts.length; i2++) {
-    var script = scripts[i2];
-    if (!isStripeJSURL(script.src)) {
-      continue;
-    }
-    return script;
-  }
-  return null;
-};
-var injectScript = function injectScript2(params) {
-  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
-  var script = document.createElement("script");
-  script.src = "".concat(STRIPE_JS_URL).concat(queryString);
-  var headOrBody = document.head || document.body;
-  if (!headOrBody) {
-    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
-  }
-  headOrBody.appendChild(script);
-  return script;
-};
-var registerWrapper = function registerWrapper2(stripe, startTime) {
-  if (!stripe || !stripe._registerWrapper) {
-    return;
-  }
-  stripe._registerWrapper({
-    name: "stripe-js",
-    version: "7.0.0",
-    startTime
-  });
-};
-var stripePromise$1 = null;
-var onErrorListener = null;
-var onLoadListener = null;
-var onError = function onError2(reject) {
-  return function(cause) {
-    reject(new Error("Failed to load Stripe.js", {
-      cause
-    }));
-  };
-};
-var onLoad = function onLoad2(resolve, reject) {
-  return function() {
-    if (window.Stripe) {
-      resolve(window.Stripe);
-    } else {
-      reject(new Error("Stripe.js not available"));
-    }
-  };
-};
-var loadScript = function loadScript2(params) {
-  if (stripePromise$1 !== null) {
-    return stripePromise$1;
-  }
-  stripePromise$1 = new Promise(function(resolve, reject) {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      resolve(null);
-      return;
-    }
-    if (window.Stripe && params) {
-      console.warn(EXISTING_SCRIPT_MESSAGE);
-    }
-    if (window.Stripe) {
-      resolve(window.Stripe);
-      return;
-    }
-    try {
-      var script = findScript();
-      if (script && params) {
-        console.warn(EXISTING_SCRIPT_MESSAGE);
-      } else if (!script) {
-        script = injectScript(params);
-      } else if (script && onLoadListener !== null && onErrorListener !== null) {
-        var _script$parentNode;
-        script.removeEventListener("load", onLoadListener);
-        script.removeEventListener("error", onErrorListener);
-        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
-        script = injectScript(params);
-      }
-      onLoadListener = onLoad(resolve, reject);
-      onErrorListener = onError(reject);
-      script.addEventListener("load", onLoadListener);
-      script.addEventListener("error", onErrorListener);
-    } catch (error) {
-      reject(error);
-      return;
-    }
-  });
-  return stripePromise$1["catch"](function(error) {
-    stripePromise$1 = null;
-    return Promise.reject(error);
-  });
-};
-var initStripe = function initStripe2(maybeStripe, args, startTime) {
-  if (maybeStripe === null) {
-    return null;
-  }
-  var pk = args[0];
-  var isTestKey = pk.match(/^pk_test/);
-  var version = runtimeVersionToUrlVersion(maybeStripe.version);
-  var expectedVersion = RELEASE_TRAIN;
-  if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
-  }
-  var stripe = maybeStripe.apply(void 0, args);
-  registerWrapper(stripe, startTime);
-  return stripe;
-};
-var stripePromise;
-var loadCalled = false;
-var getStripePromise = function getStripePromise2() {
-  if (stripePromise) {
-    return stripePromise;
-  }
-  stripePromise = loadScript(null)["catch"](function(error) {
-    stripePromise = null;
-    return Promise.reject(error);
-  });
-  return stripePromise;
-};
-Promise.resolve().then(function() {
-  return getStripePromise();
-})["catch"](function(error) {
-  if (!loadCalled) {
-    console.warn(error);
-  }
-});
-var loadStripe = function loadStripe2() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  loadCalled = true;
-  var startTime = Date.now();
-  return getStripePromise().then(function(maybeStripe) {
-    return initStripe(maybeStripe, args, startTime);
-  });
-};
 // src/components/shared/checkout-dialog/Checkout.tsx
 var import_react24 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -16553,36 +16403,11 @@ var Checkout = ({
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const { api, data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [stripe, setStripe] = (0, import_react24.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react24.useState)();
   const [discount, setDiscount] = (0, import_react24.useState)("");
-  (0, import_react24.useEffect)(() => {
-    if (api && data.component?.id) {
-      api.getSetupIntent({ componentId: data.component.id }).then((res) => setSetupIntent(res.data));
-    }
-  }, [api, data.component?.id]);
-  (0, import_react24.useEffect)(() => {
-    if (setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
-    }
-  }, [setupIntent?.publishableKey]);
   if (!requiresPayment) {
     return null;
   }
-  if (!stripe) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      Flex,
-      {
-        $justifyContent: "center",
-        $alignItems: "center",
-        $flexGrow: 1,
-        $marginTop: "-3.5rem",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { $color: theme.primary, $size: "3xl" })
-      }
-    );
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PaymentMethodDetails, { setPaymentMethodId }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
@@ -16936,12 +16761,19 @@ var Plan = ({
                             }[entitlement.metricPeriod];
                           }
                           const limit = entitlement.softLimit ?? entitlement.valueNumeric;
-                          const {
-                            price: entitlementPrice,
-                            currency: entitlementCurrency
-                          } = getBillingPrice(
+                          const entitlementPriceObject = getBillingPrice(
                             period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
-                          ) || {};
+                          ) || null;
+                          let entitlementPrice = entitlementPriceObject?.price;
+                          const entitlementCurrency = entitlementPriceObject?.currency;
+                          if (entitlement.priceBehavior === "overage" && entitlementPriceObject) {
+                            const { priceTier } = entitlementPriceObject;
+                            if (priceTier.length) {
+                              const lastTier = priceTier[priceTier.length - 1];
+                              const { perUnitPrice, perUnitPriceDecimal } = lastTier;
+                              entitlementPrice = perUnitPriceDecimal ? Number(perUnitPriceDecimal) : perUnitPrice ?? 0;
+                            }
+                          }
                           if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                             return acc;
                           }
@@ -18394,6 +18226,10 @@ var StyledViewport = dt.div.withConfig({
   @media (min-width: 768px) {
     grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
   }
+  @container (max-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
 `;
 // src/components/layout/viewport/Viewport.tsx
@@ -18887,10 +18723,13 @@ var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref
     );
   };
   (0, import_react34.useEffect)(() => {
-    api?.listInvoices().then(({ data: data2 }) => {
-      setInvoices(formatInvoices(data2));
+    api?.listInvoices().then((response) => {
+      setInvoices(formatInvoices(response.data));
     });
   }, [api]);
+  (0, import_react34.useEffect)(() => {
+    setInvoices(formatInvoices(data));
+  }, [data]);
   if (invoices.length === 0) {
     return null;
   }
@@ -19064,9 +18903,32 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
     }, index) => {
       const limit = softLimit ?? allocation ?? 0;
       const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
-      const { price, currency } = getBillingPrice(
+      let { price, currency } = getBillingPrice(
         planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
       ) || {};
+      if (priceBehavior === "overage") {
+        const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice)?.productId;
+        if (productId) {
+          const products = data?.subscription?.products ?? [];
+          const product = products.find((p2) => p2.id === productId);
+          if (product && product.priceTier?.length > 1) {
+            const overagePrice = product.priceTier[product.priceTier.length - 1];
+            price = overagePrice.perUnitPriceDecimal ? Number(overagePrice.perUnitPriceDecimal) : overagePrice.perUnitPrice ?? 0;
+            currency = product.currency;
+          }
+        }
+      }
+      if (isOverage) {
+        const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice).productId;
+        if (productId) {
+          const products = data?.subscription?.products ?? [];
+          const product = products.find((p2) => p2.id === productId);
+          if (product) {
+            price = product.price;
+            currency = product.currency;
+          }
+        }
+      }
       const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         ProgressBar,
         {
@@ -19617,6 +19479,160 @@ PaymentMethod.displayName = "PaymentMethod";
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
+// node_modules/@stripe/stripe-js/dist/index.mjs
+var RELEASE_TRAIN = "basil";
+var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
+  return version === 3 ? "v3" : version;
+};
+var ORIGIN = "https://js.stripe.com";
+var STRIPE_JS_URL = "".concat(ORIGIN, "/").concat(RELEASE_TRAIN, "/stripe.js");
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var STRIPE_JS_URL_REGEX = /^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var isStripeJSURL = function isStripeJSURL2(url) {
+  return V3_URL_REGEX.test(url) || STRIPE_JS_URL_REGEX.test(url);
+};
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(ORIGIN, '"]'));
+  for (var i2 = 0; i2 < scripts.length; i2++) {
+    var script = scripts[i2];
+    if (!isStripeJSURL(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(STRIPE_JS_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "7.0.0",
+    startTime
+  });
+};
+var stripePromise$1 = null;
+var onErrorListener = null;
+var onLoadListener = null;
+var onError = function onError2(reject) {
+  return function(cause) {
+    reject(new Error("Failed to load Stripe.js", {
+      cause
+    }));
+  };
+};
+var onLoad = function onLoad2(resolve, reject) {
+  return function() {
+    if (window.Stripe) {
+      resolve(window.Stripe);
+    } else {
+      reject(new Error("Stripe.js not available"));
+    }
+  };
+};
+var loadScript = function loadScript2(params) {
+  if (stripePromise$1 !== null) {
+    return stripePromise$1;
+  }
+  stripePromise$1 = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      } else if (script && onLoadListener !== null && onErrorListener !== null) {
+        var _script$parentNode;
+        script.removeEventListener("load", onLoadListener);
+        script.removeEventListener("error", onErrorListener);
+        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+        script = injectScript(params);
+      }
+      onLoadListener = onLoad(resolve, reject);
+      onErrorListener = onError(reject);
+      script.addEventListener("load", onLoadListener);
+      script.addEventListener("error", onErrorListener);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise$1["catch"](function(error) {
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var pk = args[0];
+  var isTestKey = pk.match(/^pk_test/);
+  var version = runtimeVersionToUrlVersion(maybeStripe.version);
+  var expectedVersion = RELEASE_TRAIN;
+  if (isTestKey && version !== expectedVersion) {
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var stripePromise;
+var loadCalled = false;
+var getStripePromise = function getStripePromise2() {
+  if (stripePromise) {
+    return stripePromise;
+  }
+  stripePromise = loadScript(null)["catch"](function(error) {
+    stripePromise = null;
+    return Promise.reject(error);
+  });
+  return stripePromise;
+};
+Promise.resolve().then(function() {
+  return getStripePromise();
+})["catch"](function(error) {
+  if (!loadCalled) {
+    console.warn(error);
+  }
+});
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadCalled = true;
+  var startTime = Date.now();
+  return getStripePromise().then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+// src/components/elements/payment-method/PaymentMethodDetails.tsx
 var import_react38 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
@@ -20085,8 +20101,24 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
             usageBasedEntitlements.reduce(
               (acc, entitlement, entitlementIndex) => {
                 const limit = entitlement.softLimit ?? entitlement.allocation ?? 0;
-                const overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
+                let overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
                 const amount = overageAmount || entitlement.allocation || 0;
+                if (entitlement.priceBehavior === "overage" && data.subscription) {
+                  const subscription = data.subscription;
+                  const entitlementPrice = entitlement.monthlyUsageBasedPrice ?? entitlement.yearlyUsageBasedPrice;
+                  if (entitlementPrice) {
+                    const entitlementProduct = subscription.products.find(
+                      (product) => product.id === entitlementPrice.productId
+                    );
+                    if (entitlementProduct?.priceTier.length) {
+                      const entitlementProductLastTierPrice = entitlementProduct?.priceTier[entitlementProduct?.priceTier?.length - 1];
+                      overageAmount = (entitlement?.usage ?? 0) - (entitlementProduct?.priceTier[0].upTo ?? 0);
+                      entitlement.price = entitlementProductLastTierPrice?.perUnitPriceDecimal ? Number(
+                        entitlementProductLastTierPrice?.perUnitPriceDecimal
+                      ) : entitlementProductLastTierPrice.perUnitPrice ?? entitlement.price;
+                    }
+                  }
+                }
                 if (entitlement.feature?.name) {
                   acc.push(
                     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -20117,7 +20149,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                                 children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X over the limit", {
                                   amount: overageAmount
                                 }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                                  t2("Overage fee"),
+                                  t2("overage fee"),
                                   ":",
                                   " ",
                                   formatCurrency(
@@ -20461,12 +20493,25 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                               plan.entitlements.reduce(
                                 (acc, entitlement, entitlementIndex) => {
                                   const limit = entitlement.softLimit ?? entitlement.valueNumeric;
-                                  const {
-                                    price: entitlementPrice,
-                                    currency: entitlementCurrency
-                                  } = getBillingPrice(
-                                    selectedPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
-                                  ) || {};
+                                  let entitlementPriceObject;
+                                  if (selectedPeriod === "month") {
+                                    entitlementPriceObject = entitlement.meteredMonthlyPrice;
+                                  } else if (selectedPeriod === "year") {
+                                    entitlementPriceObject = entitlement.meteredYearlyPrice;
+                                  }
+                                  let entitlementPrice;
+                                  let entitlementCurrency;
+                                  if (entitlementPriceObject) {
+                                    entitlementPrice = entitlementPriceObject?.price;
+                                    entitlementCurrency = entitlementPriceObject?.currency;
+                                  }
+                                  if (entitlementPriceObject && entitlement.priceBehavior === "overage") {
+                                    if (entitlementPriceObject.priceTier?.length > 1) {
+                                      const overagePrice = entitlementPriceObject.priceTier[entitlementPriceObject.priceTier.length - 1];
+                                      entitlementPrice = overagePrice.perUnitPriceDecimal ? Number(overagePrice.perUnitPriceDecimal) : overagePrice.perUnitPrice ?? 0;
+                                      entitlementCurrency = entitlementPriceObject.currency;
+                                    }
+                                  }
                                   if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                                     return acc;
                                   }

package/dist/schematic-components.d.ts CHANGED Viewed

@@ -170,6 +170,12 @@ declare interface BillingPriceView {
      * @memberof BillingPriceView
      */
     meterId?: string | null;
+    /**
+     *
+     * @type {number}
+     * @memberof BillingPriceView
+     */
+    packageSize: number;
     /**
      *
      * @type {number}
@@ -384,6 +390,12 @@ declare interface BillingProductForSubscriptionResponseData {
      * @memberof BillingProductForSubscriptionResponseData
      */
     name: string;
+    /**
+     *
+     * @type {number}
+     * @memberof BillingProductForSubscriptionResponseData
+     */
+    packageSize: number;
     /**
      *
      * @type {number}

package/dist/schematic-components.esm.js CHANGED Viewed

@@ -10712,6 +10712,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     interval: json["interval"],
     isActive: json["is_active"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
+    packageSize: json["package_size"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
@@ -10773,6 +10774,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     interval: json["interval"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     name: json["name"],
+    packageSize: json["package_size"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
@@ -13140,7 +13142,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.6";
+      headers["X-Schematic-Components-Version"] = "0.7.8";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14781,7 +14783,7 @@ import { createPortal as createPortal2 } from "react-dom";
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 import {
   useCallback as useCallback8,
-  useEffect as useEffect5,
+  useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo5,
   useRef as useRef5,
@@ -16348,160 +16350,8 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
   ) });
 };
-// node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "basil";
-var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
-  return version === 3 ? "v3" : version;
-};
-var ORIGIN = "https://js.stripe.com";
-var STRIPE_JS_URL = "".concat(ORIGIN, "/").concat(RELEASE_TRAIN, "/stripe.js");
-var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
-var STRIPE_JS_URL_REGEX = /^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;
-var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
-var isStripeJSURL = function isStripeJSURL2(url) {
-  return V3_URL_REGEX.test(url) || STRIPE_JS_URL_REGEX.test(url);
-};
-var findScript = function findScript2() {
-  var scripts = document.querySelectorAll('script[src^="'.concat(ORIGIN, '"]'));
-  for (var i2 = 0; i2 < scripts.length; i2++) {
-    var script = scripts[i2];
-    if (!isStripeJSURL(script.src)) {
-      continue;
-    }
-    return script;
-  }
-  return null;
-};
-var injectScript = function injectScript2(params) {
-  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
-  var script = document.createElement("script");
-  script.src = "".concat(STRIPE_JS_URL).concat(queryString);
-  var headOrBody = document.head || document.body;
-  if (!headOrBody) {
-    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
-  }
-  headOrBody.appendChild(script);
-  return script;
-};
-var registerWrapper = function registerWrapper2(stripe, startTime) {
-  if (!stripe || !stripe._registerWrapper) {
-    return;
-  }
-  stripe._registerWrapper({
-    name: "stripe-js",
-    version: "7.0.0",
-    startTime
-  });
-};
-var stripePromise$1 = null;
-var onErrorListener = null;
-var onLoadListener = null;
-var onError = function onError2(reject) {
-  return function(cause) {
-    reject(new Error("Failed to load Stripe.js", {
-      cause
-    }));
-  };
-};
-var onLoad = function onLoad2(resolve, reject) {
-  return function() {
-    if (window.Stripe) {
-      resolve(window.Stripe);
-    } else {
-      reject(new Error("Stripe.js not available"));
-    }
-  };
-};
-var loadScript = function loadScript2(params) {
-  if (stripePromise$1 !== null) {
-    return stripePromise$1;
-  }
-  stripePromise$1 = new Promise(function(resolve, reject) {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      resolve(null);
-      return;
-    }
-    if (window.Stripe && params) {
-      console.warn(EXISTING_SCRIPT_MESSAGE);
-    }
-    if (window.Stripe) {
-      resolve(window.Stripe);
-      return;
-    }
-    try {
-      var script = findScript();
-      if (script && params) {
-        console.warn(EXISTING_SCRIPT_MESSAGE);
-      } else if (!script) {
-        script = injectScript(params);
-      } else if (script && onLoadListener !== null && onErrorListener !== null) {
-        var _script$parentNode;
-        script.removeEventListener("load", onLoadListener);
-        script.removeEventListener("error", onErrorListener);
-        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
-        script = injectScript(params);
-      }
-      onLoadListener = onLoad(resolve, reject);
-      onErrorListener = onError(reject);
-      script.addEventListener("load", onLoadListener);
-      script.addEventListener("error", onErrorListener);
-    } catch (error) {
-      reject(error);
-      return;
-    }
-  });
-  return stripePromise$1["catch"](function(error) {
-    stripePromise$1 = null;
-    return Promise.reject(error);
-  });
-};
-var initStripe = function initStripe2(maybeStripe, args, startTime) {
-  if (maybeStripe === null) {
-    return null;
-  }
-  var pk = args[0];
-  var isTestKey = pk.match(/^pk_test/);
-  var version = runtimeVersionToUrlVersion(maybeStripe.version);
-  var expectedVersion = RELEASE_TRAIN;
-  if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
-  }
-  var stripe = maybeStripe.apply(void 0, args);
-  registerWrapper(stripe, startTime);
-  return stripe;
-};
-var stripePromise;
-var loadCalled = false;
-var getStripePromise = function getStripePromise2() {
-  if (stripePromise) {
-    return stripePromise;
-  }
-  stripePromise = loadScript(null)["catch"](function(error) {
-    stripePromise = null;
-    return Promise.reject(error);
-  });
-  return stripePromise;
-};
-Promise.resolve().then(function() {
-  return getStripePromise();
-})["catch"](function(error) {
-  if (!loadCalled) {
-    console.warn(error);
-  }
-});
-var loadStripe = function loadStripe2() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  loadCalled = true;
-  var startTime = Date.now();
-  return getStripePromise().then(function(maybeStripe) {
-    return initStripe(maybeStripe, args, startTime);
-  });
-};
 // src/components/shared/checkout-dialog/Checkout.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useState as useState5 } from "react";
 import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var Checkout = ({
   requiresPayment,
@@ -16510,36 +16360,11 @@ var Checkout = ({
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const { api, data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [stripe, setStripe] = useState5(null);
-  const [setupIntent, setSetupIntent] = useState5();
   const [discount, setDiscount] = useState5("");
-  useEffect4(() => {
-    if (api && data.component?.id) {
-      api.getSetupIntent({ componentId: data.component.id }).then((res) => setSetupIntent(res.data));
-    }
-  }, [api, data.component?.id]);
-  useEffect4(() => {
-    if (setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
-    }
-  }, [setupIntent?.publishableKey]);
   if (!requiresPayment) {
     return null;
   }
-  if (!stripe) {
-    return /* @__PURE__ */ jsx15(
-      Flex,
-      {
-        $justifyContent: "center",
-        $alignItems: "center",
-        $flexGrow: 1,
-        $marginTop: "-3.5rem",
-        children: /* @__PURE__ */ jsx15(Loader, { $color: theme.primary, $size: "3xl" })
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs10(Fragment5, { children: [
     /* @__PURE__ */ jsx15(PaymentMethodDetails, { setPaymentMethodId }),
     /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $gap: "1rem", children: [
@@ -16893,12 +16718,19 @@ var Plan = ({
                             }[entitlement.metricPeriod];
                           }
                           const limit = entitlement.softLimit ?? entitlement.valueNumeric;
-                          const {
-                            price: entitlementPrice,
-                            currency: entitlementCurrency
-                          } = getBillingPrice(
+                          const entitlementPriceObject = getBillingPrice(
                             period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
-                          ) || {};
+                          ) || null;
+                          let entitlementPrice = entitlementPriceObject?.price;
+                          const entitlementCurrency = entitlementPriceObject?.currency;
+                          if (entitlement.priceBehavior === "overage" && entitlementPriceObject) {
+                            const { priceTier } = entitlementPriceObject;
+                            if (priceTier.length) {
+                              const lastTier = priceTier[priceTier.length - 1];
+                              const { perUnitPrice, perUnitPriceDecimal } = lastTier;
+                              entitlementPrice = perUnitPriceDecimal ? Number(perUnitPriceDecimal) : perUnitPrice ?? 0;
+                            }
+                          }
                           if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                             return acc;
                           }
@@ -17558,7 +17390,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     setPromoCode(code);
     previewCheckout({ promoCode: code });
   };
-  useEffect5(() => {
+  useEffect4(() => {
     if (charges) {
       checkoutRef.current?.scrollIntoView({
         behavior: "smooth",
@@ -18355,6 +18187,10 @@ var StyledViewport = dt.div.withConfig({
   @media (min-width: 768px) {
     grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
   }
+  @container (max-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
 `;
 // src/components/layout/viewport/Viewport.tsx
@@ -18783,7 +18619,7 @@ var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
 IncludedFeatures.displayName = "IncludedFeatures";
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef9, useEffect as useEffect6, useState as useState13 } from "react";
+import { forwardRef as forwardRef9, useEffect as useEffect5, useState as useState13 } from "react";
 import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
@@ -18847,11 +18683,14 @@ var Invoices = forwardRef9(({ className, data, ...rest }, ref) => {
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  useEffect6(() => {
-    api?.listInvoices().then(({ data: data2 }) => {
-      setInvoices(formatInvoices(data2));
+  useEffect5(() => {
+    api?.listInvoices().then((response) => {
+      setInvoices(formatInvoices(response.data));
     });
   }, [api]);
+  useEffect5(() => {
+    setInvoices(formatInvoices(data));
+  }, [data]);
   if (invoices.length === 0) {
     return null;
   }
@@ -19025,9 +18864,32 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
     }, index) => {
       const limit = softLimit ?? allocation ?? 0;
       const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
-      const { price, currency } = getBillingPrice(
+      let { price, currency } = getBillingPrice(
         planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
       ) || {};
+      if (priceBehavior === "overage") {
+        const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice)?.productId;
+        if (productId) {
+          const products = data?.subscription?.products ?? [];
+          const product = products.find((p2) => p2.id === productId);
+          if (product && product.priceTier?.length > 1) {
+            const overagePrice = product.priceTier[product.priceTier.length - 1];
+            price = overagePrice.perUnitPriceDecimal ? Number(overagePrice.perUnitPriceDecimal) : overagePrice.perUnitPrice ?? 0;
+            currency = product.currency;
+          }
+        }
+      }
+      if (isOverage) {
+        const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice).productId;
+        if (productId) {
+          const products = data?.subscription?.products ?? [];
+          const product = products.find((p2) => p2.id === productId);
+          if (product) {
+            price = product.price;
+            currency = product.currency;
+          }
+        }
+      }
       const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx31(
         ProgressBar,
         {
@@ -19578,7 +19440,161 @@ 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 useMemo13, useState as useState14 } from "react";
+// node_modules/@stripe/stripe-js/dist/index.mjs
+var RELEASE_TRAIN = "basil";
+var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
+  return version === 3 ? "v3" : version;
+};
+var ORIGIN = "https://js.stripe.com";
+var STRIPE_JS_URL = "".concat(ORIGIN, "/").concat(RELEASE_TRAIN, "/stripe.js");
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var STRIPE_JS_URL_REGEX = /^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var isStripeJSURL = function isStripeJSURL2(url) {
+  return V3_URL_REGEX.test(url) || STRIPE_JS_URL_REGEX.test(url);
+};
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(ORIGIN, '"]'));
+  for (var i2 = 0; i2 < scripts.length; i2++) {
+    var script = scripts[i2];
+    if (!isStripeJSURL(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(STRIPE_JS_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "7.0.0",
+    startTime
+  });
+};
+var stripePromise$1 = null;
+var onErrorListener = null;
+var onLoadListener = null;
+var onError = function onError2(reject) {
+  return function(cause) {
+    reject(new Error("Failed to load Stripe.js", {
+      cause
+    }));
+  };
+};
+var onLoad = function onLoad2(resolve, reject) {
+  return function() {
+    if (window.Stripe) {
+      resolve(window.Stripe);
+    } else {
+      reject(new Error("Stripe.js not available"));
+    }
+  };
+};
+var loadScript = function loadScript2(params) {
+  if (stripePromise$1 !== null) {
+    return stripePromise$1;
+  }
+  stripePromise$1 = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      } else if (script && onLoadListener !== null && onErrorListener !== null) {
+        var _script$parentNode;
+        script.removeEventListener("load", onLoadListener);
+        script.removeEventListener("error", onErrorListener);
+        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+        script = injectScript(params);
+      }
+      onLoadListener = onLoad(resolve, reject);
+      onErrorListener = onError(reject);
+      script.addEventListener("load", onLoadListener);
+      script.addEventListener("error", onErrorListener);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise$1["catch"](function(error) {
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var pk = args[0];
+  var isTestKey = pk.match(/^pk_test/);
+  var version = runtimeVersionToUrlVersion(maybeStripe.version);
+  var expectedVersion = RELEASE_TRAIN;
+  if (isTestKey && version !== expectedVersion) {
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var stripePromise;
+var loadCalled = false;
+var getStripePromise = function getStripePromise2() {
+  if (stripePromise) {
+    return stripePromise;
+  }
+  stripePromise = loadScript(null)["catch"](function(error) {
+    stripePromise = null;
+    return Promise.reject(error);
+  });
+  return stripePromise;
+};
+Promise.resolve().then(function() {
+  return getStripePromise();
+})["catch"](function(error) {
+  if (!loadCalled) {
+    console.warn(error);
+  }
+});
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadCalled = true;
+  var startTime = Date.now();
+  return getStripePromise().then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+// src/components/elements/payment-method/PaymentMethodDetails.tsx
+import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo13, useState as useState14 } from "react";
 import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
@@ -19607,7 +19623,7 @@ var PaymentMethodDetails = ({
   const [setupIntent, setSetupIntent] = useState14();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState14(false);
   const [paymentMethod, setPaymentMethod] = useState14(void 0);
-  useEffect7(() => {
+  useEffect6(() => {
     setPaymentMethod(
       data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
     );
@@ -19625,7 +19641,7 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
@@ -20046,8 +20062,24 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
             usageBasedEntitlements.reduce(
               (acc, entitlement, entitlementIndex) => {
                 const limit = entitlement.softLimit ?? entitlement.allocation ?? 0;
-                const overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
+                let overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
                 const amount = overageAmount || entitlement.allocation || 0;
+                if (entitlement.priceBehavior === "overage" && data.subscription) {
+                  const subscription = data.subscription;
+                  const entitlementPrice = entitlement.monthlyUsageBasedPrice ?? entitlement.yearlyUsageBasedPrice;
+                  if (entitlementPrice) {
+                    const entitlementProduct = subscription.products.find(
+                      (product) => product.id === entitlementPrice.productId
+                    );
+                    if (entitlementProduct?.priceTier.length) {
+                      const entitlementProductLastTierPrice = entitlementProduct?.priceTier[entitlementProduct?.priceTier?.length - 1];
+                      overageAmount = (entitlement?.usage ?? 0) - (entitlementProduct?.priceTier[0].upTo ?? 0);
+                      entitlement.price = entitlementProductLastTierPrice?.perUnitPriceDecimal ? Number(
+                        entitlementProductLastTierPrice?.perUnitPriceDecimal
+                      ) : entitlementProductLastTierPrice.perUnitPrice ?? entitlement.price;
+                    }
+                  }
+                }
                 if (entitlement.feature?.name) {
                   acc.push(
                     /* @__PURE__ */ jsxs27(
@@ -20078,7 +20110,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
                                 children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X over the limit", {
                                   amount: overageAmount
                                 }) : /* @__PURE__ */ jsxs27(Fragment11, { children: [
-                                  t2("Overage fee"),
+                                  t2("overage fee"),
                                   ":",
                                   " ",
                                   formatCurrency(
@@ -20422,12 +20454,25 @@ var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
                               plan.entitlements.reduce(
                                 (acc, entitlement, entitlementIndex) => {
                                   const limit = entitlement.softLimit ?? entitlement.valueNumeric;
-                                  const {
-                                    price: entitlementPrice,
-                                    currency: entitlementCurrency
-                                  } = getBillingPrice(
-                                    selectedPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
-                                  ) || {};
+                                  let entitlementPriceObject;
+                                  if (selectedPeriod === "month") {
+                                    entitlementPriceObject = entitlement.meteredMonthlyPrice;
+                                  } else if (selectedPeriod === "year") {
+                                    entitlementPriceObject = entitlement.meteredYearlyPrice;
+                                  }
+                                  let entitlementPrice;
+                                  let entitlementCurrency;
+                                  if (entitlementPriceObject) {
+                                    entitlementPrice = entitlementPriceObject?.price;
+                                    entitlementCurrency = entitlementPriceObject?.currency;
+                                  }
+                                  if (entitlementPriceObject && entitlement.priceBehavior === "overage") {
+                                    if (entitlementPriceObject.priceTier?.length > 1) {
+                                      const overagePrice = entitlementPriceObject.priceTier[entitlementPriceObject.priceTier.length - 1];
+                                      entitlementPrice = overagePrice.perUnitPriceDecimal ? Number(overagePrice.perUnitPriceDecimal) : overagePrice.perUnitPrice ?? 0;
+                                      entitlementCurrency = entitlementPriceObject.currency;
+                                    }
+                                  }
                                   if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                                     return acc;
                                   }
@@ -21148,7 +21193,7 @@ var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
 UpcomingBill.displayName = "UpcomingBill";
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect8, useState as useState16 } from "react";
+import { useEffect as useEffect7, useState as useState16 } from "react";
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -21255,7 +21300,7 @@ var Error2 = ({ message }) => {
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
   const [children, setChildren] = useState16(/* @__PURE__ */ jsx40(Loading, {}));
-  useEffect8(() => {
+  useEffect7(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);

package/package.json CHANGED Viewed

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