@schematichq/schematic-components 2.14.0 → 2.15.0

package/dist/schematic-components.esm.js

@@ -246,7 +246,7 @@ var require_debounce = __commonJS({
     var FUNC_ERROR_TEXT = "Expected a function";
     var nativeMax = Math.max;
     var nativeMin = Math.min;
-    function debounce4(func, wait, options) {
+    function debounce5(func, wait, options) {
       var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
       if (typeof func != "function") {
         throw new TypeError(FUNC_ERROR_TEXT);
@@ -327,7 +327,7 @@ var require_debounce = __commonJS({
       debounced.flush = flush;
       return debounced;
     }
-    module.exports = debounce4;
+    module.exports = debounce5;
   }
 });
 
@@ -1819,6 +1819,10 @@ var LEADING_DEBOUNCE_SETTINGS = {
   leading: true,
   trailing: false
 };
+var TRAILING_DEBOUNCE_SETTINGS = {
+  leading: false,
+  trailing: true
+};
 var EVENT_DEBOUNCE_TIMEOUT = 200;
 var FETCH_DEBOUNCE_TIMEOUT = 300;
 
@@ -7997,7 +8001,8 @@ var BillingCreditGrantReason = {
   BillingCreditAutoTopup: "billing_credit_auto_topup",
   Free: "free",
   Plan: "plan",
-  Purchased: "purchased"
+  Purchased: "purchased",
+  Rollover: "rollover"
 };
 function BillingCreditGrantReasonFromJSON(json) {
   return BillingCreditGrantReasonFromJSONTyped(json, false);
@@ -8014,6 +8019,14 @@ function BillingCreditGrantZeroedOutReasonFromJSONTyped(json, ignoreDiscriminato
   return json;
 }
 
+// src/api/checkoutexternal/models/BillingCreditLedgerAuthority.ts
+function BillingCreditLedgerAuthorityFromJSON(json) {
+  return BillingCreditLedgerAuthorityFromJSONTyped(json, false);
+}
+function BillingCreditLedgerAuthorityFromJSONTyped(json, ignoreDiscriminator) {
+  return json;
+}
+
 // src/api/checkoutexternal/models/BillingPriceResponseData.ts
 function BillingPriceResponseDataFromJSON(json) {
   return BillingPriceResponseDataFromJSONTyped(json, false);
@@ -8158,6 +8171,9 @@ function BillingCreditViewFromJSONTyped(json, ignoreDiscriminator) {
     environmentId: json["environment_id"],
     icon: json["icon"] == null ? void 0 : json["icon"],
     id: json["id"],
+    ledgerAuthority: BillingCreditLedgerAuthorityFromJSON(
+      json["ledger_authority"]
+    ),
     name: json["name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     price: json["price"] == null ? void 0 : BillingPriceViewFromJSON(json["price"]),
@@ -8266,6 +8282,7 @@ function BillingPlanCreditGrantResponseDataFromJSONTyped(json, ignoreDiscriminat
     resetCadence: json["reset_cadence"] == null ? void 0 : BillingPlanCreditGrantResetCadenceFromJSON(json["reset_cadence"]),
     resetStart: json["reset_start"] == null ? void 0 : BillingPlanCreditGrantResetStartFromJSON(json["reset_start"]),
     resetType: json["reset_type"] == null ? void 0 : BillingPlanCreditGrantResetTypeFromJSON(json["reset_type"]),
+    rolloverPercentage: json["rollover_percentage"],
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -8522,6 +8539,20 @@ function UpdateCreditBundleRequestBodyToJSONTyped(value, ignoreDiscriminator = f
   };
 }
 
+// src/api/checkoutexternal/models/CheckoutFieldValue.ts
+function CheckoutFieldValueToJSON(json) {
+  return CheckoutFieldValueToJSONTyped(json, false);
+}
+function CheckoutFieldValueToJSONTyped(value, ignoreDiscriminator = false) {
+  if (value == null) {
+    return value;
+  }
+  return {
+    id: value["id"],
+    value: value["value"]
+  };
+}
+
 // src/api/checkoutexternal/models/UpdateAddOnRequestBody.ts
 function UpdateAddOnRequestBodyToJSON(json) {
   return UpdateAddOnRequestBodyToJSONTyped(json, false);
@@ -8571,8 +8602,12 @@ function ChangeSubscriptionRequestBodyToJSONTyped(value, ignoreDiscriminator = f
     credit_bundles: value["creditBundles"].map(
       UpdateCreditBundleRequestBodyToJSON
     ),
+    custom_field_values: value["customFieldValues"].map(
+      CheckoutFieldValueToJSON
+    ),
     new_plan_id: value["newPlanId"],
     new_price_id: value["newPriceId"],
+    opt_in_accepted: value["optInAccepted"],
     pay_in_advance: value["payInAdvance"].map(
       UpdatePayInAdvanceRequestBodyToJSON
     ),
@@ -8590,6 +8625,25 @@ function ChargeTypeFromJSONTyped(json, ignoreDiscriminator) {
   return json;
 }
 
+// src/api/checkoutexternal/models/CheckoutFieldWithValue.ts
+function CheckoutFieldWithValueFromJSON(json) {
+  return CheckoutFieldWithValueFromJSONTyped(json, false);
+}
+function CheckoutFieldWithValueFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    definitionId: json["definition_id"],
+    helperText: json["helper_text"] == null ? void 0 : json["helper_text"],
+    id: json["id"],
+    name: json["name"],
+    required: json["required"],
+    stripeMetadataKey: json["stripe_metadata_key"],
+    value: json["value"] == null ? void 0 : json["value"]
+  };
+}
+
 // src/api/checkoutexternal/models/ScheduledDowngradeConfigBehavior.ts
 function ScheduledDowngradeConfigBehaviorFromJSON(json) {
   return ScheduledDowngradeConfigBehaviorFromJSONTyped(json, false);
@@ -8802,6 +8856,7 @@ function CompanyPlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     resetCadence: json["reset_cadence"] == null ? void 0 : BillingPlanCreditGrantResetCadenceFromJSON(json["reset_cadence"]),
     resetStart: json["reset_start"] == null ? void 0 : BillingPlanCreditGrantResetStartFromJSON(json["reset_start"]),
     resetType: BillingPlanCreditGrantResetTypeFromJSON(json["reset_type"]),
+    rolloverPercentage: json["rollover_percentage"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -8860,6 +8915,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"],
@@ -9664,6 +9721,7 @@ function PlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     resetCadence: json["reset_cadence"] == null ? void 0 : BillingPlanCreditGrantResetCadenceFromJSON(json["reset_cadence"]),
     resetStart: json["reset_start"] == null ? void 0 : BillingPlanCreditGrantResetStartFromJSON(json["reset_start"]),
     resetType: BillingPlanCreditGrantResetTypeFromJSON(json["reset_type"]),
+    rolloverPercentage: json["rollover_percentage"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -10101,7 +10159,10 @@ function CreditCompanyGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     quantityUsed: json["quantity_used"],
     renewalEnabled: json["renewal_enabled"],
     renewalPeriod: json["renewal_period"] == null ? void 0 : BillingPlanCreditGrantResetCadenceFromJSON(json["renewal_period"]),
+    reserved: json["reserved"] == null ? void 0 : json["reserved"],
+    settled: json["settled"] == null ? void 0 : json["settled"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
+    sourceGrantId: json["source_grant_id"] == null ? void 0 : json["source_grant_id"],
     sourceLabel: json["source_label"],
     transfers: json["transfers"] == null ? void 0 : json["transfers"].map(CreditTransferViewFromJSON),
     updatedAt: new Date(json["updated_at"]),
@@ -10210,6 +10271,9 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     creditGrants: json["credit_grants"].map(
       CreditCompanyGrantViewFromJSON
     ),
+    customCheckoutFields: json["custom_checkout_fields"].map(
+      CheckoutFieldWithValueFromJSON
+    ),
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     displaySettings: ComponentDisplaySettingsFromJSON(json["display_settings"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
@@ -10427,6 +10491,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"]),
@@ -10454,6 +10521,46 @@ function PreviewCheckoutResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/UpdateCheckoutFieldValuesRequestBody.ts
+function UpdateCheckoutFieldValuesRequestBodyToJSON(json) {
+  return UpdateCheckoutFieldValuesRequestBodyToJSONTyped(json, false);
+}
+function UpdateCheckoutFieldValuesRequestBodyToJSONTyped(value, ignoreDiscriminator = false) {
+  if (value == null) {
+    return value;
+  }
+  return {
+    values: value["values"].map(CheckoutFieldValueToJSON)
+  };
+}
+
+// src/api/checkoutexternal/models/UpdateCheckoutFieldValuesResponseData.ts
+function UpdateCheckoutFieldValuesResponseDataFromJSON(json) {
+  return UpdateCheckoutFieldValuesResponseDataFromJSONTyped(json, false);
+}
+function UpdateCheckoutFieldValuesResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    company: json["company"] == null ? void 0 : CompanyDetailResponseDataFromJSON(json["company"])
+  };
+}
+
+// src/api/checkoutexternal/models/UpdateCheckoutFieldValuesResponse.ts
+function UpdateCheckoutFieldValuesResponseFromJSON(json) {
+  return UpdateCheckoutFieldValuesResponseFromJSONTyped(json, false);
+}
+function UpdateCheckoutFieldValuesResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: UpdateCheckoutFieldValuesResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/checkoutexternal/models/UpdatePaymentMethodRequestBody.ts
 function UpdatePaymentMethodRequestBodyToJSON(json) {
   return UpdatePaymentMethodRequestBodyToJSONTyped(json, false);
@@ -10915,6 +11022,51 @@ var CheckoutexternalApi = class extends BaseAPI {
     );
     return await response.value();
   }
+  /**
+   * Update checkout field values
+   */
+  async updateCheckoutFieldValuesRaw(requestParameters, initOverrides) {
+    if (requestParameters["updateCheckoutFieldValuesRequestBody"] == null) {
+      throw new RequiredError(
+        "updateCheckoutFieldValuesRequestBody",
+        'Required parameter "updateCheckoutFieldValuesRequestBody" was null or undefined when calling updateCheckoutFieldValues().'
+      );
+    }
+    const queryParameters = {};
+    const headerParameters = {};
+    headerParameters["Content-Type"] = "application/json";
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/checkout/custom-field-values`,
+        method: "POST",
+        headers: headerParameters,
+        query: queryParameters,
+        body: UpdateCheckoutFieldValuesRequestBodyToJSON(
+          requestParameters["updateCheckoutFieldValuesRequestBody"]
+        )
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => UpdateCheckoutFieldValuesResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Update checkout field values
+   */
+  async updateCheckoutFieldValues(requestParameters, initOverrides) {
+    const response = await this.updateCheckoutFieldValuesRaw(
+      requestParameters,
+      initOverrides
+    );
+    return await response.value();
+  }
   /**
    * Update payment method
    */
@@ -11242,6 +11394,14 @@ function BillingCreditExpiryUnitFromJSONTyped9(json, ignoreDiscriminator) {
   return json;
 }
 
+// src/api/componentspublic/models/BillingCreditLedgerAuthority.ts
+function BillingCreditLedgerAuthorityFromJSON2(json) {
+  return BillingCreditLedgerAuthorityFromJSONTyped3(json, false);
+}
+function BillingCreditLedgerAuthorityFromJSONTyped3(json, ignoreDiscriminator) {
+  return json;
+}
+
 // src/api/componentspublic/models/BillingProductPriceInterval.ts
 function BillingProductPriceIntervalFromJSON2(json) {
   return BillingProductPriceIntervalFromJSONTyped5(json, false);
@@ -11480,6 +11640,9 @@ function BillingCreditViewFromJSONTyped4(json, ignoreDiscriminator) {
     environmentId: json["environment_id"],
     icon: json["icon"] == null ? void 0 : json["icon"],
     id: json["id"],
+    ledgerAuthority: BillingCreditLedgerAuthorityFromJSON2(
+      json["ledger_authority"]
+    ),
     name: json["name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     price: json["price"] == null ? void 0 : BillingPriceViewFromJSON2(json["price"]),
@@ -12129,6 +12292,7 @@ function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
     resetCadence: json["reset_cadence"] == null ? void 0 : BillingPlanCreditGrantResetCadenceFromJSON2(json["reset_cadence"]),
     resetStart: json["reset_start"] == null ? void 0 : BillingPlanCreditGrantResetStartFromJSON2(json["reset_start"]),
     resetType: BillingPlanCreditGrantResetTypeFromJSON2(json["reset_type"]),
+    rolloverPercentage: json["rollover_percentage"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -12380,6 +12544,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(
@@ -13557,6 +13732,7 @@ function normalize(data) {
     },
     creditBundles: [],
     creditGrants: [],
+    customCheckoutFields: [],
     preventSelfServiceDowngrade: false
   });
 }
@@ -13709,6 +13885,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
         }
@@ -13738,7 +13920,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.14.0",
+  "X-Schematic-Components-Version": "2.15.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -15839,7 +16021,7 @@ var Root = forwardRef6(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
-var import_debounce3 = __toESM(require_debounce());
+var import_debounce4 = __toESM(require_debounce());
 import { forwardRef as forwardRef8, useLayoutEffect as useLayoutEffect8, useRef as useRef11, useState as useState14 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
@@ -17289,6 +17471,7 @@ var Checkout = ({
 };
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
+var import_debounce3 = __toESM(require_debounce());
 import {
   useCallback as useCallback7,
   useEffect as useEffect4,
@@ -17469,11 +17652,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] = useState8(
-    () => (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;
   useEffect4(() => {
@@ -17807,6 +17995,35 @@ var CheckoutDialog = ({ top }) => {
     }
     return id;
   }, [checkoutStage, checkoutStages, checkoutState, isBypassLoading]);
+  const previewRequestIdRef = useRef6(0);
+  const planStageVisible = checkoutStages.some((stage) => stage.id === "plan") && !checkoutState?.bypassPlanSelection;
+  const checkoutStageCurrencies = useMemo12(() => {
+    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);
+  useEffect4(() => {
+    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 = useCallback7(
     async (updates) => {
       const period = updates.period || planPeriod;
@@ -17830,6 +18047,8 @@ var CheckoutDialog = ({ top }) => {
         setSelectedPlanId(null);
         return;
       }
+      const requestId = ++previewRequestIdRef.current;
+      const isStale = () => requestId !== previewRequestIdRef.current;
       setError(void 0);
       setCharges(void 0);
       setIsLoading(true);
@@ -17873,9 +18092,13 @@ var CheckoutDialog = ({ top }) => {
           autoTopupOverrides: isCreditOnly ? [] : autoTopupRequestBody,
           payInAdvance: isCreditOnly ? [] : [...planPayInAdvanceRequestBody, ...addOnPayInAdvanceRequestBody],
           creditBundles: creditBundlesRequestBody,
+          customFieldValues: [],
           skipTrial,
           ...code && { promoCode: code }
         });
+        if (isStale()) {
+          return;
+        }
         if (response) {
           setCharges(response.data.finance);
           setIsPaymentMethodRequired(response.data.paymentMethodRequired);
@@ -17885,6 +18108,9 @@ var CheckoutDialog = ({ top }) => {
           setPromoCode(code);
         }
       } catch (err2) {
+        if (isStale()) {
+          return;
+        }
         if (err2 instanceof ResponseError) {
           if (err2.response.status === 401) {
             setError(t3("Session expired. Please refresh and try again."));
@@ -17919,9 +18145,11 @@ var CheckoutDialog = ({ top }) => {
         const { message: msg } = isError(err2) ? err2 : ERROR_UNKNOWN;
         setError(msg);
       } finally {
-        setIsLoading(false);
-        if (isBypassLoading) {
-          setIsBypassLoading(false);
+        if (!isStale()) {
+          setIsLoading(false);
+          if (isBypassLoading) {
+            setIsBypassLoading(false);
+          }
         }
       }
     },
@@ -17944,6 +18172,29 @@ var CheckoutDialog = ({ top }) => {
       isBypassLoading
     ]
   );
+  const handlePreviewCheckoutRef = useRef6(handlePreviewCheckout);
+  useEffect4(() => {
+    handlePreviewCheckoutRef.current = handlePreviewCheckout;
+  }, [handlePreviewCheckout]);
+  const debouncedPreviewCheckoutRef = useRef6(null);
+  useEffect4(() => {
+    const debounced = (0, import_debounce3.default)(
+      (updates) => handlePreviewCheckoutRef.current(updates),
+      FETCH_DEBOUNCE_TIMEOUT,
+      TRAILING_DEBOUNCE_SETTINGS
+    );
+    debouncedPreviewCheckoutRef.current = debounced;
+    return () => {
+      debounced.cancel();
+      debouncedPreviewCheckoutRef.current = null;
+    };
+  }, []);
+  const debouncedPreviewCheckout = useCallback7(
+    (updates) => {
+      debouncedPreviewCheckoutRef.current?.(updates);
+    },
+    []
+  );
   const selectPlan = useCallback7(
     (updates) => {
       const plan = updates.plan;
@@ -18107,11 +18358,11 @@ var CheckoutDialog = ({ top }) => {
           companyAutoTopupAmount: updates.companyAutoTopupAmount ?? prevConfig?.companyAutoTopupAmount ?? matchedCreditGrant?.billingCreditAutoTopupAmount ?? 0
         };
         nextMap.set(id, updatedConfig);
-        handlePreviewCheckout({ autoTopupConfigs: nextMap });
+        debouncedPreviewCheckout({ autoTopupConfigs: nextMap });
         return nextMap;
       });
     },
-    [handlePreviewCheckout, planCreditGrants]
+    [debouncedPreviewCheckout, planCreditGrants]
   );
   const updateUsageBasedEntitlementQuantity = useCallback7(
     (id, updatedQuantity) => {
@@ -18122,7 +18373,7 @@ var CheckoutDialog = ({ top }) => {
             quantity: updatedQuantity
           } : entitlement
         );
-        handlePreviewCheckout({
+        debouncedPreviewCheckout({
           payInAdvanceEntitlements: updated.filter(
             ({ priceBehavior }) => priceBehavior === EntitlementPriceBehavior.PayInAdvance
           )
@@ -18130,7 +18381,7 @@ var CheckoutDialog = ({ top }) => {
         return updated;
       });
     },
-    [handlePreviewCheckout]
+    [debouncedPreviewCheckout]
   );
   const updateCreditBundleCount = useCallback7(
     (id, updatedCount) => {
@@ -18141,11 +18392,11 @@ var CheckoutDialog = ({ top }) => {
             count: updatedCount
           } : bundle
         );
-        handlePreviewCheckout({ creditBundles: updated });
+        debouncedPreviewCheckout({ creditBundles: updated });
         return updated;
       });
     },
-    [handlePreviewCheckout]
+    [debouncedPreviewCheckout]
   );
   const updateAddOnEntitlementQuantity = useCallback7(
     (id, updatedQuantity) => {
@@ -18159,13 +18410,13 @@ var CheckoutDialog = ({ top }) => {
         const updatedAddOnPayInAdvanceEntitlements = updated.filter(
           (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
         );
-        handlePreviewCheckout({
+        debouncedPreviewCheckout({
           addOnPayInAdvanceEntitlements: updatedAddOnPayInAdvanceEntitlements
         });
         return updated;
       });
     },
-    [handlePreviewCheckout]
+    [debouncedPreviewCheckout]
   );
   const updatePromoCode = useCallback7(
     async (code) => {
@@ -18284,6 +18535,35 @@ var CheckoutDialog = ({ top }) => {
       }
     );
   }
+  if (currencyPeriodMismatch) {
+    return /* @__PURE__ */ jsx24(
+      Dialog2,
+      {
+        ref: setDialog,
+        isModal,
+        size: "lg",
+        top,
+        onClose: handleClose,
+        ...!isModal && { open: layout === "checkout" },
+        children: /* @__PURE__ */ jsx24(DialogContent2, { children: /* @__PURE__ */ jsx24(
+          Flex,
+          {
+            $flexGrow: 1,
+            $alignItems: "center",
+            $justifyContent: "center",
+            $padding: "2rem",
+            children: /* @__PURE__ */ jsx24(
+              CurrencyPeriodMismatchNotice,
+              {
+                currency: effectiveCurrency,
+                period: planPeriod
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs16(
     Dialog2,
     {
@@ -18374,7 +18654,7 @@ var CheckoutDialog = ({ top }) => {
                         activeCheckoutStage.description && /* @__PURE__ */ jsx24(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
                       effectiveCheckoutStage === "plan" && /* @__PURE__ */ jsxs16(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
-                        showCurrencySelector && /* @__PURE__ */ jsx24(
+                        showPlanCurrencySelector && /* @__PURE__ */ jsx24(
                           CurrencyToggle,
                           {
                             currencies,
@@ -18392,7 +18672,15 @@ var CheckoutDialog = ({ top }) => {
                             onSelect: changePlanPeriod
                           }
                         )
-                      ] })
+                      ] }),
+                      effectiveCheckoutStage === "checkout" && showCheckoutCurrencySelector && /* @__PURE__ */ jsx24(Flex, { $alignItems: "center", $gap: "0.75rem", children: /* @__PURE__ */ jsx24(
+                        CurrencyToggle,
+                        {
+                          currencies: checkoutStageCurrencies,
+                          selectedCurrency: effectiveCurrency,
+                          onSelect: setSelectedCurrency
+                        }
+                      ) })
                     ]
                   }
                 ),
@@ -18519,8 +18807,49 @@ var CheckoutDialog = ({ top }) => {
   );
 };
 
-// src/components/shared/currency-toggle/CurrencyToggle.tsx
+// src/components/shared/currency-period-mismatch-notice/CurrencyPeriodMismatchNotice.tsx
 import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var CurrencyPeriodMismatchNotice = ({
+  currency,
+  period
+}) => {
+  const { settings } = useEmbed();
+  const { t: t3 } = useTranslation();
+  return /* @__PURE__ */ jsxs17(
+    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__ */ jsx25(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
+        /* @__PURE__ */ jsx25(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("This plan is not available in the selected currency and period.") }),
+        /* @__PURE__ */ jsx25(
+          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
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var CurrencyToggle = ({
   currencies,
   selectedCurrency,
@@ -18529,7 +18858,7 @@ var CurrencyToggle = ({
 }) => {
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     Flex,
     {
       "data-testid": "sch-currency-toggle",
@@ -18542,14 +18871,14 @@ var CurrencyToggle = ({
       $borderRadius: "2.5rem",
       $cursor: disabled ? "default" : "pointer",
       $opacity: disabled ? 0.6 : 1,
-      children: /* @__PURE__ */ jsxs17(
+      children: /* @__PURE__ */ jsxs18(
         Flex,
         {
           $alignItems: "center",
           $padding: "0.375rem 0.75rem",
           style: { position: "relative" },
           children: [
-            /* @__PURE__ */ jsxs17(
+            /* @__PURE__ */ jsxs18(
               Text,
               {
                 style: {
@@ -18566,7 +18895,7 @@ var CurrencyToggle = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "select",
               {
                 "data-testid": "sch-currency-select",
@@ -18582,7 +18911,7 @@ var CurrencyToggle = ({
                   cursor: disabled ? "default" : "pointer",
                   fontSize: "inherit"
                 },
-                children: currencies.map((currency) => /* @__PURE__ */ jsxs17("option", { value: currency, children: [
+                children: currencies.map((currency) => /* @__PURE__ */ jsxs18("option", { value: currency, children: [
                   getCurrencyFlag(currency),
                   " ",
                   getCurrencySymbol(currency),
@@ -18591,7 +18920,7 @@ var CurrencyToggle = ({
                 ] }, currency))
               }
             ),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "svg",
               {
                 width: 12,
@@ -18599,7 +18928,7 @@ var CurrencyToggle = ({
                 viewBox: "0 0 12 12",
                 fill: "none",
                 style: { marginLeft: "0.25rem", flexShrink: 0 },
-                children: /* @__PURE__ */ jsx25(
+                children: /* @__PURE__ */ jsx26(
                   "path",
                   {
                     d: "M3 4.5L6 7.5L9 4.5",
@@ -18619,7 +18948,7 @@ var CurrencyToggle = ({
 };
 
 // src/components/shared/hard-limit-tooltip/HardLimitTooltip.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var HardLimitTooltip = ({
   portal,
   feature,
@@ -18632,11 +18961,11 @@ var HardLimitTooltip = ({
   if (!showHardLimit || !feature || typeof limit !== "number") {
     return null;
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Tooltip,
     {
       portal,
-      trigger: /* @__PURE__ */ jsx26(
+      trigger: /* @__PURE__ */ jsx27(
         Icon3,
         {
           title: "limit",
@@ -18645,7 +18974,7 @@ var HardLimitTooltip = ({
           style: { lineHeight: 0 }
         }
       ),
-      content: /* @__PURE__ */ jsx26(Text, { children: t3("Up to a limit of", {
+      content: /* @__PURE__ */ jsx27(Text, { children: t3("Up to a limit of", {
         amount: limit,
         units: getFeatureName(feature, limit)
       }) })
@@ -18654,13 +18983,13 @@ var HardLimitTooltip = ({
 };
 
 // src/components/shared/invalid-currency-notice/InvalidCurrencyNotice.tsx
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 var InvalidCurrencyNotice = ({
   invalidEntries = []
 }) => {
   const { settings } = useEmbed();
   const { t: t3 } = useTranslation();
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Flex,
     {
       "data-testid": "sch-invalid-currency-notice",
@@ -18674,9 +19003,9 @@ var InvalidCurrencyNotice = ({
       $borderColor: settings.theme.danger,
       $borderRadius: "0.5rem",
       children: [
-        /* @__PURE__ */ jsx27(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
-        /* @__PURE__ */ jsx27(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("No supported currencies are available.") }),
-        invalidEntries.length > 0 && /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
+        /* @__PURE__ */ jsx28(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("No supported currencies are available.") }),
+        invalidEntries.length > 0 && /* @__PURE__ */ jsx28(
           Text,
           {
             $size: 13,
@@ -18694,7 +19023,7 @@ var InvalidCurrencyNotice = ({
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
 import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState9 } from "react";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 var PaymentDialog = ({ top }) => {
   const { t: t3 } = useTranslation();
   const { layout, setLayout, clearCheckoutState } = useEmbed();
@@ -18720,7 +19049,7 @@ var PaymentDialog = ({ top }) => {
       element.show();
     }
   }, [layout]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Dialog2,
     {
       ref: dialogRef,
@@ -18730,8 +19059,8 @@ var PaymentDialog = ({ top }) => {
       onClose: handleClose,
       ...!isModal && { open: layout === "payment" },
       children: [
-        /* @__PURE__ */ jsx28(DialogHeader, { bordered: true, onClose: handleClose, children: /* @__PURE__ */ jsx28(Text, { $size: 18, children: t3("Edit payment method") }) }),
-        /* @__PURE__ */ jsx28(DialogContent2, { children: /* @__PURE__ */ jsx28(Flex, { $position: "relative", $flexGrow: 1, $overflow: "auto", children: /* @__PURE__ */ jsx28(PaymentMethodDetails, {}) }) })
+        /* @__PURE__ */ jsx29(DialogHeader, { bordered: true, onClose: handleClose, children: /* @__PURE__ */ jsx29(Text, { $size: 18, children: t3("Edit payment method") }) }),
+        /* @__PURE__ */ jsx29(DialogContent2, { children: /* @__PURE__ */ jsx29(Flex, { $position: "relative", $flexGrow: 1, $overflow: "auto", children: /* @__PURE__ */ jsx29(PaymentMethodDetails, {}) }) })
       ]
     }
   );
@@ -18800,7 +19129,7 @@ var Input2 = gt2.input`
 `;
 
 // src/components/shared/payment-form/PaymentForm.tsx
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 var PaymentForm = ({ onConfirm, financeData }) => {
   const { t: t3 } = useTranslation();
   const stripe = useStripe();
@@ -18889,7 +19218,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
       }
     };
   }, [t3, isPaymentReady]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     Flex,
     {
       as: "form",
@@ -18897,8 +19226,8 @@ var PaymentForm = ({ onConfirm, financeData }) => {
       onSubmit: handleSubmit,
       $flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsxs20(Box, { $marginBottom: "1.5rem", children: [
-          /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsxs21(Box, { $marginBottom: "1.5rem", children: [
+          /* @__PURE__ */ jsx30(
             PaymentElement,
             {
               id: "payment-element",
@@ -18919,7 +19248,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
               }
             }
           ),
-          loadError && /* @__PURE__ */ jsx29(
+          loadError && /* @__PURE__ */ jsx30(
             Flex,
             {
               as: TransitionBox,
@@ -18927,13 +19256,13 @@ var PaymentForm = ({ onConfirm, financeData }) => {
               $justifyContent: "center",
               $alignItems: "center",
               $gap: "1rem",
-              children: /* @__PURE__ */ jsx29(Text, { $weight: 500, $color: "#DB6669", children: loadError })
+              children: /* @__PURE__ */ jsx30(Text, { $weight: 500, $color: "#DB6669", children: loadError })
             }
           )
         ] }),
-        stripe && collectEmail && /* @__PURE__ */ jsxs20(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
-          /* @__PURE__ */ jsx29(Label, { htmlFor: "email", children: "Email" }),
-          /* @__PURE__ */ jsx29(
+        stripe && collectEmail && /* @__PURE__ */ jsxs21(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
+          /* @__PURE__ */ jsx30(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx30(
             Input2,
             {
               id: "email",
@@ -18948,7 +19277,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
             }
           )
         ] }),
-        showBillingAddress && /* @__PURE__ */ jsx29(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx29(
+        showBillingAddress && /* @__PURE__ */ jsx30(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx30(
           AddressElement,
           {
             options: {
@@ -18967,7 +19296,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
           },
           addressDefaultsKey
         ) }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           Button,
           {
             id: "submit",
@@ -18979,7 +19308,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
             children: isLoading ? t3("Loading") : t3("Save payment method")
           }
         ),
-        message && /* @__PURE__ */ jsx29(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx29(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
+        message && /* @__PURE__ */ jsx30(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx30(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
       ]
     }
   );
@@ -18987,7 +19316,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
 import { useMemo as useMemo14 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var PERIOD_MONTH_COUNT = {
   year: 12,
   quarter: 3
@@ -19020,7 +19349,7 @@ var PeriodToggle = ({
     }
     return result;
   }, [selectedPlan]);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Flex,
     {
       "data-testid": "sch-period-toggle",
@@ -19033,7 +19362,7 @@ var PeriodToggle = ({
       $borderRadius: "2.5rem",
       $cursor: "pointer",
       children: options.map((option) => {
-        const element = /* @__PURE__ */ jsx30(
+        const element = /* @__PURE__ */ jsx31(
           Button,
           {
             "data-testid": "sch-period-toggle-button",
@@ -19057,7 +19386,7 @@ var PeriodToggle = ({
                 backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
               }
             },
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               Text,
               {
                 style: {
@@ -19075,12 +19404,12 @@ var PeriodToggle = ({
         const savingsPercentage = savingsByPeriod[option];
         if (typeof savingsPercentage === "number") {
           const isOptionYear = option === "year";
-          return /* @__PURE__ */ jsx30(
+          return /* @__PURE__ */ jsx31(
             Tooltip,
             {
               portal,
               trigger: element,
-              content: /* @__PURE__ */ jsx30(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
+              content: /* @__PURE__ */ jsx31(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
                 isOptionYear ? "Saving with yearly billing" : "Saving with quarterly billing",
                 { percent: savingsPercentage }
               ) : t3(
@@ -19104,7 +19433,7 @@ import { useMemo as useMemo16 } from "react";
 
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
 import { useMemo as useMemo15 } from "react";
-import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var PriceText = ({
   feature,
   period,
@@ -19115,38 +19444,38 @@ var PriceText = ({
   const { settings } = useEmbed();
   const text = useMemo15(() => {
     if (!flatAmount && perUnitPrice) {
-      return /* @__PURE__ */ jsxs21(Fragment10, { children: [
+      return /* @__PURE__ */ jsxs22(Fragment10, { children: [
         formatCurrency(perUnitPrice, currency),
-        /* @__PURE__ */ jsxs21("sub", { children: [
+        /* @__PURE__ */ jsxs22("sub", { children: [
           "/",
           getFeatureName(feature, 1)
         ] })
       ] });
     }
     if (flatAmount && !perUnitPrice) {
-      return /* @__PURE__ */ jsxs21(Fragment10, { children: [
+      return /* @__PURE__ */ jsxs22(Fragment10, { children: [
         formatCurrency(flatAmount, currency),
-        period && /* @__PURE__ */ jsxs21("sub", { children: [
+        period && /* @__PURE__ */ jsxs22("sub", { children: [
           "/",
           shortenPeriod(period)
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsxs21(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs22(Fragment10, { children: [
       formatCurrency(perUnitPrice, currency),
-      /* @__PURE__ */ jsxs21("sub", { children: [
+      /* @__PURE__ */ jsxs22("sub", { children: [
         "/",
         getFeatureName(feature, 1)
       ] }),
       " + ",
       formatCurrency(flatAmount, currency),
-      period && /* @__PURE__ */ jsxs21("sub", { children: [
+      period && /* @__PURE__ */ jsxs22("sub", { children: [
         "/",
         shortenPeriod(period)
       ] })
     ] });
   }, [feature, period, currency, flatAmount, perUnitPrice]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Text,
     {
       $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -19157,7 +19486,7 @@ var PriceText = ({
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var PricingTiersTooltip = ({
   portal,
   feature,
@@ -19190,11 +19519,11 @@ var PricingTiersTooltip = ({
   if (!priceTiers.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Tooltip,
     {
       portal,
-      trigger: /* @__PURE__ */ jsx32(
+      trigger: /* @__PURE__ */ jsx33(
         Icon3,
         {
           title: "tiered pricing",
@@ -19203,11 +19532,11 @@ var PricingTiersTooltip = ({
           style: { lineHeight: 0 }
         }
       ),
-      content: /* @__PURE__ */ jsxs22(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ jsx32("dl", { children: tiers.map((tier, index) => {
+      content: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ jsx33("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__ */ jsxs22(
+          return /* @__PURE__ */ jsxs23(
             Flex,
             {
               $justifyContent: "space-between",
@@ -19215,17 +19544,17 @@ var PricingTiersTooltip = ({
               $gap: "1rem",
               $padding: "0.5rem",
               children: [
-                /* @__PURE__ */ jsx32("dt", { children: /* @__PURE__ */ jsxs22(
+                /* @__PURE__ */ jsx33("dt", { children: /* @__PURE__ */ jsxs23(
                   Text,
                   {
                     $size: 0.875 * settings.theme.typography.text.fontSize,
                     children: [
                       tier.from,
-                      tier.from !== tier.to && /* @__PURE__ */ jsx32(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
+                      tier.from !== tier.to && /* @__PURE__ */ jsx33(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx32("dd", { children: /* @__PURE__ */ jsx32(
+                /* @__PURE__ */ jsx33("dd", { children: /* @__PURE__ */ jsx33(
                   PriceText,
                   {
                     period,
@@ -19240,8 +19569,8 @@ var PricingTiersTooltip = ({
             index
           );
         }) }),
-        tiersMode && /* @__PURE__ */ jsxs22(Fragment11, { children: [
-          /* @__PURE__ */ jsx32(
+        tiersMode && /* @__PURE__ */ jsxs23(Fragment11, { children: [
+          /* @__PURE__ */ jsx33(
             "hr",
             {
               style: {
@@ -19251,7 +19580,7 @@ var PricingTiersTooltip = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsxs22(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, children: [
+          /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsxs23(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.")
@@ -19275,7 +19604,7 @@ import {
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/shared/subscription-sidebar/CheckoutStageButton.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var NoPaymentRequired = ({
   isDisabled,
   isLoading,
@@ -19285,7 +19614,7 @@ var NoPaymentRequired = ({
   onClick
 }) => {
   const { t: t3 } = useTranslation();
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Button,
     {
       type: "button",
@@ -19347,7 +19676,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "plan") {
     const nextStage = getNextStageId("plan");
     if (isSelectedPlanTrialable && trialPaymentMethodRequired && shouldTrial) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         Button,
         {
           type: "button",
@@ -19357,7 +19686,7 @@ var CheckoutStageButton = ({
           },
           $fullWidth: true,
           $isLoading: isLoading,
-          children: /* @__PURE__ */ jsxs23(
+          children: /* @__PURE__ */ jsxs24(
             Flex,
             {
               $gap: "0.5rem",
@@ -19368,7 +19697,7 @@ var CheckoutStageButton = ({
                 t3("Next"),
                 ": ",
                 t3("Checkout"),
-                /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
+                /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
               ]
             }
           )
@@ -19376,7 +19705,7 @@ var CheckoutStageButton = ({
       );
     }
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19387,7 +19716,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Button,
       {
         type: "button",
@@ -19398,11 +19727,11 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ jsxs23(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
+        children: /* @__PURE__ */ jsxs24(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
           t3("Next"),
           ": ",
           getStageDisplayName(nextStage),
-          /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
+          /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
         ] })
       }
     );
@@ -19410,7 +19739,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "autoTopup") {
     const nextStage = getNextStageId("autoTopup");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19421,7 +19750,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Button,
       {
         type: "button",
@@ -19432,7 +19761,7 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ jsxs23(
+        children: /* @__PURE__ */ jsxs24(
           Flex,
           {
             $gap: "0.5rem",
@@ -19443,7 +19772,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19453,7 +19782,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "usage") {
     const nextStage = getNextStageId("usage");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19464,7 +19793,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Button,
       {
         type: "button",
@@ -19475,7 +19804,7 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ jsxs23(
+        children: /* @__PURE__ */ jsxs24(
           Flex,
           {
             $gap: "0.5rem",
@@ -19486,7 +19815,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19496,7 +19825,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "addons") {
     const nextStage = getNextStageId("addons");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19507,7 +19836,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Button,
       {
         type: "button",
@@ -19517,7 +19846,7 @@ var CheckoutStageButton = ({
         },
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ jsxs23(
+        children: /* @__PURE__ */ jsxs24(
           Flex,
           {
             $gap: "0.5rem",
@@ -19528,7 +19857,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19538,7 +19867,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "addonsUsage") {
     const nextStage = getNextStageId("addonsUsage");
     if (!isPaymentMethodRequired && !nextStage) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19549,7 +19878,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Button,
       {
         type: "button",
@@ -19560,7 +19889,7 @@ var CheckoutStageButton = ({
         $size: isSticky ? "sm" : "md",
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ jsxs23(
+        children: /* @__PURE__ */ jsxs24(
           Flex,
           {
             $gap: "0.5rem",
@@ -19571,7 +19900,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19581,7 +19910,7 @@ var CheckoutStageButton = ({
   if (checkoutStage === "credits") {
     const nextStage = getNextStageId("credits");
     if (!nextStage) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19592,7 +19921,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Button,
       {
         type: "button",
@@ -19602,7 +19931,7 @@ var CheckoutStageButton = ({
         },
         $fullWidth: true,
         $isLoading: isLoading,
-        children: /* @__PURE__ */ jsxs23(
+        children: /* @__PURE__ */ jsxs24(
           Flex,
           {
             $gap: "0.5rem",
@@ -19613,7 +19942,7 @@ var CheckoutStageButton = ({
               t3("Next"),
               ": ",
               getStageDisplayName(nextStage),
-              /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
+              /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
             ]
           }
         )
@@ -19622,7 +19951,7 @@ var CheckoutStageButton = ({
   }
   if (checkoutStage === "checkout") {
     if (!isPaymentMethodRequired) {
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         NoPaymentRequired,
         {
           isDisabled,
@@ -19633,7 +19962,7 @@ var CheckoutStageButton = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Button,
       {
         type: "button",
@@ -19648,7 +19977,7 @@ var CheckoutStageButton = ({
 };
 
 // src/components/shared/subscription-sidebar/EntitlementRow.tsx
-import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var EntitlementRow = (props) => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
@@ -19668,41 +19997,41 @@ var EntitlementRow = (props) => {
       tiersMode
     } = entitlementPrice || {};
     const tiered = priceBehavior === EntitlementPriceBehavior.PayInAdvance && isTieredPrice(entitlementPrice);
-    return /* @__PURE__ */ jsxs24(Fragment12, { children: [
-      /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(Text, { display: "heading4", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs24(Fragment12, { children: [
+    return /* @__PURE__ */ jsxs25(Fragment12, { children: [
+      /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(Text, { display: "heading4", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs25(Fragment12, { children: [
         quantity,
         " ",
         getFeatureName(feature, quantity)
-      ] }) : priceBehavior === EntitlementPriceBehavior.Overage && typeof softLimit === "number" ? /* @__PURE__ */ jsxs24(Fragment12, { children: [
+      ] }) : priceBehavior === EntitlementPriceBehavior.Overage && typeof softLimit === "number" ? /* @__PURE__ */ jsxs25(Fragment12, { children: [
         softLimit,
         " ",
         getFeatureName(feature, softLimit)
       ] }) : feature.name }) }),
-      /* @__PURE__ */ jsx34(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ jsxs24(Text, { children: [
+      /* @__PURE__ */ jsx35(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ jsxs25(Text, { children: [
         formatCurrency((price ?? 0) * quantity, currency),
-        /* @__PURE__ */ jsxs24("sub", { children: [
+        /* @__PURE__ */ jsxs25("sub", { children: [
           "/",
           shortenPeriod(planPeriod)
         ] })
-      ] }) : priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs24(Text, { children: [
-        priceBehavior === EntitlementPriceBehavior.Overage && /* @__PURE__ */ jsxs24(Fragment12, { children: [
+      ] }) : priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs25(Text, { children: [
+        priceBehavior === EntitlementPriceBehavior.Overage && /* @__PURE__ */ jsxs25(Fragment12, { children: [
           t3("then"),
           " "
         ] }),
         formatCurrency(price ?? 0, currency),
-        /* @__PURE__ */ jsxs24("sub", { children: [
+        /* @__PURE__ */ jsxs25("sub", { children: [
           "/",
-          packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment12, { children: [
+          packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment12, { children: [
             packageSize,
             " "
           ] }),
           getFeatureName(feature, packageSize),
-          feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs24(Fragment12, { children: [
+          feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs25(Fragment12, { children: [
             "/",
             shortenPeriod(planPeriod)
           ] })
         ] })
-      ] }) : (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs24(
+      ] }) : (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs25(
         Text,
         {
           style: { opacity: 0.54 },
@@ -19710,7 +20039,7 @@ var EntitlementRow = (props) => {
           $color: settings.theme.typography.text.color,
           children: [
             t3("Tier-based"),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35(
               PricingTiersTooltip,
               {
                 portal,
@@ -19731,7 +20060,7 @@ var EntitlementRow = (props) => {
 
 // src/components/shared/subscription-sidebar/Proration.tsx
 import { useState as useState11 } from "react";
-import { Fragment as Fragment13, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var Proration = ({ currency, charges }) => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
@@ -19741,21 +20070,21 @@ var Proration = ({ currency, charges }) => {
     e2.stopPropagation();
     setOpen((open2) => !open2);
   };
-  return /* @__PURE__ */ jsxs25(Fragment13, { children: [
-    /* @__PURE__ */ jsx35(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx35(Text, { $size: 14, children: t3("Proration") }) }),
-    /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+  return /* @__PURE__ */ jsxs26(Fragment13, { children: [
+    /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Proration") }) }),
+    /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       open && charges?.upcomingInvoiceLineItems.map(
         ({ amount, description }, index) => {
-          return /* @__PURE__ */ jsxs25(Flex, { $gap: "1rem", children: [
-            /* @__PURE__ */ jsx35(Text, { children: description }),
-            /* @__PURE__ */ jsx35(Text, { children: formatCurrency(amount, currency) })
+          return /* @__PURE__ */ jsxs26(Flex, { $gap: "1rem", children: [
+            /* @__PURE__ */ jsx36(Text, { children: description }),
+            /* @__PURE__ */ jsx36(Text, { children: formatCurrency(amount, currency) })
           ] }, index);
         }
       ),
-      /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "center", $gap: "1rem", children: [
-        /* @__PURE__ */ jsxs25(Flex, { children: [
-          /* @__PURE__ */ jsx35(Text, { display: "heading4", children: t3("Total") }),
-          /* @__PURE__ */ jsxs25(
+      /* @__PURE__ */ jsxs26(Flex, { $justifyContent: "space-between", $alignItems: "center", $gap: "1rem", children: [
+        /* @__PURE__ */ jsxs26(Flex, { children: [
+          /* @__PURE__ */ jsx36(Text, { display: "heading4", children: t3("Total") }),
+          /* @__PURE__ */ jsxs26(
             Button,
             {
               type: "button",
@@ -19763,26 +20092,26 @@ var Proration = ({ currency, charges }) => {
               style: { height: "auto", padding: 0 },
               $variant: "text",
               children: [
-                /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36(
                   Icon3,
                   {
                     name: open ? "chevron-up" : "chevron-down",
                     color: settings.theme.typography.text.color
                   }
                 ),
-                /* @__PURE__ */ jsx35(Text, { children: open ? t3("Hide details") : t3("Show details") })
+                /* @__PURE__ */ jsx36(Text, { children: open ? t3("Hide details") : t3("Show details") })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx35(Flex, { children: /* @__PURE__ */ jsx35(Text, { children: formatCurrency(charges.proration, currency) }) })
+        /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(charges.proration, currency) }) })
       ] })
     ] })
   ] });
 };
 
 // src/components/shared/subscription-sidebar/SubscriptionSidebar.tsx
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var SubscriptionSidebar = forwardRef7(
   ({
     portal,
@@ -20085,6 +20414,7 @@ var SubscriptionSidebar = forwardRef7(
           autoTopupOverrides: isCreditOnlyPurchase ? [] : autoTopupRequestBody,
           payInAdvance: isCreditOnlyPurchase ? [] : [...planPayInAdvanceRequestBody, ...addOnPayInAdvanceRequestBody],
           creditBundles: creditBundlesRequestBody,
+          customFieldValues: [],
           skipTrial: !shouldTrial,
           ...paymentMethodId && { paymentMethodId },
           ...promoCode && { promoCode }
@@ -20187,7 +20517,7 @@ var SubscriptionSidebar = forwardRef7(
       const isSticky = !isButtonInView;
       switch (layout) {
         case "checkout":
-          return /* @__PURE__ */ jsx36(
+          return /* @__PURE__ */ jsx37(
             CheckoutStageButton,
             {
               canCheckout,
@@ -20210,7 +20540,7 @@ var SubscriptionSidebar = forwardRef7(
             }
           );
         case "unsubscribe":
-          return /* @__PURE__ */ jsx36(
+          return /* @__PURE__ */ jsx37(
             Button,
             {
               type: "button",
@@ -20276,7 +20606,7 @@ var SubscriptionSidebar = forwardRef7(
     if (isSelectedPlanTrialable && selectedPlan.trialDays) {
       trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
     }
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs27(
       Flex,
       {
         ref,
@@ -20293,7 +20623,7 @@ var SubscriptionSidebar = forwardRef7(
         },
         ...rest,
         children: [
-          showHeader && /* @__PURE__ */ jsx36(
+          showHeader && /* @__PURE__ */ jsx37(
             Flex,
             {
               $position: "relative",
@@ -20305,10 +20635,10 @@ var SubscriptionSidebar = forwardRef7(
               $borderBottomWidth: "1px",
               $borderStyle: "solid",
               $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-              children: /* @__PURE__ */ jsx36(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx36(Text, { as: "h3", display: "heading3", children: t3("Subscription") }) })
+              children: /* @__PURE__ */ jsx37(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx37(Text, { as: "h3", display: "heading3", children: t3("Subscription") }) })
             }
           ),
-          /* @__PURE__ */ jsxs26(
+          /* @__PURE__ */ jsxs27(
             Flex,
             {
               $position: "relative",
@@ -20322,9 +20652,9 @@ var SubscriptionSidebar = forwardRef7(
               $borderStyle: "solid",
               $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
               children: [
-                /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Plan") }) }),
-                /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  currentPlan && /* @__PURE__ */ jsxs26(
+                /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Plan") }) }),
+                /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  currentPlan && /* @__PURE__ */ jsxs27(
                     Flex,
                     {
                       $justifyContent: "space-between",
@@ -20336,13 +20666,13 @@ var SubscriptionSidebar = forwardRef7(
                         $color: settings.theme.typography.heading4.color
                       },
                       children: [
-                        /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: currentPlan.name }) }),
-                        typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
+                        /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: currentPlan.name }) }),
+                        typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
                           formatCurrency(
                             currentPlan.planPrice,
                             billingSubscription?.currency
                           ),
-                          /* @__PURE__ */ jsxs26("sub", { children: [
+                          /* @__PURE__ */ jsxs27("sub", { children: [
                             "/",
                             shortenPeriod(
                               getSubscriptionPeriod(billingSubscription) || currentPlan.planPeriod || planPeriod
@@ -20352,8 +20682,8 @@ var SubscriptionSidebar = forwardRef7(
                       ]
                     }
                   ),
-                  selectedPlan && !selectedPlan.current && /* @__PURE__ */ jsxs26(Box, { children: [
-                    /* @__PURE__ */ jsx36(
+                  selectedPlan && !selectedPlan.current && /* @__PURE__ */ jsxs27(Box, { children: [
+                    /* @__PURE__ */ jsx37(
                       Box,
                       {
                         $width: "100%",
@@ -20361,7 +20691,7 @@ var SubscriptionSidebar = forwardRef7(
                         $opacity: "50%",
                         $marginBottom: "0.25rem",
                         $marginTop: "-0.25rem",
-                        children: /* @__PURE__ */ jsx36(
+                        children: /* @__PURE__ */ jsx37(
                           Icon3,
                           {
                             name: "arrow-down",
@@ -20373,20 +20703,20 @@ var SubscriptionSidebar = forwardRef7(
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxs26(
+                    /* @__PURE__ */ jsxs27(
                       Flex,
                       {
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: selectedPlan.name }) }),
-                          /* @__PURE__ */ jsx36(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
+                          /* @__PURE__ */ jsx37(Flex, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: selectedPlan.name }) }),
+                          /* @__PURE__ */ jsx37(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
                             formatCurrency(
                               selectedPlanPrice ?? 0,
                               selectedPlanCurrency
                             ),
-                            /* @__PURE__ */ jsxs26("sub", { children: [
+                            /* @__PURE__ */ jsxs27("sub", { children: [
                               "/",
                               shortenPeriod(planPeriod)
                             ] })
@@ -20396,13 +20726,13 @@ var SubscriptionSidebar = forwardRef7(
                     )
                   ] })
                 ] }),
-                updatedUsageBasedEntitlements.willChange && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Usage-based") }) }),
+                updatedUsageBasedEntitlements.willChange && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Usage-based") }) }),
                   updatedUsageBasedEntitlements.removed.reduce(
                     (acc, entitlement, index) => {
                       if (entitlement.feature?.name) {
                         acc.push(
-                          /* @__PURE__ */ jsx36(
+                          /* @__PURE__ */ jsx37(
                             Flex,
                             {
                               $justifyContent: "space-between",
@@ -20411,7 +20741,7 @@ var SubscriptionSidebar = forwardRef7(
                               $opacity: "0.625",
                               $textDecoration: "line-through",
                               $color: settings.theme.typography.heading4.color,
-                              children: /* @__PURE__ */ jsx36(
+                              children: /* @__PURE__ */ jsx37(
                                 EntitlementRow,
                                 {
                                   portal: resolvedPortal,
@@ -20433,8 +20763,8 @@ var SubscriptionSidebar = forwardRef7(
                     (acc, { previous, next: next2 }, index) => {
                       if (next2.feature?.name) {
                         acc.push(
-                          /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            /* @__PURE__ */ jsx36(
+                          /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                            /* @__PURE__ */ jsx37(
                               Flex,
                               {
                                 $justifyContent: "space-between",
@@ -20443,7 +20773,7 @@ var SubscriptionSidebar = forwardRef7(
                                 $opacity: "0.625",
                                 $textDecoration: "line-through",
                                 $color: settings.theme.typography.heading4.color,
-                                children: /* @__PURE__ */ jsx36(
+                                children: /* @__PURE__ */ jsx37(
                                   EntitlementRow,
                                   {
                                     portal: resolvedPortal,
@@ -20454,13 +20784,13 @@ var SubscriptionSidebar = forwardRef7(
                                 )
                               }
                             ),
-                            /* @__PURE__ */ jsx36(
+                            /* @__PURE__ */ jsx37(
                               Flex,
                               {
                                 $justifyContent: "space-between",
                                 $alignItems: "baseline",
                                 $gap: "1rem",
-                                children: /* @__PURE__ */ jsx36(
+                                children: /* @__PURE__ */ jsx37(
                                   EntitlementRow,
                                   {
                                     portal: resolvedPortal,
@@ -20482,13 +20812,13 @@ var SubscriptionSidebar = forwardRef7(
                     (acc, entitlement, index) => {
                       if (entitlement.feature?.name) {
                         acc.push(
-                          /* @__PURE__ */ jsx36(
+                          /* @__PURE__ */ jsx37(
                             Flex,
                             {
                               $justifyContent: "space-between",
                               $alignItems: "baseline",
                               $gap: "1rem",
-                              children: /* @__PURE__ */ jsx36(
+                              children: /* @__PURE__ */ jsx37(
                                 EntitlementRow,
                                 {
                                   portal: resolvedPortal,
@@ -20507,33 +20837,33 @@ var SubscriptionSidebar = forwardRef7(
                     []
                   )
                 ] }),
-                selectedPlan && isSelectedPlanTrialable && shouldTrial && /* @__PURE__ */ jsxs26(Box, { children: [
-                  /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Trial") }) }),
-                  /* @__PURE__ */ jsxs26(
+                selectedPlan && isSelectedPlanTrialable && shouldTrial && /* @__PURE__ */ jsxs27(Box, { children: [
+                  /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Trial") }) }),
+                  /* @__PURE__ */ jsxs27(
                     Flex,
                     {
                       $justifyContent: "space-between",
                       $alignItems: "center",
                       $gap: "1rem",
                       children: [
-                        /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: t3("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
-                        /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsxs26(Text, { children: [
+                        /* @__PURE__ */ jsx37(Flex, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: t3("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
+                        /* @__PURE__ */ jsx37(Flex, { children: /* @__PURE__ */ jsxs27(Text, { children: [
                           "-",
                           formatCurrency(
                             selectedPlanPrice ?? 0,
                             selectedPlanCurrency
                           ),
                           "/",
-                          /* @__PURE__ */ jsx36("sub", { children: shortenPeriod(planPeriod) })
+                          /* @__PURE__ */ jsx37("sub", { children: shortenPeriod(planPeriod) })
                         ] }) })
                       ]
                     }
                   )
                 ] }),
-                (willAddOnsChange || selectedAddOnsWithPrice.length > 0) && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Add-ons") }) }),
+                (willAddOnsChange || selectedAddOnsWithPrice.length > 0) && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Add-ons") }) }),
                   removedAddOns.map((addOn, index) => {
-                    return /* @__PURE__ */ jsxs26(
+                    return /* @__PURE__ */ jsxs27(
                       Flex,
                       {
                         $justifyContent: "space-between",
@@ -20543,13 +20873,13 @@ var SubscriptionSidebar = forwardRef7(
                         $textDecoration: "line-through",
                         $color: settings.theme.typography.heading4.color,
                         children: [
-                          /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: addOn.name }) }),
-                          typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
+                          /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: addOn.name }) }),
+                          typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
                             formatCurrency(
                               addOn.planPrice,
                               selectedPlanCurrency
                             ),
-                            addOn.planPeriod !== "one-time" && /* @__PURE__ */ jsxs26("sub", { children: [
+                            addOn.planPeriod !== "one-time" && /* @__PURE__ */ jsxs27("sub", { children: [
                               "/",
                               shortenPeriod(planPeriod)
                             ] })
@@ -20561,17 +20891,17 @@ var SubscriptionSidebar = forwardRef7(
                   }),
                   selectedAddOnsWithPrice.map((addOn, index) => {
                     const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, planPeriod, currency) || {};
-                    return /* @__PURE__ */ jsxs26(
+                    return /* @__PURE__ */ jsxs27(
                       Flex,
                       {
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: addOn.name }) }),
-                          /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
+                          /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: addOn.name }) }),
+                          /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
                             formatCurrency(addOnPrice ?? 0, addOnCurrency),
-                            addOn.chargeType !== ChargeType.oneTime && /* @__PURE__ */ jsxs26("sub", { children: [
+                            addOn.chargeType !== ChargeType.oneTime && /* @__PURE__ */ jsxs27("sub", { children: [
                               "/",
                               shortenPeriod(planPeriod)
                             ] })
@@ -20582,35 +20912,35 @@ var SubscriptionSidebar = forwardRef7(
                     );
                   })
                 ] }),
-                addedCreditBundles.length > 0 && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                  /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Credits") }) }),
+                addedCreditBundles.length > 0 && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                  /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(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__ */ jsxs26(
+                          /* @__PURE__ */ jsxs27(
                             Flex,
                             {
                               $justifyContent: "space-between",
                               $alignItems: "center",
                               $gap: "1rem",
                               children: [
-                                /* @__PURE__ */ jsxs26(Box, { children: [
-                                  /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsxs26(Text, { display: "heading4", children: [
+                                /* @__PURE__ */ jsxs27(Box, { children: [
+                                  /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsxs27(Text, { display: "heading4", children: [
                                     bundle.name,
                                     " (",
                                     bundle.count,
                                     ")"
                                   ] }) }),
-                                  /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsxs26(Text, { children: [
+                                  /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsxs27(Text, { children: [
                                     amount,
                                     " ",
                                     getFeatureName(bundle, amount)
                                   ] }) })
                                 ] }),
-                                bundle.count > 0 && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(
+                                bundle.count > 0 && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(
                                   price * bundle.count,
                                   bundle.price?.currency
                                 ) }) })
@@ -20624,7 +20954,7 @@ var SubscriptionSidebar = forwardRef7(
                     []
                   )
                 ] }),
-                proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx36(
+                proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx37(
                   Proration,
                   {
                     charges,
@@ -20635,7 +20965,7 @@ var SubscriptionSidebar = forwardRef7(
               ]
             }
           ),
-          /* @__PURE__ */ jsxs26(
+          /* @__PURE__ */ jsxs27(
             Flex,
             {
               $flexDirection: "column",
@@ -20644,15 +20974,15 @@ var SubscriptionSidebar = forwardRef7(
               $width: "100%",
               $padding: "1.5rem",
               children: [
-                discountApplied && /* @__PURE__ */ jsxs26(
+                discountApplied && /* @__PURE__ */ jsxs27(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: t3("Discount") }) }),
-                      /* @__PURE__ */ jsxs26(
+                      /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { children: t3("Discount") }) }),
+                      /* @__PURE__ */ jsxs27(
                         Flex,
                         {
                           $alignItems: "center",
@@ -20662,15 +20992,15 @@ var SubscriptionSidebar = forwardRef7(
                           $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                           $borderRadius: "0.3125rem",
                           children: [
-                            /* @__PURE__ */ jsx36(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
-                            /* @__PURE__ */ jsx36(
+                            /* @__PURE__ */ jsx37(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
+                            /* @__PURE__ */ jsx37(
                               Box,
                               {
                                 $cursor: "pointer",
                                 onClick: () => {
                                   updatePromoCode?.(null);
                                 },
-                                children: /* @__PURE__ */ jsx36(
+                                children: /* @__PURE__ */ jsx37(
                                   Icon3,
                                   {
                                     name: "close",
@@ -20686,55 +21016,55 @@ var SubscriptionSidebar = forwardRef7(
                     ]
                   }
                 ),
-                percentOff > 0 && /* @__PURE__ */ jsxs26(
+                percentOff > 0 && /* @__PURE__ */ jsxs27(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx36(Text, { children: t3("X% off", { percent: percentOff }) }) }),
-                      /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(
+                      /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx37(Text, { children: t3("X% off", { percent: percentOff }) }) }),
+                      /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(
                         newCharges / 100 * percentOff,
                         selectedPlanCurrency
                       ) }) })
                     ]
                   }
                 ),
-                amountOff > 0 && /* @__PURE__ */ jsxs26(
+                amountOff > 0 && /* @__PURE__ */ jsxs27(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx36(Text, { children: t3("X off", {
+                      /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx37(Text, { children: t3("X off", {
                         amount: formatCurrency(
                           Math.abs(amountOff),
                           selectedPlanCurrency
                         )
                       }) }) }),
-                      /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsxs26(Text, { children: [
+                      /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsxs27(Text, { children: [
                         "-",
                         formatCurrency(Math.abs(amountOff), selectedPlanCurrency)
                       ] }) })
                     ]
                   }
                 ),
-                !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ jsxs26(
+                !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ jsxs27(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs26(Text, { children: [
+                      /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs27(Text, { children: [
                         planPeriod === "year" ? t3("Yearly total") : planPeriod === "quarter" ? t3("Quarterly total") : t3("Monthly total"),
                         ":"
                       ] }) }),
-                      /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
+                      /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
                         subscriptionPrice,
-                        /* @__PURE__ */ jsxs26("sub", { children: [
+                        /* @__PURE__ */ jsxs27("sub", { children: [
                           "/",
                           shortenPeriod(planPeriod)
                         ] })
@@ -20742,46 +21072,46 @@ var SubscriptionSidebar = forwardRef7(
                     ]
                   }
                 ),
-                taxAmount > 0 && /* @__PURE__ */ jsxs26(
+                taxAmount > 0 && /* @__PURE__ */ jsxs27(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: t3("Tax (description):", {
+                      /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { children: t3("Tax (description):", {
                         description: taxDescription
                       }) }) }),
-                      /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
+                      /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
                     ]
                   }
                 ),
-                charges && /* @__PURE__ */ jsxs26(
+                charges && /* @__PURE__ */ jsxs27(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs26(Text, { children: [
+                      /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs27(Text, { children: [
                         t3("Due today"),
                         ":"
                       ] }) }),
-                      /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
+                      /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
                     ]
                   }
                 ),
-                dueNow < 0 && /* @__PURE__ */ jsxs26(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs26(Text, { children: [
+                dueNow < 0 && /* @__PURE__ */ jsxs27(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
+                  /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs27(Text, { children: [
                     t3("Credits to be applied to future invoices"),
                     ":"
                   ] }) }),
-                  /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
+                  /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
                 ] }),
-                /* @__PURE__ */ jsxs26("div", { ref: buttonRef, children: [
+                /* @__PURE__ */ jsxs27("div", { ref: buttonRef, children: [
                   button,
                   createPortal2(
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       Box,
                       {
                         $position: "sticky",
@@ -20795,15 +21125,15 @@ var SubscriptionSidebar = forwardRef7(
                         $borderTopWidth: "1px",
                         $borderTopStyle: "solid",
                         $borderTopColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-                        children: /* @__PURE__ */ jsx36(Box, { $padding: "1rem 1.5rem", children: button })
+                        children: /* @__PURE__ */ jsx37(Box, { $padding: "1rem 1.5rem", children: button })
                       }
                     ),
                     resolvedPortal
                   )
                 ] }),
-                !isLoading && error && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", children: [
-                  /* @__PURE__ */ jsx36(Text, { $weight: 500, $color: "#DB6669", children: error }),
-                  error === t3("Downgrade not permitted.") && data?.preventSelfServiceDowngrade && data?.preventSelfServiceDowngradeUrl && data?.preventSelfServiceDowngradeButtonText && /* @__PURE__ */ jsx36(
+                !isLoading && error && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", children: [
+                  /* @__PURE__ */ jsx37(Text, { $weight: 500, $color: "#DB6669", children: error }),
+                  error === t3("Downgrade not permitted.") && data?.preventSelfServiceDowngrade && data?.preventSelfServiceDowngradeUrl && data?.preventSelfServiceDowngradeButtonText && /* @__PURE__ */ jsx37(
                     Text,
                     {
                       as: "a",
@@ -20813,7 +21143,7 @@ var SubscriptionSidebar = forwardRef7(
                     }
                   )
                 ] }),
-                layout !== "unsubscribe" && !isCreditOnlyPurchase && /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
+                layout !== "unsubscribe" && !isCreditOnlyPurchase && /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
                   "You will be downgraded at the end of your billing period.",
                   {
                     plan: selectedPlan.name,
@@ -20894,7 +21224,7 @@ var TieredPricingDetails = ({
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
 import { useCallback as useCallback10, useLayoutEffect as useLayoutEffect7, useMemo as useMemo19, useRef as useRef10, useState as useState13 } from "react";
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top }) => {
   const { t: t3 } = useTranslation();
   const { data, layout, setLayout, setCheckoutState, clearCheckoutState } = useEmbed();
@@ -20964,7 +21294,7 @@ var UnsubscribeDialog = ({ top }) => {
       element.show();
     }
   }, [layout]);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Dialog2,
     {
       ref: setDialog,
@@ -20973,8 +21303,8 @@ var UnsubscribeDialog = ({ top }) => {
       top,
       onClose: handleClose,
       ...!isModal && { open: layout === "unsubscribe" },
-      children: /* @__PURE__ */ jsxs27(DialogContent2, { children: [
-        /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsxs28(DialogContent2, { children: [
+        /* @__PURE__ */ jsx38(
           DialogClose,
           {
             onClose: handleClose,
@@ -20984,7 +21314,7 @@ var UnsubscribeDialog = ({ top }) => {
             $margin: "1rem 0.75rem 0 0"
           }
         ),
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs28(
           Flex,
           {
             $flexDirection: "column",
@@ -20994,9 +21324,9 @@ var UnsubscribeDialog = ({ top }) => {
             $padding: "2.5rem",
             $overflow: "auto",
             children: [
-              /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                /* @__PURE__ */ jsx37(Text, { as: "h2", display: "heading2", children: t3("Cancel subscription") }),
-                /* @__PURE__ */ jsxs27(Text, { as: "p", children: [
+              /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                /* @__PURE__ */ jsx38(Text, { as: "h2", display: "heading2", children: t3("Cancel subscription") }),
+                /* @__PURE__ */ jsxs28(Text, { as: "p", children: [
                   t3(
                     "You will retain access to your plan until the end of the billing period, on"
                   ),
@@ -21006,9 +21336,9 @@ var UnsubscribeDialog = ({ top }) => {
                   })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                /* @__PURE__ */ jsx37(Text, { as: "p", children: t3("Not ready to cancel?") }),
-                /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                /* @__PURE__ */ jsx38(Text, { as: "p", children: t3("Not ready to cancel?") }),
+                /* @__PURE__ */ jsx38(
                   Button,
                   {
                     type: "button",
@@ -21029,7 +21359,7 @@ var UnsubscribeDialog = ({ top }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           SubscriptionSidebar,
           {
             ref: sidebarRef,
@@ -21056,14 +21386,14 @@ var UnsubscribeDialog = ({ top }) => {
 };
 
 // src/components/shared/usage-violation-text/UsageViolationText.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var UsageViolationText = ({ violations }) => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
   if (violations.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     Text,
     {
       $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -21082,11 +21412,11 @@ var UsageViolationText = ({ violations }) => {
 };
 
 // src/components/ui/badge/Badge.tsx
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 var Badge = () => {
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     Flex,
     {
       as: "a",
@@ -21099,82 +21429,82 @@ var Badge = () => {
       $gridColumn: "1 / -1",
       $color: settings.theme.typography.text.color,
       children: [
-        /* @__PURE__ */ jsxs28(Text, { $size: 12, children: [
+        /* @__PURE__ */ jsxs29(Text, { $size: 12, children: [
           t3("Powered by"),
           " "
         ] }),
-        /* @__PURE__ */ jsxs28("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
-          /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsxs29("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "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",
@@ -21188,9 +21518,9 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 var Disabled = () => {
-  return /* @__PURE__ */ jsx40(Box, { $width: "max-content", $height: "max-content", children: /* @__PURE__ */ jsx40(Card, { children: /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsx41(Box, { $width: "max-content", $height: "max-content", children: /* @__PURE__ */ jsx41(Card, { children: /* @__PURE__ */ jsxs30(
     Element,
     {
       as: Flex,
@@ -21199,8 +21529,8 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx40(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx40(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
-        /* @__PURE__ */ jsx40(Text, { as: "p", children: "Please try again later." })
+        /* @__PURE__ */ jsx41(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx41(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
+        /* @__PURE__ */ jsx41(Text, { as: "p", children: "Please try again later." })
       ]
     }
   ) }) });
@@ -21209,7 +21539,7 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx40(Disabled, {});
+      return /* @__PURE__ */ jsx41(Disabled, {});
     default:
       return children;
   }
@@ -21234,7 +21564,7 @@ var StyledViewport = gt2.div.withConfig({
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var Viewport = forwardRef8(
   ({ children, portal, ...props }, ref) => {
     portal = portal || document.body;
@@ -21243,7 +21573,7 @@ var Viewport = forwardRef8(
     const [top, setTop] = useState14(0);
     useLayoutEffect8(() => {
       const element = portalRef.current;
-      const setModalY = (0, import_debounce3.default)(() => {
+      const setModalY = (0, import_debounce4.default)(() => {
         const value = Math.abs(
           (element === document.body ? window.scrollY : element.scrollTop) ?? 0
         );
@@ -21255,21 +21585,21 @@ var Viewport = forwardRef8(
       };
     }, []);
     const isBadgeVisible = !data?.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden";
-    return /* @__PURE__ */ jsxs30(Fragment14, { children: [
-      /* @__PURE__ */ jsxs30(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ jsx41(RenderLayout, { children }),
-        isBadgeVisible && /* @__PURE__ */ jsx41(Badge, {})
+    return /* @__PURE__ */ jsxs31(Fragment14, { children: [
+      /* @__PURE__ */ jsxs31(StyledViewport, { ref, ...props, children: [
+        /* @__PURE__ */ jsx42(RenderLayout, { children }),
+        isBadgeVisible && /* @__PURE__ */ jsx42(Badge, {})
       ] }),
-      layout === "checkout" && createPortal3(/* @__PURE__ */ jsx41(CheckoutDialog, { top }), portal),
-      layout === "unsubscribe" && createPortal3(/* @__PURE__ */ jsx41(UnsubscribeDialog, { top }), portal),
-      layout === "payment" && createPortal3(/* @__PURE__ */ jsx41(PaymentDialog, { top }), portal)
+      layout === "checkout" && createPortal3(/* @__PURE__ */ jsx42(CheckoutDialog, { top }), portal),
+      layout === "unsubscribe" && createPortal3(/* @__PURE__ */ jsx42(UnsubscribeDialog, { top }), portal),
+      layout === "payment" && createPortal3(/* @__PURE__ */ jsx42(PaymentDialog, { top }), portal)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/elements/button/Button.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var resolveDesignProps = (props) => {
   return {
     button: {
@@ -21300,7 +21630,7 @@ var ButtonElement = forwardRef9(({ children, className, ...rest }, ref) => {
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Element,
     {
       as: Flex,
@@ -21308,7 +21638,7 @@ var ButtonElement = forwardRef9(({ children, className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         Button,
         {
           as: "a",
@@ -21333,7 +21663,7 @@ import { Fragment as Fragment17, forwardRef as forwardRef10, useMemo as useMemo2
 
 // src/components/elements/included-features/UsageDetails.tsx
 import { Fragment as Fragment15, useMemo as useMemo20 } from "react";
-import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 var UsageDetails = ({ entitlement, layout }) => {
   const {
     allocation,
@@ -21464,7 +21794,7 @@ var UsageDetails = ({ entitlement, layout }) => {
     let index = 0;
     if (priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ jsx43(Fragment15, { children: packageSize > 1 ? t3("$X/Y units/period", {
+        /* @__PURE__ */ jsx44(Fragment15, { children: packageSize > 1 ? t3("$X/Y units/period", {
           cost: formatCurrency(price, currency),
           size: packageSize,
           units: getFeatureName(feature, packageSize),
@@ -21478,7 +21808,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__ */ jsx43(Fragment15, { children: t3("X units used", {
+        /* @__PURE__ */ jsx44(Fragment15, { children: t3("X units used", {
           amount: usage,
           units: getFeatureName(feature, usage)
         }) }, index)
@@ -21487,14 +21817,14 @@ var UsageDetails = ({ entitlement, layout }) => {
     }
     if (typeof cost === "number" && cost > 0) {
       acc.push(
-        /* @__PURE__ */ jsxs31(Fragment15, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx43(Fragment16, { children: " \u2022 " }),
+        /* @__PURE__ */ jsxs32(Fragment15, { children: [
+          acc.length > 0 && /* @__PURE__ */ jsx44(Fragment16, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
       index += 1;
       if (feature.featureType === FeatureType.Trait && typeof period === "string") {
-        acc.push(/* @__PURE__ */ jsxs31(Fragment15, { children: [
+        acc.push(/* @__PURE__ */ jsxs32(Fragment15, { children: [
           "/",
           shortenPeriod(period)
         ] }, index));
@@ -21503,8 +21833,8 @@ var UsageDetails = ({ entitlement, layout }) => {
     }
     if (metricResetAt) {
       acc.push(
-        /* @__PURE__ */ jsxs31(Fragment15, { children: [
-          acc.length > 0 && /* @__PURE__ */ jsx43(Fragment16, { children: " \u2022 " }),
+        /* @__PURE__ */ jsxs32(Fragment15, { children: [
+          acc.length > 0 && /* @__PURE__ */ jsx44(Fragment16, { children: " \u2022 " }),
           t3("Resets", {
             date: toPrettyDate(metricResetAt, {
               month: "numeric",
@@ -21543,8 +21873,8 @@ var UsageDetails = ({ entitlement, layout }) => {
   if (!text && !usageText || !feature) {
     return null;
   }
-  return /* @__PURE__ */ jsxs31(Fragment16, { children: [
-    layout.entitlement.isVisible && /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs32(Fragment16, { children: [
+    layout.entitlement.isVisible && /* @__PURE__ */ jsx44(
       Flex,
       {
         $marginTop: "0.75rem",
@@ -21554,9 +21884,9 @@ var UsageDetails = ({ entitlement, layout }) => {
             $marginTop: 0
           }
         },
-        children: /* @__PURE__ */ jsxs31(Text, { display: layout.entitlement.fontStyle, children: [
+        children: /* @__PURE__ */ jsxs32(Text, { display: layout.entitlement.fontStyle, children: [
           text,
-          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx43(
+          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx44(
             HardLimitTooltip,
             {
               feature: entitlement.feature,
@@ -21566,7 +21896,7 @@ var UsageDetails = ({ entitlement, layout }) => {
         ] })
       }
     ),
-    layout.usage.isVisible && usageText && /* @__PURE__ */ jsx43(
+    layout.usage.isVisible && usageText && /* @__PURE__ */ jsx44(
       Flex,
       {
         $viewport: {
@@ -21574,9 +21904,9 @@ var UsageDetails = ({ entitlement, layout }) => {
             $justifyContent: "end"
           }
         },
-        children: /* @__PURE__ */ jsxs31(Text, { display: layout.usage.fontStyle, children: [
+        children: /* @__PURE__ */ jsxs32(Text, { display: layout.usage.fontStyle, children: [
           usageText,
-          (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsx43(
+          (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsx44(
             PricingTiersTooltip,
             {
               feature,
@@ -21593,7 +21923,7 @@ var UsageDetails = ({ entitlement, layout }) => {
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
     // there is a typescript bug with `DeepPartial` so we must cast to `string[] | undefined`
@@ -21668,9 +21998,9 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ jsxs32(Element, { ref, className, $containerType: "inline-size", children: [
-    props.header.isVisible && /* @__PURE__ */ jsx44(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx44(Text, { display: props.header.fontStyle, children: props.header.text }) }),
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs33(Element, { ref, className, $containerType: "inline-size", children: [
+    props.header.isVisible && /* @__PURE__ */ jsx45(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx45(Text, { display: props.header.fontStyle, children: props.header.text }) }),
+    /* @__PURE__ */ jsx45(
       Box,
       {
         $display: "grid",
@@ -21683,8 +22013,8 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
           }
         },
         children: featureUsage.slice(0, showCount).map((entitlement, index) => {
-          return /* @__PURE__ */ jsxs32(Fragment17, { children: [
-            props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx44(
+          return /* @__PURE__ */ jsxs33(Fragment17, { children: [
+            props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx45(
               Icon3,
               {
                 name: entitlement.feature.icon,
@@ -21694,16 +22024,16 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
                 style: { marginRight: "0.5rem" }
               }
             ),
-            /* @__PURE__ */ jsxs32(
+            /* @__PURE__ */ jsxs33(
               Flex,
               {
                 $flexDirection: "column",
                 $alignSelf: "baseline",
                 $gap: "0.25rem",
                 children: [
-                  entitlement.feature?.name && /* @__PURE__ */ jsx44(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
-                  props.description.isVisible && entitlement.feature?.description && /* @__PURE__ */ jsx44(Text, { display: props.description.fontStyle, children: entitlement.feature.description }),
-                  props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsx44(
+                  entitlement.feature?.name && /* @__PURE__ */ jsx45(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
+                  props.description.isVisible && entitlement.feature?.description && /* @__PURE__ */ jsx45(Text, { display: props.description.fontStyle, children: entitlement.feature.description }),
+                  props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsx45(
                     Text,
                     {
                       as: "em",
@@ -21721,7 +22051,7 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx44(
+            /* @__PURE__ */ jsx45(
               Flex,
               {
                 $gridColumn: "span 2",
@@ -21738,22 +22068,22 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
                     $marginLeft: 0
                   }
                 },
-                children: /* @__PURE__ */ jsx44(UsageDetails, { entitlement, layout: props })
+                children: /* @__PURE__ */ jsx45(UsageDetails, { entitlement, layout: props })
               }
             )
           ] }, index);
         })
       }
     ),
-    shouldShowExpand && /* @__PURE__ */ jsxs32(Flex, { $alignItems: "center", $marginTop: "1rem", children: [
-      /* @__PURE__ */ jsx44(
+    shouldShowExpand && /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", $marginTop: "1rem", children: [
+      /* @__PURE__ */ jsx45(
         Icon3,
         {
           name: isExpanded ? "chevron-up" : "chevron-down",
           color: "#D0D0D0"
         }
       ),
-      /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx45(
         Text,
         {
           onClick: handleToggleShowAll,
@@ -21769,7 +22099,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef11, useCallback as useCallback11, useEffect as useEffect6, useState as useState16 } from "react";
-import { Fragment as Fragment18, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -21872,9 +22202,9 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs33(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx45(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx45(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(Element, { ref, className, children: [
+    /* @__PURE__ */ jsx46(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx46(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ jsxs34(
       Flex,
       {
         as: TransitionBox,
@@ -21883,8 +22213,8 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx45(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your invoices.") }),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your invoices.") }),
+          /* @__PURE__ */ jsx46(
             Button,
             {
               type: "button",
@@ -21897,17 +22227,17 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx45(TransitionBox, { children: /* @__PURE__ */ jsxs33(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && /* @__PURE__ */ jsx45(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx45(Text, { display: props.header.fontStyle, children: t3("Invoices") }) }),
-      invoices.length > 0 ? /* @__PURE__ */ jsxs33(Fragment18, { children: [
-        /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, amountDue, url }, index) => {
-          return /* @__PURE__ */ jsxs33(
+    ) : !isLoading && /* @__PURE__ */ jsx46(TransitionBox, { children: /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && /* @__PURE__ */ jsx46(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx46(Text, { display: props.header.fontStyle, children: t3("Invoices") }) }),
+      invoices.length > 0 ? /* @__PURE__ */ jsxs34(Fragment18, { children: [
+        /* @__PURE__ */ jsx46(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, amountDue, url }, index) => {
+          return /* @__PURE__ */ jsxs34(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               children: [
-                props.date.isVisible && /* @__PURE__ */ jsx45(
+                props.date.isVisible && /* @__PURE__ */ jsx46(
                   Text,
                   {
                     display: props.date.fontStyle,
@@ -21921,10 +22251,10 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
                     children: date
                   }
                 ),
-                props.amount.isVisible && /* @__PURE__ */ jsx45(
+                props.amount.isVisible && /* @__PURE__ */ jsx46(
                   Tooltip,
                   {
-                    trigger: /* @__PURE__ */ jsx45(Text, { display: props.amount.fontStyle, children: amount }),
+                    trigger: /* @__PURE__ */ jsx46(Text, { display: props.amount.fontStyle, children: amount }),
                     content: amountDue < 0 ? t3("Invoice credit tooltip") : t3("Invoice charge tooltip")
                   }
                 )
@@ -21933,15 +22263,15 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
             index
           );
         }) }),
-        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-          /* @__PURE__ */ jsx45(
+        props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs34(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          /* @__PURE__ */ jsx46(
             Icon3,
             {
               name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
               color: "#D0D0D0"
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46(
             Text,
             {
               onClick: toggleListSize,
@@ -21953,7 +22283,7 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsx45(Text, { display: "heading2", children: t3("No invoices created yet") })
+      ] }) : /* @__PURE__ */ jsx46(Text, { display: "heading2", children: t3("No invoices created yet") })
     ] }) })
   ] });
 });
@@ -21963,7 +22293,7 @@ Invoices.displayName = "Invoices";
 import { forwardRef as forwardRef12, useCallback as useCallback12, useMemo as useMemo22, useRef as useRef12, useState as useState17 } from "react";
 
 // src/components/elements/metered-features/Meter.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var Meter = ({ entitlement }) => {
   const { allocation, priceBehavior, softLimit, usage } = entitlement;
   const limit = softLimit ?? allocation;
@@ -21971,7 +22301,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__ */ jsx46(
+  const meter = /* @__PURE__ */ jsx47(
     ProgressBar,
     {
       progress,
@@ -21988,7 +22318,7 @@ var Meter = ({ entitlement }) => {
 };
 
 // src/components/elements/metered-features/PriceDetails.tsx
-import { Fragment as Fragment19, jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
 var PriceDetails = ({
   entitlement,
   usageDetails,
@@ -22015,7 +22345,7 @@ var PriceDetails = ({
   if (!feature || typeof currentTierPerUnitPrice !== "number") {
     return null;
   }
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     Flex,
     {
       $justifyContent: "space-between",
@@ -22029,28 +22359,28 @@ var PriceDetails = ({
         $borderBottomRightRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`
       },
       children: [
-        priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs34(Text, { children: [
+        priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs35(Text, { children: [
           t3("Additional"),
           ": ",
           formatCurrency(currentTierPerUnitPrice, currency),
-          /* @__PURE__ */ jsxs34(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ jsxs35(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ jsxs34(Fragment19, { children: [
+            packageSize > 1 && /* @__PURE__ */ jsxs35(Fragment19, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(feature, packageSize),
-            feature.featureType === FeatureType.Trait && period && /* @__PURE__ */ jsxs34(Fragment19, { children: [
+            feature.featureType === FeatureType.Trait && period && /* @__PURE__ */ jsxs35(Fragment19, { children: [
               "/",
               shortenPeriod(period)
             ] })
           ] })
-        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsxs34(Text, { children: [
+        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsxs35(Text, { children: [
           t3("Tier"),
           ": ",
           currentTier?.from || 1,
-          typeof currentTier?.to === "number" && (currentTier.from || 1) !== currentTier.to && /* @__PURE__ */ jsx47(Fragment19, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` }),
-          /* @__PURE__ */ jsx47(
+          typeof currentTier?.to === "number" && (currentTier.from || 1) !== currentTier.to && /* @__PURE__ */ jsx48(Fragment19, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` }),
+          /* @__PURE__ */ jsx48(
             PricingTiersTooltip,
             {
               period,
@@ -22061,19 +22391,19 @@ var PriceDetails = ({
             }
           )
         ] }),
-        typeof amount === "number" && /* @__PURE__ */ jsx47(Fragment19, { children: priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs34(Text, { children: [
+        typeof amount === "number" && /* @__PURE__ */ jsx48(Fragment19, { children: priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs35(Text, { children: [
           formatNumber(amount),
           " ",
           getFeatureName(feature, amount),
           " \xB7 ",
           formatCurrency(currentTierPerUnitPrice * amount, currency),
-          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs34(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs35(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
-        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && typeof cost === "number" && /* @__PURE__ */ jsxs34(Text, { children: [
+        ] }) : priceBehavior === EntitlementPriceBehavior.Tier && typeof cost === "number" && /* @__PURE__ */ jsxs35(Text, { children: [
           formatCurrency(cost, currency),
-          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs34(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+          feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs35(Box, { as: "sub", $whiteSpace: "nowrap", children: [
             "/",
             shortenPeriod(period)
           ] })
@@ -22101,7 +22431,7 @@ var Container2 = gt2.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment20, jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t3 } = useTranslation();
   const { data } = useEmbed();
@@ -22147,9 +22477,9 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
       })
     );
   }
-  return /* @__PURE__ */ jsxs35(Text, { display: fontStyle, children: [
+  return /* @__PURE__ */ jsxs36(Text, { display: fontStyle, children: [
     acc.join(" \u2022 "),
-    entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx48(
+    entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx49(
       HardLimitTooltip,
       {
         feature: entitlement.feature,
@@ -22227,7 +22557,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
   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__ */ jsxs35(Container2, { ref, className, children: [
+  return /* @__PURE__ */ jsxs36(Container2, { ref, className, children: [
     meteredFeatures.reduce((acc, entitlement, index) => {
       if (!entitlement.feature) {
         return acc;
@@ -22236,9 +22566,9 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
       const usageDetails = getUsageDetails(entitlement, period);
       const { limit } = usageDetails;
       acc.push(
-        /* @__PURE__ */ jsxs35(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
-          /* @__PURE__ */ jsxs35(Flex, { $gap: "1.5rem", children: [
-            props.icon.isVisible && /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsxs36(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
+          /* @__PURE__ */ jsxs36(Flex, { $gap: "1.5rem", children: [
+            props.icon.isVisible && /* @__PURE__ */ jsx49(
               Icon3,
               {
                 name: feature.icon,
@@ -22247,8 +22577,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                 rounded: true
               }
             ),
-            /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ jsxs35(
+            /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ jsxs36(
                 Flex,
                 {
                   ref: (el) => {
@@ -22259,31 +22589,31 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                   $flexWrap: "wrap",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                      /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: feature.name }) }),
-                      props.description.isVisible && feature.description && /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.description.fontStyle, children: feature.description }) })
+                    /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+                      /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.header.fontStyle, children: feature.name }) }),
+                      props.description.isVisible && feature.description && /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.description.fontStyle, children: feature.description }) })
                     ] }),
-                    /* @__PURE__ */ jsxs35(
+                    /* @__PURE__ */ jsxs36(
                       Box,
                       {
                         $flexBasis: "min-content",
                         $flexGrow: 1,
                         $textAlign: shouldWrapChildren ? "left" : "right",
                         children: [
-                          props.usage.isVisible && /* @__PURE__ */ jsx48(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx48(Text, { display: props.usage.fontStyle, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs35(Fragment20, { children: [
-                            typeof limit === "number" && /* @__PURE__ */ jsxs35(Fragment20, { children: [
+                          props.usage.isVisible && /* @__PURE__ */ jsx49(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx49(Text, { display: props.usage.fontStyle, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs36(Fragment20, { children: [
+                            typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment20, { children: [
                               formatNumber(limit),
                               " "
                             ] }),
                             getFeatureName(feature, limit)
-                          ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs35(Fragment20, { children: [
+                          ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs36(Fragment20, { children: [
                             formatNumber(usage),
                             " ",
                             getFeatureName(feature, usage),
                             " ",
                             t3("used")
                           ] }) }) }),
-                          props.allocation.isVisible && /* @__PURE__ */ jsx48(
+                          props.allocation.isVisible && /* @__PURE__ */ jsx49(
                             Limit,
                             {
                               entitlement,
@@ -22297,8 +22627,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                   ]
                 }
               ),
-              props.isVisible && priceBehavior !== EntitlementPriceBehavior.PayAsYouGo && priceBehavior !== EntitlementPriceBehavior.CreditBurndown && /* @__PURE__ */ jsx48(Meter, { entitlement }),
-              canCheckout && priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsx48(
+              props.isVisible && priceBehavior !== EntitlementPriceBehavior.PayAsYouGo && priceBehavior !== EntitlementPriceBehavior.CreditBurndown && /* @__PURE__ */ jsx49(Meter, { entitlement }),
+              canCheckout && priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsx49(
                 Button,
                 {
                   type: "button",
@@ -22311,7 +22641,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
               )
             ] })
           ] }),
-          (priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier) && /* @__PURE__ */ jsx48(
+          (priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier) && /* @__PURE__ */ jsx49(
             PriceDetails,
             {
               entitlement,
@@ -22325,9 +22655,9 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
     }, []),
     showCredits && creditGroups.map((credit, index) => {
       const isExpanded = creditVisibility.find(({ id }) => credit.id === id)?.isExpanded ?? false;
-      return /* @__PURE__ */ jsxs35(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
-        /* @__PURE__ */ jsxs35(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && /* @__PURE__ */ jsx48(
+      return /* @__PURE__ */ jsxs36(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
+        /* @__PURE__ */ jsxs36(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && /* @__PURE__ */ jsx49(
             Icon3,
             {
               name: credit.icon,
@@ -22336,13 +22666,13 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
               rounded: true
             }
           ),
-          /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ jsx48(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-              /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: credit.name }) }),
-              props.description.isVisible && credit.description && /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.description.fontStyle, children: credit.description }) })
+          /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+            /* @__PURE__ */ jsx49(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+              /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.header.fontStyle, children: credit.name }) }),
+              props.description.isVisible && credit.description && /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.description.fontStyle, children: credit.description }) })
             ] }) }),
-            /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
-              /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsxs36(Flex, { $gap: "1rem", children: [
+              /* @__PURE__ */ jsx49(
                 ProgressBar,
                 {
                   progress: credit.total.used / credit.total.value * 100,
@@ -22353,7 +22683,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                   )]
                 }
               ),
-              canCheckout && /* @__PURE__ */ jsx48(
+              canCheckout && /* @__PURE__ */ jsx49(
                 Button,
                 {
                   type: "button",
@@ -22368,12 +22698,12 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           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__ */ jsx48(
+            children: /* @__PURE__ */ jsx49(
               TransitionBox,
               {
                 $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0375)" : "hsla(0, 0%, 100%, 0.075)",
@@ -22381,19 +22711,19 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                 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__ */ jsx48(Box, { $display: "table-row", children: grant.grantReason === BillingCreditGrantReason.Plan ? /* @__PURE__ */ jsxs35(Fragment20, { children: [
-                    /* @__PURE__ */ jsx48(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx48(Text, { children: t3("X items included in plan", {
+                  return /* @__PURE__ */ jsx49(Box, { $display: "table-row", children: grant.grantReason === BillingCreditGrantReason.Plan ? /* @__PURE__ */ jsxs36(Fragment20, { children: [
+                    /* @__PURE__ */ jsx49(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx49(Text, { children: t3("X items included in plan", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, grant.quantity)
                     }) }) }),
-                    /* @__PURE__ */ jsx48(
+                    /* @__PURE__ */ jsx49(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ jsx48(Text, { children: t3("Resets", {
+                        children: grant.expiresAt && /* @__PURE__ */ jsx49(Text, { children: t3("Resets", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -22405,8 +22735,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                         }) })
                       }
                     )
-                  ] }) : /* @__PURE__ */ jsxs35(Fragment20, { children: [
-                    /* @__PURE__ */ jsx48(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx48(Text, { children: grant.grantReason === BillingCreditGrantReason.Purchased ? /* @__PURE__ */ jsx48(Fragment20, { children: t3("X item bundle", {
+                  ] }) : /* @__PURE__ */ jsxs36(Fragment20, { children: [
+                    /* @__PURE__ */ jsx49(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx49(Text, { children: grant.grantReason === BillingCreditGrantReason.Purchased ? /* @__PURE__ */ jsx49(Fragment20, { children: t3("X item bundle", {
                       amount: grant.quantity,
                       item: getFeatureName(credit, 1),
                       createdAt: toPrettyDate(grant.createdAt, {
@@ -22414,7 +22744,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                         month: "2-digit",
                         year: "2-digit"
                       })
-                    }) }) : grant.grantReason === BillingCreditGrantReason.BillingCreditAutoTopup ? /* @__PURE__ */ jsx48(Fragment20, { children: t3("X item auto-topup", {
+                    }) }) : grant.grantReason === BillingCreditGrantReason.BillingCreditAutoTopup ? /* @__PURE__ */ jsx49(Fragment20, { children: t3("X item auto-topup", {
                       amount: grant.quantity,
                       item: getFeatureName(
                         credit,
@@ -22425,7 +22755,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                         month: "2-digit",
                         year: "2-digit"
                       })
-                    }) }) : /* @__PURE__ */ jsx48(Fragment20, { children: t3("X item grant", {
+                    }) }) : /* @__PURE__ */ jsx49(Fragment20, { children: t3("X item grant", {
                       amount: grant.quantity,
                       item: getFeatureName(
                         credit,
@@ -22437,14 +22767,14 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                         year: "2-digit"
                       })
                     }) }) }) }),
-                    /* @__PURE__ */ jsx48(
+                    /* @__PURE__ */ jsx49(
                       Box,
                       {
                         $display: "table-cell",
                         $padding: padding,
                         $textAlign: "right",
                         $whiteSpace: "nowrap",
-                        children: grant.expiresAt && /* @__PURE__ */ jsx48(Text, { children: t3("Expires", {
+                        children: grant.expiresAt && /* @__PURE__ */ jsx49(Text, { children: t3("Expires", {
                           date: toPrettyDate(
                             modifyDate(grant.expiresAt, 1),
                             {
@@ -22462,8 +22792,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ jsxs35(Flex, { $gap: "0.25rem", children: [
-          /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsxs36(Flex, { $gap: "0.25rem", children: [
+          /* @__PURE__ */ jsx49(
             Icon3,
             {
               name: "chevron-down",
@@ -22474,7 +22804,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             Text,
             {
               onClick: () => toggleBalanceDetails(credit.id),
@@ -22494,7 +22824,7 @@ import { forwardRef as forwardRef13, useMemo as useMemo24 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 import { useMemo as useMemo23 } from "react";
-import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
   iconTitle,
@@ -22502,8 +22832,8 @@ var PaymentElement2 = ({
   paymentLast4
 }) => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ jsx50(
       Icon3,
       {
         name: iconName,
@@ -22511,15 +22841,15 @@ var PaymentElement2 = ({
         color: settings.theme.typography.text.color
       }
     ),
-    (label || paymentLast4) && /* @__PURE__ */ jsxs36(Box, { $flexGrow: 1, children: [
-      label && /* @__PURE__ */ jsx49(Text, { children: label }),
+    (label || paymentLast4) && /* @__PURE__ */ jsxs37(Box, { $flexGrow: 1, children: [
+      label && /* @__PURE__ */ jsx50(Text, { children: label }),
       " ",
-      paymentLast4 && /* @__PURE__ */ jsx49(Text, { children: paymentLast4 })
+      paymentLast4 && /* @__PURE__ */ jsx50(Text, { children: paymentLast4 })
     ] })
   ] });
 };
 var EmptyPaymentElement = () => {
-  return /* @__PURE__ */ jsx49(Text, { children: /* @__PURE__ */ jsx49(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx49(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx49(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
+  return /* @__PURE__ */ jsx50(Text, { children: /* @__PURE__ */ jsx50(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx50(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx50(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -22585,12 +22915,12 @@ var PaymentMethodElement = ({
   const { t: t3 } = useTranslation();
   const isLightBackground = useIsLightBackground();
   const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
-  return /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ jsxs36(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx49(Text, { display: props.header.fontStyle, children: t3("Payment Method") }),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx49(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t3("Expires in X months", { months: monthsToExpiration }) : t3("Expired") })
+  return /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ jsxs37(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ jsx50(Text, { display: props.header.fontStyle, children: t3("Payment Method") }),
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx50(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t3("Expires in X months", { months: monthsToExpiration }) : t3("Expired") })
     ] }),
-    /* @__PURE__ */ jsxs36(
+    /* @__PURE__ */ jsxs37(
       Flex,
       {
         $justifyContent: "space-between",
@@ -22599,8 +22929,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod ? /* @__PURE__ */ jsx49(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx49(EmptyPaymentElement, {}),
-          onRemove && /* @__PURE__ */ jsx49(
+          paymentMethod ? /* @__PURE__ */ jsx50(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx50(EmptyPaymentElement, {}),
+          onRemove && /* @__PURE__ */ jsx50(
             Text,
             {
               onClick: onRemove,
@@ -22610,7 +22940,7 @@ var PaymentMethodElement = ({
               children: t3("Remove")
             }
           ),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx49(
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx50(
             Text,
             {
               onClick: onEdit,
@@ -22644,7 +22974,7 @@ var PaymentListElement = ({
     }
     return `${cardExpMonth}/${formatedYear}`;
   }, [paymentMethod]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     Flex,
     {
       $flexDirection: "row",
@@ -22656,7 +22986,7 @@ var PaymentListElement = ({
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
       children: [
-        iconName && /* @__PURE__ */ jsx49(
+        iconName && /* @__PURE__ */ jsx50(
           Icon3,
           {
             name: iconName,
@@ -22664,20 +22994,20 @@ var PaymentListElement = ({
             color: settings.theme.typography.text.color
           }
         ),
-        (label || paymentLast4) && /* @__PURE__ */ jsxs36(Box, { $flexGrow: 1, children: [
-          label && /* @__PURE__ */ jsx49(Text, { children: label }),
+        (label || paymentLast4) && /* @__PURE__ */ jsxs37(Box, { $flexGrow: 1, children: [
+          label && /* @__PURE__ */ jsx50(Text, { children: label }),
           " ",
-          paymentLast4 && /* @__PURE__ */ jsx49(Text, { children: paymentLast4 })
+          paymentLast4 && /* @__PURE__ */ jsx50(Text, { children: paymentLast4 })
         ] }),
-        expirationDate && /* @__PURE__ */ jsx49(
+        expirationDate && /* @__PURE__ */ jsx50(
           Box,
           {
             $flexGrow: 1,
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ jsx49(Text, { children: t("Expires", { date: expirationDate }) })
+            children: /* @__PURE__ */ jsx50(Text, { children: t("Expires", { date: expirationDate }) })
           }
         ),
-        /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(Box, { children: /* @__PURE__ */ jsx50(
           Text,
           {
             onClick: () => {
@@ -22690,7 +23020,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           Icon3,
           {
             tabIndex: 0,
@@ -22712,7 +23042,7 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -22747,7 +23077,7 @@ var PaymentMethod = forwardRef13(({ children, className, portal, allowEdit = tru
       monthsToExpiration: monthsToExpiration2
     };
   }, [data?.company?.defaultPaymentMethod, data?.subscription?.paymentMethod]);
-  return /* @__PURE__ */ jsx50(Element, { ref, className, children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(Element, { ref, className, children: /* @__PURE__ */ jsx51(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -22816,7 +23146,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.6.0",
+    version: "9.7.0",
     startTime
   });
 };
@@ -22894,7 +23224,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);
@@ -22932,7 +23262,7 @@ var loadStripe = function loadStripe2() {
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 import { useCallback as useCallback13, useEffect as useEffect7, useMemo as useMemo25, useState as useState18 } from "react";
-import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -23104,7 +23434,7 @@ var PaymentMethodDetails = ({
     showPaymentForm,
     initializePaymentMethod
   ]);
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     Flex,
     {
       $position: "relative",
@@ -23112,7 +23442,7 @@ var PaymentMethodDetails = ({
       $flexGrow: 1,
       $gap: "1.5rem",
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           Flex,
           {
             $position: "absolute",
@@ -23121,7 +23451,7 @@ var PaymentMethodDetails = ({
             $alignItems: "center",
             $width: "100%",
             $height: "100%",
-            children: /* @__PURE__ */ jsx51(
+            children: /* @__PURE__ */ jsx52(
               Loader,
               {
                 $color: settings.theme.primary,
@@ -23131,7 +23461,7 @@ var PaymentMethodDetails = ({
             )
           }
         ),
-        /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsxs38(
           Flex,
           {
             $zIndex: isLoading || isConfirmingPayment ? 0 : 1,
@@ -23148,7 +23478,7 @@ var PaymentMethodDetails = ({
               }
             },
             children: [
-              setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ jsxs37(
+              setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ jsxs38(
                 Elements,
                 {
                   stripe,
@@ -23178,7 +23508,7 @@ var PaymentMethodDetails = ({
                     clientSecret: setupIntent?.setupIntentClientSecret
                   },
                   children: [
-                    /* @__PURE__ */ jsx51(
+                    /* @__PURE__ */ jsx52(
                       PaymentForm,
                       {
                         financeData,
@@ -23189,7 +23519,7 @@ var PaymentMethodDetails = ({
                         }
                       }
                     ),
-                    currentPaymentMethod && /* @__PURE__ */ jsx51(Box, { children: /* @__PURE__ */ jsx51(
+                    currentPaymentMethod && /* @__PURE__ */ jsx52(Box, { children: /* @__PURE__ */ jsx52(
                       Text,
                       {
                         onClick: focusExistingPaymentMethods,
@@ -23202,8 +23532,8 @@ var PaymentMethodDetails = ({
                     ) })
                   ]
                 }
-              ) : /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-                /* @__PURE__ */ jsx51(
+              ) : /* @__PURE__ */ jsxs38(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+                /* @__PURE__ */ jsx52(
                   PaymentMethodElement,
                   {
                     paymentMethod: currentPaymentMethod,
@@ -23216,8 +23546,8 @@ var PaymentMethodDetails = ({
                     ...props
                   }
                 ),
-                paymentMethods.length > 0 && /* @__PURE__ */ jsxs37(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ jsx51(
+                paymentMethods.length > 0 && /* @__PURE__ */ jsxs38(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ jsx52(
                     Text,
                     {
                       onClick: toggleShowPaymentMethods,
@@ -23228,7 +23558,7 @@ var PaymentMethodDetails = ({
                       children: t3("Choose different payment method")
                     }
                   ),
-                  /* @__PURE__ */ jsx51(
+                  /* @__PURE__ */ jsx52(
                     Icon3,
                     {
                       name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down",
@@ -23236,10 +23566,10 @@ var PaymentMethodDetails = ({
                     }
                   )
                 ] }),
-                showDifferentPaymentMethods && /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
-                  paymentMethods.length > 1 && /* @__PURE__ */ jsx51(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
+                showDifferentPaymentMethods && /* @__PURE__ */ jsxs38(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
+                  paymentMethods.length > 1 && /* @__PURE__ */ jsx52(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
                     (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
-                  ) || []).map((paymentMethod) => /* @__PURE__ */ jsx51(
+                  ) || []).map((paymentMethod) => /* @__PURE__ */ jsx52(
                     PaymentListElement,
                     {
                       paymentMethod,
@@ -23248,7 +23578,7 @@ var PaymentMethodDetails = ({
                     },
                     paymentMethod.id
                   )) }),
-                  /* @__PURE__ */ jsx51(
+                  /* @__PURE__ */ jsx52(
                     Button,
                     {
                       type: "button",
@@ -23263,7 +23593,7 @@ var PaymentMethodDetails = ({
                   )
                 ] })
               ] }),
-              !isLoading && error && /* @__PURE__ */ jsx51(Box, { children: /* @__PURE__ */ jsx51(Text, { $weight: 500, $color: "#DB6669", children: error }) })
+              !isLoading && error && /* @__PURE__ */ jsx52(Box, { children: /* @__PURE__ */ jsx52(Text, { $weight: 500, $color: "#DB6669", children: error }) })
             ]
           }
         )
@@ -23276,10 +23606,10 @@ var PaymentMethodDetails = ({
 import { forwardRef as forwardRef14, useMemo as useMemo27 } from "react";
 
 // src/components/elements/plan-manager/AddOn.tsx
-import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
 var AddOn = ({ addOn, currency, period, layout }) => {
   const resolvedPeriod = addOn.planPeriod === "one-time" ? addOn.planPeriod : period ?? addOn.planPeriod;
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     Flex,
     {
       $justifyContent: "space-between",
@@ -23287,10 +23617,10 @@ var AddOn = ({ addOn, currency, period, layout }) => {
       $flexWrap: "wrap",
       $gap: "1rem",
       children: [
-        /* @__PURE__ */ jsx52(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ jsxs38(Text, { children: [
+        /* @__PURE__ */ jsx53(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
+        typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ jsxs39(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ jsx52("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
+          /* @__PURE__ */ jsx53("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
         ] })
       ]
     }
@@ -23299,7 +23629,7 @@ var AddOn = ({ addOn, currency, period, layout }) => {
 
 // src/components/elements/plan-manager/UsageDetails.tsx
 import { Fragment as Fragment21, useMemo as useMemo26 } from "react";
-import { Fragment as Fragment22, jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 var UsageDetails2 = ({
   entitlement,
   period,
@@ -23321,30 +23651,30 @@ var UsageDetails2 = ({
     const acc = [];
     let index = 0;
     if (entitlement.priceBehavior === EntitlementPriceBehavior.Overage) {
-      acc.push(/* @__PURE__ */ jsxs39(Fragment21, { children: [
+      acc.push(/* @__PURE__ */ jsxs40(Fragment21, { children: [
         t3("Additional"),
         ": "
       ] }, index));
       index += 1;
     }
     if (entitlement.priceBehavior === EntitlementPriceBehavior.Tier) {
-      acc.push(/* @__PURE__ */ jsx53(Fragment21, { children: t3("Tier-based") }, index));
+      acc.push(/* @__PURE__ */ jsx54(Fragment21, { 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__ */ jsxs39(Fragment21, { children: [
+        /* @__PURE__ */ jsxs40(Fragment21, { children: [
           formatCurrency(price, billingPrice?.currency),
-          /* @__PURE__ */ jsxs39("sub", { children: [
+          /* @__PURE__ */ jsxs40("sub", { children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ jsxs39(Fragment22, { children: [
+            packageSize > 1 && /* @__PURE__ */ jsxs40(Fragment22, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(entitlement.feature, packageSize),
-            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs39(Fragment22, { children: [
+            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs40(Fragment22, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -23355,7 +23685,7 @@ var UsageDetails2 = ({
     }
     if (showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
       acc.push(
-        /* @__PURE__ */ jsxs39(Fragment21, { children: [
+        /* @__PURE__ */ jsxs40(Fragment21, { children: [
           entitlement.planEntitlement.consumptionRate,
           " ",
           getFeatureName(
@@ -23383,7 +23713,7 @@ var UsageDetails2 = ({
     return null;
   }
   const quantity = entitlement.priceBehavior !== EntitlementPriceBehavior.CreditBurndown ? limit : void 0;
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     Flex,
     {
       $justifyContent: "space-between",
@@ -23391,13 +23721,13 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ jsx53(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" ? /* @__PURE__ */ jsxs39(Fragment22, { children: [
+        /* @__PURE__ */ jsx54(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" ? /* @__PURE__ */ jsxs40(Fragment22, { children: [
           quantity,
           " ",
           getFeatureName(entitlement.feature, quantity, true)
         ] }) : entitlement.feature.name }),
-        /* @__PURE__ */ jsxs39(Text, { children: [
-          description.length > 0 && /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs40(Text, { children: [
+          description.length > 0 && /* @__PURE__ */ jsx54(
             Text,
             {
               style: { opacity: 0.54 },
@@ -23408,15 +23738,15 @@ var UsageDetails2 = ({
           ),
           // only show cost for pay-in-advance entitlements
           // `description` will include price for other price behaviors
-          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs39(Fragment22, { children: [
+          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs40(Fragment22, { children: [
             " ",
             formatCurrency(cost, billingPrice?.currency),
-            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs39("sub", { children: [
+            entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs40("sub", { children: [
               "/",
               shortenPeriod(period)
             ] })
           ] }),
-          entitlement.priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsx53(
+          entitlement.priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsx54(
             PricingTiersTooltip,
             {
               feature: entitlement.feature,
@@ -23426,7 +23756,7 @@ var UsageDetails2 = ({
               tiersMode: billingPrice?.tiersMode ?? void 0
             }
           ),
-          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx53(
+          entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx54(
             HardLimitTooltip,
             {
               feature: entitlement.feature,
@@ -23440,7 +23770,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { Fragment as Fragment23, jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -23562,8 +23892,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
   const hasAutoTopupSelfService = currentPlan?.includedCreditGrants.some((grant) => {
     return grant.billingCreditAutoTopupSelfService;
   }) ?? false;
-  return /* @__PURE__ */ jsxs40(Fragment23, { children: [
-    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(Fragment23, { children: [
+    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs41(
       Notice,
       {
         as: Flex,
@@ -23573,8 +23903,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          typeof trialEnd.endDate !== "undefined" && /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: t3("Trial ends in", trialEnd) }),
-          (trialPaymentMethodRequired || postTrialPlan || currentPlan) && /* @__PURE__ */ jsx54(
+          typeof trialEnd.endDate !== "undefined" && /* @__PURE__ */ jsx55(Text, { as: "h3", display: "heading3", children: t3("Trial ends in", trialEnd) }),
+          (trialPaymentMethodRequired || postTrialPlan || currentPlan) && /* @__PURE__ */ jsx55(
             Text,
             {
               as: "p",
@@ -23588,7 +23918,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
           )
         ]
       }
-    ) : willSubscriptionCancel ? /* @__PURE__ */ jsxs40(
+    ) : willSubscriptionCancel ? /* @__PURE__ */ jsxs41(
       Notice,
       {
         as: Flex,
@@ -23598,8 +23928,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: t3("Subscription canceled") }),
-          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx55(Text, { as: "h3", display: "heading3", children: t3("Subscription canceled") }),
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx55(
             Text,
             {
               as: "p",
@@ -23617,7 +23947,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
           )
         ]
       }
-    ) : customPlanBilling ? /* @__PURE__ */ jsxs40(
+    ) : customPlanBilling ? /* @__PURE__ */ jsxs41(
       Notice,
       {
         as: Flex,
@@ -23627,7 +23957,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment", {
+          /* @__PURE__ */ jsx55(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"),
@@ -23635,7 +23965,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               month: "numeric"
             })
           }) }),
-          /* @__PURE__ */ jsx54(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment description", {
+          /* @__PURE__ */ jsx55(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"
             })
@@ -23645,7 +23975,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               month: "numeric"
             })
           }) }),
-          customPlanBilling.billing.stripeInvoiceUrl && /* @__PURE__ */ jsx54(
+          customPlanBilling.billing.stripeInvoiceUrl && /* @__PURE__ */ jsx55(
             Button,
             {
               as: "a",
@@ -23659,7 +23989,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
           )
         ]
       }
-    ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ jsxs40(
+    ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ jsxs41(
       Notice,
       {
         as: Flex,
@@ -23669,10 +23999,10 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: t3("Downgrade to plan scheduled", {
+          /* @__PURE__ */ jsx55(Text, { as: "h3", display: "heading3", children: t3("Downgrade to plan scheduled", {
             plan: data.company.scheduledDowngrade.toPlanName
           }) }),
-          typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ jsx54(
+          typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ jsx55(
             Text,
             {
               as: "p",
@@ -23691,7 +24021,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
         ]
       }
     ),
-    /* @__PURE__ */ jsxs40(
+    /* @__PURE__ */ jsxs41(
       Element,
       {
         as: Flex,
@@ -23700,19 +24030,19 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs40(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs41(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx54(Text, { display: props.header.title.fontStyle, $leading: "none", children: currentPlan.name }),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx54(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
+                /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ jsx55(Text, { display: props.header.title.fontStyle, $leading: "none", children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx55(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsxs40(Box, { children: [
-                  /* @__PURE__ */ jsx54(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsxs41(Box, { children: [
+                  /* @__PURE__ */ jsx55(
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -23722,7 +24052,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isFreePlan && currentPlanPeriod && /* @__PURE__ */ jsx54(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs40("sub", { children: [
+                  !isFreePlan && currentPlanPeriod && /* @__PURE__ */ jsx55(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs41("sub", { children: [
                     "/",
                     shortenPeriod(currentPlanPeriod)
                   ] }) })
@@ -23730,8 +24060,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               ]
             }
           ),
-          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx54(
+          props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx55(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23739,7 +24069,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 children: t3("Add-ons")
               }
             ),
-            /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx55(
               AddOn,
               {
                 addOn,
@@ -23750,8 +24080,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               addOnIndex
             )) })
           ] }),
-          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx54(
+          props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx55(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23759,8 +24089,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 children: t3("Usage-based")
               }
             ),
-            /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
-              return /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
+              return /* @__PURE__ */ jsx55(
                 UsageDetails2,
                 {
                   entitlement,
@@ -23773,8 +24103,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               );
             }) })
           ] }),
-          props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx54(
+          props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx55(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23782,19 +24112,19 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 children: t3("Credits in plan")
               }
             ),
-            /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+            /* @__PURE__ */ jsx55(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__ */ jsx54(
+              return /* @__PURE__ */ jsx55(
                 Flex,
                 {
                   $flexDirection: "column",
                   $gap: "0.25rem",
-                  children: /* @__PURE__ */ jsxs40(
+                  children: /* @__PURE__ */ jsxs41(
                     Flex,
                     {
                       $justifyContent: "space-between",
@@ -23802,18 +24132,18 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                       $flexWrap: "wrap",
                       $gap: "0.5rem",
                       children: [
-                        /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
+                        /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
                           group.quantity,
                           " ",
                           getFeatureName(group, group.quantity),
                           " ",
-                          subscriptionInterval && /* @__PURE__ */ jsxs40(Fragment23, { children: [
+                          subscriptionInterval && /* @__PURE__ */ jsxs41(Fragment23, { children: [
                             t3("per"),
                             " ",
                             t3(subscriptionInterval)
                           ] })
                         ] }),
-                        group.total.used > 0 && /* @__PURE__ */ jsx54(Flex, { $alignItems: "baseline", children: /* @__PURE__ */ jsxs40(
+                        group.total.used > 0 && /* @__PURE__ */ jsx55(Flex, { $alignItems: "baseline", children: /* @__PURE__ */ jsxs41(
                           Text,
                           {
                             style: { opacity: 0.54 },
@@ -23823,7 +24153,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                               group.total.used,
                               " ",
                               t3("used"),
-                              hasAutoTopup && planCreditGrant && /* @__PURE__ */ jsx54(
+                              hasAutoTopup && planCreditGrant && /* @__PURE__ */ jsx55(
                                 AutoTopupNotice,
                                 {
                                   thresholdCredits,
@@ -23840,7 +24170,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 groupIndex
               );
             }) }),
-            hasAutoTopupSelfService && /* @__PURE__ */ jsxs40(
+            hasAutoTopupSelfService && /* @__PURE__ */ jsxs41(
               Flex,
               {
                 $justifyContent: "space-between",
@@ -23850,8 +24180,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
                 $borderRadius: "0.5rem",
                 children: [
-                  /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                    /* @__PURE__ */ jsx54(Text, { display: props.addOns.fontStyle, children: t3("Auto top-up") }),
+                  /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                    /* @__PURE__ */ jsx55(Text, { display: props.addOns.fontStyle, children: t3("Auto top-up") }),
                     currentPlan?.includedCreditGrants.reduce(
                       (acc, grant) => {
                         if (!grant.credit || !grant.billingCreditAutoTopupSelfService) {
@@ -23860,7 +24190,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                         const autoTopupEnabled = grant.companyAutoTopupEnabled ?? false;
                         if (!autoTopupEnabled) {
                           acc.push(
-                            /* @__PURE__ */ jsx54(Text, { $leading: "tight", children: t3("Auto top-up disabled for token", {
+                            /* @__PURE__ */ jsx55(Text, { $leading: "tight", children: t3("Auto top-up disabled for token", {
                               unit: getFeatureName(grant.credit, 1)
                             }) }, grant.id)
                           );
@@ -23870,7 +24200,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                         const autoTopupAmount = getAutoTopupAmount(grant);
                         if (typeof autoTopupThresholdCredits === "number" && typeof autoTopupAmount === "number") {
                           acc.push(
-                            /* @__PURE__ */ jsx54(Text, { $leading: "tight", children: t3("Adds X tokens when Y remaining in balance", {
+                            /* @__PURE__ */ jsx55(Text, { $leading: "tight", children: t3("Adds X tokens when Y remaining in balance", {
                               unit: getFeatureName(
                                 grant.credit,
                                 autoTopupAmount
@@ -23885,7 +24215,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                       []
                     )
                   ] }),
-                  /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx55(
                     Button,
                     {
                       type: "button",
@@ -23902,8 +24232,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               }
             )
           ] }),
-          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx54(
+          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx55(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23911,9 +24241,9 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 children: t3("Credit bundles")
               }
             ),
-            /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+            /* @__PURE__ */ jsx55(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__ */ jsxs40(
+              return /* @__PURE__ */ jsxs41(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -23921,8 +24251,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                   $flexWrap: "wrap",
                   $gap: "0.5rem",
                   children: [
-                    bundle ? /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
-                      group.grants.length > 1 && /* @__PURE__ */ jsxs40(Text, { style: { opacity: 0.5 }, children: [
+                    bundle ? /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
+                      group.grants.length > 1 && /* @__PURE__ */ jsxs41(Text, { style: { opacity: 0.5 }, children: [
                         "(",
                         group.grants.length,
                         ")",
@@ -23934,12 +24264,12 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                       " ",
                       getFeatureName(group, group.quantity),
                       ")"
-                    ] }) : /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
+                    ] }) : /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
                       group.quantity,
                       " ",
                       getFeatureName(group, group.quantity)
                     ] }),
-                    group.total.used > 0 && /* @__PURE__ */ jsxs40(
+                    group.total.used > 0 && /* @__PURE__ */ jsxs41(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -23958,8 +24288,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx54(
+          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx55(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23967,8 +24297,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 children: t3("Promotional credits")
               }
             ),
-            /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
-              return /* @__PURE__ */ jsxs40(
+            /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+              return /* @__PURE__ */ jsxs41(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -23976,12 +24306,12 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                   $flexWrap: "wrap",
                   $gap: "0.5rem",
                   children: [
-                    /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
+                    /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
                       group.quantity,
                       " ",
                       getFeatureName(group, group.quantity)
                     ] }),
-                    group.total.used > 0 && /* @__PURE__ */ jsxs40(
+                    group.total.used > 0 && /* @__PURE__ */ jsxs41(
                       Text,
                       {
                         style: { opacity: 0.54 },
@@ -24000,7 +24330,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               );
             }) })
           ] }),
-          canCheckout && props.callToAction.isVisible && !customPlanBilling?.isAwaitingActivation && /* @__PURE__ */ jsx54(
+          canCheckout && props.callToAction.isVisible && !customPlanBilling?.isAwaitingActivation && /* @__PURE__ */ jsx55(
             Button,
             {
               type: "button",
@@ -24032,7 +24362,7 @@ import {
 
 // src/components/elements/pricing-table/AddOn.tsx
 import { useMemo as useMemo28 } from "react";
-import { Fragment as Fragment24, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
 function renderMeteredEntitlementPricing2({
   priceBehavior,
   softLimit,
@@ -24044,7 +24374,7 @@ function renderMeteredEntitlementPricing2({
   isTiered
 }) {
   if (priceBehavior === EntitlementPriceBehavior.Overage && softLimit) {
-    return /* @__PURE__ */ jsxs41(Fragment24, { children: [
+    return /* @__PURE__ */ jsxs42(Fragment24, { children: [
       "Additional: ",
       formatCurrency(price, currency),
       "/",
@@ -24055,13 +24385,13 @@ function renderMeteredEntitlementPricing2({
     ] });
   }
   if (isTiered) {
-    return /* @__PURE__ */ jsx55(Fragment24, { children: "Tier-based pricing" });
+    return /* @__PURE__ */ jsx56(Fragment24, { children: "Tier-based pricing" });
   }
   if (priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.PayInAdvance) {
-    return /* @__PURE__ */ jsxs41(Fragment24, { children: [
+    return /* @__PURE__ */ jsxs42(Fragment24, { children: [
       formatCurrency(price, currency),
       "/",
-      packageSize > 1 && /* @__PURE__ */ jsxs41(Fragment24, { children: [
+      packageSize > 1 && /* @__PURE__ */ jsxs42(Fragment24, { children: [
         packageSize,
         " "
       ] }),
@@ -24125,7 +24455,7 @@ var AddOn2 = ({
       isTiered: entitlement.priceBehavior === EntitlementPriceBehavior.Tier || isTieredPrice(priceData)
     };
   }) || [];
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     Flex,
     {
       as: "li",
@@ -24145,7 +24475,7 @@ var AddOn2 = ({
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ jsxs41(
+        /* @__PURE__ */ jsxs42(
           Flex,
           {
             $flexDirection: "column",
@@ -24156,7 +24486,7 @@ var AddOn2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ jsx55(Box, { children: /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56(Box, { children: /* @__PURE__ */ jsx56(
                 Text,
                 {
                   as: "h3",
@@ -24165,22 +24495,22 @@ var AddOn2 = ({
                   children: addOn.name
                 }
               ) }),
-              layout.addOns.showDescription && /* @__PURE__ */ jsx55(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx55(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-              /* @__PURE__ */ jsx55(Box, { children: /* @__PURE__ */ jsx55(
+              layout.addOns.showDescription && /* @__PURE__ */ jsx56(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx56(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+              /* @__PURE__ */ jsx56(Box, { children: /* @__PURE__ */ jsx56(
                 Text,
                 {
                   "data-testid": "sch-addon-price",
                   display: layout.plans.name.fontStyle,
-                  children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t3("Usage-based") : /* @__PURE__ */ jsxs41(Fragment24, { children: [
+                  children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t3("Usage-based") : /* @__PURE__ */ jsxs42(Fragment24, { children: [
                     formatCurrency(addOnPrice ?? 0, addOnCurrency),
-                    /* @__PURE__ */ jsxs41("sub", { children: [
+                    /* @__PURE__ */ jsxs42("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
                   ] })
                 }
               ) }),
-              isActiveAddOn && /* @__PURE__ */ jsx55(
+              isActiveAddOn && /* @__PURE__ */ jsx56(
                 Flex,
                 {
                   "data-testid": "sch-addon-active",
@@ -24190,7 +24520,7 @@ var AddOn2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ jsx55(
+                  children: /* @__PURE__ */ jsx56(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -24203,7 +24533,7 @@ var AddOn2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs41(
+        /* @__PURE__ */ jsxs42(
           Flex,
           {
             $flexDirection: "column",
@@ -24212,7 +24542,7 @@ var AddOn2 = ({
             $flexGrow: 1,
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ jsx55(
+              layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ jsx56(
                 Flex,
                 {
                   as: "ul",
@@ -24224,7 +24554,7 @@ var AddOn2 = ({
                   $listStyle: "none",
                   children: displayableEntitlements.map((entitlement, idx) => {
                     if (entitlement.isUnlimited) {
-                      return /* @__PURE__ */ jsxs41(
+                      return /* @__PURE__ */ jsxs42(
                         Flex,
                         {
                           as: "li",
@@ -24233,8 +24563,8 @@ var AddOn2 = ({
                           $alignItems: "center",
                           $gap: "1rem",
                           children: [
-                            /* @__PURE__ */ jsxs41(Flex, { $gap: "1rem", children: [
-                              layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx55(
+                            /* @__PURE__ */ jsxs42(Flex, { $gap: "1rem", children: [
+                              layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx56(
                                 Icon3,
                                 {
                                   name: entitlement.feature.icon,
@@ -24243,16 +24573,16 @@ var AddOn2 = ({
                                   rounded: true
                                 }
                               ),
-                              entitlement.feature && /* @__PURE__ */ jsx55(
+                              entitlement.feature && /* @__PURE__ */ jsx56(
                                 Flex,
                                 {
                                   $flexDirection: "column",
                                   $justifyContent: "center",
-                                  children: /* @__PURE__ */ jsx55(Text, { children: getFeatureName(entitlement.feature) })
+                                  children: /* @__PURE__ */ jsx56(Text, { children: getFeatureName(entitlement.feature) })
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsx55(
+                            /* @__PURE__ */ jsx56(
                               Text,
                               {
                                 style: { opacity: 0.54 },
@@ -24267,7 +24597,7 @@ var AddOn2 = ({
                       );
                     }
                     const meteredEntitlement = entitlement;
-                    return /* @__PURE__ */ jsxs41(
+                    return /* @__PURE__ */ jsxs42(
                       Flex,
                       {
                         as: "li",
@@ -24277,8 +24607,8 @@ var AddOn2 = ({
                         $gap: "1rem",
                         $listStyle: "none",
                         children: [
-                          /* @__PURE__ */ jsxs41(Flex, { $gap: "1rem", children: [
-                            meteredEntitlement.feature?.icon && /* @__PURE__ */ jsx55(
+                          /* @__PURE__ */ jsxs42(Flex, { $gap: "1rem", children: [
+                            meteredEntitlement.feature?.icon && /* @__PURE__ */ jsx56(
                               Icon3,
                               {
                                 "data-testid": "sch-feature-icon",
@@ -24288,9 +24618,9 @@ var AddOn2 = ({
                                 rounded: true
                               }
                             ),
-                            /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ jsx55(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
+                            /* @__PURE__ */ jsx56(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ jsx56(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
                           ] }),
-                          /* @__PURE__ */ jsx55(
+                          /* @__PURE__ */ jsx56(
                             Text,
                             {
                               style: { opacity: 0.54 },
@@ -24306,7 +24636,7 @@ var AddOn2 = ({
                   })
                 }
               ),
-              sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ jsx55(
+              sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx56(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ jsx56(
                 Button,
                 {
                   type: "button",
@@ -24348,7 +24678,7 @@ var AddOn2 = ({
 import { useState as useState19 } from "react";
 
 // src/components/elements/pricing-table/Entitlement.tsx
-import { Fragment as Fragment25, jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 var Entitlement2 = ({
   entitlement,
   sharedProps,
@@ -24380,8 +24710,8 @@ var Entitlement2 = ({
     entitlement,
     credits
   );
-  return /* @__PURE__ */ jsxs42(Flex, { as: "li", $gap: "1rem", style: { listStyle: "none" }, children: [
-    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs43(Flex, { as: "li", $gap: "1rem", style: { listStyle: "none" }, children: [
+    layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx57(
       Icon3,
       {
         "data-testid": "sch-feature-icon",
@@ -24391,31 +24721,31 @@ var Entitlement2 = ({
         rounded: true
       }
     ),
-    entitlement.feature?.name && /* @__PURE__ */ jsxs42(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsxs42(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ jsx56(Text, { children: typeof entitlementPrice === "number" && !tiered && (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance || entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo) ? /* @__PURE__ */ jsxs42(Fragment25, { children: [
+    entitlement.feature?.name && /* @__PURE__ */ jsxs43(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+      /* @__PURE__ */ jsxs43(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
+        /* @__PURE__ */ jsx57(Text, { children: typeof entitlementPrice === "number" && !tiered && (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance || entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo) ? /* @__PURE__ */ jsxs43(Fragment25, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t3("per"),
           " ",
-          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs42(Fragment25, { children: [
+          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs43(Fragment25, { children: [
             formatNumber(entitlementPackageSize),
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
-          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs42(Fragment25, { children: [
+          entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs43(Fragment25, { children: [
             " ",
             t3("per"),
             " ",
             selectedPeriod
           ] })
-        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered ? /* @__PURE__ */ jsx56(
+        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered ? /* @__PURE__ */ jsx57(
           TieredPricingDetails,
           {
             entitlement,
             period: selectedPeriod
           }
-        ) : showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs42(Fragment25, { children: [
+        ) : showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs43(Fragment25, { children: [
           formatNumber(entitlement.consumptionRate),
           " ",
           getFeatureName(
@@ -24426,7 +24756,7 @@ var Entitlement2 = ({
           t3("per"),
           " ",
           getFeatureName(entitlement.feature, 1)
-        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx56(Fragment25, { children: creditBasedEntitlementLimit?.period ? t3("Up to X units per period", {
+        ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx57(Fragment25, { children: creditBasedEntitlementLimit?.period ? t3("Up to X units per period", {
           amount: formatNumber(creditBasedEntitlementLimit.limit),
           units: getFeatureName(
             entitlement.feature,
@@ -24439,25 +24769,25 @@ var Entitlement2 = ({
             entitlement.feature,
             creditBasedEntitlementLimit.limit
           )
-        }) }) : entitlement.valueType === EntitlementValueType.Numeric || entitlement.valueType === EntitlementValueType.Unlimited || entitlement.valueType === EntitlementValueType.Trait ? /* @__PURE__ */ jsxs42(Fragment25, { children: [
+        }) }) : entitlement.valueType === EntitlementValueType.Numeric || entitlement.valueType === EntitlementValueType.Unlimited || entitlement.valueType === EntitlementValueType.Trait ? /* @__PURE__ */ jsxs43(Fragment25, { children: [
           entitlement.valueType === EntitlementValueType.Unlimited && !entitlement.priceBehavior ? t3("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : /* @__PURE__ */ jsxs42(Fragment25, { children: [
-            typeof limit === "number" && /* @__PURE__ */ jsxs42(Fragment25, { children: [
+          }) : /* @__PURE__ */ jsxs43(Fragment25, { children: [
+            typeof limit === "number" && /* @__PURE__ */ jsxs43(Fragment25, { children: [
               formatNumber(limit),
               " "
             ] }),
             getFeatureName(entitlement.feature, limit)
           ] }),
-          metricPeriodName && /* @__PURE__ */ jsxs42(Fragment25, { children: [
+          metricPeriodName && /* @__PURE__ */ jsxs43(Fragment25, { children: [
             " ",
             t3("per"),
             " ",
             t3(metricPeriodName)
           ] })
         ] }) : entitlement.feature.name }),
-        /* @__PURE__ */ jsxs42(Text, { children: [
-          entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsx56(Fragment25, { children: /* @__PURE__ */ jsxs42(
+        /* @__PURE__ */ jsxs43(Text, { children: [
+          entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsx57(Fragment25, { children: /* @__PURE__ */ jsxs43(
             Text,
             {
               $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -24467,7 +24797,7 @@ var Entitlement2 = ({
                 " ",
                 formatCurrency(entitlementPrice, entitlementCurrency),
                 "/",
-                entitlementPackageSize > 1 && /* @__PURE__ */ jsxs42(Fragment25, { children: [
+                entitlementPackageSize > 1 && /* @__PURE__ */ jsxs43(Fragment25, { children: [
                   formatNumber(entitlementPackageSize),
                   " "
                 ] }),
@@ -24475,14 +24805,14 @@ var Entitlement2 = ({
                   entitlement.feature,
                   entitlementPackageSize
                 ),
-                entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs42(Fragment25, { children: [
+                entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs43(Fragment25, { children: [
                   "/",
                   shortenPeriod(selectedPeriod)
                 ] })
               ]
             }
-          ) }) : (entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs42(Fragment25, { children: [
-            /* @__PURE__ */ jsx56(
+          ) }) : (entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs43(Fragment25, { children: [
+            /* @__PURE__ */ jsx57(
               Text,
               {
                 style: { opacity: 0.54 },
@@ -24491,7 +24821,7 @@ var Entitlement2 = ({
                 children: t3("Tier-based")
               }
             ),
-            /* @__PURE__ */ jsx56(
+            /* @__PURE__ */ jsx57(
               PricingTiersTooltip,
               {
                 feature: entitlement.feature,
@@ -24502,14 +24832,14 @@ var Entitlement2 = ({
               }
             )
           ] }),
-          entitlementHasHardLimit(entitlement) && entitlement.valueType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx56(
+          entitlementHasHardLimit(entitlement) && entitlement.valueType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx57(
             HardLimitTooltip,
             {
               feature: entitlement.feature,
               limit: entitlement.valueNumeric
             }
           ),
-          entitlement.billingThreshold && /* @__PURE__ */ jsx56(
+          entitlement.billingThreshold && /* @__PURE__ */ jsx57(
             BillingThresholdTooltip,
             {
               billingThreshold: entitlement.billingThreshold
@@ -24517,7 +24847,7 @@ var Entitlement2 = ({
           )
         ] })
       ] }),
-      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx56(
+      layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx57(
         Text,
         {
           $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -24530,7 +24860,7 @@ var Entitlement2 = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-import { Fragment as Fragment26, jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
 var Plan2 = ({
   plan,
   index,
@@ -24573,7 +24903,7 @@ var Plan2 = ({
   const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
   const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const isExpanded = entitlementVisibility[plan.id] ?? false;
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     Flex,
     {
       as: "li",
@@ -24593,7 +24923,7 @@ var Plan2 = ({
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsxs44(
           Flex,
           {
             $flexDirection: "column",
@@ -24604,7 +24934,7 @@ var Plan2 = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
             children: [
-              /* @__PURE__ */ jsx57(Box, { children: /* @__PURE__ */ jsx57(
+              /* @__PURE__ */ jsx58(Box, { children: /* @__PURE__ */ jsx58(
                 Text,
                 {
                   as: "h3",
@@ -24613,8 +24943,8 @@ var Plan2 = ({
                   children: plan.name
                 }
               ) }),
-              layout.plans.description.isVisible && /* @__PURE__ */ jsx57(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx57(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
-              /* @__PURE__ */ jsx57(Box, { children: /* @__PURE__ */ jsxs43(
+              layout.plans.description.isVisible && /* @__PURE__ */ jsx58(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx58(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
+              /* @__PURE__ */ jsx58(Box, { children: /* @__PURE__ */ jsxs44(
                 Text,
                 {
                   "data-testid": "sch-plan-price",
@@ -24630,14 +24960,14 @@ var Plan2 = ({
                       currency: planCurrency,
                       testSignificantDigits: false
                     }) : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs43("sub", { children: [
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs44("sub", { children: [
                       "/",
                       showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : showAsMonthlyPrices && selectedPeriod === "quarter" ? t3("month, billed quarterly") : t3(selectedPeriod)
                     ] })
                   ]
                 }
               ) }),
-              showCredits && credits.length > 0 && /* @__PURE__ */ jsx57(
+              showCredits && credits.length > 0 && /* @__PURE__ */ jsx58(
                 Flex,
                 {
                   as: "ul",
@@ -24649,8 +24979,8 @@ var Plan2 = ({
                   $margin: 0,
                   $listStyle: "none",
                   children: credits.map((credit, idx) => {
-                    return /* @__PURE__ */ jsxs43(Flex, { as: "li", $gap: "1rem", $listStyle: "none", children: [
-                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx57(
+                    return /* @__PURE__ */ jsxs44(Flex, { as: "li", $gap: "1rem", $listStyle: "none", children: [
+                      layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx58(
                         Icon3,
                         {
                           "data-testid": "sch-feature-icon",
@@ -24660,17 +24990,17 @@ var Plan2 = ({
                           rounded: true
                         }
                       ),
-                      credit.name && /* @__PURE__ */ jsx57(
+                      credit.name && /* @__PURE__ */ jsx58(
                         Flex,
                         {
                           $flexDirection: "column",
                           $justifyContent: "center",
                           $gap: "0.5rem",
-                          children: /* @__PURE__ */ jsxs43(Text, { children: [
+                          children: /* @__PURE__ */ jsxs44(Text, { children: [
                             credit.quantity,
                             " ",
                             getFeatureName(credit, credit.quantity),
-                            credit.period && /* @__PURE__ */ jsxs43(Fragment26, { children: [
+                            credit.period && /* @__PURE__ */ jsxs44(Fragment26, { children: [
                               " ",
                               t3("per"),
                               " ",
@@ -24683,7 +25013,7 @@ var Plan2 = ({
                   })
                 }
               ),
-              isActivePlan && /* @__PURE__ */ jsx57(
+              isActivePlan && /* @__PURE__ */ jsx58(
                 Flex,
                 {
                   "data-testid": "sch-plan-active",
@@ -24693,7 +25023,7 @@ var Plan2 = ({
                   $backgroundColor: settings.theme.primary,
                   $borderRadius: "9999px",
                   $padding: "0.125rem 0.85rem",
-                  children: /* @__PURE__ */ jsx57(
+                  children: /* @__PURE__ */ jsx58(
                     Text,
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -24706,7 +25036,7 @@ var Plan2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsxs44(
           Flex,
           {
             $flexDirection: "column",
@@ -24715,7 +25045,7 @@ var Plan2 = ({
             $gap: `${cardPadding}rem`,
             $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.plans.showEntitlements && /* @__PURE__ */ jsxs43(
+              layout.plans.showEntitlements && /* @__PURE__ */ jsxs44(
                 Flex,
                 {
                   as: "ul",
@@ -24726,14 +25056,14 @@ var Plan2 = ({
                   $margin: 0,
                   $listStyle: "none",
                   children: [
-                    layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx57(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx57(Text, { children: t3("Everything in", {
+                    layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx58(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx58(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__ */ jsx57(
+                            /* @__PURE__ */ jsx58(
                               Entitlement2,
                               {
                                 entitlement,
@@ -24751,7 +25081,7 @@ var Plan2 = ({
                       },
                       []
                     ),
-                    (plan.entitlements ?? []).length > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs43(
+                    (plan.entitlements ?? []).length > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs44(
                       Flex,
                       {
                         as: "li",
@@ -24761,14 +25091,14 @@ var Plan2 = ({
                         $marginTop: "1rem",
                         $listStyle: "none",
                         children: [
-                          /* @__PURE__ */ jsx57(
+                          /* @__PURE__ */ jsx58(
                             Icon3,
                             {
                               name: isExpanded ? "chevron-up" : "chevron-down",
                               color: "#D0D0D0"
                             }
                           ),
-                          /* @__PURE__ */ jsx57(
+                          /* @__PURE__ */ jsx58(
                             Text,
                             {
                               as: "button",
@@ -24797,7 +25127,7 @@ var Plan2 = ({
                   ]
                 }
               ),
-              isActivePlan ? /* @__PURE__ */ jsxs43(
+              isActivePlan ? /* @__PURE__ */ jsxs44(
                 Flex,
                 {
                   $justifyContent: "center",
@@ -24805,7 +25135,7 @@ var Plan2 = ({
                   $gap: "0.25rem",
                   $padding: "0.625rem 0",
                   children: [
-                    /* @__PURE__ */ jsx57(
+                    /* @__PURE__ */ jsx58(
                       Icon3,
                       {
                         name: "check-rounded",
@@ -24813,11 +25143,11 @@ var Plan2 = ({
                         color: settings.theme.primary
                       }
                     ),
-                    /* @__PURE__ */ jsx57(Text, { $size: 15, $leading: "none", children: t3("Current plan") })
+                    /* @__PURE__ */ jsx58(Text, { $size: 15, $leading: "none", children: t3("Current plan") })
                   ]
                 }
-              ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsxs43(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                /* @__PURE__ */ jsx57(
+              ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsxs44(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                /* @__PURE__ */ jsx58(
                   Button,
                   {
                     type: "button",
@@ -24855,10 +25185,10 @@ var Plan2 = ({
                       }
                     },
                     $fullWidth: true,
-                    children: plan.custom ? plan.customPlanConfig?.ctaText ?? t3("Talk to support") : !plan.valid ? /* @__PURE__ */ jsx57(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__ */ jsx58(Text, { as: Box, $align: "center", children: t3("Over plan limit") }) : t3("Choose plan")
                   }
                 ),
-                !plan.valid && /* @__PURE__ */ jsx57(UsageViolationText, { violations: plan.usageViolations })
+                !plan.valid && /* @__PURE__ */ jsx58(UsageViolationText, { violations: plan.usageViolations })
               ] })
             ]
           }
@@ -24869,7 +25199,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-import { Fragment as Fragment28, jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx59, jsxs as jsxs45 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -24974,7 +25304,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
     }
   }, [data?.component, hydratePublic]);
   if (isPending) {
-    return /* @__PURE__ */ jsx58(
+    return /* @__PURE__ */ jsx59(
       Flex,
       {
         $width: "100%",
@@ -24982,12 +25312,12 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
         $alignItems: "center",
         $justifyContent: "center",
         $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-        children: /* @__PURE__ */ jsx58(Loader, { "aria-label": "loading", $size: "2xl" })
+        children: /* @__PURE__ */ jsx59(Loader, { "aria-label": "loading", $size: "2xl" })
       }
     );
   }
   if (hasNoUsableCurrency) {
-    return /* @__PURE__ */ jsx58(Container, { children: /* @__PURE__ */ jsx58(Flex, { $justifyContent: "center", $padding: "2rem 0", children: /* @__PURE__ */ jsx58(InvalidCurrencyNotice, { invalidEntries: invalidFilterEntries }) }) });
+    return /* @__PURE__ */ jsx59(Container, { children: /* @__PURE__ */ jsx59(Flex, { $justifyContent: "center", $padding: "2rem 0", children: /* @__PURE__ */ jsx59(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";
@@ -24996,7 +25326,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
     rest.callToActionTarget
   );
   const Wrapper = typeof data?.component === "undefined" ? Container : Fragment27;
-  return /* @__PURE__ */ jsx58(Wrapper, { children: /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsx59(Wrapper, { children: /* @__PURE__ */ jsxs45(
     FussyChild,
     {
       ref,
@@ -25006,8 +25336,8 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "2rem",
       children: [
-        /* @__PURE__ */ jsxs44(Box, { children: [
-          /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs45(Box, { children: [
+          /* @__PURE__ */ jsxs45(
             Flex,
             {
               $flexDirection: "column",
@@ -25022,7 +25352,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
                 }
               },
               children: [
-                /* @__PURE__ */ jsx58(
+                /* @__PURE__ */ jsx59(
                   Text,
                   {
                     as: "h2",
@@ -25031,8 +25361,8 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t3("Plans")
                   }
                 ),
-                /* @__PURE__ */ jsxs44(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
-                  showCurrencySelector && /* @__PURE__ */ jsx58(
+                /* @__PURE__ */ jsxs45(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
+                  showCurrencySelector && /* @__PURE__ */ jsx59(
                     CurrencyToggle,
                     {
                       currencies,
@@ -25040,7 +25370,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
                       onSelect: setSelectedCurrency
                     }
                   ),
-                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx58(
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx59(
                     PeriodToggle,
                     {
                       options: periods,
@@ -25057,7 +25387,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx58(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx59(
             Box,
             {
               as: "ul",
@@ -25070,7 +25400,7 @@ var PricingTable = forwardRef15(({ 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__ */ jsx58(
+                return /* @__PURE__ */ jsx59(
                   Plan2,
                   {
                     plan,
@@ -25092,14 +25422,14 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx58(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs44(Fragment28, { children: [
-          props.header.isVisible && /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx59(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs45(Fragment28, { children: [
+          props.header.isVisible && /* @__PURE__ */ jsx59(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ jsx58(
+              children: /* @__PURE__ */ jsx59(
                 Text,
                 {
                   as: "h2",
@@ -25110,7 +25440,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
               )
             }
           ),
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59(
             Box,
             {
               as: "ul",
@@ -25122,7 +25452,7 @@ var PricingTable = forwardRef15(({ 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__ */ jsx58(
+                return /* @__PURE__ */ jsx59(
                   AddOn2,
                   {
                     addOn,
@@ -25150,7 +25480,7 @@ PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var resolveDesignProps9 = (props) => {
   return {
     text: {
@@ -25162,7 +25492,7 @@ var resolveDesignProps9 = (props) => {
 };
 var TextElement = forwardRef16(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
-  return /* @__PURE__ */ jsx59(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx60(
     Text,
     {
       display: props.text.fontStyle,
@@ -25176,7 +25506,7 @@ TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 import { forwardRef as forwardRef17, useMemo as useMemo30 } from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var buttonStyles = {
   primary: {
     color: "primary",
@@ -25212,7 +25542,7 @@ var UnsubscribeButton = forwardRef17(({ children, className, ...rest }, ref) =>
   if (!hasActiveSubscription) {
     return null;
   }
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     Element,
     {
       as: Flex,
@@ -25220,7 +25550,7 @@ var UnsubscribeButton = forwardRef17(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx61(
         Button,
         {
           type: "button",
@@ -25242,7 +25572,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 import { forwardRef as forwardRef18, useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo31, useState as useState21 } from "react";
-import { jsx as jsx61, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs46 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -25320,9 +25650,9 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
   if (!data?.subscription || data.subscription.cancelAt) {
     return null;
   }
-  return /* @__PURE__ */ jsxs45(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx61(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx61(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
-    error ? /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(Element, { ref, className, children: [
+    /* @__PURE__ */ jsx62(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx62(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ jsxs46(
       Flex,
       {
         as: TransitionBox,
@@ -25331,8 +25661,8 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
         $alignItems: "center",
         $gap: "1rem",
         children: [
-          /* @__PURE__ */ jsx61(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your upcoming invoice.") }),
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx62(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ jsx62(
             Button,
             {
               type: "button",
@@ -25345,28 +25675,28 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
           )
         ]
       }
-    ) : !isLoading && /* @__PURE__ */ jsx61(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs45(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs45(Text, { display: props.header.fontStyle, children: [
+    ) : !isLoading && /* @__PURE__ */ jsx62(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs46(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs46(Text, { display: props.header.fontStyle, children: [
         props.header.prefix,
         " ",
         toPrettyDate(upcomingInvoice.dueDate)
       ] }),
-      /* @__PURE__ */ jsxs45(
+      /* @__PURE__ */ jsxs46(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            props.price.isVisible && /* @__PURE__ */ jsx61(Text, { display: props.price.fontStyle, $leading: "none", children: formatCurrency(
+            props.price.isVisible && /* @__PURE__ */ jsx62(Text, { display: props.price.fontStyle, $leading: "none", children: formatCurrency(
               upcomingInvoice.amountDue,
               upcomingInvoice.currency
             ) }),
-            /* @__PURE__ */ jsx61(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx61(Text, { display: props.contractEndDate.fontStyle, children: t3("Estimated bill") }) })
+            /* @__PURE__ */ jsx62(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx62(Text, { display: props.contractEndDate.fontStyle, children: t3("Estimated bill") }) })
           ]
         }
       ),
-      balances.length > 0 && /* @__PURE__ */ jsxs45(
+      balances.length > 0 && /* @__PURE__ */ jsxs46(
         Flex,
         {
           as: TransitionBox,
@@ -25374,20 +25704,20 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ jsx61(Text, { $weight: 600, children: t3("Remaining balance") }),
-            /* @__PURE__ */ jsx61(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx61(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+            /* @__PURE__ */ jsx62(Text, { $weight: 600, children: t3("Remaining balance") }),
+            /* @__PURE__ */ jsx62(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx62(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
           ]
         }
       ),
-      discounts.length > 0 && /* @__PURE__ */ jsxs45(
+      discounts.length > 0 && /* @__PURE__ */ jsxs46(
         Flex,
         {
           $justifyContent: "space-between",
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ jsx61(Text, { $weight: 600, children: t3("Discount") }),
-            /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsx62(Text, { $weight: 600, children: t3("Discount") }),
+            /* @__PURE__ */ jsx62(
               Flex,
               {
                 $flexDirection: "column",
@@ -25397,13 +25727,13 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
                   (acc, discount) => {
                     if (typeof discount.percentOff === "number" || typeof discount.amountOff === "number") {
                       acc.push(
-                        /* @__PURE__ */ jsxs45(
+                        /* @__PURE__ */ jsxs46(
                           Flex,
                           {
                             $alignItems: "center",
                             $gap: "0.5rem",
                             children: [
-                              discount.customerFacingCode && /* @__PURE__ */ jsx61(
+                              discount.customerFacingCode && /* @__PURE__ */ jsx62(
                                 Flex,
                                 {
                                   $alignItems: "center",
@@ -25412,7 +25742,7 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
                                   $borderStyle: "solid",
                                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                                   $borderRadius: "0.3125rem",
-                                  children: /* @__PURE__ */ jsx61(
+                                  children: /* @__PURE__ */ jsx62(
                                     Text,
                                     {
                                       $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -25422,7 +25752,7 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ jsx61(Box, { children: /* @__PURE__ */ jsx61(Text, { children: typeof discount.percentOff === "number" ? t3("Percent off", {
+                              /* @__PURE__ */ jsx62(Box, { children: /* @__PURE__ */ jsx62(Text, { children: typeof discount.percentOff === "number" ? t3("Percent off", {
                                 percent: discount.percentOff
                               }) : t3("Amount off", {
                                 amount: formatCurrency(
@@ -25446,7 +25776,7 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
           ]
         }
       )
-    ] }) : /* @__PURE__ */ jsx61(Text, { display: "heading2", children: t3("No upcoming invoice") }) })
+    ] }) : /* @__PURE__ */ jsx62(Text, { display: "heading2", children: t3("No upcoming invoice") }) })
   ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
@@ -29706,11 +30036,11 @@ function createRenderer(options) {
 }
 
 // src/components/embed/Embed.tsx
-import { jsx as jsx62, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
 var renderer = createRenderer();
 var Loading = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Flex,
     {
       $width: "100%",
@@ -29718,13 +30048,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx62(Loader, { $color: settings.theme.primary, $size: "2xl" })
+      children: /* @__PURE__ */ jsx63(Loader, { $color: settings.theme.primary, $size: "2xl" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     Flex,
     {
       $flexDirection: "column",
@@ -29735,8 +30065,8 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx62(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx62(Text, { display: "heading1", children: "Error" }) }),
-        /* @__PURE__ */ jsx62(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx62(Text, { children: message }) })
+        /* @__PURE__ */ jsx63(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx63(Text, { display: "heading1", children: "Error" }) }),
+        /* @__PURE__ */ jsx63(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx63(Text, { children: message }) })
       ]
     }
   );
@@ -29810,13 +30140,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
     return stub();
   }
   if (error) {
-    return /* @__PURE__ */ jsx62(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx63(Error2, { message: error.message });
   }
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx62(Error2, { message: "Please provide an access token." });
+    return /* @__PURE__ */ jsx63(Error2, { message: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx63(
       Error2,
       {
         message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -29824,9 +30154,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
     );
   }
   if (isPending) {
-    return /* @__PURE__ */ jsx62(Loading, {});
+    return /* @__PURE__ */ jsx63(Loading, {});
   }
-  return /* @__PURE__ */ jsx62(Box, { className: "sch-Embed", "data-testid": "sch-embed", children: children ?? /* @__PURE__ */ jsx62(Loading, {}) });
+  return /* @__PURE__ */ jsx63(Box, { className: "sch-Embed", "data-testid": "sch-embed", children: children ?? /* @__PURE__ */ jsx63(Loading, {}) });
 };
 export {
   AddOns,