@schematichq/schematic-components 2.14.1 → 2.15.0

package/dist/schematic-components.cjs.js

@@ -8695,6 +8695,7 @@ function ChangeSubscriptionRequestBodyToJSONTyped(value, ignoreDiscriminator = f
     ),
     new_plan_id: value["newPlanId"],
     new_price_id: value["newPriceId"],
+    opt_in_accepted: value["optInAccepted"],
     pay_in_advance: value["payInAdvance"].map(
       UpdatePayInAdvanceRequestBodyToJSON
     ),
@@ -9002,6 +9003,8 @@ function FeatureEntitlementFromJSONTyped(json, ignoreDiscriminator) {
     allocation: json["allocation"] == null ? void 0 : json["allocation"],
     creditId: json["credit_id"] == null ? void 0 : json["credit_id"],
     creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
+    creditReserved: json["credit_reserved"] == null ? void 0 : json["credit_reserved"],
+    creditSettled: json["credit_settled"] == null ? void 0 : json["credit_settled"],
     creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
     creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
     eventName: json["event_name"] == null ? void 0 : json["event_name"],
@@ -10576,6 +10579,9 @@ function PreviewSubscriptionChangeResponseDataFromJSONTyped(json, ignoreDiscrimi
     finance: json["finance"] == null ? void 0 : PreviewSubscriptionFinanceResponseDataFromJSON(json["finance"]),
     isScheduledDowngrade: json["is_scheduled_downgrade"],
     newCharges: json["new_charges"],
+    optInRequired: json["opt_in_required"],
+    optInText: json["opt_in_text"] == null ? void 0 : json["opt_in_text"],
+    optInTitle: json["opt_in_title"] == null ? void 0 : json["opt_in_title"],
     paymentMethodRequired: json["payment_method_required"],
     percentOff: json["percent_off"],
     periodStart: new Date(json["period_start"]),
@@ -12626,6 +12632,17 @@ function getPlanPrice(plan, period = "month", options = { useSelectedPeriod: tru
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
 }
+function planOffersCurrencyForPeriod(plan, period = "month", currency) {
+  if (!currency) return true;
+  const price = getPlanPrice(
+    plan,
+    period,
+    { useSelectedPeriod: true },
+    currency
+  );
+  if (!price) return true;
+  return price.currency.toUpperCase() === currency.toUpperCase();
+}
 function getAddOnPrice(addOn, period = "month", currency) {
   if (currency && addOn.currencyPrices?.length) {
     const currencyPrice = addOn.currencyPrices.find(
@@ -13956,6 +13973,12 @@ var reducer = (state, action) => {
           bypassAddOnSelection,
           bypassCreditsSelection,
           ...config.addOnIds && { addOnIds: config.addOnIds },
+          ...config.currency && {
+            selectedCurrency: config.currency.toUpperCase()
+          },
+          ...config.showCurrencySelector !== void 0 && {
+            showCurrencySelector: config.showCurrencySelector
+          },
           hideSkippedStages: config.hideSkipped ?? false,
           startTrialIfAvailable: isStringFormat || config.startTrialIfAvailable === void 0 ? true : config.startTrialIfAvailable
         }
@@ -13985,7 +14008,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.14.1",
+  "X-Schematic-Components-Version": "2.15.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -17698,11 +17721,16 @@ var CheckoutDialog = ({ top }) => {
   const lockedCurrency = useSubscriptionCurrency();
   const hasCurrencyFilter = !!currencyFilter && currencyFilter.length > 0;
   const filterBlocksSubscriptionCurrency = hasCurrencyFilter && !!lockedCurrency && !currencyFilter.includes(lockedCurrency);
+  const prefilledCurrency = checkoutState?.selectedCurrency?.toUpperCase();
   const [selectedCurrency, setSelectedCurrency] = (0, import_react36.useState)(
-    () => (checkoutState?.selectedCurrency && currencies.includes(checkoutState.selectedCurrency) ? checkoutState.selectedCurrency : void 0) ?? currencies[0] ?? DEFAULT_CURRENCY
+    () => prefilledCurrency ?? currencies[0] ?? DEFAULT_CURRENCY
   );
+  if (currencies.length > 0 && !currencies.includes(selectedCurrency)) {
+    setSelectedCurrency(currencies[0]);
+  }
   const effectiveCurrency = lockedCurrency ?? selectedCurrency;
-  const showCurrencySelector = currencies.length > 1 && !lockedCurrency;
+  const currencySelectorEnabled = checkoutState?.showCurrencySelector ?? true;
+  const canSelectCurrency = currencies.length > 1 && !lockedCurrency && currencySelectorEnabled;
   const hasCurrency = !!lockedCurrency || currencies.length > 1 || hasCurrencyFilter;
   const hasNoUsableCurrency = !lockedCurrency && currencies.length === 0;
   (0, import_react36.useEffect)(() => {
@@ -18037,6 +18065,34 @@ var CheckoutDialog = ({ top }) => {
     return id;
   }, [checkoutStage, checkoutStages, checkoutState, isBypassLoading]);
   const previewRequestIdRef = (0, import_react36.useRef)(0);
+  const planStageVisible = checkoutStages.some((stage) => stage.id === "plan") && !checkoutState?.bypassPlanSelection;
+  const checkoutStageCurrencies = (0, import_react36.useMemo)(() => {
+    if (!selectedPlan) return currencies;
+    return currencies.filter(
+      (currency) => planOffersCurrencyForPeriod(selectedPlan, planPeriod, currency)
+    );
+  }, [currencies, selectedPlan, planPeriod]);
+  const showPlanCurrencySelector = canSelectCurrency && planStageVisible;
+  const showCheckoutCurrencySelector = canSelectCurrency && !planStageVisible && checkoutStageCurrencies.length > 1;
+  const currencyPeriodMismatch = hasCurrency && !lockedCurrency && !planStageVisible && !!selectedPlan && !planOffersCurrencyForPeriod(selectedPlan, planPeriod, effectiveCurrency);
+  (0, import_react36.useEffect)(() => {
+    if (currencyPeriodMismatch) {
+      console.error(
+        `[Schematic] No ${effectiveCurrency} price for the "${planPeriod}" billing period on the selected plan; refusing to fall back to the default currency.`
+      );
+      debug("currency/period mismatch in checkout bypass config", {
+        currency: effectiveCurrency,
+        period: planPeriod,
+        planId: selectedPlan?.id
+      });
+    }
+  }, [
+    currencyPeriodMismatch,
+    effectiveCurrency,
+    planPeriod,
+    selectedPlan?.id,
+    debug
+  ]);
   const handlePreviewCheckout = (0, import_react36.useCallback)(
     async (updates) => {
       const period = updates.period || planPeriod;
@@ -18548,6 +18604,35 @@ var CheckoutDialog = ({ top }) => {
       }
     );
   }
+  if (currencyPeriodMismatch) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      Dialog2,
+      {
+        ref: setDialog,
+        isModal,
+        size: "lg",
+        top,
+        onClose: handleClose,
+        ...!isModal && { open: layout === "checkout" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          Flex,
+          {
+            $flexGrow: 1,
+            $alignItems: "center",
+            $justifyContent: "center",
+            $padding: "2rem",
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              CurrencyPeriodMismatchNotice,
+              {
+                currency: effectiveCurrency,
+                period: planPeriod
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Dialog2,
     {
@@ -18638,7 +18723,7 @@ var CheckoutDialog = ({ top }) => {
                         activeCheckoutStage.description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
                       effectiveCheckoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
-                        showCurrencySelector && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                        showPlanCurrencySelector && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                           CurrencyToggle,
                           {
                             currencies,
@@ -18656,7 +18741,15 @@ var CheckoutDialog = ({ top }) => {
                             onSelect: changePlanPeriod
                           }
                         )
-                      ] })
+                      ] }),
+                      effectiveCheckoutStage === "checkout" && showCheckoutCurrencySelector && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Flex, { $alignItems: "center", $gap: "0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                        CurrencyToggle,
+                        {
+                          currencies: checkoutStageCurrencies,
+                          selectedCurrency: effectiveCurrency,
+                          onSelect: setSelectedCurrency
+                        }
+                      ) })
                     ]
                   }
                 ),
@@ -18783,8 +18876,49 @@ var CheckoutDialog = ({ top }) => {
   );
 };
 
-// src/components/shared/currency-toggle/CurrencyToggle.tsx
+// src/components/shared/currency-period-mismatch-notice/CurrencyPeriodMismatchNotice.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
+var CurrencyPeriodMismatchNotice = ({
+  currency,
+  period
+}) => {
+  const { settings } = useEmbed();
+  const { t: t3 } = useTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    Flex,
+    {
+      "data-testid": "sch-currency-period-mismatch-notice",
+      $flexDirection: "column",
+      $alignItems: "center",
+      $gap: "0.75rem",
+      $padding: "1.5rem 2rem",
+      $maxWidth: "28rem",
+      $borderWidth: "1px",
+      $borderStyle: "solid",
+      $borderColor: settings.theme.danger,
+      $borderRadius: "0.5rem",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("This plan is not available in the selected currency and period.") }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          Text,
+          {
+            $size: 13,
+            $color: settings.theme.danger,
+            style: { opacity: 0.85, textAlign: "center" },
+            children: t3("No {{currency}} price for the {{period}} billing period.", {
+              currency: currency.toUpperCase(),
+              period
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/shared/currency-toggle/CurrencyToggle.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var CurrencyToggle = ({
   currencies,
   selectedCurrency,
@@ -18793,7 +18927,7 @@ var CurrencyToggle = ({
 }) => {
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Flex,
     {
       "data-testid": "sch-currency-toggle",
@@ -18806,14 +18940,14 @@ var CurrencyToggle = ({
       $borderRadius: "2.5rem",
       $cursor: disabled ? "default" : "pointer",
       $opacity: disabled ? 0.6 : 1,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         Flex,
         {
           $alignItems: "center",
           $padding: "0.375rem 0.75rem",
           style: { position: "relative" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               Text,
               {
                 style: {
@@ -18830,7 +18964,7 @@ var CurrencyToggle = ({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "select",
               {
                 "data-testid": "sch-currency-select",
@@ -18846,7 +18980,7 @@ var CurrencyToggle = ({
                   cursor: disabled ? "default" : "pointer",
                   fontSize: "inherit"
                 },
-                children: currencies.map((currency) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("option", { value: currency, children: [
+                children: currencies.map((currency) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("option", { value: currency, children: [
                   getCurrencyFlag(currency),
                   " ",
                   getCurrencySymbol(currency),
@@ -18855,7 +18989,7 @@ var CurrencyToggle = ({
                 ] }, currency))
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "svg",
               {
                 width: 12,
@@ -18863,7 +18997,7 @@ var CurrencyToggle = ({
                 viewBox: "0 0 12 12",
                 fill: "none",
                 style: { marginLeft: "0.25rem", flexShrink: 0 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "path",
                   {
                     d: "M3 4.5L6 7.5L9 4.5",
@@ -18883,7 +19017,7 @@ var CurrencyToggle = ({
 };
 
 // src/components/shared/hard-limit-tooltip/HardLimitTooltip.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var HardLimitTooltip = ({
   portal,
   feature,
@@ -18896,11 +19030,11 @@ var HardLimitTooltip = ({
   if (!showHardLimit || !feature || typeof limit !== "number") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Tooltip,
     {
       portal,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Icon3,
         {
           title: "limit",
@@ -18909,7 +19043,7 @@ var HardLimitTooltip = ({
           style: { lineHeight: 0 }
         }
       ),
-      content: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { children: t3("Up to a limit of", {
+      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { children: t3("Up to a limit of", {
         amount: limit,
         units: getFeatureName(feature, limit)
       }) })
@@ -18918,13 +19052,13 @@ var HardLimitTooltip = ({
 };
 
 // src/components/shared/invalid-currency-notice/InvalidCurrencyNotice.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var InvalidCurrencyNotice = ({
   invalidEntries = []
 }) => {
   const { settings } = useEmbed();
   const { t: t3 } = useTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Flex,
     {
       "data-testid": "sch-invalid-currency-notice",
@@ -18938,9 +19072,9 @@ var InvalidCurrencyNotice = ({
       $borderColor: settings.theme.danger,
       $borderRadius: "0.5rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("No supported currencies are available.") }),
-        invalidEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("No supported currencies are available.") }),
+        invalidEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Text,
           {
             $size: 13,
@@ -18958,7 +19092,7 @@ var InvalidCurrencyNotice = ({
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
 var import_react37 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var PaymentDialog = ({ top }) => {
   const { t: t3 } = useTranslation();
   const { layout, setLayout, clearCheckoutState } = useEmbed();
@@ -18984,7 +19118,7 @@ var PaymentDialog = ({ top }) => {
       element.show();
     }
   }, [layout]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     Dialog2,
     {
       ref: dialogRef,
@@ -18994,8 +19128,8 @@ var PaymentDialog = ({ top }) => {
       onClose: handleClose,
       ...!isModal && { open: layout === "payment" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogHeader, { bordered: true, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { $size: 18, children: t3("Edit payment method") }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flex, { $position: "relative", $flexGrow: 1, $overflow: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PaymentMethodDetails, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogHeader, { bordered: true, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { $size: 18, children: t3("Edit payment method") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $position: "relative", $flexGrow: 1, $overflow: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaymentMethodDetails, {}) }) })
       ]
     }
   );
@@ -19059,7 +19193,7 @@ var Input2 = gt2.input`
 `;
 
 // src/components/shared/payment-form/PaymentForm.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var PaymentForm = ({ onConfirm, financeData }) => {
   const { t: t3 } = useTranslation();
   const stripe = (0, import_react_stripe_js.useStripe)();
@@ -19148,7 +19282,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
       }
     };
   }, [t3, isPaymentReady]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     Flex,
     {
       as: "form",
@@ -19156,8 +19290,8 @@ var PaymentForm = ({ onConfirm, financeData }) => {
       onSubmit: handleSubmit,
       $flexDirection: "column",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { $marginBottom: "1.5rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { $marginBottom: "1.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_react_stripe_js.PaymentElement,
             {
               id: "payment-element",
@@ -19178,7 +19312,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
               }
             }
           ),
-          loadError && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          loadError && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Flex,
             {
               as: TransitionBox,
@@ -19186,13 +19320,13 @@ var PaymentForm = ({ onConfirm, financeData }) => {
               $justifyContent: "center",
               $alignItems: "center",
               $gap: "1rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { $weight: 500, $color: "#DB6669", children: loadError })
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { $weight: 500, $color: "#DB6669", children: loadError })
             }
           )
         ] }),
-        stripe && collectEmail && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: "email", children: "Email" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        stripe && collectEmail && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Input2,
             {
               id: "email",
@@ -19207,7 +19341,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
             }
           )
         ] }),
-        showBillingAddress && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        showBillingAddress && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           import_react_stripe_js.AddressElement,
           {
             options: {
@@ -19226,7 +19360,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
           },
           addressDefaultsKey
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Button,
           {
             id: "submit",
@@ -19238,7 +19372,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
             children: isLoading ? t3("Loading") : t3("Save payment method")
           }
         ),
-        message && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $margin: "1rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
+        message && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $margin: "1rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
       ]
     }
   );
@@ -19246,7 +19380,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
 var import_react39 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var PERIOD_MONTH_COUNT = {
   year: 12,
   quarter: 3
@@ -19279,7 +19413,7 @@ var PeriodToggle = ({
     }
     return result;
   }, [selectedPlan]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Flex,
     {
       "data-testid": "sch-period-toggle",
@@ -19292,7 +19426,7 @@ var PeriodToggle = ({
       $borderRadius: "2.5rem",
       $cursor: "pointer",
       children: options.map((option) => {
-        const element = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        const element = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Button,
           {
             "data-testid": "sch-period-toggle-button",
@@ -19316,7 +19450,7 @@ var PeriodToggle = ({
                 backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Text,
               {
                 style: {
@@ -19334,12 +19468,12 @@ var PeriodToggle = ({
         const savingsPercentage = savingsByPeriod[option];
         if (typeof savingsPercentage === "number") {
           const isOptionYear = option === "year";
-          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Tooltip,
             {
               portal,
               trigger: element,
-              content: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
+              content: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
                 isOptionYear ? "Saving with yearly billing" : "Saving with quarterly billing",
                 { percent: savingsPercentage }
               ) : t3(
@@ -19363,7 +19497,7 @@ var import_react41 = require("react");
 
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
 var import_react40 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var PriceText = ({
   feature,
   period,
@@ -19374,38 +19508,38 @@ var PriceText = ({
   const { settings } = useEmbed();
   const text = (0, import_react40.useMemo)(() => {
     if (!flatAmount && perUnitPrice) {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         formatCurrency(perUnitPrice, currency),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("sub", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("sub", { children: [
           "/",
           getFeatureName(feature, 1)
         ] })
       ] });
     }
     if (flatAmount && !perUnitPrice) {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         formatCurrency(flatAmount, currency),
-        period && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("sub", { children: [
+        period && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("sub", { children: [
           "/",
           shortenPeriod(period)
         ] })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
       formatCurrency(perUnitPrice, currency),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("sub", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("sub", { children: [
         "/",
         getFeatureName(feature, 1)
       ] }),
       " + ",
       formatCurrency(flatAmount, currency),
-      period && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("sub", { children: [
+      period && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("sub", { children: [
         "/",
         shortenPeriod(period)
       ] })
     ] });
   }, [feature, period, currency, flatAmount, perUnitPrice]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Text,
     {
       $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -19416,7 +19550,7 @@ var PriceText = ({
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var PricingTiersTooltip = ({
   portal,
   feature,
@@ -19449,11 +19583,11 @@ var PricingTiersTooltip = ({
   if (!priceTiers.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Tooltip,
     {
       portal,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         Icon3,
         {
           title: "tiered pricing",
@@ -19462,11 +19596,11 @@ var PricingTiersTooltip = ({
           style: { lineHeight: 0 }
         }
       ),
-      content: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dl", { children: tiers.map((tier, index) => {
+      content: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dl", { children: tiers.map((tier, index) => {
           const flatAmount = typeof tier.flatAmount === "number" ? tier.flatAmount : void 0;
           const perUnitPrice = typeof tier.perUnitPriceDecimal === "string" ? Number(tier.perUnitPriceDecimal) : typeof tier.perUnitPrice === "number" ? tier.perUnitPrice : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
@@ -19474,17 +19608,17 @@ var PricingTiersTooltip = ({
               $gap: "1rem",
               $padding: "0.5rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                   Text,
                   {
                     $size: 0.875 * settings.theme.typography.text.fontSize,
                     children: [
                       tier.from,
-                      tier.from !== tier.to && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
+                      tier.from !== tier.to && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   PriceText,
                   {
                     period,
@@ -19499,8 +19633,8 @@ var PricingTiersTooltip = ({
             index
           );
         }) }),
-        tiersMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        tiersMode && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "hr",
             {
               style: {
@@ -19510,7 +19644,7 @@ var PricingTiersTooltip = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, children: [
             "\u2139\uFE0F",
             " ",
             tiersMode === BillingTiersMode.Volume ? t3("Price by unit based on final tier reached.") : t3("Tiers apply progressively as quantity increases.")
@@ -19527,7 +19661,7 @@ var import_react43 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/shared/subscription-sidebar/CheckoutStageButton.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var NoPaymentRequired = ({
   isDisabled,
   isLoading,
@@ -19537,7 +19671,7 @@ var NoPaymentRequired = ({
   onClick
 }) => {
   const { t: t3 } = useTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Button,
     {
       type: "button",
@@ -19599,7 +19733,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "plan") {
     const nextStage = getNextStageId("plan");
     if (isSelectedPlanTrialable && trialPaymentMethodRequired && shouldTrial) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Button,
         {
           type: "button",
@@ -19609,7 +19743,7 @@ var CheckoutStageButton = ({
           },
           $fullWidth: true,
           $isLoading: isLoading,
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             Flex,
             {
               $gap: "0.5rem",
@@ -19620,7 +19754,7 @@ var CheckoutStageButton = ({
                 t3("Next"),
                 ": ",
                 t3("Checkout"),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { name: "arrow-right" })
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { name: "arrow-right" })
               ]
             }
           )
@@ -19628,7 +19762,7 @@ var CheckoutStageButton = ({
       );
     }
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19639,7 +19773,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         type: "button",
@@ -19650,11 +19784,11 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
           t3("Next"),
           ": ",
           getStageDisplayName(nextStage),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { name: "arrow-right" })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { name: "arrow-right" })
         ] })
       }
     );
@@ -19662,7 +19796,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "autoTopup") {
     const nextStage = getNextStageId("autoTopup");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19673,7 +19807,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         type: "button",
@@ -19684,7 +19818,7 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -19695,7 +19829,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19705,7 +19839,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "usage") {
     const nextStage = getNextStageId("usage");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19716,7 +19850,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         type: "button",
@@ -19727,7 +19861,7 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -19738,7 +19872,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19748,7 +19882,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "addons") {
     const nextStage = getNextStageId("addons");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19759,7 +19893,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         type: "button",
@@ -19769,7 +19903,7 @@ var CheckoutStageButton = ({
         },
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -19780,7 +19914,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19790,7 +19924,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "addonsUsage") {
     const nextStage = getNextStageId("addonsUsage");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19801,7 +19935,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         type: "button",
@@ -19812,7 +19946,7 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -19823,7 +19957,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19833,7 +19967,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "credits") {
     const nextStage = getNextStageId("credits");
     if (!nextStage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19844,7 +19978,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         type: "button",
@@ -19854,7 +19988,7 @@ var CheckoutStageButton = ({
         },
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -19865,7 +19999,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19874,7 +20008,7 @@ var CheckoutStageButton = ({
   }
   if (checkoutStage === "checkout") {
     if (!isPaymentMethodRequired) {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19885,7 +20019,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         type: "button",
@@ -19900,7 +20034,7 @@ var CheckoutStageButton = ({
 };
 
 // src/components/shared/subscription-sidebar/EntitlementRow.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var EntitlementRow = (props) => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
@@ -19920,41 +20054,41 @@ var EntitlementRow = (props) => {
       tiersMode
     } = entitlementPrice || {};
     const tiered = priceBehavior === EntitlementPriceBehavior.PayInAdvance && isTieredPrice(entitlementPrice);
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: "heading4", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: "heading4", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
         quantity,
         " ",
         getFeatureName(feature, quantity)
-      ] }) : priceBehavior === EntitlementPriceBehavior.Overage && typeof softLimit === "number" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      ] }) : priceBehavior === EntitlementPriceBehavior.Overage && typeof softLimit === "number" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
         softLimit,
         " ",
         getFeatureName(feature, softLimit)
       ] }) : feature.name }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Text, { children: [
         formatCurrency((price ?? 0) * quantity, currency),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("sub", { children: [
           "/",
           shortenPeriod(planPeriod)
         ] })
-      ] }) : priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
-        priceBehavior === EntitlementPriceBehavior.Overage && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      ] }) : priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Text, { children: [
+        priceBehavior === EntitlementPriceBehavior.Overage && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
           t3("then"),
           " "
         ] }),
         formatCurrency(price ?? 0, currency),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("sub", { children: [
           "/",
-          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
             packageSize,
             " "
           ] }),
           getFeatureName(feature, packageSize),
-          feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
             "/",
             shortenPeriod(planPeriod)
           ] })
         ] })
-      ] }) : (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      ] }) : (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         Text,
         {
           style: { opacity: 0.54 },
@@ -19962,7 +20096,7 @@ var EntitlementRow = (props) => {
           $color: settings.theme.typography.text.color,
           children: [
             t3("Tier-based"),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               PricingTiersTooltip,
               {
                 portal,
@@ -19983,7 +20117,7 @@ var EntitlementRow = (props) => {
 
 // src/components/shared/subscription-sidebar/Proration.tsx
 var import_react42 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Proration = ({ currency, charges }) => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
@@ -19993,21 +20127,21 @@ var Proration = ({ currency, charges }) => {
     e2.stopPropagation();
     setOpen((open2) => !open2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { $size: 14, children: t3("Proration") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 14, children: t3("Proration") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       open && charges?.upcomingInvoiceLineItems.map(
         ({ amount, description }, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $gap: "1rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: description }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: formatCurrency(amount, currency) })
+          return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $gap: "1rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: description }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: formatCurrency(amount, currency) })
           ] }, index);
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", $gap: "1rem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { display: "heading4", children: t3("Total") }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", $gap: "1rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: "heading4", children: t3("Total") }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
             Button,
             {
               type: "button",
@@ -20015,26 +20149,26 @@ var Proration = ({ currency, charges }) => {
               style: { height: "auto", padding: 0 },
               $variant: "text",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   Icon3,
                   {
                     name: open ? "chevron-up" : "chevron-down",
                     color: settings.theme.typography.text.color
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: open ? t3("Hide details") : t3("Show details") })
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: open ? t3("Hide details") : t3("Show details") })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: formatCurrency(charges.proration, currency) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: formatCurrency(charges.proration, currency) }) })
       ] })
     ] })
   ] });
 };
 
 // src/components/shared/subscription-sidebar/SubscriptionSidebar.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var SubscriptionSidebar = (0, import_react43.forwardRef)(
   ({
     portal,
@@ -20440,7 +20574,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
       const isSticky = !isButtonInView;
       switch (layout) {
         case "checkout":
-          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             CheckoutStageButton,
             {
               canCheckout,
@@ -20463,7 +20597,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
             }
           );
         case "unsubscribe":
-          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Button,
             {
               type: "button",
@@ -20529,7 +20663,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
     if (isSelectedPlanTrialable && selectedPlan.trialDays) {
       trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       Flex,
       {
         ref,
@@ -20546,7 +20680,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
         },
         ...rest,
         children: [
-          showHeader && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          showHeader && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Flex,
             {
               $position: "relative",
@@ -20558,10 +20692,10 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
               $borderBottomWidth: "1px",
               $borderStyle: "solid",
               $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { as: "h3", display: "heading3", children: t3("Subscription") }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { as: "h3", display: "heading3", children: t3("Subscription") }) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             Flex,
             {
               $position: "relative",
@@ -20575,9 +20709,9 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
               $borderStyle: "solid",
               $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 14, children: t3("Plan") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  currentPlan && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $size: 14, children: t3("Plan") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  currentPlan && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                     Flex,
                     {
                       $justifyContent: "space-between",
@@ -20589,13 +20723,13 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                         $color: settings.theme.typography.heading4.color
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: "heading4", children: currentPlan.name }) }),
-                        typeof currentPlan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: "heading4", children: currentPlan.name }) }),
+                        typeof currentPlan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                           formatCurrency(
                             currentPlan.planPrice,
                             billingSubscription?.currency
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("sub", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("sub", { children: [
                             "/",
                             shortenPeriod(
                               getSubscriptionPeriod(billingSubscription) || currentPlan.planPeriod || planPeriod
@@ -20605,8 +20739,8 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                       ]
                     }
                   ),
-                  selectedPlan && !selectedPlan.current && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  selectedPlan && !selectedPlan.current && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       Box,
                       {
                         $width: "100%",
@@ -20614,7 +20748,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                         $opacity: "50%",
                         $marginBottom: "0.25rem",
                         $marginTop: "-0.25rem",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                           Icon3,
                           {
                             name: "arrow-down",
@@ -20626,20 +20760,20 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                       Flex,
                       {
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: "heading4", children: selectedPlan.name }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: "heading4", children: selectedPlan.name }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                             formatCurrency(
                               selectedPlanPrice ?? 0,
                               selectedPlanCurrency
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("sub", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(planPeriod)
                             ] })
@@ -20649,13 +20783,13 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     )
                   ] })
                 ] }),
-                updatedUsageBasedEntitlements.willChange && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 14, children: t3("Usage-based") }) }),
+                updatedUsageBasedEntitlements.willChange && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $size: 14, children: t3("Usage-based") }) }),
                   updatedUsageBasedEntitlements.removed.reduce(
                     (acc, entitlement, index) => {
                       if (entitlement.feature?.name) {
                         acc.push(
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             Flex,
                             {
                               $justifyContent: "space-between",
@@ -20664,7 +20798,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                               $opacity: "0.625",
                               $textDecoration: "line-through",
                               $color: settings.theme.typography.heading4.color,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                 EntitlementRow,
                                 {
                                   portal: resolvedPortal,
@@ -20686,8 +20820,8 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     (acc, { previous, next: next2 }, index) => {
                       if (next2.feature?.name) {
                         acc.push(
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                               Flex,
                               {
                                 $justifyContent: "space-between",
@@ -20696,7 +20830,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                                 $opacity: "0.625",
                                 $textDecoration: "line-through",
                                 $color: settings.theme.typography.heading4.color,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                   EntitlementRow,
                                   {
                                     portal: resolvedPortal,
@@ -20707,13 +20841,13 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                                 )
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                               Flex,
                               {
                                 $justifyContent: "space-between",
                                 $alignItems: "baseline",
                                 $gap: "1rem",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                   EntitlementRow,
                                   {
                                     portal: resolvedPortal,
@@ -20735,13 +20869,13 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     (acc, entitlement, index) => {
                       if (entitlement.feature?.name) {
                         acc.push(
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             Flex,
                             {
                               $justifyContent: "space-between",
                               $alignItems: "baseline",
                               $gap: "1rem",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                 EntitlementRow,
                                 {
                                   portal: resolvedPortal,
@@ -20760,33 +20894,33 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     []
                   )
                 ] }),
-                selectedPlan && isSelectedPlanTrialable && shouldTrial && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 14, children: t3("Trial") }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                selectedPlan && isSelectedPlanTrialable && shouldTrial && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $size: 14, children: t3("Trial") }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                     Flex,
                     {
                       $justifyContent: "space-between",
                       $alignItems: "center",
                       $gap: "1rem",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: "heading4", children: t3("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: "heading4", children: t3("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                           "-",
                           formatCurrency(
                             selectedPlanPrice ?? 0,
                             selectedPlanCurrency
                           ),
                           "/",
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("sub", { children: shortenPeriod(planPeriod) })
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("sub", { children: shortenPeriod(planPeriod) })
                         ] }) })
                       ]
                     }
                   )
                 ] }),
-                (willAddOnsChange || selectedAddOnsWithPrice.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 14, children: t3("Add-ons") }) }),
+                (willAddOnsChange || selectedAddOnsWithPrice.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $size: 14, children: t3("Add-ons") }) }),
                   removedAddOns.map((addOn, index) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                       Flex,
                       {
                         $justifyContent: "space-between",
@@ -20796,13 +20930,13 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                         $textDecoration: "line-through",
                         $color: settings.theme.typography.heading4.color,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: "heading4", children: addOn.name }) }),
-                          typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: "heading4", children: addOn.name }) }),
+                          typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                             formatCurrency(
                               addOn.planPrice,
                               selectedPlanCurrency
                             ),
-                            addOn.planPeriod !== "one-time" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("sub", { children: [
+                            addOn.planPeriod !== "one-time" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(planPeriod)
                             ] })
@@ -20814,17 +20948,17 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                   }),
                   selectedAddOnsWithPrice.map((addOn, index) => {
                     const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, planPeriod, currency) || {};
-                    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                       Flex,
                       {
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { display: "heading4", children: addOn.name }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { display: "heading4", children: addOn.name }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                             formatCurrency(addOnPrice ?? 0, addOnCurrency),
-                            addOn.chargeType !== ChargeType.oneTime && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("sub", { children: [
+                            addOn.chargeType !== ChargeType.oneTime && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(planPeriod)
                             ] })
@@ -20835,35 +20969,35 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     );
                   })
                 ] }),
-                addedCreditBundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 14, children: t3("Credits") }) }),
+                addedCreditBundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $size: 14, children: t3("Credits") }) }),
                   addedCreditBundles.reduce(
                     (acc, bundle, index) => {
                       const price = typeof bundle.price?.priceDecimal === "string" ? Number(bundle.price.priceDecimal) : typeof bundle.price?.price === "number" ? bundle.price.price : void 0;
                       const amount = (bundle.quantity ?? 0) * bundle.count;
                       if (price)
                         acc.push(
-                          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                             Flex,
                             {
                               $justifyContent: "space-between",
                               $alignItems: "center",
                               $gap: "1rem",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Box, { children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { display: "heading4", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Box, { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { display: "heading4", children: [
                                     bundle.name,
                                     " (",
                                     bundle.count,
                                     ")"
                                   ] }) }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                                     amount,
                                     " ",
                                     getFeatureName(bundle, amount)
                                   ] }) })
                                 ] }),
-                                bundle.count > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: formatCurrency(
+                                bundle.count > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: formatCurrency(
                                   price * bundle.count,
                                   bundle.price?.currency
                                 ) }) })
@@ -20877,7 +21011,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     []
                   )
                 ] }),
-                proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   Proration,
                   {
                     charges,
@@ -20888,7 +21022,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             Flex,
             {
               $flexDirection: "column",
@@ -20897,15 +21031,15 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
               $width: "100%",
               $padding: "1.5rem",
               children: [
-                discountApplied && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                discountApplied && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: t3("Discount") }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t3("Discount") }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -20915,15 +21049,15 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                           $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                           $borderRadius: "0.3125rem",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                               Box,
                               {
                                 $cursor: "pointer",
                                 onClick: () => {
                                   updatePromoCode?.(null);
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                   Icon3,
                                   {
                                     name: "close",
@@ -20939,55 +21073,55 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     ]
                   }
                 ),
-                percentOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                percentOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: t3("X% off", { percent: percentOff }) }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: formatCurrency(
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t3("X% off", { percent: percentOff }) }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: formatCurrency(
                         newCharges / 100 * percentOff,
                         selectedPlanCurrency
                       ) }) })
                     ]
                   }
                 ),
-                amountOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                amountOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: t3("X off", {
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t3("X off", {
                         amount: formatCurrency(
                           Math.abs(amountOff),
                           selectedPlanCurrency
                         )
                       }) }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                         "-",
                         formatCurrency(Math.abs(amountOff), selectedPlanCurrency)
                       ] }) })
                     ]
                   }
                 ),
-                !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                         planPeriod === "year" ? t3("Yearly total") : planPeriod === "quarter" ? t3("Quarterly total") : t3("Monthly total"),
                         ":"
                       ] }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                         subscriptionPrice,
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("sub", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("sub", { children: [
                           "/",
                           shortenPeriod(planPeriod)
                         ] })
@@ -20995,46 +21129,46 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     ]
                   }
                 ),
-                taxAmount > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                taxAmount > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: t3("Tax (description):", {
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: t3("Tax (description):", {
                         description: taxDescription
                       }) }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
                     ]
                   }
                 ),
-                charges && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                charges && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                         t3("Due today"),
                         ":"
                       ] }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
                     ]
                   }
                 ),
-                dueNow < 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text, { children: [
+                dueNow < 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { children: [
                     t3("Credits to be applied to future invoices"),
                     ":"
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref: buttonRef, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref: buttonRef, children: [
                   button,
                   (0, import_react_dom2.createPortal)(
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       Box,
                       {
                         $position: "sticky",
@@ -21048,15 +21182,15 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                         $borderTopWidth: "1px",
                         $borderTopStyle: "solid",
                         $borderTopColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $padding: "1rem 1.5rem", children: button })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $padding: "1rem 1.5rem", children: button })
                       }
                     ),
                     resolvedPortal
                   )
                 ] }),
-                !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $flexDirection: "column", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }),
-                  error === t3("Downgrade not permitted.") && data?.preventSelfServiceDowngrade && data?.preventSelfServiceDowngradeUrl && data?.preventSelfServiceDowngradeButtonText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }),
+                  error === t3("Downgrade not permitted.") && data?.preventSelfServiceDowngrade && data?.preventSelfServiceDowngradeUrl && data?.preventSelfServiceDowngradeButtonText && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     Text,
                     {
                       as: "a",
@@ -21066,7 +21200,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                     }
                   )
                 ] }),
-                layout !== "unsubscribe" && !isCreditOnlyPurchase && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
+                layout !== "unsubscribe" && !isCreditOnlyPurchase && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
                   "You will be downgraded at the end of your billing period.",
                   {
                     plan: selectedPlan.name,
@@ -21147,7 +21281,7 @@ var TieredPricingDetails = ({
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
 var import_react45 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var UnsubscribeDialog = ({ top }) => {
   const { t: t3 } = useTranslation();
   const { data, layout, setLayout, setCheckoutState, clearCheckoutState } = useEmbed();
@@ -21217,7 +21351,7 @@ var UnsubscribeDialog = ({ top }) => {
       element.show();
     }
   }, [layout]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Dialog2,
     {
       ref: setDialog,
@@ -21226,8 +21360,8 @@ var UnsubscribeDialog = ({ top }) => {
       top,
       onClose: handleClose,
       ...!isModal && { open: layout === "unsubscribe" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DialogContent2, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(DialogContent2, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           DialogClose,
           {
             onClose: handleClose,
@@ -21237,7 +21371,7 @@ var UnsubscribeDialog = ({ top }) => {
             $margin: "1rem 0.75rem 0 0"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -21247,9 +21381,9 @@ var UnsubscribeDialog = ({ top }) => {
             $padding: "2.5rem",
             $overflow: "auto",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { as: "h2", display: "heading2", children: t3("Cancel subscription") }),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Text, { as: "p", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { as: "h2", display: "heading2", children: t3("Cancel subscription") }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text, { as: "p", children: [
                   t3(
                     "You will retain access to your plan until the end of the billing period, on"
                   ),
@@ -21259,9 +21393,9 @@ var UnsubscribeDialog = ({ top }) => {
                   })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { as: "p", children: t3("Not ready to cancel?") }),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { as: "p", children: t3("Not ready to cancel?") }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   Button,
                   {
                     type: "button",
@@ -21282,7 +21416,7 @@ var UnsubscribeDialog = ({ top }) => {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           SubscriptionSidebar,
           {
             ref: sidebarRef,
@@ -21309,14 +21443,14 @@ var UnsubscribeDialog = ({ top }) => {
 };
 
 // src/components/shared/usage-violation-text/UsageViolationText.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var UsageViolationText = ({ violations }) => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
   if (violations.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     Text,
     {
       $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -21335,11 +21469,11 @@ var UsageViolationText = ({ violations }) => {
 };
 
 // src/components/ui/badge/Badge.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Badge = () => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     Flex,
     {
       as: "a",
@@ -21352,82 +21486,82 @@ var Badge = () => {
       $gridColumn: "1 / -1",
       $color: settings.theme.typography.text.color,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Text, { $size: 12, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Text, { $size: 12, children: [
           t3("Powered by"),
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "path",
             {
               d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
@@ -21441,9 +21575,9 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Disabled = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Box, { $width: "max-content", $height: "max-content", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Box, { $width: "max-content", $height: "max-content", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Element,
     {
       as: Flex,
@@ -21452,8 +21586,8 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { as: "p", children: "Please try again later." })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "p", children: "Please try again later." })
       ]
     }
   ) }) });
@@ -21462,7 +21596,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Disabled, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Disabled, {});
     default:
       return children;
   }
@@ -21487,7 +21621,7 @@ var StyledViewport = gt2.div.withConfig({
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var Viewport = (0, import_react46.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     portal = portal || document.body;
@@ -21508,21 +21642,21 @@ var Viewport = (0, import_react46.forwardRef)(
       };
     }, []);
     const isBadgeVisible = !data?.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden";
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RenderLayout, { children }),
-        isBadgeVisible && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Badge, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(StyledViewport, { ref, ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RenderLayout, { children }),
+        isBadgeVisible && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Badge, {})
       ] }),
-      layout === "checkout" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckoutDialog, { top }), portal),
-      layout === "unsubscribe" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UnsubscribeDialog, { top }), portal),
-      layout === "payment" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaymentDialog, { top }), portal)
+      layout === "checkout" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckoutDialog, { top }), portal),
+      layout === "unsubscribe" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UnsubscribeDialog, { top }), portal),
+      layout === "payment" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaymentDialog, { top }), portal)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/elements/button/Button.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -21553,7 +21687,7 @@ var ButtonElement = (0, import_react47.forwardRef)(({ children, className, ...re
       variant: "text"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     Element,
     {
       as: Flex,
@@ -21561,7 +21695,7 @@ var ButtonElement = (0, import_react47.forwardRef)(({ children, className, ...re
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Button,
         {
           as: "a",
@@ -21586,7 +21720,7 @@ var import_react49 = require("react");
 
 // src/components/elements/included-features/UsageDetails.tsx
 var import_react48 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var UsageDetails = ({ entitlement, layout }) => {
   const {
     allocation,
@@ -21717,7 +21851,7 @@ var UsageDetails = ({ entitlement, layout }) => {
     let index = 0;
     if (priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react48.Fragment, { children: packageSize > 1 ? t3("$X/Y units/period", {
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react48.Fragment, { children: packageSize > 1 ? t3("$X/Y units/period", {
           cost: formatCurrency(price, currency),
           size: packageSize,
           units: getFeatureName(feature, packageSize),
@@ -21731,7 +21865,7 @@ var UsageDetails = ({ entitlement, layout }) => {
       index += 1;
     } else if ((priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier || priceBehavior === EntitlementPriceBehavior.CreditBurndown || tiered) && typeof usage === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react48.Fragment, { children: t3("X units used", {
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react48.Fragment, { children: t3("X units used", {
           amount: usage,
           units: getFeatureName(feature, usage)
         }) }, index)
@@ -21740,14 +21874,14 @@ var UsageDetails = ({ entitlement, layout }) => {
     }
     if (typeof cost === "number" && cost > 0) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
-          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: " \u2022 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react48.Fragment, { children: [
+          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
       index += 1;
       if (feature.featureType === FeatureType.Trait && typeof period === "string") {
-        acc.push(/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
+        acc.push(/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react48.Fragment, { children: [
           "/",
           shortenPeriod(period)
         ] }, index));
@@ -21756,8 +21890,8 @@ var UsageDetails = ({ entitlement, layout }) => {
     }
     if (metricResetAt) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
-          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: " \u2022 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react48.Fragment, { children: [
+          acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: " \u2022 " }),
           t3("Resets", {
             date: toPrettyDate(metricResetAt, {
               month: "numeric",
@@ -21796,8 +21930,8 @@ var UsageDetails = ({ entitlement, layout }) => {
   if (!text && !usageText || !feature) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    layout.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+    layout.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Flex,
       {
         $marginTop: "0.75rem",
@@ -21807,9 +21941,9 @@ var UsageDetails = ({ entitlement, layout }) => {
             $marginTop: 0
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { display: layout.entitlement.fontStyle, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { display: layout.entitlement.fontStyle, children: [
           text,
-          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             HardLimitTooltip,
             {
               feature: entitlement.feature,
@@ -21819,7 +21953,7 @@ var UsageDetails = ({ entitlement, layout }) => {
         ] })
       }
     ),
-    layout.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    layout.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Flex,
       {
         $viewport: {
@@ -21827,9 +21961,9 @@ var UsageDetails = ({ entitlement, layout }) => {
             $justifyContent: "end"
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { display: layout.usage.fontStyle, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text, { display: layout.usage.fontStyle, children: [
           usageText,
-          (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             PricingTiersTooltip,
             {
               feature,
@@ -21846,7 +21980,7 @@ var UsageDetails = ({ entitlement, layout }) => {
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
     // there is a typescript bug with `DeepPartial` so we must cast to `string[] | undefined`
@@ -21921,9 +22055,9 @@ var IncludedFeatures = (0, import_react49.forwardRef)(({ className, ...rest }, r
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Element, { ref, className, $containerType: "inline-size", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: props.header.fontStyle, children: props.header.text }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Element, { ref, className, $containerType: "inline-size", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: props.header.fontStyle, children: props.header.text }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       Box,
       {
         $display: "grid",
@@ -21936,8 +22070,8 @@ var IncludedFeatures = (0, import_react49.forwardRef)(({ className, ...rest }, r
           }
         },
         children: featureUsage.slice(0, showCount).map((entitlement, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react49.Fragment, { children: [
-            props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react49.Fragment, { children: [
+            props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               Icon3,
               {
                 name: entitlement.feature.icon,
@@ -21947,16 +22081,16 @@ var IncludedFeatures = (0, import_react49.forwardRef)(({ className, ...rest }, r
                 style: { marginRight: "0.5rem" }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
               Flex,
               {
                 $flexDirection: "column",
                 $alignSelf: "baseline",
                 $gap: "0.25rem",
                 children: [
-                  entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
-                  props.description.isVisible && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { display: props.description.fontStyle, children: entitlement.feature.description }),
-                  props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
+                  props.description.isVisible && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: props.description.fontStyle, children: entitlement.feature.description }),
+                  props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     Text,
                     {
                       as: "em",
@@ -21974,7 +22108,7 @@ var IncludedFeatures = (0, import_react49.forwardRef)(({ className, ...rest }, r
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               Flex,
               {
                 $gridColumn: "span 2",
@@ -21991,22 +22125,22 @@ var IncludedFeatures = (0, import_react49.forwardRef)(({ className, ...rest }, r
                     $marginLeft: 0
                   }
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(UsageDetails, { entitlement, layout: props })
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(UsageDetails, { entitlement, layout: props })
               }
             )
           ] }, index);
         })
       }
     ),
-    shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex, { $alignItems: "center", $marginTop: "1rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $alignItems: "center", $marginTop: "1rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Icon3,
         {
           name: isExpanded ? "chevron-up" : "chevron-down",
           color: "#D0D0D0"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Text,
         {
           onClick: handleToggleShowAll,
@@ -22022,7 +22156,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 var import_react50 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -22125,9 +22259,9 @@ var Invoices = (0, import_react50.forwardRef)(({ className, ...rest }, ref) => {
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       Flex,
       {
         as: TransitionBox,
@@ -22136,8 +22270,8 @@ var Invoices = (0, import_react50.forwardRef)(({ className, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your invoices.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your invoices.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Button,
             {
               type: "button",
@@ -22150,17 +22284,17 @@ var Invoices = (0, import_react50.forwardRef)(({ className, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TransitionBox, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: props.header.fontStyle, children: t3("Invoices") }) }),
-      invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, amountDue, url }, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TransitionBox, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { display: props.header.fontStyle, children: t3("Invoices") }) }),
+      invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, amountDue, url }, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               children: [
-                props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Text,
                   {
                     display: props.date.fontStyle,
@@ -22174,10 +22308,10 @@ var Invoices = (0, import_react50.forwardRef)(({ className, ...rest }, ref) => {
                     children: date
                   }
                 ),
-                props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Tooltip,
                   {
-                    trigger: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: props.amount.fontStyle, children: amount }),
+                    trigger: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { display: props.amount.fontStyle, children: amount }),
                     content: amountDue < 0 ? t3("Invoice credit tooltip") : t3("Invoice charge tooltip")
                   }
                 )
@@ -22186,15 +22320,15 @@ var Invoices = (0, import_react50.forwardRef)(({ className, ...rest }, ref) => {
             index
           );
         }) }),
-        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Icon3,
             {
               name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Text,
             {
               onClick: toggleListSize,
@@ -22206,7 +22340,7 @@ var Invoices = (0, import_react50.forwardRef)(({ className, ...rest }, ref) => {
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: "heading2", children: t3("No invoices created yet") })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { display: "heading2", children: t3("No invoices created yet") })
     ] }) })
   ] });
 });
@@ -22216,7 +22350,7 @@ Invoices.displayName = "Invoices";
 var import_react51 = require("react");
 
 // src/components/elements/metered-features/Meter.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var Meter = ({ entitlement }) => {
   const { allocation, priceBehavior, softLimit, usage } = entitlement;
   const limit = softLimit ?? allocation;
@@ -22224,7 +22358,7 @@ var Meter = ({ entitlement }) => {
     return null;
   }
   const progress = (priceBehavior === EntitlementPriceBehavior.Overage && usage > limit ? Math.min(usage, limit) / Math.max(usage, limit) : usage / limit) * 100;
-  const meter = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  const meter = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     ProgressBar,
     {
       progress,
@@ -22241,7 +22375,7 @@ var Meter = ({ entitlement }) => {
 };
 
 // src/components/elements/metered-features/PriceDetails.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var PriceDetails = ({
   entitlement,
   usageDetails,
@@ -22268,7 +22402,7 @@ var PriceDetails = ({
   if (!feature || typeof currentTierPerUnitPrice !== "number") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -22282,28 +22416,28 @@ var PriceDetails = ({
         $borderBottomRightRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`
       },
       children: [
-        priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Text, { children: [
+        priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Text, { children: [
           t3("Additional"),
           ": ",
           formatCurrency(currentTierPerUnitPrice, currency),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(feature, packageSize),
-            feature.featureType === FeatureType.Trait && period && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            feature.featureType === FeatureType.Trait && period && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
               "/",
               shortenPeriod(period)
             ] })
           ] })
-        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Text, { children: [
+        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Text, { children: [
           t3("Tier"),
           ": ",
           currentTier?.from || 1,
-          typeof currentTier?.to === "number" && (currentTier.from || 1) !== currentTier.to && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          typeof currentTier?.to === "number" && (currentTier.from || 1) !== currentTier.to && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             PricingTiersTooltip,
             {
               period,
@@ -22314,19 +22448,19 @@ var PriceDetails = ({
             }
           )
         ] }),
-        typeof amount === "number" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Text, { children: [
+        typeof amount === "number" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Text, { children: [
           formatNumber(amount),
           " ",
           getFeatureName(feature, amount),
           " \xB7 ",
           formatCurrency(currentTierPerUnitPrice * amount, currency),
-          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
-        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && typeof cost === "number" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Text, { children: [
+        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && typeof cost === "number" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Text, { children: [
           formatCurrency(cost, currency),
-          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
@@ -22354,7 +22488,7 @@ var Container2 = gt2.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t3 } = useTranslation();
   const { data } = useEmbed();
@@ -22400,9 +22534,9 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Text, { display: fontStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Text, { display: fontStyle, children: [
     acc.join(" \u2022 "),
-    entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       HardLimitTooltip,
       {
         feature: entitlement.feature,
@@ -22480,7 +22614,7 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
   const period = getSubscriptionPeriod(data?.company?.billingSubscription) ?? (typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0);
   const canCheckout = data?.capabilities?.checkout ?? false;
   const showCredits = data?.displaySettings?.showCredits ?? true;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Container2, { ref, className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Container2, { ref, className, children: [
     meteredFeatures.reduce((acc, entitlement, index) => {
       if (!entitlement.feature) {
         return acc;
@@ -22489,9 +22623,9 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
       const usageDetails = getUsageDetails(entitlement, period);
       const { limit } = usageDetails;
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $gap: "1.5rem", children: [
-            props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $gap: "1.5rem", children: [
+            props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Icon3,
               {
                 name: feature.icon,
@@ -22500,8 +22634,8 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                 rounded: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                 Flex,
                 {
                   ref: (el) => {
@@ -22512,31 +22646,31 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                   $flexWrap: "wrap",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: feature.name }) }),
-                      props.description.isVisible && feature.description && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.description.fontStyle, children: feature.description }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.header.fontStyle, children: feature.name }) }),
+                      props.description.isVisible && feature.description && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.description.fontStyle, children: feature.description }) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                       Box,
                       {
                         $flexBasis: "min-content",
                         $flexGrow: 1,
                         $textAlign: shouldWrapChildren ? "left" : "right",
                         children: [
-                          props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.usage.fontStyle, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-                            typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+                          props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.usage.fontStyle, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+                            typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
                               formatNumber(limit),
                               " "
                             ] }),
                             getFeatureName(feature, limit)
-                          ] }) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+                          ] }) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
                             formatNumber(usage),
                             " ",
                             getFeatureName(feature, usage),
                             " ",
                             t3("used")
                           ] }) }) }),
-                          props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                          props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                             Limit,
                             {
                               entitlement,
@@ -22550,8 +22684,8 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                   ]
                 }
               ),
-              props.isVisible && priceBehavior !== EntitlementPriceBehavior.PayAsYouGo && priceBehavior !== EntitlementPriceBehavior.CreditBurndown && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Meter, { entitlement }),
-              canCheckout && priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              props.isVisible && priceBehavior !== EntitlementPriceBehavior.PayAsYouGo && priceBehavior !== EntitlementPriceBehavior.CreditBurndown && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Meter, { entitlement }),
+              canCheckout && priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 Button,
                 {
                   type: "button",
@@ -22564,7 +22698,7 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
               )
             ] })
           ] }),
-          (priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier) && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          (priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             PriceDetails,
             {
               entitlement,
@@ -22578,9 +22712,9 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
     }, []),
     showCredits && creditGroups.map((credit, index) => {
       const isExpanded = creditVisibility.find(({ id }) => credit.id === id)?.isExpanded ?? false;
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Icon3,
             {
               name: credit.icon,
@@ -22589,13 +22723,13 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
               rounded: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: credit.name }) }),
-              props.description.isVisible && credit.description && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.description.fontStyle, children: credit.description }) })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.header.fontStyle, children: credit.name }) }),
+              props.description.isVisible && credit.description && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.description.fontStyle, children: credit.description }) })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $gap: "1rem", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $gap: "1rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 ProgressBar,
                 {
                   progress: credit.total.used / credit.total.value * 100,
@@ -22606,7 +22740,7 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                   )]
                 }
               ),
-              canCheckout && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              canCheckout && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 Button,
                 {
                   type: "button",
@@ -22621,12 +22755,12 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           Box,
           {
             $width: `calc(100% + ${2 * settings.theme.card.padding / TEXT_BASE_SIZE}rem)`,
             $margin: `0 0 0 -${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               TransitionBox,
               {
                 $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0375)" : "hsla(0, 0%, 100%, 0.075)",
@@ -22634,19 +22768,19 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                 children: credit.grants.map((grant, index2) => {
                   const paddingX = settings.theme.card.padding / TEXT_BASE_SIZE;
                   const padding = index2 > 0 ? `0 ${paddingX}rem 1rem` : `1rem ${paddingX}rem`;
-                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { $display: "table-row", children: grant.grantReason === BillingCreditGrantReason.Plan ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { children: t3("X items included in plan", {
+                  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $display: "table-row", children: grant.grantReason === BillingCreditGrantReason.Plan ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: t3("X items included in plan", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, grant.quantity)
                     }) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { children: t3("Resets", {
+                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: t3("Resets", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -22658,8 +22792,8 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                         }) })
                       }
                     )
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { children: grant.grantReason === BillingCreditGrantReason.Purchased ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: t3("X item bundle", {
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: grant.grantReason === BillingCreditGrantReason.Purchased ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: t3("X item bundle", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, 1),
                       createdAt: toPrettyDate(grant.createdAt, {
@@ -22667,7 +22801,7 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                         month: "2-digit",
                         year: "2-digit"
                       })
-                    }) }) : grant.grantReason === BillingCreditGrantReason.BillingCreditAutoTopup ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: t3("X item auto-topup", {
+                    }) }) : grant.grantReason === BillingCreditGrantReason.BillingCreditAutoTopup ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: t3("X item auto-topup", {
                       amount: grant.quantity,
                       item: getFeatureName(
                         credit,
@@ -22678,7 +22812,7 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                         month: "2-digit",
                         year: "2-digit"
                       })
-                    }) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: t3("X item grant", {
+                    }) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: t3("X item grant", {
                       amount: grant.quantity,
                       item: getFeatureName(
                         credit,
@@ -22690,14 +22824,14 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
                         year: "2-digit"
                       })
                     }) }) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { children: t3("Expires", {
+                        children: grant.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: t3("Expires", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -22715,8 +22849,8 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { $gap: "0.25rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $gap: "0.25rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Icon3,
             {
               name: "chevron-down",
@@ -22727,7 +22861,7 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Text,
             {
               onClick: () => toggleBalanceDetails(credit.id),
@@ -22747,7 +22881,7 @@ var import_react53 = require("react");
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 var import_react52 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
   iconTitle,
@@ -22755,8 +22889,8 @@ var PaymentElement2 = ({
   paymentLast4
 }) => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Icon3,
       {
         name: iconName,
@@ -22764,15 +22898,15 @@ var PaymentElement2 = ({
         color: settings.theme.typography.text.color
       }
     ),
-    (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Box, { $flexGrow: 1, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: label }),
+    (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Box, { $flexGrow: 1, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: label }),
       " ",
-      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: paymentLast4 })
+      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: paymentLast4 })
     ] })
   ] });
 };
 var EmptyPaymentElement = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -22838,12 +22972,12 @@ var PaymentMethodElement = ({
   const { t: t3 } = useTranslation();
   const isLightBackground = useIsLightBackground();
   const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { display: props.header.fontStyle, children: t3("Payment Method") }),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t3("Expires in X months", { months: monthsToExpiration }) : t3("Expired") })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { display: props.header.fontStyle, children: t3("Payment Method") }),
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t3("Expires in X months", { months: monthsToExpiration }) : t3("Expired") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -22852,8 +22986,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EmptyPaymentElement, {}),
-          onRemove && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          paymentMethod ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EmptyPaymentElement, {}),
+          onRemove && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Text,
             {
               onClick: onRemove,
@@ -22863,7 +22997,7 @@ var PaymentMethodElement = ({
               children: t3("Remove")
             }
           ),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Text,
             {
               onClick: onEdit,
@@ -22897,7 +23031,7 @@ var PaymentListElement = ({
     }
     return `${cardExpMonth}/${formatedYear}`;
   }, [paymentMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     Flex,
     {
       $flexDirection: "row",
@@ -22909,7 +23043,7 @@ var PaymentListElement = ({
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
       children: [
-        iconName && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        iconName && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Icon3,
           {
             name: iconName,
@@ -22917,20 +23051,20 @@ var PaymentListElement = ({
             color: settings.theme.typography.text.color
           }
         ),
-        (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Box, { $flexGrow: 1, children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: label }),
+        (label || paymentLast4) && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Box, { $flexGrow: 1, children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: label }),
           " ",
-          paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: paymentLast4 })
+          paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: paymentLast4 })
         ] }),
-        expirationDate && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        expirationDate && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Box,
           {
             $flexGrow: 1,
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: t("Expires", { date: expirationDate }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { children: t("Expires", { date: expirationDate }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Text,
           {
             onClick: () => {
@@ -22943,7 +23077,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Icon3,
           {
             tabIndex: 0,
@@ -22965,7 +23099,7 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -23000,7 +23134,7 @@ var PaymentMethod = (0, import_react53.forwardRef)(({ children, className, porta
       monthsToExpiration: monthsToExpiration2
     };
   }, [data?.company?.defaultPaymentMethod, data?.subscription?.paymentMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -23069,7 +23203,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.6.0",
+    version: "9.7.0",
     startTime
   });
 };
@@ -23147,7 +23281,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("9.6.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("9.7.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);
@@ -23185,7 +23319,7 @@ var loadStripe = function loadStripe2() {
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 var import_react54 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -23357,7 +23491,7 @@ var PaymentMethodDetails = ({
     showPaymentForm,
     initializePaymentMethod
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     Flex,
     {
       $position: "relative",
@@ -23365,7 +23499,7 @@ var PaymentMethodDetails = ({
       $flexGrow: 1,
       $gap: "1.5rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Flex,
           {
             $position: "absolute",
@@ -23374,7 +23508,7 @@ var PaymentMethodDetails = ({
             $alignItems: "center",
             $width: "100%",
             $height: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Loader,
               {
                 $color: settings.theme.primary,
@@ -23384,7 +23518,7 @@ var PaymentMethodDetails = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           Flex,
           {
             $zIndex: isLoading || isConfirmingPayment ? 0 : 1,
@@ -23401,7 +23535,7 @@ var PaymentMethodDetails = ({
               }
             },
             children: [
-              setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+              setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                 import_react_stripe_js2.Elements,
                 {
                   stripe,
@@ -23431,7 +23565,7 @@ var PaymentMethodDetails = ({
                     clientSecret: setupIntent?.setupIntentClientSecret
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                       PaymentForm,
                       {
                         financeData,
@@ -23442,7 +23576,7 @@ var PaymentMethodDetails = ({
                         }
                       }
                     ),
-                    currentPaymentMethod && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    currentPaymentMethod && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                       Text,
                       {
                         onClick: focusExistingPaymentMethods,
@@ -23455,8 +23589,8 @@ var PaymentMethodDetails = ({
                     ) })
                   ]
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   PaymentMethodElement,
                   {
                     paymentMethod: currentPaymentMethod,
@@ -23469,8 +23603,8 @@ var PaymentMethodDetails = ({
                     ...props
                   }
                 ),
-                paymentMethods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                paymentMethods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     Text,
                     {
                       onClick: toggleShowPaymentMethods,
@@ -23481,7 +23615,7 @@ var PaymentMethodDetails = ({
                       children: t3("Choose different payment method")
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     Icon3,
                     {
                       name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down",
@@ -23489,10 +23623,10 @@ var PaymentMethodDetails = ({
                     }
                   )
                 ] }),
-                showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
-                  paymentMethods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
+                showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
+                  paymentMethods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
                     (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
-                  ) || []).map((paymentMethod) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  ) || []).map((paymentMethod) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     PaymentListElement,
                     {
                       paymentMethod,
@@ -23501,7 +23635,7 @@ var PaymentMethodDetails = ({
                     },
                     paymentMethod.id
                   )) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     Button,
                     {
                       type: "button",
@@ -23516,7 +23650,7 @@ var PaymentMethodDetails = ({
                   )
                 ] })
               ] }),
-              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }) })
+              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { $weight: 500, $color: "#DB6669", children: error }) })
             ]
           }
         )
@@ -23529,10 +23663,10 @@ var PaymentMethodDetails = ({
 var import_react56 = require("react");
 
 // src/components/elements/plan-manager/AddOn.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var AddOn = ({ addOn, currency, period, layout }) => {
   const resolvedPeriod = addOn.planPeriod === "one-time" ? addOn.planPeriod : period ?? addOn.planPeriod;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -23540,10 +23674,10 @@ var AddOn = ({ addOn, currency, period, layout }) => {
       $flexWrap: "wrap",
       $gap: "1rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
+        typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
         ] })
       ]
     }
@@ -23552,7 +23686,7 @@ var AddOn = ({ addOn, currency, period, layout }) => {
 
 // src/components/elements/plan-manager/UsageDetails.tsx
 var import_react55 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var UsageDetails2 = ({
   entitlement,
   period,
@@ -23574,30 +23708,30 @@ var UsageDetails2 = ({
     const acc = [];
     let index = 0;
     if (entitlement.priceBehavior === EntitlementPriceBehavior.Overage) {
-      acc.push(/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react55.Fragment, { children: [
+      acc.push(/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react55.Fragment, { children: [
         t3("Additional"),
         ": "
       ] }, index));
       index += 1;
     }
     if (entitlement.priceBehavior === EntitlementPriceBehavior.Tier) {
-      acc.push(/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react55.Fragment, { children: t3("Tier-based") }, index));
+      acc.push(/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react55.Fragment, { children: t3("Tier-based") }, index));
       index += 1;
     }
     const { price } = getEntitlementPrice(entitlement, period, currency) || {};
     if ((entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo || entitlement.priceBehavior === EntitlementPriceBehavior.Overage) && entitlement.feature && typeof price === "number") {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react55.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react55.Fragment, { children: [
           formatCurrency(price, billingPrice?.currency),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("sub", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("sub", { children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+            packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(entitlement.feature, packageSize),
-            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -23608,7 +23742,7 @@ var UsageDetails2 = ({
     }
     if (showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react55.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react55.Fragment, { children: [
           entitlement.planEntitlement.consumptionRate,
           " ",
           getFeatureName(
@@ -23636,7 +23770,7 @@ var UsageDetails2 = ({
     return null;
   }
   const quantity = entitlement.priceBehavior !== EntitlementPriceBehavior.CreditBurndown ? limit : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     Flex,
     {
       $justifyContent: "space-between",
@@ -23644,13 +23778,13 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
           quantity,
           " ",
           getFeatureName(entitlement.feature, quantity, true)
         ] }) : entitlement.feature.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Text, { children: [
-          description.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { children: [
+          description.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Text,
             {
               style: { opacity: 0.54 },
@@ -23661,15 +23795,15 @@ var UsageDetails2 = ({
           ),
           // only show cost for pay-in-advance entitlements
           // `description` will include price for other price behaviors
-          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
             " ",
             formatCurrency(cost, billingPrice?.currency),
-            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("sub", { children: [
+            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("sub", { children: [
               "/",
               shortenPeriod(period)
             ] })
           ] }),
-          entitlement.priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          entitlement.priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             PricingTiersTooltip,
             {
               feature: entitlement.feature,
@@ -23679,7 +23813,7 @@ var UsageDetails2 = ({
               tiersMode: billingPrice?.tiersMode ?? void 0
             }
           ),
-          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             HardLimitTooltip,
             {
               feature: entitlement.feature,
@@ -23693,7 +23827,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -23815,8 +23949,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
   const hasAutoTopupSelfService = currentPlan?.includedCreditGrants.some((grant) => {
     return grant.billingCreditAutoTopupSelfService;
   }) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       Notice,
       {
         as: Flex,
@@ -23826,8 +23960,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          typeof trialEnd.endDate !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { as: "h3", display: "heading3", children: t3("Trial ends in", trialEnd) }),
-          (trialPaymentMethodRequired || postTrialPlan || currentPlan) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          typeof trialEnd.endDate !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { as: "h3", display: "heading3", children: t3("Trial ends in", trialEnd) }),
+          (trialPaymentMethodRequired || postTrialPlan || currentPlan) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Text,
             {
               as: "p",
@@ -23841,7 +23975,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
           )
         ]
       }
-    ) : willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    ) : willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       Notice,
       {
         as: Flex,
@@ -23851,8 +23985,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { as: "h3", display: "heading3", children: t3("Subscription canceled") }),
-          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { as: "h3", display: "heading3", children: t3("Subscription canceled") }),
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Text,
             {
               as: "p",
@@ -23870,7 +24004,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
           )
         ]
       }
-    ) : customPlanBilling ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    ) : customPlanBilling ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       Notice,
       {
         as: Flex,
@@ -23880,7 +24014,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { as: "h3", display: "heading3", children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment", {
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { as: "h3", display: "heading3", children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment", {
             plan: customPlanBilling.planName ?? t3("your plan")
           }) : t3("Custom plan payment due", {
             plan: customPlanBilling.planName ?? t3("your plan"),
@@ -23888,7 +24022,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               month: "numeric"
             })
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment description", {
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment description", {
             date: toPrettyDate(customPlanBilling.deadline, {
               month: "numeric"
             })
@@ -23898,7 +24032,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               month: "numeric"
             })
           }) }),
-          customPlanBilling.billing.stripeInvoiceUrl && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          customPlanBilling.billing.stripeInvoiceUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Button,
             {
               as: "a",
@@ -23912,7 +24046,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
           )
         ]
       }
-    ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       Notice,
       {
         as: Flex,
@@ -23922,10 +24056,10 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { as: "h3", display: "heading3", children: t3("Downgrade to plan scheduled", {
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { as: "h3", display: "heading3", children: t3("Downgrade to plan scheduled", {
             plan: data.company.scheduledDowngrade.toPlanName
           }) }),
-          typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Text,
             {
               as: "p",
@@ -23944,7 +24078,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       Element,
       {
         as: Flex,
@@ -23953,19 +24087,19 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { display: props.header.title.fontStyle, $leading: "none", children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { display: props.header.title.fontStyle, $leading: "none", children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -23975,7 +24109,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                       )
                     }
                   ),
-                  !isFreePlan && currentPlanPeriod && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("sub", { children: [
+                  !isFreePlan && currentPlanPeriod && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("sub", { children: [
                     "/",
                     shortenPeriod(currentPlanPeriod)
                   ] }) })
@@ -23983,8 +24117,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               ]
             }
           ),
-          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23992,7 +24126,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                 children: t3("Add-ons")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               AddOn,
               {
                 addOn,
@@ -24003,8 +24137,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               addOnIndex
             )) })
           ] }),
-          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -24012,8 +24146,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                 children: t3("Usage-based")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 UsageDetails2,
                 {
                   entitlement,
@@ -24026,8 +24160,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -24035,19 +24169,19 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                 children: t3("Credits in plan")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
               const planCreditGrant = currentPlan?.includedCreditGrants.find(
                 (grant) => grant.creditId === group.id
               );
               const hasAutoTopup = isAutoTopupEnabled(planCreditGrant);
               const thresholdCredits = getAutoTopupThresholdCredits(planCreditGrant);
               const topupAmount = getAutoTopupAmount(planCreditGrant);
-              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
                   $gap: "0.25rem",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                     Flex,
                     {
                       $justifyContent: "space-between",
@@ -24055,18 +24189,18 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                       $flexWrap: "wrap",
                       $gap: "0.5rem",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { display: props.addOns.fontStyle, children: [
                           group.quantity,
                           " ",
                           getFeatureName(group, group.quantity),
                           " ",
-                          subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+                          subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
                             t3("per"),
                             " ",
                             t3(subscriptionInterval)
                           ] })
                         ] }),
-                        group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Flex, { $alignItems: "baseline", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                        group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $alignItems: "baseline", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                           Text,
                           {
                             style: { opacity: 0.54 },
@@ -24076,7 +24210,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                               group.total.used,
                               " ",
                               t3("used"),
-                              hasAutoTopup && planCreditGrant && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                              hasAutoTopup && planCreditGrant && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                                 AutoTopupNotice,
                                 {
                                   thresholdCredits,
@@ -24093,7 +24227,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                 groupIndex
               );
             }) }),
-            hasAutoTopupSelfService && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+            hasAutoTopupSelfService && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               Flex,
               {
                 $justifyContent: "space-between",
@@ -24103,8 +24237,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                 $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
                 $borderRadius: "0.5rem",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { display: props.addOns.fontStyle, children: t3("Auto top-up") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { display: props.addOns.fontStyle, children: t3("Auto top-up") }),
                     currentPlan?.includedCreditGrants.reduce(
                       (acc, grant) => {
                         if (!grant.credit || !grant.billingCreditAutoTopupSelfService) {
@@ -24113,7 +24247,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                         const autoTopupEnabled = grant.companyAutoTopupEnabled ?? false;
                         if (!autoTopupEnabled) {
                           acc.push(
-                            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { $leading: "tight", children: t3("Auto top-up disabled for token", {
+                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { $leading: "tight", children: t3("Auto top-up disabled for token", {
                               unit: getFeatureName(grant.credit, 1)
                             }) }, grant.id)
                           );
@@ -24123,7 +24257,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                         const autoTopupAmount = getAutoTopupAmount(grant);
                         if (typeof autoTopupThresholdCredits === "number" && typeof autoTopupAmount === "number") {
                           acc.push(
-                            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { $leading: "tight", children: t3("Adds X tokens when Y remaining in balance", {
+                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { $leading: "tight", children: t3("Adds X tokens when Y remaining in balance", {
                               unit: getFeatureName(
                                 grant.credit,
                                 autoTopupAmount
@@ -24138,7 +24272,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                       []
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     Button,
                     {
                       type: "button",
@@ -24155,8 +24289,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               }
             )
           ] }),
-          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -24164,9 +24298,9 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                 children: t3("Credit bundles")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
               const bundle = group?.bundleId ? creditBundles.find((b3) => b3.id === group.bundleId) : void 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -24174,8 +24308,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                   $flexWrap: "wrap",
                   $gap: "0.5rem",
                   children: [
-                    bundle ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                      group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { style: { opacity: 0.5 }, children: [
+                    bundle ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { style: { opacity: 0.5 }, children: [
                         "(",
                         group.grants.length,
                         ")",
@@ -24187,12 +24321,12 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                       " ",
                       getFeatureName(group, group.quantity),
                       ")"
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { display: props.addOns.fontStyle, children: [
                       group.quantity,
                       " ",
                       getFeatureName(group, group.quantity)
                     ] }),
-                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -24211,8 +24345,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -24220,8 +24354,8 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                 children: t3("Promotional credits")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -24229,12 +24363,12 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
                   $flexWrap: "wrap",
                   $gap: "0.5rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { display: props.addOns.fontStyle, children: [
                       group.quantity,
                       " ",
                       getFeatureName(group, group.quantity)
                     ] }),
-                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -24253,7 +24387,7 @@ var PlanManager = (0, import_react56.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          canCheckout && props.callToAction.isVisible && !customPlanBilling?.isAwaitingActivation && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          canCheckout && props.callToAction.isVisible && !customPlanBilling?.isAwaitingActivation && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Button,
             {
               type: "button",
@@ -24278,7 +24412,7 @@ var import_react59 = require("react");
 
 // src/components/elements/pricing-table/AddOn.tsx
 var import_react57 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function renderMeteredEntitlementPricing2({
   priceBehavior,
   softLimit,
@@ -24290,7 +24424,7 @@ function renderMeteredEntitlementPricing2({
   isTiered
 }) {
   if (priceBehavior === EntitlementPriceBehavior.Overage && softLimit) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
       "Additional: ",
       formatCurrency(price, currency),
       "/",
@@ -24301,13 +24435,13 @@ function renderMeteredEntitlementPricing2({
     ] });
   }
   if (isTiered) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: "Tier-based pricing" });
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children: "Tier-based pricing" });
   }
   if (priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.PayInAdvance) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
       formatCurrency(price, currency),
       "/",
-      packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+      packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
         packageSize,
         " "
       ] }),
@@ -24371,7 +24505,7 @@ var AddOn2 = ({
       isTiered: entitlement.priceBehavior === EntitlementPriceBehavior.Tier || isTieredPrice(priceData)
     };
   }) || [];
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     Flex,
     {
       as: "li",
@@ -24391,7 +24525,7 @@ var AddOn2 = ({
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -24402,7 +24536,7 @@ var AddOn2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 Text,
                 {
                   as: "h3",
@@ -24411,22 +24545,22 @@ var AddOn2 = ({
                   children: addOn.name
                 }
               ) }),
-              layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 Text,
                 {
                   "data-testid": "sch-addon-price",
                   display: layout.plans.name.fontStyle,
-                  children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t3("Usage-based") : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+                  children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t3("Usage-based") : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
                     formatCurrency(addOnPrice ?? 0, addOnCurrency),
-                    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("sub", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
                   ] })
                 }
               ) }),
-              isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 Flex,
                 {
                   "data-testid": "sch-addon-active",
@@ -24436,7 +24570,7 @@ var AddOn2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -24449,7 +24583,7 @@ var AddOn2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -24458,7 +24592,7 @@ var AddOn2 = ({
             $flexGrow: 1,
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 Flex,
                 {
                   as: "ul",
@@ -24470,7 +24604,7 @@ var AddOn2 = ({
                   $listStyle: "none",
                   children: displayableEntitlements.map((entitlement, idx) => {
                     if (entitlement.isUnlimited) {
-                      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
                         Flex,
                         {
                           as: "li",
@@ -24479,8 +24613,8 @@ var AddOn2 = ({
                           $alignItems: "center",
                           $gap: "1rem",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $gap: "1rem", children: [
-                              layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { $gap: "1rem", children: [
+                              layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                                 Icon3,
                                 {
                                   name: entitlement.feature.icon,
@@ -24489,16 +24623,16 @@ var AddOn2 = ({
                                   rounded: true
                                 }
                               ),
-                              entitlement.feature && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                              entitlement.feature && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                                 Flex,
                                 {
                                   $flexDirection: "column",
                                   $justifyContent: "center",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { children: getFeatureName(entitlement.feature) })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { children: getFeatureName(entitlement.feature) })
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                               Text,
                               {
                                 style: { opacity: 0.54 },
@@ -24513,7 +24647,7 @@ var AddOn2 = ({
                       );
                     }
                     const meteredEntitlement = entitlement;
-                    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
                       Flex,
                       {
                         as: "li",
@@ -24523,8 +24657,8 @@ var AddOn2 = ({
                         $gap: "1rem",
                         $listStyle: "none",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { $gap: "1rem", children: [
-                            meteredEntitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { $gap: "1rem", children: [
+                            meteredEntitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                               Icon3,
                               {
                                 "data-testid": "sch-feature-icon",
@@ -24534,9 +24668,9 @@ var AddOn2 = ({
                                 rounded: true
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
+                            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                             Text,
                             {
                               style: { opacity: 0.54 },
@@ -24552,7 +24686,7 @@ var AddOn2 = ({
                   })
                 }
               ),
-              sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 Button,
                 {
                   type: "button",
@@ -24594,7 +24728,7 @@ var AddOn2 = ({
 var import_react58 = require("react");
 
 // src/components/elements/pricing-table/Entitlement.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var Entitlement2 = ({
   entitlement,
   sharedProps,
@@ -24626,8 +24760,8 @@ var Entitlement2 = ({
     entitlement,
     credits
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { as: "li", $gap: "1rem", style: { listStyle: "none" }, children: [
-    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Flex, { as: "li", $gap: "1rem", style: { listStyle: "none" }, children: [
+    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       Icon3,
       {
         "data-testid": "sch-feature-icon",
@@ -24637,31 +24771,31 @@ var Entitlement2 = ({
         rounded: true
       }
     ),
-    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { children: typeof entitlementPrice === "number" && !tiered && (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance || entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { children: typeof entitlementPrice === "number" && !tiered && (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance || entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo) ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t3("per"),
           " ",
-          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             formatNumber(entitlementPackageSize),
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
-          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             " ",
             t3("per"),
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           TieredPricingDetails,
           {
             entitlement,
             period: selectedPeriod
           }
-        ) : showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+        ) : showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
           formatNumber(entitlement.consumptionRate),
           " ",
           getFeatureName(
@@ -24672,7 +24806,7 @@ var Entitlement2 = ({
           t3("per"),
           " ",
           getFeatureName(entitlement.feature, 1)
-        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && creditBasedEntitlementLimit ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children: creditBasedEntitlementLimit?.period ? t3("Up to X units per period", {
+        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && creditBasedEntitlementLimit ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: creditBasedEntitlementLimit?.period ? t3("Up to X units per period", {
           amount: formatNumber(creditBasedEntitlementLimit.limit),
           units: getFeatureName(
             entitlement.feature,
@@ -24685,25 +24819,25 @@ var Entitlement2 = ({
             entitlement.feature,
             creditBasedEntitlementLimit.limit
           )
-        }) }) : entitlement.valueType === EntitlementValueType.Numeric || entitlement.valueType === EntitlementValueType.Unlimited || entitlement.valueType === EntitlementValueType.Trait ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+        }) }) : entitlement.valueType === EntitlementValueType.Numeric || entitlement.valueType === EntitlementValueType.Unlimited || entitlement.valueType === EntitlementValueType.Trait ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
           entitlement.valueType === EntitlementValueType.Unlimited && !entitlement.priceBehavior ? t3("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-            typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+            typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
               formatNumber(limit),
               " "
             ] }),
             getFeatureName(entitlement.feature, limit)
           ] }),
-          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             " ",
             t3("per"),
             " ",
             t3(metricPeriodName)
           ] })
         ] }) : entitlement.feature.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { children: [
-          entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { children: [
+          entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlementPrice === "number" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
             Text,
             {
               $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -24713,7 +24847,7 @@ var Entitlement2 = ({
                 " ",
                 formatCurrency(entitlementPrice, entitlementCurrency),
                 "/",
-                entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+                entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
                   formatNumber(entitlementPackageSize),
                   " "
                 ] }),
@@ -24721,14 +24855,14 @@ var Entitlement2 = ({
                   entitlement.feature,
                   entitlementPackageSize
                 ),
-                entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+                entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
                   "/",
                   shortenPeriod(selectedPeriod)
                 ] })
               ]
             }
-          ) }) : (entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          ) }) : (entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Text,
               {
                 style: { opacity: 0.54 },
@@ -24737,7 +24871,7 @@ var Entitlement2 = ({
                 children: t3("Tier-based")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -24748,14 +24882,14 @@ var Entitlement2 = ({
               }
             )
           ] }),
-          entitlementHasHardLimit(entitlement) && entitlement.valueType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          entitlementHasHardLimit(entitlement) && entitlement.valueType === EntitlementValueType.Numeric && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             HardLimitTooltip,
             {
               feature: entitlement.feature,
               limit: entitlement.valueNumeric
             }
           ),
-          entitlement.billingThreshold && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          entitlement.billingThreshold && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             BillingThresholdTooltip,
             {
               billingThreshold: entitlement.billingThreshold
@@ -24763,7 +24897,7 @@ var Entitlement2 = ({
           )
         ] })
       ] }),
-      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Text,
         {
           $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -24776,7 +24910,7 @@ var Entitlement2 = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Plan2 = ({
   plan,
   index,
@@ -24819,7 +24953,7 @@ var Plan2 = ({
   const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
   const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const isExpanded = entitlementVisibility[plan.id] ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     Flex,
     {
       as: "li",
@@ -24839,7 +24973,7 @@ var Plan2 = ({
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -24850,7 +24984,7 @@ var Plan2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 Text,
                 {
                   as: "h3",
@@ -24859,8 +24993,8 @@ var Plan2 = ({
                   children: plan.name
                 }
               ) }),
-              layout.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+              layout.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                 Text,
                 {
                   "data-testid": "sch-plan-price",
@@ -24876,14 +25010,14 @@ var Plan2 = ({
                       currency: planCurrency,
                       testSignificantDigits: false
                     }) : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("sub", { children: [
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("sub", { children: [
                       "/",
                       showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : showAsMonthlyPrices && selectedPeriod === "quarter" ? t3("month, billed quarterly") : t3(selectedPeriod)
                     ] })
                   ]
                 }
               ) }),
-              showCredits && credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              showCredits && credits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 Flex,
                 {
                   as: "ul",
@@ -24895,8 +25029,8 @@ var Plan2 = ({
                   $margin: 0,
                   $listStyle: "none",
                   children: credits.map((credit, idx) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Flex, { as: "li", $gap: "1rem", $listStyle: "none", children: [
-                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { as: "li", $gap: "1rem", $listStyle: "none", children: [
+                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                         Icon3,
                         {
                           "data-testid": "sch-feature-icon",
@@ -24906,17 +25040,17 @@ var Plan2 = ({
                           rounded: true
                         }
                       ),
-                      credit.name && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                      credit.name && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                         Flex,
                         {
                           $flexDirection: "column",
                           $justifyContent: "center",
                           $gap: "0.5rem",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { children: [
+                          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Text, { children: [
                             credit.quantity,
                             " ",
                             getFeatureName(credit, credit.quantity),
-                            credit.period && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+                            credit.period && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
                               " ",
                               t3("per"),
                               " ",
@@ -24929,7 +25063,7 @@ var Plan2 = ({
                   })
                 }
               ),
-              isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 Flex,
                 {
                   "data-testid": "sch-plan-active",
@@ -24939,7 +25073,7 @@ var Plan2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -24952,7 +25086,7 @@ var Plan2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -24961,7 +25095,7 @@ var Plan2 = ({
             $gap: `${cardPadding}rem`,
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+              layout.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                 Flex,
                 {
                   as: "ul",
@@ -24972,14 +25106,14 @@ var Plan2 = ({
                   $margin: 0,
                   $listStyle: "none",
                   children: [
-                    layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { children: t3("Everything in", {
+                    layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { children: t3("Everything in", {
                       plan: plans[index - 1].name
                     }) }) }),
                     (plan.entitlements ?? []).reduce(
                       (acc, entitlement, idx) => {
                         if (isExpanded || idx < VISIBLE_ENTITLEMENT_COUNT) {
                           acc.push(
-                            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                               Entitlement2,
                               {
                                 entitlement,
@@ -24997,7 +25131,7 @@ var Plan2 = ({
                       },
                       []
                     ),
-                    (plan.entitlements ?? []).length > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+                    (plan.entitlements ?? []).length > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                       Flex,
                       {
                         as: "li",
@@ -25007,14 +25141,14 @@ var Plan2 = ({
                         $marginTop: "1rem",
                         $listStyle: "none",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                             Icon3,
                             {
                               name: isExpanded ? "chevron-up" : "chevron-down",
                               color: "#D0D0D0"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                             Text,
                             {
                               as: "button",
@@ -25043,7 +25177,7 @@ var Plan2 = ({
                   ]
                 }
               ),
-              isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+              isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                 Flex,
                 {
                   $justifyContent: "center",
@@ -25051,7 +25185,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -25059,11 +25193,11 @@ var Plan2 = ({
                         color: settings.theme.primary
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { $size: 15, $leading: "none", children: t3("Current plan") })
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { $size: 15, $leading: "none", children: t3("Current plan") })
                   ]
                 }
-              ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   Button,
                   {
                     type: "button",
@@ -25101,10 +25235,10 @@ var Plan2 = ({
                       }
                     },
                     $fullWidth: true,
-                    children: plan.custom ? plan.customPlanConfig?.ctaText ?? t3("Talk to support") : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { as: Box, $align: "center", children: t3("Over plan limit") }) : t3("Choose plan")
+                    children: plan.custom ? plan.customPlanConfig?.ctaText ?? t3("Talk to support") : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { as: Box, $align: "center", children: t3("Over plan limit") }) : t3("Choose plan")
                   }
                 ),
-                !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(UsageViolationText, { violations: plan.usageViolations })
+                !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(UsageViolationText, { violations: plan.usageViolations })
               ] })
             ]
           }
@@ -25115,7 +25249,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -25220,7 +25354,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
     }
   }, [data?.component, hydratePublic]);
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       Flex,
       {
         $width: "100%",
@@ -25228,12 +25362,12 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
         $alignItems: "center",
         $justifyContent: "center",
         $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Loader, { "aria-label": "loading", $size: "2xl" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Loader, { "aria-label": "loading", $size: "2xl" })
       }
     );
   }
   if (hasNoUsableCurrency) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Container, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { $justifyContent: "center", $padding: "2rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InvalidCurrencyNotice, { invalidEntries: invalidFilterEntries }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Container, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Flex, { $justifyContent: "center", $padding: "2rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InvalidCurrencyNotice, { invalidEntries: invalidFilterEntries }) }) });
   }
   const currentPlan = plans.find((plan) => plan.id === data?.company?.plan?.id);
   const showCallToAction = typeof data?.component !== "undefined" || typeof rest.callToActionUrl === "string" || typeof rest.onCallToAction === "function";
@@ -25242,7 +25376,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
     rest.callToActionTarget
   );
   const Wrapper = typeof data?.component === "undefined" ? Container : import_react59.Fragment;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     FussyChild,
     {
       ref,
@@ -25252,8 +25386,8 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
       $flexDirection: "column",
       $gap: "2rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
             Flex,
             {
               $flexDirection: "column",
@@ -25268,7 +25402,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   Text,
                   {
                     as: "h2",
@@ -25277,8 +25411,8 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t3("Plans")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
-                  showCurrencySelector && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
+                  showCurrencySelector && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     CurrencyToggle,
                     {
                       currencies,
@@ -25286,7 +25420,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
                       onSelect: setSelectedCurrency
                     }
                   ),
-                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     PeriodToggle,
                     {
                       options: periods,
@@ -25303,7 +25437,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Box,
             {
               as: "ul",
@@ -25316,7 +25450,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
               $listStyle: "none",
               children: plans.map((plan, index, self2) => {
                 const planPeriod = showPeriodToggle ? selectedPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
-                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   Plan2,
                   {
                     plan,
@@ -25338,14 +25472,14 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 Text,
                 {
                   as: "h2",
@@ -25356,7 +25490,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Box,
             {
               as: "ul",
@@ -25368,7 +25502,7 @@ var PricingTable = (0, import_react59.forwardRef)(({ className, ...rest }, ref)
               $listStyle: "none",
               children: addOns.map((addOn, index) => {
                 const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.monthlyPrice ? BillingProductPriceInterval.Month : addOn.quarterlyPrice ? "quarter" : addOn.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
-                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   AddOn2,
                   {
                     addOn,
@@ -25396,7 +25530,7 @@ PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
 var import_react60 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -25408,7 +25542,7 @@ var resolveDesignProps9 = (props) => {
 };
 var TextElement = (0, import_react60.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Text,
     {
       display: props.text.fontStyle,
@@ -25422,7 +25556,7 @@ TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 var import_react61 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var buttonStyles = {
   primary: {
     color: "primary",
@@ -25458,7 +25592,7 @@ var UnsubscribeButton = (0, import_react61.forwardRef)(({ children, className, .
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Element,
     {
       as: Flex,
@@ -25466,7 +25600,7 @@ var UnsubscribeButton = (0, import_react61.forwardRef)(({ children, className, .
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Button,
         {
           type: "button",
@@ -25488,7 +25622,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 var import_react62 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -25566,9 +25700,9 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
   if (!data?.subscription || data.subscription.cancelAt) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       Flex,
       {
         as: TransitionBox,
@@ -25577,8 +25711,8 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your upcoming invoice.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             Button,
             {
               type: "button",
@@ -25591,28 +25725,28 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Text, { display: props.header.fontStyle, children: [
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Text, { display: props.header.fontStyle, children: [
         props.header.prefix,
         " ",
         toPrettyDate(upcomingInvoice.dueDate)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { display: props.price.fontStyle, $leading: "none", children: formatCurrency(
+            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { display: props.price.fontStyle, $leading: "none", children: formatCurrency(
               upcomingInvoice.amountDue,
               upcomingInvoice.currency
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t3("Estimated bill") }) })
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t3("Estimated bill") }) })
           ]
         }
       ),
-      balances.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      balances.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
         Flex,
         {
           as: TransitionBox,
@@ -25620,20 +25754,20 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { $weight: 600, children: t3("Remaining balance") }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { $weight: 600, children: t3("Remaining balance") }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
           ]
         }
       ),
-      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { $weight: 600, children: t3("Discount") }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { $weight: 600, children: t3("Discount") }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               Flex,
               {
                 $flexDirection: "column",
@@ -25643,13 +25777,13 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
                   (acc, discount) => {
                     if (typeof discount.percentOff === "number" || typeof discount.amountOff === "number") {
                       acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
                           Flex,
                           {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                              discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -25658,7 +25792,7 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
                                   $borderStyle: "solid",
                                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                                   $borderRadius: "0.3125rem",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
                                     Text,
                                     {
                                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -25668,7 +25802,7 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { children: typeof discount.percentOff === "number" ? t3("Percent off", {
+                              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { children: typeof discount.percentOff === "number" ? t3("Percent off", {
                                 percent: discount.percentOff
                               }) : t3("Amount off", {
                                 amount: formatCurrency(
@@ -25692,7 +25826,7 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
           ]
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { display: "heading2", children: t3("No upcoming invoice") }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { display: "heading2", children: t3("No upcoming invoice") }) })
   ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
@@ -29952,11 +30086,11 @@ function createRenderer(options) {
 }
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var renderer = createRenderer();
 var Loading = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Flex,
     {
       $width: "100%",
@@ -29964,13 +30098,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Loader, { $color: settings.theme.primary, $size: "2xl" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Loader, { $color: settings.theme.primary, $size: "2xl" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     Flex,
     {
       $flexDirection: "column",
@@ -29981,8 +30115,8 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { display: "heading1", children: "Error" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { children: message }) })
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Text, { display: "heading1", children: "Error" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Text, { children: message }) })
       ]
     }
   );
@@ -30056,13 +30190,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
     return stub();
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Error2, { message: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Error2, { message: error.message });
   }
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Error2, { message: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Error2, { message: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       Error2,
       {
         message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -30070,9 +30204,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
     );
   }
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Loading, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Loading, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Box, { className: "sch-Embed", "data-testid": "sch-embed", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Loading, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Box, { className: "sch-Embed", "data-testid": "sch-embed", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Loading, {}) });
 };
 /*! Bundled license information: