@schematichq/schematic-components 0.7.11 → 0.7.13

package/dist/schematic-components.cjs.js

@@ -9656,6 +9656,10 @@ var I18n = class _I18n extends EventEmitter {
         break;
       }
     }
+    if (!this.resolvedLanguage && this.languages.indexOf(l2) < 0 && this.store.hasLanguageSomeTranslations(l2)) {
+      this.resolvedLanguage = l2;
+      if (this.languages.indexOf(l2) < 0) this.languages.unshift(l2);
+    }
   }
   changeLanguage(lng, callback) {
     var _this2 = this;
@@ -9689,7 +9693,8 @@ var I18n = class _I18n extends EventEmitter {
     };
     const setLng = (lngs) => {
       if (!lng && !lngs && this.services.languageDetector) lngs = [];
-      const l2 = this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
+      const fl = isString(lngs) ? lngs : lngs && lngs[0];
+      const l2 = this.store.hasLanguageSomeTranslations(fl) ? fl : this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
       if (l2) {
         if (!this.language) {
           setLngProps(l2);
@@ -15829,6 +15834,20 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/HydrateUpcomingInvoiceResponse.ts
+function HydrateUpcomingInvoiceResponseFromJSON(json) {
+  return HydrateUpcomingInvoiceResponseFromJSONTyped(json, false);
+}
+function HydrateUpcomingInvoiceResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: InvoiceResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/checkoutexternal/models/ListInvoicesParams.ts
 function ListInvoicesParamsFromJSON(json) {
   return ListInvoicesParamsFromJSONTyped(json, false);
@@ -16165,6 +16184,50 @@ var CheckoutexternalApi = class extends BaseAPI {
     );
     return await response.value();
   }
+  /**
+   * Hydrate upcoming invoice
+   */
+  async hydrateUpcomingInvoiceRaw(requestParameters, initOverrides) {
+    if (requestParameters["componentId"] == null) {
+      throw new RequiredError(
+        "componentId",
+        'Required parameter "componentId" was null or undefined when calling hydrateUpcomingInvoice().'
+      );
+    }
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/components/{component_id}/hydrate/upcoming-invoice`.replace(
+          `{${"component_id"}}`,
+          encodeURIComponent(String(requestParameters["componentId"]))
+        ),
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => HydrateUpcomingInvoiceResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Hydrate upcoming invoice
+   */
+  async hydrateUpcomingInvoice(requestParameters, initOverrides) {
+    const response = await this.hydrateUpcomingInvoiceRaw(
+      requestParameters,
+      initOverrides
+    );
+    return await response.value();
+  }
   /**
    * List invoices
    */
@@ -16353,7 +16416,7 @@ var en_default = {
     Monthly: "Monthly",
     Next: "Next",
     "No limit": "No limit",
-    "No payment method selected": "No payment method selected",
+    "No payment method added yet": "No payment method added yet",
     "Not ready to cancel?": "Not ready to cancel?",
     "On demand": "On demand",
     "One time ": "One time",
@@ -16376,6 +16439,7 @@ var en_default = {
     "See less": "See less",
     "See more": "See more",
     "Select add-ons": "Select add-ons",
+    "Select existing payment method": "Select existing payment method",
     "Select payment method": "Select payment method",
     "Select plan": "Select plan",
     "Select quantity": "Select quantity",
@@ -17084,7 +17148,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.11";
+      headers["X-Schematic-Components-Version"] = "0.7.13";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -19206,7 +19270,8 @@ var Sidebar = ({
                     if (typeof entitlement.allocation === "number" && entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
-                        currency: entitlementCurrency
+                        currency: entitlementCurrency,
+                        packageSize: entitlementPackageSize = 1
                       } = getBillingPrice(
                         planPeriod === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice
                       ) || {};
@@ -19263,7 +19328,14 @@ var Sidebar = ({
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
-                                        getFeatureName(entitlement.feature, 1)
+                                        entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                          entitlementPackageSize,
+                                          " "
+                                        ] }),
+                                        getFeatureName(
+                                          entitlement.feature,
+                                          entitlementPackageSize
+                                        )
                                       ] })
                                     ] })
                                   ]
@@ -19391,7 +19463,8 @@ var Sidebar = ({
                     if (entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
-                        currency: entitlementCurrency
+                        currency: entitlementCurrency,
+                        packageSize: entitlementPackageSize = 1
                       } = getBillingPrice(
                         planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
                       ) || {};
@@ -19445,7 +19518,14 @@ var Sidebar = ({
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
-                                        getFeatureName(entitlement.feature, 1)
+                                        entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                          entitlementPackageSize,
+                                          " "
+                                        ] }),
+                                        getFeatureName(
+                                          entitlement.feature,
+                                          entitlementPackageSize
+                                        )
                                       ] })
                                     ] })
                                   ]
@@ -20427,9 +20507,10 @@ var Plan = ({
                           const limit = entitlement.softLimit ?? entitlement.valueNumeric;
                           const entitlementPriceObject = getBillingPrice(
                             period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
-                          ) || null;
+                          );
                           let entitlementPrice = entitlementPriceObject?.price;
                           const entitlementCurrency = entitlementPriceObject?.currency;
+                          const entitlementPackageSize = entitlementPriceObject?.packageSize ?? 1;
                           if (entitlement.priceBehavior === "overage" && entitlementPriceObject) {
                             const { priceTier } = entitlementPriceObject;
                             if (priceTier.length > 1) {
@@ -20484,7 +20565,14 @@ var Plan = ({
                                               " ",
                                               t2("per"),
                                               " ",
-                                              getFeatureName(entitlement.feature, 1),
+                                              entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                                                entitlementPackageSize,
+                                                " "
+                                              ] }),
+                                              getFeatureName(
+                                                entitlement.feature,
+                                                entitlementPackageSize
+                                              ),
                                               entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
                                                 " ",
                                                 t2("per"),
@@ -20538,7 +20626,14 @@ var Plan = ({
                                                 entitlementCurrency
                                               ),
                                               "/",
-                                              getFeatureName(entitlement.feature, 1),
+                                              entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                                                entitlementPackageSize,
+                                                " "
+                                              ] }),
+                                              getFeatureName(
+                                                entitlement.feature,
+                                                entitlementPackageSize
+                                              ),
                                               entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
                                                 "/",
                                                 shortenPeriod(period)
@@ -20683,7 +20778,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
     (acc, entitlement, index) => {
       if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
-        const { price, currency } = getBillingPrice(
+        const {
+          price,
+          currency,
+          packageSize = 1
+        } = getBillingPrice(
           period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
         ) || {};
         acc.push(
@@ -20811,7 +20910,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                             formatCurrency(price ?? 0, currency),
                             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
                               "/",
-                              getFeatureName(entitlement.feature, 1),
+                              packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+                                packageSize,
+                                " "
+                              ] }),
+                              getFeatureName(entitlement.feature, packageSize),
                               "/",
                               shortenPeriod(period)
                             ] })
@@ -20859,7 +20962,9 @@ var CheckoutDialog = ({ top = 0 }) => {
   const contentRef = (0, import_react26.useRef)(null);
   const checkoutRef = (0, import_react26.useRef)(null);
   const [charges, setCharges] = (0, import_react26.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)(
+    (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
+  );
   const [isLoading, setIsLoading] = (0, import_react26.useState)(false);
   const [error, setError] = (0, import_react26.useState)();
   const [promoCode, setPromoCode] = (0, import_react26.useState)();
@@ -21349,6 +21454,7 @@ var PaymentForm = ({ onConfirm }) => {
   const [message, setMessage] = (0, import_react27.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
   const [isConfirmed, setIsConfirmed] = (0, import_react27.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react27.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21391,12 +21497,20 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_stripe_js.PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react_stripe_js.PaymentElement,
+          {
+            id: "payment-element",
+            onChange: (event) => {
+              setIsComplete(event.complete);
+            }
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isComplete,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -22017,12 +22131,19 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const { price, priceDecimal, priceTier, currency } = (0, import_react32.useMemo)(() => {
+  const {
+    price,
+    priceDecimal,
+    priceTier,
+    currency,
+    packageSize = 1
+  } = (0, import_react32.useMemo)(() => {
     const {
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
       priceTier: entitlementPriceTier,
-      currency: entitlementCurrency
+      currency: entitlementCurrency,
+      packageSize: entitlementPackageSize
     } = getBillingPrice(
       data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
     ) || {};
@@ -22030,7 +22151,8 @@ var Details = ({
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
       priceTier: entitlementPriceTier,
-      currency: entitlementCurrency
+      currency: entitlementCurrency,
+      packageSize: entitlementPackageSize
     };
   }, [
     data.company?.plan?.planPeriod,
@@ -22042,36 +22164,104 @@ var Details = ({
       return;
     }
     if (priceBehavior === "pay_in_advance" && typeof allocation === "number") {
-      return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        formatNumber(allocation),
+        " ",
+        getFeatureName(feature, allocation)
+      ] });
     }
     if (priceBehavior === "pay_as_you_go" && typeof price === "number") {
-      return `${formatCurrency(price, currency)} ${t2("per")} ${getFeatureName(feature, 1)}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        formatCurrency(price, currency),
+        " ",
+        t2("per"),
+        " ",
+        packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          packageSize,
+          " "
+        ] }),
+        getFeatureName(feature, packageSize)
+      ] });
     }
     if (priceBehavior === "overage" && typeof softLimit === "number") {
-      return `${formatNumber(softLimit)} ${getFeatureName(feature, softLimit)}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        formatNumber(softLimit),
+        " ",
+        getFeatureName(feature, softLimit)
+      ] });
     }
     if (!priceBehavior && typeof allocation === "number") {
-      return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        formatNumber(allocation),
+        " ",
+        getFeatureName(feature, allocation)
+      ] });
     }
     if (!priceBehavior) {
       return t2("Unlimited", { item: getFeatureName(feature) });
     }
-  }, [t2, allocation, feature, price, priceBehavior, currency, softLimit]);
+  }, [
+    t2,
+    allocation,
+    feature,
+    price,
+    priceBehavior,
+    currency,
+    packageSize,
+    softLimit
+  ]);
   const usageText = (0, import_react32.useMemo)(() => {
     if (!feature) {
       return;
     }
-    let acc;
+    const acc = [];
+    let index = 0;
     if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
-      acc = `${formatCurrency(price, currency)}/${getFeatureName(feature, 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
+      acc.push(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+          formatCurrency(price, currency),
+          "/",
+          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+            packageSize,
+            " "
+          ] }),
+          getFeatureName(feature, packageSize),
+          "/",
+          shortenPeriod(data.company.plan.planPeriod)
+        ] }, index)
+      );
+      index += 1;
     } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
-      acc = `${usage} ${getFeatureName(feature, usage)} ${t2("used")}`;
+      acc.push(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+          usage,
+          " ",
+          getFeatureName(feature, usage),
+          " ",
+          t2("used")
+        ] }, index)
+      );
+      index += 1;
     }
     if (acc) {
       if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
-        acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
+        acc.push(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+            " ",
+            "\u2022 ",
+            formatCurrency(price * allocation, currency)
+          ] }, index)
+        );
+        index += 1;
       } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
-        acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
+        acc.push(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+            " ",
+            "\u2022 ",
+            formatCurrency(price * usage, currency)
+          ] }, index)
+        );
+        index += 1;
       } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
         let overagePrice = price ?? priceDecimal;
         if (priceTier?.length === 2) {
@@ -22085,7 +22275,16 @@ var Details = ({
         const cost = usage - softLimit < 0 ? 0 : overagePrice * (usage - softLimit);
         const period = feature.featureType === "trait" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
         if (cost > 0) {
-          acc += ` \u2022 ${formatCurrency(cost)}${period}`;
+          acc.push(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+              " ",
+              "\u2022 ",
+              formatCurrency(cost),
+              "$",
+              period
+            ] }, index)
+          );
+          index += 1;
         }
       }
       return acc;
@@ -22108,6 +22307,7 @@ var Details = ({
     priceDecimal,
     priceTier,
     currency,
+    packageSize,
     softLimit,
     usage
   ]);
@@ -22568,9 +22768,11 @@ 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;
-      let { price, currency } = getBillingPrice(
+      const billingPrice = getBillingPrice(
         planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
-      ) || {};
+      );
+      let { price, currency } = billingPrice || {};
+      const packageSize = billingPrice?.packageSize ?? 1;
       if (priceBehavior === "overage") {
         const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice)?.productId;
         if (productId) {
@@ -22781,7 +22983,11 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
                         formatCurrency(price, currency),
                         feature && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
                           "/",
-                          getFeatureName(feature, 1),
+                          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                            packageSize,
+                            " "
+                          ] }),
+                          getFeatureName(feature, packageSize),
                           feature.featureType === "trait" && planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                             "/",
                             shortenPeriod(planPeriod)
@@ -22847,7 +23053,7 @@ var PaymentElement2 = ({
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -23189,7 +23395,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.1.0",
+    version: "7.2.0",
     startTime
   });
 };
@@ -23264,7 +23470,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   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.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.2.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);
@@ -23329,12 +23535,7 @@ var PaymentMethodDetails = ({
   const [stripe, setStripe] = (0, import_react38.useState)(null);
   const [setupIntent, setSetupIntent] = (0, import_react38.useState)();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react38.useState)(false);
-  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(void 0);
-  (0, import_react38.useEffect)(() => {
-    setPaymentMethod(
-      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
-    );
-  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
+  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
   const monthsToExpiration = (0, import_react38.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -23348,33 +23549,25 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  (0, import_react38.useEffect)(() => {
-    if (!stripe && setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
-    }
-  }, [stripe, setupIntent?.publishableKey]);
   const createSetupIntent = (0, import_react38.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
     try {
       setIsLoading(true);
-      const { data: setupIntent2 } = await api.getSetupIntent({
+      const response = await api.getSetupIntent({
         componentId: data.component.id
       });
-      setSetupIntent(setupIntent2);
-      setShowPaymentForm(true);
+      setSetupIntent(response.data);
     } catch {
       setError(
         t2("Error initializing payment method change. Please try again.")
       );
     } finally {
+      setShowPaymentForm(true);
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const dropDownDifferentPaymentMethods = (0, import_react38.useCallback)(() => {
-    setShowDifferentPaymentMethods((state) => !state);
-  }, []);
   const updatePaymentMethod = (0, import_react38.useCallback)(
     async (externalId) => {
       if (!api || !externalId) {
@@ -23451,33 +23644,43 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
+  (0, import_react38.useEffect)(() => {
+    if (!stripe && setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [stripe, setupIntent?.publishableKey]);
+  (0, import_react38.useEffect)(() => {
+    if (!setupIntent && (!paymentMethod || showPaymentForm)) {
+      createSetupIntent();
+    }
+  }, [setupIntent, paymentMethod, showPaymentForm, createSetupIntent]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Flex,
       {
         $position: "absolute",
-        $width: "100%",
-        $height: "100%",
+        $zIndex: isLoading ? 1 : 0,
         $justifyContent: "center",
         $alignItems: "center",
-        $flexGrow: 1,
-        $zIndex: 1,
-        $backgroundColor: "black",
-        $opacity: 0.5,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: theme.primary, $size: "2xl" })
+        $width: "100%",
+        $height: "100%",
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: theme.primary, $size: "2xl", $isLoading: isLoading })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Flex,
       {
+        $position: "relative",
+        $zIndex: isLoading ? 0 : 1,
         $flexDirection: "column",
-        $flexGrow: "1",
+        $flexGrow: 1,
         $gap: "1rem",
+        $overflow: "auto",
         $padding: "2rem 2.5rem 2rem 2.5rem",
+        $visibility: isLoading ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
-        $overflow: "auto",
         children: [
-          showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          setupIntent && showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             import_react_stripe_js2.Elements,
             {
               stripe,
@@ -23506,16 +23709,32 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                PaymentForm,
-                {
-                  onConfirm: async (paymentMethodId) => {
-                    await updatePaymentMethod(paymentMethodId);
-                    setShowPaymentForm(false);
-                    setShowDifferentPaymentMethods(false);
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  PaymentForm,
+                  {
+                    onConfirm: async (paymentMethodId) => {
+                      await updatePaymentMethod(paymentMethodId);
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    }
                   }
-                }
-              )
+                ),
+                paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  Text,
+                  {
+                    onClick: () => {
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    },
+                    $font: theme.typography.link.fontFamily,
+                    $size: theme.typography.link.fontSize,
+                    $weight: theme.typography.link.fontWeight,
+                    $color: theme.typography.link.color,
+                    children: t2("Select existing payment method")
+                  }
+                ) })
+              ]
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -23530,7 +23749,9 @@ var PaymentMethodDetails = ({
             (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               Text,
               {
-                onClick: dropDownDifferentPaymentMethods,
+                onClick: () => {
+                  setShowDifferentPaymentMethods((prev2) => !prev2);
+                },
                 $font: theme.typography.link.fontFamily,
                 $size: theme.typography.link.fontSize,
                 $weight: theme.typography.link.fontWeight,
@@ -23553,18 +23774,20 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
-              (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              PaymentListElement,
-              {
-                paymentMethod: paymentMethod2,
-                setDefault: updatePaymentMethod,
-                handleDelete: deletePaymentMethod
-              },
-              paymentMethod2.id
-            )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $overflowY: "hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+                (pm) => pm.id !== paymentMethod?.id
+              ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                PaymentListElement,
+                {
+                  paymentMethod: paymentMethod2,
+                  setDefault: updatePaymentMethod,
+                  handleDelete: deletePaymentMethod
+                },
+                paymentMethod2.id
+              )) }),
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,
@@ -23768,10 +23991,12 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                 const limit = entitlement.softLimit ?? entitlement.allocation ?? 0;
                 let overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
                 const amount = overageAmount || entitlement.allocation || 0;
+                let packageSize = 1;
                 if (entitlement.priceBehavior === "overage" && data.subscription) {
                   const subscription = data.subscription;
                   const entitlementPrice = entitlement.monthlyUsageBasedPrice ?? entitlement.yearlyUsageBasedPrice;
                   if (entitlementPrice) {
+                    packageSize = entitlementPrice.packageSize;
                     const entitlementProduct = subscription.products.find(
                       (product) => product.id === entitlementPrice.productId
                     );
@@ -23823,7 +24048,14 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                                   ),
                                   /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
                                     "/",
-                                    getFeatureName(entitlement.feature, 1),
+                                    packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                      packageSize,
+                                      " "
+                                    ] }),
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      packageSize
+                                    ),
                                     entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                       "/",
                                       shortenPeriod(currentPlan.planPeriod)
@@ -23843,7 +24075,14 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                                   ),
                                   /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
                                     "/",
-                                    getFeatureName(entitlement.feature, 1),
+                                    packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                      packageSize,
+                                      " "
+                                    ] }),
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      packageSize
+                                    ),
                                     "/",
                                     shortenPeriod(currentPlan.planPeriod)
                                   ] })
@@ -23857,7 +24096,16 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                               ),
                               (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)
+                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                  packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                    packageSize,
+                                    " "
+                                  ] }),
+                                  getFeatureName(
+                                    entitlement.feature,
+                                    packageSize
+                                  )
+                                ] })
                               ] })
                             ] })
                           ] })
@@ -24180,6 +24428,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                   if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                                     return acc;
                                   }
+                                  const entitlementPackageSize = entitlementPriceObject?.packageSize ?? 1;
                                   acc.push(
                                     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $gap: "1rem", children: [
                                       props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -24216,9 +24465,13 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                                   " ",
                                                   t2("per"),
                                                   " ",
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                                                    entitlementPackageSize,
+                                                    " "
+                                                  ] }),
                                                   getFeatureName(
                                                     entitlement.feature,
-                                                    1
+                                                    entitlementPackageSize
                                                   ),
                                                   entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                     " ",
@@ -24280,9 +24533,13 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                                     entitlementCurrency
                                                   ),
                                                   "/",
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                                                    entitlementPackageSize,
+                                                    " "
+                                                  ] }),
                                                   getFeatureName(
                                                     entitlement.feature,
-                                                    1
+                                                    entitlementPackageSize
                                                   ),
                                                   entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                     "/",