@schematichq/schematic-components 0.7.5 → 0.7.7

package/dist/schematic-components.cjs.js

@@ -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.5";
+      headers["X-Schematic-Components-Version"] = "0.7.7";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14450,43 +14452,61 @@ var ProgressBar = ({
 
 // src/components/ui/text/styles.ts
 var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
-  TextPropNames2["Align"] = "$align";
   TextPropNames2["Font"] = "$font";
   TextPropNames2["Size"] = "$size";
   TextPropNames2["Weight"] = "$weight";
   TextPropNames2["Color"] = "$color";
   TextPropNames2["Leading"] = "$leading";
+  TextPropNames2["Align"] = "$align";
   return TextPropNames2;
 })(TextPropNames || {});
-var Text = dt.span.attrs(({ onClick }) => ({
+var Text = dt.span.withConfig({
+  shouldForwardProp: (prop) => prop !== "display"
+}).attrs(({ onClick }) => ({
   ...onClick && { tabIndex: 0 }
-}))`
-  ${({ $font }) => $font && lt`
-      font-family: ${$font}, sans-serif;
-    `};
-  ${({ $size }) => typeof $size !== "undefined" && lt`
-      font-size: ${typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
-    `};
-  ${({ $weight }) => typeof $weight !== "undefined" && lt`
-      font-weight: ${$weight};
-      font-variation-settings: "wght" ${$weight};
-    `};
-  ${({ $leading }) => attr("line-height", $leading)};
-  ${({ $align }) => attr("text-align", $align)};
-  color: ${({ $color, theme }) => $color || theme.typography.text.color};
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.primary};
-    outline-offset: 2px;
-  }
-
-  ${({ onClick }) => onClick && lt`
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
+}))(
+  ({
+    display = "text",
+    theme,
+    onClick,
+    $font,
+    $size,
+    $weight,
+    $color,
+    $leading = 1.35,
+    $align
+  }) => {
+    const settings = theme.typography[display];
+    const fontFamily = $font || settings.fontFamily;
+    const fontSize = $size || settings.fontSize;
+    const fontWeight = $weight || settings.fontWeight;
+    const color = $color || settings.color;
+    return lt`
+      font-family: ${fontFamily}, sans-serif;
+      font-size: ${typeof fontSize === "number" ? `${fontSize / TEXT_BASE_SIZE}rem` : fontSize};
+      font-weight: ${fontWeight};
+      font-variation-settings: "wght" ${fontWeight};
+      line-height: ${$leading};
+      color: ${color};
+
+      ${$align && lt`
+        text-align: ${$align};
+      `};
+
+      ${onClick && lt`
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      `}
+
+      &:focus-visible {
+        outline: 2px solid ${({ theme: theme2 }) => theme2.primary};
+        outline-offset: 2px;
       }
-    `}
-`;
+    `;
+  }
+);
 
 // src/components/ui/tooltip/Tooltip.tsx
 var import_debounce = __toESM(require_debounce());
@@ -14773,7 +14793,7 @@ var Container2 = dt.div`
   all: initial;
   box-sizing: border-box;
   display: block;
-  font-size: ${TEXT_BASE_SIZE}px;
+  font-size: 1rem;
   line-height: 1.35;
   width: 100%;
   height: 100%;
@@ -14830,6 +14850,7 @@ var StageButton = ({
   checkoutStages,
   hasAddOns,
   hasPayInAdvanceEntitlements,
+  hasUnstagedChanges,
   isLoading,
   requiresPayment,
   setCheckoutStage,
@@ -14841,7 +14862,7 @@ var StageButton = ({
       EmbedButton,
       {
         type: "button",
-        disabled: isLoading || !canUpdateSubscription,
+        disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
         onClick: checkout,
         isLoading,
         children: t2("Subscribe and close")
@@ -14882,7 +14903,7 @@ var StageButton = ({
         EmbedButton,
         {
           type: "button",
-          disabled: !canUpdateSubscription,
+          disabled: !hasUnstagedChanges || !canUpdateSubscription,
           onClick: async () => {
             checkout();
           },
@@ -15008,7 +15029,7 @@ var StageButton = ({
       EmbedButton,
       {
         type: "button",
-        disabled: isLoading || !canCheckout,
+        disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         isLoading,
         children: canTrial ? t2("Start trial") : t2("Pay now")
@@ -15212,14 +15233,6 @@ var Sidebar = ({
     }
   }, [t2, api, hydrate, setError, setIsLoading, setLayout]);
   const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
-  const canUpdateSubscription = mode === "edit" || api !== null && (willPlanChange || // TODO: test add-on comparison for finding "changes"
-  selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
-    (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
-  ) || payInAdvanceEntitlements.every(
-    ({ quantity, usage }) => quantity >= usage
-  )) && !isLoading;
-  const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
   const {
     changedUsageBasedEntitlements,
     addedUsageBasedEntitlements,
@@ -15276,6 +15289,7 @@ var Sidebar = ({
     currentUsageBasedEntitlements,
     usageBasedEntitlements
   ]);
+  const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id)
   );
@@ -15283,6 +15297,10 @@ var Sidebar = ({
     (selected) => !currentAddOns.some((current) => selected.id === current.id)
   );
   const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
+  const willPayInAdvanceEntitlementsChange = payInAdvanceEntitlements.length > 0 && payInAdvanceEntitlements.some(({ quantity, usage }) => quantity !== usage);
+  const hasUnstagedChanges = willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
+  const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
+  const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
   const isTrialable = selectedPlan?.companyCanTrial;
   const today = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(today);
@@ -16194,6 +16212,7 @@ var Sidebar = ({
                   checkoutStages,
                   hasAddOns: addOns.length > 0,
                   hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
+                  hasUnstagedChanges,
                   isLoading,
                   requiresPayment,
                   setCheckoutStage,
@@ -16374,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");
@@ -16536,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: [
@@ -16919,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;
                           }
@@ -18377,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
@@ -18870,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;
   }
@@ -19047,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,
         {
@@ -19600,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 = () => {
@@ -19950,7 +19983,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
-  const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
+  const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       Notice,
@@ -19962,32 +19995,12 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "h3",
-              $font: theme.typography.heading3.fontFamily,
-              $size: theme.typography.heading3.fontSize,
-              $weight: theme.typography.heading3.fontWeight,
-              $color: theme.typography.heading3.color,
-              children: t2("Trial ends in", { days: trialEndDays.toString() })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "p",
-              $font: theme.typography.text.fontFamily,
-              $size: 0.8125 * theme.typography.text.fontSize,
-              $weight: theme.typography.text.fontWeight,
-              $color: theme.typography.text.color,
-              children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
-                defaultPlanName: defaultPlan?.name
-              }) : t2("After the trial, cancel no default", {
-                planName: currentPlan?.name
-              })
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays.toString() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
+            defaultPlanName: defaultPlan?.name
+          }) : t2("After the trial, cancel no default", {
+            planName: currentPlan?.name
+          }) })
         ]
       }
     ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -20000,35 +20013,15 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "h3",
-              $font: theme.typography.heading3.fontFamily,
-              $size: theme.typography.heading3.fontSize,
-              $weight: theme.typography.heading3.fontWeight,
-              $color: theme.typography.heading3.color,
-              children: t2("Subscription canceled")
-            }
-          ),
-          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "p",
-              $font: theme.typography.text.fontFamily,
-              $size: 0.8125 * theme.typography.text.fontSize,
-              $weight: theme.typography.text.fontWeight,
-              $color: theme.typography.text.color,
-              children: t2("Access to plan will end on", {
-                date: toPrettyDate(
-                  new Date(billingSubscription.cancelAt * 1e3),
-                  {
-                    month: "numeric"
-                  }
-                )
-              })
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: t2("Access to plan will end on", {
+            date: toPrettyDate(
+              new Date(billingSubscription.cancelAt * 1e3),
+              {
+                month: "numeric"
+              }
+            )
+          }) })
         ]
       }
     ),
@@ -20050,57 +20043,18 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
               $gap: "1rem",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.header.title.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.title.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.title.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.title.fontStyle].color,
-                      $leading: 1,
-                      children: currentPlan.name
-                    }
-                  ),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.header.description.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.description.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.description.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.description.fontStyle].color,
-                      children: currentPlan.description
-                    }
-                  )
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
                 props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      $font: headerPriceFontStyle.fontFamily,
-                      $size: headerPriceFontStyle.fontSize,
-                      $weight: headerPriceFontStyle.fontWeight,
-                      $color: headerPriceFontStyle.color,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
-                        currentPlan.planPrice,
-                        subscriptionCurrency
-                      )
-                    }
-                  ),
-                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      $font: theme.typography[props.header.price.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.price.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.price.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.price.fontStyle].color,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
-                        "/",
-                        shortenPeriod(currentPlan.planPeriod)
-                      ] })
-                    }
-                  )
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: headerPriceFontStyle, children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                    currentPlan.planPrice,
+                    subscriptionCurrency
+                  ) }),
+                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+                    "/",
+                    shortenPeriod(currentPlan.planPeriod)
+                  ] }) })
                 ] })
               ]
             }
@@ -20109,9 +20063,6 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
             props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Text,
               {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
                 $leading: 1,
                 children: t2("Add-ons")
@@ -20125,32 +20076,14 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      $font: theme.typography[props.addOns.fontStyle].fontFamily,
-                      $size: theme.typography[props.addOns.fontStyle].fontSize,
-                      $weight: theme.typography[props.addOns.fontStyle].fontWeight,
-                      $color: theme.typography[props.addOns.fontStyle].color,
-                      children: addOn.name
-                    }
-                  ),
-                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                    Text,
-                    {
-                      $font: theme.typography.text.fontFamily,
-                      $size: theme.typography.text.fontSize,
-                      $weight: theme.typography.text.fontWeight,
-                      $color: theme.typography.text.color,
-                      children: [
-                        formatCurrency(addOn.planPrice, subscriptionCurrency),
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
-                          "/",
-                          shortenPeriod(addOn.planPeriod)
-                        ] })
-                      ]
-                    }
-                  )
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.addOns.fontStyle, children: addOn.name }),
+                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+                    formatCurrency(addOn.planPrice, subscriptionCurrency),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+                      "/",
+                      shortenPeriod(addOn.planPeriod)
+                    ] })
+                  ] })
                 ]
               },
               addOnIndex
@@ -20160,9 +20093,6 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Text,
               {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
                 $leading: 1,
                 children: t2("Usage-based")
@@ -20171,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)(
@@ -20183,38 +20129,27 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                         $flexWrap: "wrap",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                            Text,
-                            {
-                              $font: theme.typography[props.addOns.fontStyle].fontFamily,
-                              $size: theme.typography[props.addOns.fontStyle].fontSize,
-                              $weight: theme.typography[props.addOns.fontStyle].fontWeight,
-                              $color: theme.typography[props.addOns.fontStyle].color,
-                              children: [
-                                entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                                  limit,
-                                  " ",
-                                  getFeatureName(entitlement.feature, limit)
-                                ] }) : entitlement.feature.name,
-                                entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                                  "/",
-                                  shortenPeriod(currentPlan.planPeriod)
-                                ] })
-                              ]
-                            }
-                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                              limit,
+                              " ",
+                              getFeatureName(entitlement.feature, limit)
+                            ] }) : entitlement.feature.name,
+                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                              "/",
+                              shortenPeriod(currentPlan.planPeriod)
+                            ] })
+                          ] }),
                           /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
                             entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               Text,
                               {
-                                $font: theme.typography.text.fontFamily,
                                 $size: 0.875 * theme.typography.text.fontSize,
-                                $weight: theme.typography.text.fontWeight,
                                 $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
                                 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(
@@ -20234,9 +20169,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                             ) : entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               Text,
                               {
-                                $font: theme.typography.text.fontFamily,
                                 $size: 0.875 * theme.typography.text.fontSize,
-                                $weight: theme.typography.text.fontWeight,
                                 $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
                                 children: [
                                   formatCurrency(
@@ -20252,25 +20185,16 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                                 ]
                               }
                             ),
-                            amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                              Text,
-                              {
-                                $font: theme.typography.text.fontFamily,
-                                $size: theme.typography.text.fontSize,
-                                $weight: theme.typography.text.fontWeight,
-                                $color: theme.typography.text.color,
-                                children: [
-                                  formatCurrency(
-                                    (entitlement.price ?? 0) * amount,
-                                    entitlement.currency
-                                  ),
-                                  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
-                                    "/",
-                                    currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
-                                  ] })
-                                ]
-                              }
-                            )
+                            amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+                              formatCurrency(
+                                (entitlement.price ?? 0) * amount,
+                                entitlement.currency
+                              ),
+                              (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+                                "/",
+                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
+                              ] })
+                            ] })
                           ] })
                         ]
                       },
@@ -20569,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.perUnitPrice ?? Number(overagePrice.perUnitPriceDecimal);
+                                      entitlementCurrency = entitlementPriceObject.currency;
+                                    }
+                                  }
                                   if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                                     return acc;
                                   }