@schematichq/schematic-components 0.7.11 → 0.7.13

package/dist/schematic-components.esm.js

@@ -9603,6 +9603,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;
@@ -9636,7 +9640,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);
@@ -15776,6 +15781,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);
@@ -16112,6 +16131,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
    */
@@ -16300,7 +16363,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",
@@ -16323,6 +16386,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",
@@ -17031,7 +17095,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     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,
@@ -19163,7 +19227,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
                       ) || {};
@@ -19220,7 +19285,14 @@ var Sidebar = ({
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
-                                        getFeatureName(entitlement.feature, 1)
+                                        entitlementPackageSize > 1 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+                                          entitlementPackageSize,
+                                          " "
+                                        ] }),
+                                        getFeatureName(
+                                          entitlement.feature,
+                                          entitlementPackageSize
+                                        )
                                       ] })
                                     ] })
                                   ]
@@ -19348,7 +19420,8 @@ var Sidebar = ({
                     if (entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
-                        currency: entitlementCurrency
+                        currency: entitlementCurrency,
+                        packageSize: entitlementPackageSize = 1
                       } = getBillingPrice(
                         planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
                       ) || {};
@@ -19402,7 +19475,14 @@ var Sidebar = ({
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
-                                        getFeatureName(entitlement.feature, 1)
+                                        entitlementPackageSize > 1 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+                                          entitlementPackageSize,
+                                          " "
+                                        ] }),
+                                        getFeatureName(
+                                          entitlement.feature,
+                                          entitlementPackageSize
+                                        )
                                       ] })
                                     ] })
                                   ]
@@ -20384,9 +20464,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) {
@@ -20441,7 +20522,14 @@ var Plan = ({
                                               " ",
                                               t2("per"),
                                               " ",
-                                              getFeatureName(entitlement.feature, 1),
+                                              entitlementPackageSize > 1 && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+                                                entitlementPackageSize,
+                                                " "
+                                              ] }),
+                                              getFeatureName(
+                                                entitlement.feature,
+                                                entitlementPackageSize
+                                              ),
                                               entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs12(Fragment8, { children: [
                                                 " ",
                                                 t2("per"),
@@ -20495,7 +20583,14 @@ var Plan = ({
                                                 entitlementCurrency
                                               ),
                                               "/",
-                                              getFeatureName(entitlement.feature, 1),
+                                              entitlementPackageSize > 1 && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+                                                entitlementPackageSize,
+                                                " "
+                                              ] }),
+                                              getFeatureName(
+                                                entitlement.feature,
+                                                entitlementPackageSize
+                                              ),
                                               entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs12(Fragment8, { children: [
                                                 "/",
                                                 shortenPeriod(period)
@@ -20640,7 +20735,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
   return /* @__PURE__ */ jsx18(Fragment9, { children: /* @__PURE__ */ jsx18(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(
@@ -20768,7 +20867,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                             formatCurrency(price ?? 0, currency),
                             /* @__PURE__ */ jsxs13("sub", { children: [
                               "/",
-                              getFeatureName(entitlement.feature, 1),
+                              packageSize > 1 && /* @__PURE__ */ jsxs13(Fragment9, { children: [
+                                packageSize,
+                                " "
+                              ] }),
+                              getFeatureName(entitlement.feature, packageSize),
                               "/",
                               shortenPeriod(period)
                             ] })
@@ -20816,7 +20919,9 @@ var CheckoutDialog = ({ top = 0 }) => {
   const contentRef = useRef5(null);
   const checkoutRef = useRef5(null);
   const [charges, setCharges] = useState8();
-  const [paymentMethodId, setPaymentMethodId] = useState8();
+  const [paymentMethodId, setPaymentMethodId] = useState8(
+    (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
+  );
   const [isLoading, setIsLoading] = useState8(false);
   const [error, setError] = useState8();
   const [promoCode, setPromoCode] = useState8();
@@ -21310,6 +21415,7 @@ var PaymentForm = ({ onConfirm }) => {
   const [message, setMessage] = useState9(null);
   const [isLoading, setIsLoading] = useState9(false);
   const [isConfirmed, setIsConfirmed] = useState9(false);
+  const [isComplete, setIsComplete] = useState9(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21352,12 +21458,20 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx21(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx21(PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ jsx21(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx21(
+          PaymentElement,
+          {
+            id: "payment-element",
+            onChange: (event) => {
+              setIsComplete(event.complete);
+            }
+          }
+        ) }),
         /* @__PURE__ */ jsx21(
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isComplete,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -21959,8 +22073,8 @@ ButtonElement.displayName = "Button";
 import { forwardRef as forwardRef7, useMemo as useMemo9, useRef as useRef7, useState as useState13 } from "react";
 
 // src/components/elements/included-features/Details.tsx
-import { useMemo as useMemo8 } from "react";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment11, useMemo as useMemo8 } from "react";
+import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var Details = ({
   shouldWrapChildren,
   featureUsage,
@@ -21978,12 +22092,19 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const { price, priceDecimal, priceTier, currency } = useMemo8(() => {
+  const {
+    price,
+    priceDecimal,
+    priceTier,
+    currency,
+    packageSize = 1
+  } = useMemo8(() => {
     const {
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
       priceTier: entitlementPriceTier,
-      currency: entitlementCurrency
+      currency: entitlementCurrency,
+      packageSize: entitlementPackageSize
     } = getBillingPrice(
       data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
     ) || {};
@@ -21991,7 +22112,8 @@ var Details = ({
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
       priceTier: entitlementPriceTier,
-      currency: entitlementCurrency
+      currency: entitlementCurrency,
+      packageSize: entitlementPackageSize
     };
   }, [
     data.company?.plan?.planPeriod,
@@ -22003,36 +22125,104 @@ var Details = ({
       return;
     }
     if (priceBehavior === "pay_in_advance" && typeof allocation === "number") {
-      return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
+      return /* @__PURE__ */ jsxs21(Fragment12, { 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__ */ jsxs21(Fragment12, { children: [
+        formatCurrency(price, currency),
+        " ",
+        t2("per"),
+        " ",
+        packageSize > 1 && /* @__PURE__ */ jsxs21(Fragment12, { children: [
+          packageSize,
+          " "
+        ] }),
+        getFeatureName(feature, packageSize)
+      ] });
     }
     if (priceBehavior === "overage" && typeof softLimit === "number") {
-      return `${formatNumber(softLimit)} ${getFeatureName(feature, softLimit)}`;
+      return /* @__PURE__ */ jsxs21(Fragment12, { children: [
+        formatNumber(softLimit),
+        " ",
+        getFeatureName(feature, softLimit)
+      ] });
     }
     if (!priceBehavior && typeof allocation === "number") {
-      return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
+      return /* @__PURE__ */ jsxs21(Fragment12, { 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 = useMemo8(() => {
     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__ */ jsxs21(Fragment11, { children: [
+          formatCurrency(price, currency),
+          "/",
+          packageSize > 1 && /* @__PURE__ */ jsxs21(Fragment12, { 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__ */ jsxs21(Fragment11, { 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__ */ jsxs21(Fragment11, { 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__ */ jsxs21(Fragment11, { 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) {
@@ -22046,7 +22236,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__ */ jsxs21(Fragment11, { children: [
+              " ",
+              "\u2022 ",
+              formatCurrency(cost),
+              "$",
+              period
+            ] }, index)
+          );
+          index += 1;
         }
       }
       return acc;
@@ -22069,6 +22268,7 @@ var Details = ({
     priceDecimal,
     priceTier,
     currency,
+    packageSize,
     softLimit,
     usage
   ]);
@@ -22460,7 +22660,7 @@ var Container3 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -22529,9 +22729,11 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
     }, 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) {
@@ -22597,7 +22799,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                             $weight: theme.typography[props.header.fontStyle].fontWeight,
                             $color: theme.typography[props.header.fontStyle].color,
                             $leading: 1.35,
-                            children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
+                            children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
                               formatNumber(usage),
                               " ",
                               getFeatureName(feature, usage)
@@ -22635,15 +22837,15 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                                 style: {
                                   whiteSpace: "nowrap"
                                 },
-                                children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
+                                children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
                                   formatNumber(allocation),
                                   " ",
                                   getFeatureName(feature, allocation)
-                                ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
+                                ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
                                   formatNumber(usage),
                                   " ",
                                   getFeatureName(feature, usage),
-                                  priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
+                                  priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
                                     " ",
                                     t2("used")
                                   ] })
@@ -22736,14 +22938,18 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                       $weight: theme.typography.text.fontWeight,
                       $color: theme.typography.text.color,
                       $leading: 1.35,
-                      children: /* @__PURE__ */ jsxs24(Fragment11, { children: [
+                      children: /* @__PURE__ */ jsxs24(Fragment13, { children: [
                         t2("Additional"),
                         ": ",
                         formatCurrency(price, currency),
                         feature && /* @__PURE__ */ jsxs24(Box, { as: "sub", $whiteSpace: "nowrap", children: [
                           "/",
-                          getFeatureName(feature, 1),
-                          feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment11, { children: [
+                          packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                            packageSize,
+                            " "
+                          ] }),
+                          getFeatureName(feature, packageSize),
+                          feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment13, { children: [
                             "/",
                             shortenPeriod(planPeriod)
                           ] })
@@ -22808,7 +23014,7 @@ var PaymentElement2 = ({
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx32(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx32(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -23150,7 +23356,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.1.0",
+    version: "7.2.0",
     startTime
   });
 };
@@ -23225,7 +23431,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);
@@ -23290,12 +23496,7 @@ var PaymentMethodDetails = ({
   const [stripe, setStripe] = useState15(null);
   const [setupIntent, setSetupIntent] = useState15();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState15(false);
-  const [paymentMethod, setPaymentMethod] = useState15(void 0);
-  useEffect6(() => {
-    setPaymentMethod(
-      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
-    );
-  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
+  const [paymentMethod, setPaymentMethod] = useState15(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
   const monthsToExpiration = useMemo13(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -23309,33 +23510,25 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  useEffect6(() => {
-    if (!stripe && setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
-    }
-  }, [stripe, setupIntent?.publishableKey]);
   const createSetupIntent = useCallback10(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 = useCallback10(() => {
-    setShowDifferentPaymentMethods((state) => !state);
-  }, []);
   const updatePaymentMethod = useCallback10(
     async (externalId) => {
       if (!api || !externalId) {
@@ -23412,33 +23605,43 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
+  useEffect6(() => {
+    if (!stripe && setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [stripe, setupIntent?.publishableKey]);
+  useEffect6(() => {
+    if (!setupIntent && (!paymentMethod || showPaymentForm)) {
+      createSetupIntent();
+    }
+  }, [setupIntent, paymentMethod, showPaymentForm, createSetupIntent]);
   return /* @__PURE__ */ jsxs26(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx34(
       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__ */ jsx34(Loader, { $color: theme.primary, $size: "2xl" })
+        $width: "100%",
+        $height: "100%",
+        children: /* @__PURE__ */ jsx34(Loader, { $color: theme.primary, $size: "2xl", $isLoading: isLoading })
       }
     ),
     /* @__PURE__ */ jsxs26(
       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__ */ jsx34(
+          setupIntent && showPaymentForm ? /* @__PURE__ */ jsxs26(
             Elements,
             {
               stripe,
@@ -23467,16 +23670,32 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ jsx34(
-                PaymentForm,
-                {
-                  onConfirm: async (paymentMethodId) => {
-                    await updatePaymentMethod(paymentMethodId);
-                    setShowPaymentForm(false);
-                    setShowDifferentPaymentMethods(false);
+              children: [
+                /* @__PURE__ */ jsx34(
+                  PaymentForm,
+                  {
+                    onConfirm: async (paymentMethodId) => {
+                      await updatePaymentMethod(paymentMethodId);
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    }
                   }
-                }
-              )
+                ),
+                paymentMethod && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(
+                  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__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "2rem", children: [
             /* @__PURE__ */ jsx34(
@@ -23491,7 +23710,9 @@ var PaymentMethodDetails = ({
             (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsxs26(
               Text,
               {
-                onClick: dropDownDifferentPaymentMethods,
+                onClick: () => {
+                  setShowDifferentPaymentMethods((prev2) => !prev2);
+                },
                 $font: theme.typography.link.fontFamily,
                 $size: theme.typography.link.fontSize,
                 $weight: theme.typography.link.fontWeight,
@@ -23514,18 +23735,20 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
-              (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx34(
-              PaymentListElement,
-              {
-                paymentMethod: paymentMethod2,
-                setDefault: updatePaymentMethod,
-                handleDelete: deletePaymentMethod
-              },
-              paymentMethod2.id
-            )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            showDifferentPaymentMethods && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $overflowY: "hidden", children: [
+              /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+                (pm) => pm.id !== paymentMethod?.id
+              ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx34(
+                PaymentListElement,
+                {
+                  paymentMethod: paymentMethod2,
+                  setDefault: updatePaymentMethod,
+                  handleDelete: deletePaymentMethod
+                },
+                paymentMethod2.id
+              )) }),
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(
             Text,
@@ -23545,7 +23768,7 @@ var PaymentMethodDetails = ({
 
 // src/components/elements/plan-manager/PlanManager.tsx
 import { forwardRef as forwardRef11, useMemo as useMemo14 } from "react";
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -23613,7 +23836,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
   const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
-  return /* @__PURE__ */ jsxs27(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment14, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
       Notice,
       {
@@ -23729,10 +23952,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 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
                     );
@@ -23756,12 +23981,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                         $gap: "1rem",
                         children: [
                           /* @__PURE__ */ jsxs27(Text, { display: props.addOns.fontStyle, children: [
-                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment12, { children: [
+                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
                               limit,
                               " ",
                               getFeatureName(entitlement.feature, limit)
                             ] }) : entitlement.feature.name,
-                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment12, { children: [
+                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment14, { children: [
                               "/",
                               shortenPeriod(currentPlan.planPeriod)
                             ] })
@@ -23774,7 +23999,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 $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 additional", {
                                   amount: overageAmount
-                                }) : /* @__PURE__ */ jsxs27(Fragment12, { children: [
+                                }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
                                   t2("Additional"),
                                   ":",
                                   " ",
@@ -23784,8 +24009,15 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
                                     "/",
-                                    getFeatureName(entitlement.feature, 1),
-                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment12, { children: [
+                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                      packageSize,
+                                      " "
+                                    ] }),
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      packageSize
+                                    ),
+                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment14, { children: [
                                       "/",
                                       shortenPeriod(currentPlan.planPeriod)
                                     ] })
@@ -23804,7 +24036,14 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
                                     "/",
-                                    getFeatureName(entitlement.feature, 1),
+                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                      packageSize,
+                                      " "
+                                    ] }),
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      packageSize
+                                    ),
                                     "/",
                                     shortenPeriod(currentPlan.planPeriod)
                                   ] })
@@ -23818,7 +24057,16 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                               ),
                               (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("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__ */ jsxs27(Fragment14, { children: [
+                                  packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                    packageSize,
+                                    " "
+                                  ] }),
+                                  getFeatureName(
+                                    entitlement.feature,
+                                    packageSize
+                                  )
+                                ] })
                               ] })
                             ] })
                           ] })
@@ -23859,7 +24107,7 @@ PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
 import { forwardRef as forwardRef12, useState as useState16 } from "react";
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -24141,6 +24389,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
                                     return acc;
                                   }
+                                  const entitlementPackageSize = entitlementPriceObject?.packageSize ?? 1;
                                   acc.push(
                                     /* @__PURE__ */ jsxs28(Flex, { $gap: "1rem", children: [
                                       props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx36(
@@ -24169,7 +24418,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                 $weight: theme.typography.text.fontWeight,
                                                 $color: theme.typography.text.color,
                                                 $leading: 1.35,
-                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                   formatCurrency(
                                                     entitlementPrice,
                                                     entitlementCurrency
@@ -24177,22 +24426,26 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                   " ",
                                                   t2("per"),
                                                   " ",
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                    entitlementPackageSize,
+                                                    " "
+                                                  ] }),
                                                   getFeatureName(
                                                     entitlement.feature,
-                                                    1
+                                                    entitlementPackageSize
                                                   ),
-                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
                                                     selectedPeriod
                                                   ] })
-                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                   entitlement.valueType === "unlimited" && !entitlement.priceBehavior ? t2("Unlimited", {
                                                     item: getFeatureName(
                                                       entitlement.feature
                                                     )
-                                                  }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                  }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                     formatNumber(limit),
                                                     " ",
                                                     getFeatureName(
@@ -24200,7 +24453,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                       limit
                                                     )
                                                   ] }),
-                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
@@ -24210,7 +24463,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                       current_month: "month",
                                                       current_year: "year"
                                                     }[entitlement.metricPeriod]
-                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                     "/",
                                                     shortenPeriod(
                                                       selectedPeriod
@@ -24241,11 +24494,15 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlementCurrency
                                                   ),
                                                   "/",
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                    entitlementPackageSize,
+                                                    " "
+                                                  ] }),
                                                   getFeatureName(
                                                     entitlement.feature,
-                                                    1
+                                                    entitlementPackageSize
                                                   ),
-                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                     "/",
                                                     shortenPeriod(selectedPeriod)
                                                   ] }),
@@ -24384,7 +24641,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment13, { children: [
+        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
           props.header.isVisible && /* @__PURE__ */ jsx36(
             Flex,
             {
@@ -24539,12 +24796,12 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                               $size: theme.typography.text.fontSize,
                                               $weight: theme.typography.text.fontWeight,
                                               $color: theme.typography.text.color,
-                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                 entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                                   item: getFeatureName(
                                                     entitlement.feature
                                                   )
-                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                   formatNumber(
                                                     entitlement.valueNumeric
                                                   ),
@@ -24554,7 +24811,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlement.valueNumeric
                                                   )
                                                 ] }),
-                                                entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment13, { children: [
+                                                entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment15, { children: [
                                                   " ",
                                                   t2("per"),
                                                   " ",
@@ -24910,7 +25167,7 @@ function createRenderer(options2) {
 }
 
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
   return /* @__PURE__ */ jsx40(
@@ -24978,7 +25235,7 @@ var ComponentTree = () => {
   if (isPending) {
     return /* @__PURE__ */ jsx40(Loading, {});
   }
-  return /* @__PURE__ */ jsx40(Fragment14, { children });
+  return /* @__PURE__ */ jsx40(Fragment16, { children });
 };
 
 // src/components/embed/Embed.tsx