@schematichq/schematic-components 1.4.1 → 1.4.3

package/dist/schematic-components.cjs.js

@@ -289,17 +289,17 @@ var require_debounce = __commonJS({
     var FUNC_ERROR_TEXT = "Expected a function";
     var nativeMax = Math.max;
     var nativeMin = Math.min;
-    function debounce4(func, wait, options2) {
+    function debounce4(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);
       }
       wait = toNumber(wait) || 0;
-      if (isObject2(options2)) {
-        leading = !!options2.leading;
-        maxing = "maxWait" in options2;
-        maxWait = maxing ? nativeMax(toNumber(options2.maxWait) || 0, wait) : maxWait;
-        trailing = "trailing" in options2 ? !!options2.trailing : trailing;
+      if (isObject2(options)) {
+        leading = !!options.leading;
+        maxing = "maxWait" in options;
+        maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+        trailing = "trailing" in options ? !!options.trailing : trailing;
       }
       function invokeFunc(time) {
         var args = lastArgs, thisArg = lastThis;
@@ -1918,7 +1918,7 @@ var HOURS_IN_MS = MINUTES_IN_MS * 60;
 var DAYS_IN_MS = HOURS_IN_MS * 24;
 
 // src/const/debounce.ts
-var debounceOptions = {
+var DEBOUNCE_SETTINGS = {
   leading: true,
   trailing: false
 };
@@ -1945,8 +1945,8 @@ function getPriceValue(billingPrice) {
   const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return price;
 }
-function getPlanPrice(plan, period = "month", options2 = { useSelectedPeriod: true }) {
-  const billingPrice = options2.useSelectedPeriod ? period === "year" ? plan.yearlyPrice : plan.monthlyPrice : plan.yearlyPrice && !plan.monthlyPrice ? plan.yearlyPrice : plan.monthlyPrice;
+function getPlanPrice(plan, period = "month", options = { useSelectedPeriod: true }) {
+  const billingPrice = options.useSelectedPeriod ? period === "year" ? plan.yearlyPrice : plan.monthlyPrice : plan.yearlyPrice && !plan.monthlyPrice ? plan.yearlyPrice : plan.monthlyPrice;
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -2078,14 +2078,14 @@ function groupPlanCreditGrants(creditGrants) {
   );
   return Object.values(map);
 }
-function groupCreditGrants(creditGrants, options2) {
+function groupCreditGrants(creditGrants, options) {
   const today = /* @__PURE__ */ new Date();
   const map = creditGrants.reduce(
     (acc, grant) => {
       const isExpired = !!grant.expiresAt && grant.expiresAt <= today;
       const isZeroedOut = !!grant.zeroedOutDate;
       if (!isExpired && !isZeroedOut) {
-        const key = options2?.groupBy === "bundle" ? grant.billingCreditBundleId || grant.id : options2?.groupBy === "credit" ? grant.billingCreditId : grant.id;
+        const key = options?.groupBy === "bundle" ? grant.billingCreditBundleId || grant.id : options?.groupBy === "credit" ? grant.billingCreditId : grant.id;
         const current = acc[key];
         acc[key] = {
           // credit-specific attributes
@@ -4145,7 +4145,7 @@ attr.rem = function propAsRem(key, value) {
 };
 
 // src/hooks/useAvailablePlans.ts
-function useAvailablePlans(activePeriod, options2 = { useSelectedPeriod: true }) {
+function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true }) {
   const { data, settings } = useEmbed();
   const getAvailablePeriods = (0, import_react2.useCallback)(() => {
     const periods = [];
@@ -4160,14 +4160,14 @@ function useAvailablePlans(activePeriod, options2 = { useSelectedPeriod: true })
   const getActivePlans = (0, import_react2.useCallback)(
     (plans) => {
       const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter((plan) => {
-        if (options2.useSelectedPeriod) {
+        if (options.useSelectedPeriod) {
           return activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
         }
         return plan.monthlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
       });
       return activePlans.map((plan) => ({ ...plan, isSelected: false }));
     },
-    [activePeriod, options2.useSelectedPeriod, settings.mode]
+    [activePeriod, options.useSelectedPeriod, settings.mode]
   );
   return (0, import_react2.useMemo)(() => {
     return {
@@ -4273,6 +4273,7 @@ var initialContext = {
   hydrateComponent: stub,
   hydrateExternal: stub,
   getUpcomingInvoice: stub,
+  getCustomerBalance: stub,
   listInvoices: stub,
   createSetupIntent: stub,
   updatePaymentMethod: stub,
@@ -4285,7 +4286,8 @@ var initialContext = {
   setLayout: stub,
   setCheckoutState: stub,
   setData: stub,
-  updateSettings: stub
+  updateSettings: stub,
+  debug: stub
 };
 var EmbedContext = (0, import_react3.createContext)(initialContext);
 
@@ -4497,14 +4499,14 @@ var consoleLogger = {
   }
 };
 var Logger = class _Logger {
-  constructor(concreteLogger, options2 = {}) {
-    this.init(concreteLogger, options2);
+  constructor(concreteLogger, options = {}) {
+    this.init(concreteLogger, options);
   }
-  init(concreteLogger, options2 = {}) {
-    this.prefix = options2.prefix || "i18next:";
+  init(concreteLogger, options = {}) {
+    this.prefix = options.prefix || "i18next:";
     this.logger = concreteLogger || consoleLogger;
-    this.options = options2;
-    this.debug = options2.debug;
+    this.options = options;
+    this.debug = options.debug;
   }
   log(...args) {
     return this.forward(args, "log", "", true);
@@ -4531,10 +4533,10 @@ var Logger = class _Logger {
       ...this.options
     });
   }
-  clone(options2) {
-    options2 = options2 || this.options;
-    options2.prefix = options2.prefix || this.prefix;
-    return new _Logger(this.logger, options2);
+  clone(options) {
+    options = options || this.options;
+    options.prefix = options.prefix || this.prefix;
+    return new _Logger(this.logger, options);
   }
 };
 var baseLogger = new Logger();
@@ -4578,13 +4580,13 @@ var EventEmitter = class {
   }
 };
 var ResourceStore = class extends EventEmitter {
-  constructor(data, options2 = {
+  constructor(data, options = {
     ns: ["translation"],
     defaultNS: "translation"
   }) {
     super();
     this.data = data || {};
-    this.options = options2;
+    this.options = options;
     if (this.options.keySeparator === void 0) {
       this.options.keySeparator = ".";
     }
@@ -4603,9 +4605,9 @@ var ResourceStore = class extends EventEmitter {
       this.options.ns.splice(index, 1);
     }
   }
-  getResource(lng, ns, key, options2 = {}) {
-    const keySeparator = options2.keySeparator !== void 0 ? options2.keySeparator : this.options.keySeparator;
-    const ignoreJSONStructure = options2.ignoreJSONStructure !== void 0 ? options2.ignoreJSONStructure : this.options.ignoreJSONStructure;
+  getResource(lng, ns, key, options = {}) {
+    const keySeparator = options.keySeparator !== void 0 ? options.keySeparator : this.options.keySeparator;
+    const ignoreJSONStructure = options.ignoreJSONStructure !== void 0 ? options.ignoreJSONStructure : this.options.ignoreJSONStructure;
     let path;
     if (lng.indexOf(".") > -1) {
       path = lng.split(".");
@@ -4630,10 +4632,10 @@ var ResourceStore = class extends EventEmitter {
     if (result || !ignoreJSONStructure || !isString(key)) return result;
     return deepFind(this.data?.[lng]?.[ns], key, keySeparator);
   }
-  addResource(lng, ns, key, value, options2 = {
+  addResource(lng, ns, key, value, options = {
     silent: false
   }) {
-    const keySeparator = options2.keySeparator !== void 0 ? options2.keySeparator : this.options.keySeparator;
+    const keySeparator = options.keySeparator !== void 0 ? options.keySeparator : this.options.keySeparator;
     let path = [lng, ns];
     if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
     if (lng.indexOf(".") > -1) {
@@ -4643,9 +4645,9 @@ var ResourceStore = class extends EventEmitter {
     }
     this.addNamespaces(ns);
     setPath(this.data, path, value);
-    if (!options2.silent) this.emit("added", lng, ns, key, value);
+    if (!options.silent) this.emit("added", lng, ns, key, value);
   }
-  addResources(lng, ns, resources, options2 = {
+  addResources(lng, ns, resources, options = {
     silent: false
   }) {
     for (const m2 in resources) {
@@ -4653,9 +4655,9 @@ var ResourceStore = class extends EventEmitter {
         silent: true
       });
     }
-    if (!options2.silent) this.emit("added", lng, ns, resources);
+    if (!options.silent) this.emit("added", lng, ns, resources);
   }
-  addResourceBundle(lng, ns, resources, deep, overwrite, options2 = {
+  addResourceBundle(lng, ns, resources, deep, overwrite, options = {
     silent: false,
     skipCopy: false
   }) {
@@ -4668,7 +4670,7 @@ var ResourceStore = class extends EventEmitter {
     }
     this.addNamespaces(ns);
     let pack = getPath(this.data, path) || {};
-    if (!options2.skipCopy) resources = JSON.parse(JSON.stringify(resources));
+    if (!options.skipCopy) resources = JSON.parse(JSON.stringify(resources));
     if (deep) {
       deepExtend(pack, resources, overwrite);
     } else {
@@ -4678,7 +4680,7 @@ var ResourceStore = class extends EventEmitter {
       };
     }
     setPath(this.data, path, pack);
-    if (!options2.silent) this.emit("added", lng, ns, resources);
+    if (!options.silent) this.emit("added", lng, ns, resources);
   }
   removeResourceBundle(lng, ns) {
     if (this.hasResourceBundle(lng, ns)) {
@@ -4711,9 +4713,9 @@ var postProcessor = {
   addPostProcessor(module2) {
     this.processors[module2.name] = module2;
   },
-  handle(processors, value, key, options2, translator) {
+  handle(processors, value, key, options, translator) {
     processors.forEach((processor) => {
-      value = this.processors[processor]?.process(value, key, options2, translator) ?? value;
+      value = this.processors[processor]?.process(value, key, options, translator) ?? value;
     });
     return value;
   }
@@ -4741,10 +4743,10 @@ function keysFromSelector(selector, opts) {
 var checkedLoadedFor = {};
 var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
-  constructor(services, options2 = {}) {
+  constructor(services, options = {}) {
     super();
     copy2(["resourceStore", "languageUtils", "pluralResolver", "interpolator", "backendConnector", "i18nFormat", "utils"], services, this);
-    this.options = options2;
+    this.options = options;
     if (this.options.keySeparator === void 0) {
       this.options.keySeparator = ".";
     }
@@ -4794,12 +4796,15 @@ var Translator = class _Translator extends EventEmitter {
     if (typeof opt !== "object" && this.options.overloadTranslationOptionHandler) {
       opt = this.options.overloadTranslationOptionHandler(arguments);
     }
-    if (typeof options === "object") opt = {
+    if (typeof opt === "object") opt = {
       ...opt
     };
     if (!opt) opt = {};
     if (keys == null) return "";
-    if (typeof keys === "function") keys = keysFromSelector(keys, opt);
+    if (typeof keys === "function") keys = keysFromSelector(keys, {
+      ...this.options,
+      ...opt
+    });
     if (!Array.isArray(keys)) keys = [String(keys)];
     const returnDetails = opt.returnDetails !== void 0 ? opt.returnDetails : this.options.returnDetails;
     const keySeparator = opt.keySeparator !== void 0 ? opt.keySeparator : this.options.keySeparator;
@@ -5120,16 +5125,16 @@ var Translator = class _Translator extends EventEmitter {
   isValidLookup(res) {
     return res !== void 0 && !(!this.options.returnNull && res === null) && !(!this.options.returnEmptyString && res === "");
   }
-  getResource(code, ns, key, options2 = {}) {
-    if (this.i18nFormat?.getResource) return this.i18nFormat.getResource(code, ns, key, options2);
-    return this.resourceStore.getResource(code, ns, key, options2);
+  getResource(code, ns, key, options = {}) {
+    if (this.i18nFormat?.getResource) return this.i18nFormat.getResource(code, ns, key, options);
+    return this.resourceStore.getResource(code, ns, key, options);
   }
-  getUsedParamsDetails(options2 = {}) {
+  getUsedParamsDetails(options = {}) {
     const optionsKeys = ["defaultValue", "ordinal", "context", "replace", "lng", "lngs", "fallbackLng", "ns", "keySeparator", "nsSeparator", "returnObjects", "returnDetails", "joinArrays", "postProcess", "interpolation"];
-    const useOptionsReplaceForData = options2.replace && !isString(options2.replace);
-    let data = useOptionsReplaceForData ? options2.replace : options2;
-    if (useOptionsReplaceForData && typeof options2.count !== "undefined") {
-      data.count = options2.count;
+    const useOptionsReplaceForData = options.replace && !isString(options.replace);
+    let data = useOptionsReplaceForData ? options.replace : options;
+    if (useOptionsReplaceForData && typeof options.count !== "undefined") {
+      data.count = options.count;
     }
     if (this.options.interpolation.defaultVariables) {
       data = {
@@ -5147,10 +5152,10 @@ var Translator = class _Translator extends EventEmitter {
     }
     return data;
   }
-  static hasDefaultValue(options2) {
+  static hasDefaultValue(options) {
     const prefix2 = "defaultValue";
-    for (const option in options2) {
-      if (Object.prototype.hasOwnProperty.call(options2, option) && prefix2 === option.substring(0, prefix2.length) && void 0 !== options2[option]) {
+    for (const option in options) {
+      if (Object.prototype.hasOwnProperty.call(options, option) && prefix2 === option.substring(0, prefix2.length) && void 0 !== options[option]) {
         return true;
       }
     }
@@ -5158,8 +5163,8 @@ var Translator = class _Translator extends EventEmitter {
   }
 };
 var LanguageUtil = class {
-  constructor(options2) {
-    this.options = options2;
+  constructor(options) {
+    this.options = options;
     this.supportedLngs = this.options.supportedLngs || false;
     this.logger = baseLogger.create("languageUtils");
   }
@@ -5280,9 +5285,9 @@ var dummyRule = {
   })
 };
 var PluralResolver = class {
-  constructor(languageUtils, options2 = {}) {
+  constructor(languageUtils, options = {}) {
     this.languageUtils = languageUtils;
-    this.options = options2;
+    this.options = options;
     this.logger = baseLogger.create("pluralResolver");
     this.pluralRulesCache = {};
   }
@@ -5292,9 +5297,9 @@ var PluralResolver = class {
   clearCache() {
     this.pluralRulesCache = {};
   }
-  getRule(code, options2 = {}) {
+  getRule(code, options = {}) {
     const cleanedCode = getCleanedCode(code === "dev" ? "en" : code);
-    const type = options2.ordinal ? "ordinal" : "cardinal";
+    const type = options.ordinal ? "ordinal" : "cardinal";
     const cacheKey = JSON.stringify({
       cleanedCode,
       type
@@ -5314,32 +5319,32 @@ var PluralResolver = class {
       }
       if (!code.match(/-|_/)) return dummyRule;
       const lngPart = this.languageUtils.getLanguagePartFromCode(code);
-      rule = this.getRule(lngPart, options2);
+      rule = this.getRule(lngPart, options);
     }
     this.pluralRulesCache[cacheKey] = rule;
     return rule;
   }
-  needsPlural(code, options2 = {}) {
-    let rule = this.getRule(code, options2);
-    if (!rule) rule = this.getRule("dev", options2);
+  needsPlural(code, options = {}) {
+    let rule = this.getRule(code, options);
+    if (!rule) rule = this.getRule("dev", options);
     return rule?.resolvedOptions().pluralCategories.length > 1;
   }
-  getPluralFormsOfKey(code, key, options2 = {}) {
-    return this.getSuffixes(code, options2).map((suffix) => `${key}${suffix}`);
+  getPluralFormsOfKey(code, key, options = {}) {
+    return this.getSuffixes(code, options).map((suffix) => `${key}${suffix}`);
   }
-  getSuffixes(code, options2 = {}) {
-    let rule = this.getRule(code, options2);
-    if (!rule) rule = this.getRule("dev", options2);
+  getSuffixes(code, options = {}) {
+    let rule = this.getRule(code, options);
+    if (!rule) rule = this.getRule("dev", options);
     if (!rule) return [];
-    return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map((pluralCategory) => `${this.options.prepend}${options2.ordinal ? `ordinal${this.options.prepend}` : ""}${pluralCategory}`);
+    return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map((pluralCategory) => `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ""}${pluralCategory}`);
   }
-  getSuffix(code, count, options2 = {}) {
-    const rule = this.getRule(code, options2);
+  getSuffix(code, count, options = {}) {
+    const rule = this.getRule(code, options);
     if (rule) {
-      return `${this.options.prepend}${options2.ordinal ? `ordinal${this.options.prepend}` : ""}${rule.select(count)}`;
+      return `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ""}${rule.select(count)}`;
     }
     this.logger.warn(`no plural rule found for: ${code}`);
-    return this.getSuffix("dev", count, options2);
+    return this.getSuffix("dev", count, options);
   }
 };
 var deepFindWithDefaults = (data, defaultData, key, keySeparator = ".", ignoreJSONStructure = true) => {
@@ -5352,14 +5357,14 @@ var deepFindWithDefaults = (data, defaultData, key, keySeparator = ".", ignoreJS
 };
 var regexSafe = (val) => val.replace(/\$/g, "$$$$");
 var Interpolator = class {
-  constructor(options2 = {}) {
+  constructor(options = {}) {
     this.logger = baseLogger.create("interpolator");
-    this.options = options2;
-    this.format = options2?.interpolation?.format || ((value) => value);
-    this.init(options2);
+    this.options = options;
+    this.format = options?.interpolation?.format || ((value) => value);
+    this.init(options);
   }
-  init(options2 = {}) {
-    if (!options2.interpolation) options2.interpolation = {
+  init(options = {}) {
+    if (!options.interpolation) options.interpolation = {
       escapeValue: true
     };
     const {
@@ -5380,7 +5385,7 @@ var Interpolator = class {
       nestingOptionsSeparator,
       maxReplaces,
       alwaysFormat
-    } = options2.interpolation;
+    } = options.interpolation;
     this.escape = escape$1 !== void 0 ? escape$1 : escape;
     this.escapeValue = escapeValue !== void 0 ? escapeValue : true;
     this.useRawValueToEscape = useRawValueToEscape !== void 0 ? useRawValueToEscape : false;
@@ -5411,7 +5416,7 @@ var Interpolator = class {
     this.regexpUnescape = getOrResetRegExp(this.regexpUnescape, `${this.prefix}${this.unescapePrefix}(.+?)${this.unescapeSuffix}${this.suffix}`);
     this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}((?:[^()"']+|"[^"]*"|'[^']*'|\\((?:[^()]|"[^"]*"|'[^']*')*\\))*?)${this.nestingSuffix}`);
   }
-  interpolate(str, data, lng, options2) {
+  interpolate(str, data, lng, options) {
     let match2;
     let value;
     let replaces;
@@ -5420,7 +5425,7 @@ var Interpolator = class {
       if (key.indexOf(this.formatSeparator) < 0) {
         const path = deepFindWithDefaults(data, defaultData, key, this.options.keySeparator, this.options.ignoreJSONStructure);
         return this.alwaysFormat ? this.format(path, void 0, lng, {
-          ...options2,
+          ...options,
           ...data,
           interpolationkey: key
         }) : path;
@@ -5429,14 +5434,14 @@ var Interpolator = class {
       const k2 = p2.shift().trim();
       const f2 = p2.join(this.formatSeparator).trim();
       return this.format(deepFindWithDefaults(data, defaultData, k2, this.options.keySeparator, this.options.ignoreJSONStructure), f2, lng, {
-        ...options2,
+        ...options,
         ...data,
         interpolationkey: k2
       });
     };
     this.resetRegExp();
-    const missingInterpolationHandler = options2?.missingInterpolationHandler || this.options.missingInterpolationHandler;
-    const skipOnVariables = options2?.interpolation?.skipOnVariables !== void 0 ? options2.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
+    const missingInterpolationHandler = options?.missingInterpolationHandler || this.options.missingInterpolationHandler;
+    const skipOnVariables = options?.interpolation?.skipOnVariables !== void 0 ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
     const todos = [{
       regex: this.regexpUnescape,
       safeValue: (val) => regexSafe(val)
@@ -5451,9 +5456,9 @@ var Interpolator = class {
         value = handleFormat(matchedVar);
         if (value === void 0) {
           if (typeof missingInterpolationHandler === "function") {
-            const temp = missingInterpolationHandler(str, match2, options2);
+            const temp = missingInterpolationHandler(str, match2, options);
             value = isString(temp) ? temp : "";
-          } else if (options2 && Object.prototype.hasOwnProperty.call(options2, matchedVar)) {
+          } else if (options && Object.prototype.hasOwnProperty.call(options, matchedVar)) {
             value = "";
           } else if (skipOnVariables) {
             value = match2[0];
@@ -5481,7 +5486,7 @@ var Interpolator = class {
     });
     return str;
   }
-  nest(str, fc, options2 = {}) {
+  nest(str, fc, options = {}) {
     let match2;
     let value;
     let clonedOptions;
@@ -5513,7 +5518,7 @@ var Interpolator = class {
     while (match2 = this.nestingRegexp.exec(str)) {
       let formatters = [];
       clonedOptions = {
-        ...options2
+        ...options
       };
       clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
       clonedOptions.applyPostProcessor = false;
@@ -5531,8 +5536,8 @@ var Interpolator = class {
         value = "";
       }
       if (formatters.length) {
-        value = formatters.reduce((v2, f2) => this.format(v2, f2, options2.lng, {
-          ...options2,
+        value = formatters.reduce((v2, f2) => this.format(v2, f2, options.lng, {
+          ...options,
           interpolationkey: match2[1].trim()
         }), value.trim());
       }
@@ -5594,16 +5599,16 @@ var createCachedFormatter = (fn) => {
 };
 var createNonCachedFormatter = (fn) => (v2, l2, o2) => fn(getCleanedCode(l2), o2)(v2);
 var Formatter = class {
-  constructor(options2 = {}) {
+  constructor(options = {}) {
     this.logger = baseLogger.create("formatter");
-    this.options = options2;
-    this.init(options2);
+    this.options = options;
+    this.init(options);
   }
-  init(services, options2 = {
+  init(services, options = {
     interpolation: {}
   }) {
-    this.formatSeparator = options2.interpolation.formatSeparator || ",";
-    const cf = options2.cacheInBuiltFormats ? createCachedFormatter : createNonCachedFormatter;
+    this.formatSeparator = options.interpolation.formatSeparator || ",";
+    const cf = options.cacheInBuiltFormats ? createCachedFormatter : createNonCachedFormatter;
     this.formats = {
       number: cf((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
@@ -5644,7 +5649,7 @@ var Formatter = class {
   addCached(name, fc) {
     this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
   }
-  format(value, format, lng, options2 = {}) {
+  format(value, format, lng, options = {}) {
     const formats = format.split(this.formatSeparator);
     if (formats.length > 1 && formats[0].indexOf("(") > 1 && formats[0].indexOf(")") < 0 && formats.find((f2) => f2.indexOf(")") > -1)) {
       const lastIndex = formats.findIndex((f2) => f2.indexOf(")") > -1);
@@ -5658,11 +5663,11 @@ var Formatter = class {
       if (this.formats[formatName]) {
         let formatted = mem;
         try {
-          const valOptions = options2?.formatParams?.[options2.interpolationkey] || {};
-          const l2 = valOptions.locale || valOptions.lng || options2.locale || options2.lng || lng;
+          const valOptions = options?.formatParams?.[options.interpolationkey] || {};
+          const l2 = valOptions.locale || valOptions.lng || options.locale || options.lng || lng;
           formatted = this.formats[formatName](mem, l2, {
             ...formatOptions,
-            ...options2,
+            ...options,
             ...valOptions
           });
         } catch (error) {
@@ -5684,24 +5689,24 @@ var removePending = (q2, name) => {
   }
 };
 var Connector = class extends EventEmitter {
-  constructor(backend, store, services, options2 = {}) {
+  constructor(backend, store, services, options = {}) {
     super();
     this.backend = backend;
     this.store = store;
     this.services = services;
     this.languageUtils = services.languageUtils;
-    this.options = options2;
+    this.options = options;
     this.logger = baseLogger.create("backendConnector");
     this.waitingReads = [];
-    this.maxParallelReads = options2.maxParallelReads || 10;
+    this.maxParallelReads = options.maxParallelReads || 10;
     this.readingCalls = 0;
-    this.maxRetries = options2.maxRetries >= 0 ? options2.maxRetries : 5;
-    this.retryTimeout = options2.retryTimeout >= 1 ? options2.retryTimeout : 350;
+    this.maxRetries = options.maxRetries >= 0 ? options.maxRetries : 5;
+    this.retryTimeout = options.retryTimeout >= 1 ? options.retryTimeout : 350;
     this.state = {};
     this.queue = [];
-    this.backend?.init?.(services, options2.backend, options2);
+    this.backend?.init?.(services, options.backend, options);
   }
-  queueLoad(languages, namespaces, options2, callback) {
+  queueLoad(languages, namespaces, options, callback) {
     const toLoad = {};
     const pending = {};
     const toLoadLanguages = {};
@@ -5710,7 +5715,7 @@ var Connector = class extends EventEmitter {
       let hasAllNamespaces = true;
       namespaces.forEach((ns) => {
         const name = `${lng}|${ns}`;
-        if (!options2.reload && this.store.hasResourceBundle(lng, ns)) {
+        if (!options.reload && this.store.hasResourceBundle(lng, ns)) {
           this.state[name] = 2;
         } else if (this.state[name] < 0) ;
         else if (this.state[name] === 1) {
@@ -5823,14 +5828,14 @@ var Connector = class extends EventEmitter {
     }
     return fc(lng, ns, resolver);
   }
-  prepareLoading(languages, namespaces, options2 = {}, callback) {
+  prepareLoading(languages, namespaces, options = {}, callback) {
     if (!this.backend) {
       this.logger.warn("No backend was added via i18next.use. Will not load resources.");
       return callback && callback();
     }
     if (isString(languages)) languages = this.languageUtils.toResolveHierarchy(languages);
     if (isString(namespaces)) namespaces = [namespaces];
-    const toLoad = this.queueLoad(languages, namespaces, options2, callback);
+    const toLoad = this.queueLoad(languages, namespaces, options, callback);
     if (!toLoad.toLoad.length) {
       if (!toLoad.pending.length) callback();
       return null;
@@ -5857,7 +5862,7 @@ var Connector = class extends EventEmitter {
       this.loaded(name, err2, data);
     });
   }
-  saveMissing(languages, namespace, key, fallbackValue, isUpdate, options2 = {}, clb = () => {
+  saveMissing(languages, namespace, key, fallbackValue, isUpdate, options = {}, clb = () => {
   }) {
     if (this.services?.utils?.hasLoadedNamespace && !this.services?.utils?.hasLoadedNamespace(namespace)) {
       this.logger.warn(`did not save key "${key}" as the namespace "${namespace}" was not yet loaded`, "This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!");
@@ -5866,7 +5871,7 @@ var Connector = class extends EventEmitter {
     if (key === void 0 || key === null || key === "") return;
     if (this.backend?.create) {
       const opts = {
-        ...options2,
+        ...options,
         isUpdate
       };
       const fc = this.backend.create.bind(this.backend);
@@ -5933,9 +5938,9 @@ var get = () => ({
     if (isString(args[1])) ret.defaultValue = args[1];
     if (isString(args[2])) ret.tDescription = args[2];
     if (typeof args[2] === "object" || typeof args[3] === "object") {
-      const options2 = args[3] || args[2];
-      Object.keys(options2).forEach((key) => {
-        ret[key] = options2[key];
+      const options = args[3] || args[2];
+      Object.keys(options).forEach((key) => {
+        ret[key] = options[key];
       });
     }
     return ret;
@@ -5955,15 +5960,15 @@ var get = () => ({
   },
   cacheInBuiltFormats: true
 });
-var transformOptions = (options2) => {
-  if (isString(options2.ns)) options2.ns = [options2.ns];
-  if (isString(options2.fallbackLng)) options2.fallbackLng = [options2.fallbackLng];
-  if (isString(options2.fallbackNS)) options2.fallbackNS = [options2.fallbackNS];
-  if (options2.supportedLngs?.indexOf?.("cimode") < 0) {
-    options2.supportedLngs = options2.supportedLngs.concat(["cimode"]);
+var transformOptions = (options) => {
+  if (isString(options.ns)) options.ns = [options.ns];
+  if (isString(options.fallbackLng)) options.fallbackLng = [options.fallbackLng];
+  if (isString(options.fallbackNS)) options.fallbackNS = [options.fallbackNS];
+  if (options.supportedLngs?.indexOf?.("cimode") < 0) {
+    options.supportedLngs = options.supportedLngs.concat(["cimode"]);
   }
-  if (typeof options2.initImmediate === "boolean") options2.initAsync = options2.initImmediate;
-  return options2;
+  if (typeof options.initImmediate === "boolean") options.initAsync = options.initImmediate;
+  return options;
 };
 var noop = () => {
 };
@@ -5976,53 +5981,53 @@ var bindMemberFunctions = (inst) => {
   });
 };
 var I18n = class _I18n extends EventEmitter {
-  constructor(options2 = {}, callback) {
+  constructor(options = {}, callback) {
     super();
-    this.options = transformOptions(options2);
+    this.options = transformOptions(options);
     this.services = {};
     this.logger = baseLogger;
     this.modules = {
       external: []
     };
     bindMemberFunctions(this);
-    if (callback && !this.isInitialized && !options2.isClone) {
+    if (callback && !this.isInitialized && !options.isClone) {
       if (!this.options.initAsync) {
-        this.init(options2, callback);
+        this.init(options, callback);
         return this;
       }
       setTimeout(() => {
-        this.init(options2, callback);
+        this.init(options, callback);
       }, 0);
     }
   }
-  init(options2 = {}, callback) {
+  init(options = {}, callback) {
     this.isInitializing = true;
-    if (typeof options2 === "function") {
-      callback = options2;
-      options2 = {};
+    if (typeof options === "function") {
+      callback = options;
+      options = {};
     }
-    if (options2.defaultNS == null && options2.ns) {
-      if (isString(options2.ns)) {
-        options2.defaultNS = options2.ns;
-      } else if (options2.ns.indexOf("translation") < 0) {
-        options2.defaultNS = options2.ns[0];
+    if (options.defaultNS == null && options.ns) {
+      if (isString(options.ns)) {
+        options.defaultNS = options.ns;
+      } else if (options.ns.indexOf("translation") < 0) {
+        options.defaultNS = options.ns[0];
       }
     }
     const defOpts = get();
     this.options = {
       ...defOpts,
       ...this.options,
-      ...transformOptions(options2)
+      ...transformOptions(options)
     };
     this.options.interpolation = {
       ...defOpts.interpolation,
       ...this.options.interpolation
     };
-    if (options2.keySeparator !== void 0) {
-      this.options.userDefinedKeySeparator = options2.keySeparator;
+    if (options.keySeparator !== void 0) {
+      this.options.userDefinedKeySeparator = options.keySeparator;
     }
-    if (options2.nsSeparator !== void 0) {
-      this.options.userDefinedNsSeparator = options2.nsSeparator;
+    if (options.nsSeparator !== void 0) {
+      this.options.userDefinedNsSeparator = options.nsSeparator;
     }
     const createClassOnDemand = (ClassOrObject) => {
       if (!ClassOrObject) return null;
@@ -6287,8 +6292,18 @@ var I18n = class _I18n extends EventEmitter {
       const keySeparator = this.options.keySeparator || ".";
       let resultKey;
       if (o2.keyPrefix && Array.isArray(key)) {
-        resultKey = key.map((k2) => `${o2.keyPrefix}${keySeparator}${k2}`);
+        resultKey = key.map((k2) => {
+          if (typeof k2 === "function") k2 = keysFromSelector(k2, {
+            ...this.options,
+            ...opts
+          });
+          return `${o2.keyPrefix}${keySeparator}${k2}`;
+        });
       } else {
+        if (typeof key === "function") key = keysFromSelector(key, {
+          ...this.options,
+          ...opts
+        });
         resultKey = o2.keyPrefix ? `${o2.keyPrefix}${keySeparator}${key}` : key;
       }
       return this.t(resultKey, o2);
@@ -6311,7 +6326,7 @@ var I18n = class _I18n extends EventEmitter {
   setDefaultNamespace(ns) {
     this.options.defaultNS = ns;
   }
-  hasLoadedNamespace(ns, options2 = {}) {
+  hasLoadedNamespace(ns, options = {}) {
     if (!this.isInitialized) {
       this.logger.warn("hasLoadedNamespace: i18next was not initialized", this.languages);
       return false;
@@ -6320,7 +6335,7 @@ var I18n = class _I18n extends EventEmitter {
       this.logger.warn("hasLoadedNamespace: i18n.languages were undefined or empty", this.languages);
       return false;
     }
-    const lng = options2.lng || this.resolvedLanguage || this.languages[0];
+    const lng = options.lng || this.resolvedLanguage || this.languages[0];
     const fallbackLng = this.options ? this.options.fallbackLng : false;
     const lastLng = this.languages[this.languages.length - 1];
     if (lng.toLowerCase() === "cimode") return true;
@@ -6328,8 +6343,8 @@ var I18n = class _I18n extends EventEmitter {
       const loadState = this.services.backendConnector.state[`${l2}|${n}`];
       return loadState === -1 || loadState === 0 || loadState === 2;
     };
-    if (options2.precheck) {
-      const preResult = options2.precheck(this, loadNotPending);
+    if (options.precheck) {
+      const preResult = options.precheck(this, loadNotPending);
       if (preResult !== void 0) return preResult;
     }
     if (this.hasResourceBundle(lng, ns)) return true;
@@ -6385,22 +6400,22 @@ var I18n = class _I18n extends EventEmitter {
     if (lng.toLowerCase().indexOf("-latn") > 1) return "ltr";
     return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf("-arab") > 1 ? "rtl" : "ltr";
   }
-  static createInstance(options2 = {}, callback) {
-    return new _I18n(options2, callback);
+  static createInstance(options = {}, callback) {
+    return new _I18n(options, callback);
   }
-  cloneInstance(options2 = {}, callback = noop) {
-    const forkResourceStore = options2.forkResourceStore;
-    if (forkResourceStore) delete options2.forkResourceStore;
+  cloneInstance(options = {}, callback = noop) {
+    const forkResourceStore = options.forkResourceStore;
+    if (forkResourceStore) delete options.forkResourceStore;
     const mergedOptions = {
       ...this.options,
-      ...options2,
+      ...options,
       ...{
         isClone: true
       }
     };
     const clone = new _I18n(mergedOptions);
-    if (options2.debug !== void 0 || options2.prefix !== void 0) {
-      clone.logger = clone.logger.clone(options2);
+    if (options.debug !== void 0 || options.prefix !== void 0) {
+      clone.logger = clone.logger.clone(options);
     }
     const membersToCopy = ["store", "services", "language"];
     membersToCopy.forEach((m2) => {
@@ -6521,7 +6536,7 @@ var loadLanguages2 = (i18n, lng, ns, cb) => {
   });
   i18n.loadLanguages(lng, loadedClb(i18n, cb));
 };
-var hasLoadedNamespace2 = (ns, i18n, options2 = {}) => {
+var hasLoadedNamespace2 = (ns, i18n, options = {}) => {
   if (!i18n.languages || !i18n.languages.length) {
     warnOnce(i18n, "NO_LANGUAGES", "i18n.languages were undefined or empty", {
       languages: i18n.languages
@@ -6529,9 +6544,9 @@ var hasLoadedNamespace2 = (ns, i18n, options2 = {}) => {
     return true;
   }
   return i18n.hasLoadedNamespace(ns, {
-    lng: options2.lng,
+    lng: options.lng,
     precheck: (i18nInstance2, loadNotPending) => {
-      if (options2.bindI18n && options2.bindI18n.indexOf("languageChanging") > -1 && i18nInstance2.services.backendConnector.backend && i18nInstance2.isLanguageChangingTo && !loadNotPending(i18nInstance2.isLanguageChangingTo, ns)) return false;
+      if (options.bindI18n && options.bindI18n.indexOf("languageChanging") > -1 && i18nInstance2.services.backendConnector.backend && i18nInstance2.isLanguageChangingTo && !loadNotPending(i18nInstance2.isLanguageChangingTo, ns)) return false;
     }
   });
 };
@@ -6576,10 +6591,10 @@ var defaultOptions = {
   useSuspense: true,
   unescape
 };
-var setDefaults = (options2 = {}) => {
+var setDefaults = (options = {}) => {
   defaultOptions = {
     ...defaultOptions,
-    ...options2
+    ...options
   };
 };
 var getDefaults = () => defaultOptions;
@@ -6766,8 +6781,10 @@ var en_default = {
     "Choose add-on": "Choose add-on",
     "Choose plan": "Choose plan",
     "Choose your base plan": "Choose your base plan",
-    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
+    "Credit bundles": "Credit bundles",
     Credits: "Credits",
+    "Credits in plan": "Credits in plan",
+    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
     "Current plan": "Current plan",
     "Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
     "Currently using": "Currently using {{quantity}} {{unit}}",
@@ -6818,8 +6835,10 @@ var en_default = {
     "Please provide an access token.": "Please provide an access token.",
     "Powered by": "Powered by",
     "Price by unit based on final tier reached.": "Price by unit based on final tier reached.",
+    "Promotional credits": "Promotional credits",
     Proration: "Proration",
     "Quantity to pay for in advance": "Quantity to pay for in advance",
+    "Remaining balance": "Remaining balance",
     "Remove add-on": "Remove add-on",
     Resets: "Resets {{date}}",
     "Save payment method": "Save payment method",
@@ -7103,12 +7122,12 @@ var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.ra
 var native_default = { randomUUID };
 
 // node_modules/uuid/dist/esm-browser/v4.js
-function v4(options2, buf, offset) {
-  if (native_default.randomUUID && !buf && !options2) {
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
     return native_default.randomUUID();
   }
-  options2 = options2 || {};
-  const rnds = options2.random ?? options2.rng?.() ?? rng();
+  options = options || {};
+  const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
     throw new Error("Random bytes length must be >= 16");
   }
@@ -8532,6 +8551,21 @@ function ComponentCapabilitiesFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/ComponentCheckoutSettings.ts
+function ComponentCheckoutSettingsFromJSON(json) {
+  return ComponentCheckoutSettingsFromJSONTyped(json, false);
+}
+function ComponentCheckoutSettingsFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    collectAddress: json["collect_address"],
+    collectEmail: json["collect_email"],
+    collectPhone: json["collect_phone"]
+  };
+}
+
 // src/api/checkoutexternal/models/PlanDetailResponseData.ts
 function PlanDetailResponseDataFromJSON(json) {
   return PlanDetailResponseDataFromJSONTyped(json, false);
@@ -8729,6 +8763,9 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON(json["capabilities"]),
+    checkoutSettings: ComponentCheckoutSettingsFromJSON(
+      json["checkout_settings"]
+    ),
     company: json["company"] == null ? void 0 : CompanyDetailResponseDataFromJSON(json["company"]),
     component: json["component"] == null ? void 0 : ComponentResponseDataFromJSON(json["component"]),
     creditBundles: json["credit_bundles"].map(
@@ -10479,18 +10516,18 @@ var EmbedProvider = ({
   children,
   apiKey,
   apiConfig,
-  ...options2
+  ...options
 }) => {
   const sessionIdRef = (0, import_react12.useRef)(v4_default());
   const styleRef = (0, import_react12.useRef)(null);
-  const [state, dispatch] = (0, import_react12.useReducer)(reducer, options2, (opts) => {
+  const [state, dispatch] = (0, import_react12.useReducer)(reducer, options, (opts) => {
     const providedState = { settings: opts.settings || {} };
     const resolvedState = (0, import_merge2.default)({}, initialState, providedState);
     return resolvedState;
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.4.1",
+      "X-Schematic-Components-Version": "1.4.3",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10498,11 +10535,11 @@ var EmbedProvider = ({
   const [api, setApi] = (0, import_react12.useState)({});
   const debug = (0, import_react12.useCallback)(
     (message, ...args) => {
-      if (options2.debug) {
+      if (options.debug) {
         console.debug(`[Schematic] ${message}`, ...args);
       }
     },
-    [options2.debug]
+    [options.debug]
   );
   const hydratePublic = (0, import_react12.useCallback)(async () => {
     dispatch({ type: "HYDRATE_STARTED" });
@@ -10523,7 +10560,7 @@ var EmbedProvider = ({
     }
   }, [api.public]);
   const debouncedHydratePublic = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydratePublic]
   );
   const hydrate = (0, import_react12.useCallback)(async () => {
@@ -10545,7 +10582,7 @@ var EmbedProvider = ({
     }
   }, [api.checkout]);
   const debouncedHydrate = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrate]
   );
   const hydrateComponent = (0, import_react12.useCallback)(
@@ -10572,7 +10609,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedHydrateComponent = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateComponent]
   );
   const hydrateExternal = (0, import_react12.useCallback)(async function(fn) {
@@ -10592,14 +10629,14 @@ var EmbedProvider = ({
     }
   }, []);
   const debouncedHydrateExternal = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateExternal]
   );
   const createSetupIntent = (0, import_react12.useCallback)(async () => {
     return api.checkout?.createSetupIntent();
   }, [api.checkout]);
   const debouncedCreateSetupIntent = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [createSetupIntent]
   );
   const updatePaymentMethod = (0, import_react12.useCallback)(
@@ -10618,7 +10655,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedUpdatePaymentMethod = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [updatePaymentMethod]
   );
   const deletePaymentMethod = (0, import_react12.useCallback)(
@@ -10637,7 +10674,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedDeletePaymentMethod = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [deletePaymentMethod]
   );
   const checkout = (0, import_react12.useCallback)(
@@ -10656,7 +10693,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedCheckout = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [checkout]
   );
   const previewCheckout = (0, import_react12.useCallback)(
@@ -10666,7 +10703,12 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedPreviewCheckout = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, {
+      // invoke immediately for minimal latency
+      leading: true,
+      // but also ensure latest data is fetched
+      trailing: true
+    }),
     [previewCheckout]
   );
   const unsubscribe = (0, import_react12.useCallback)(async () => {
@@ -10680,7 +10722,7 @@ var EmbedProvider = ({
     return response;
   }, [api.checkout]);
   const debouncedUnsubscribe = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [unsubscribe]
   );
   const getUpcomingInvoice = (0, import_react12.useCallback)(
@@ -10692,19 +10734,30 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedGetUpcomingInvoice = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [getUpcomingInvoice]
   );
+  const getCustomerBalance = (0, import_react12.useCallback)(async () => {
+    return api.checkout?.fetchCustomerBalance();
+  }, [api.checkout]);
+  const debouncedGetCustomerBalance = (0, import_react12.useMemo)(
+    () => (0, import_debounce.default)(getCustomerBalance, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    [getCustomerBalance]
+  );
   const listInvoices = (0, import_react12.useCallback)(async () => {
     return api.checkout?.listInvoices();
   }, [api.checkout]);
   const debouncedListInvoices = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [listInvoices]
   );
-  const setError = (0, import_react12.useCallback)((error) => {
-    dispatch({ type: "ERROR", error });
-  }, []);
+  const setError = (0, import_react12.useCallback)(
+    (error) => {
+      debug(error.message);
+      dispatch({ type: "ERROR", error });
+    },
+    [debug]
+  );
   const setAccessToken = (0, import_react12.useCallback)((token2) => {
     dispatch({ type: "SET_ACCESS_TOKEN", token: token2 });
   }, []);
@@ -10712,8 +10765,8 @@ var EmbedProvider = ({
     dispatch({ type: "SET_DATA", data });
   }, []);
   const updateSettings = (0, import_react12.useCallback)(
-    (settings = {}, options3) => {
-      dispatch({ type: "UPDATE_SETTINGS", settings, update: options3?.update });
+    (settings = {}, options2) => {
+      dispatch({ type: "UPDATE_SETTINGS", settings, update: options2?.update });
     },
     []
   );
@@ -10729,13 +10782,13 @@ var EmbedProvider = ({
     );
     if (element) {
       styleRef.current = element;
-      return;
+    } else {
+      const style = document.createElement("link");
+      style.id = "schematic-fonts";
+      style.rel = "stylesheet";
+      document.head.appendChild(style);
+      styleRef.current = style;
     }
-    const style = document.createElement("link");
-    style.id = "schematic-fonts";
-    style.rel = "stylesheet";
-    document.head.appendChild(style);
-    styleRef.current = style;
     const darkModeQuery = matchMedia("(prefers-color-scheme: dark)");
     const colorMode = darkModeQuery.matches ? "dark" : "light";
     dispatch({
@@ -10746,13 +10799,17 @@ var EmbedProvider = ({
         }
       }
     });
-    darkModeQuery.addEventListener("change", (event) => {
+    function darkModeQueryHandler(event) {
       const newColorMode = event.matches ? "dark" : "light";
       dispatch({
         type: "UPDATE_SETTINGS",
         settings: { theme: { colorMode: newColorMode } }
       });
-    });
+    }
+    darkModeQuery.addEventListener("change", darkModeQueryHandler);
+    return () => {
+      darkModeQuery.removeEventListener("change", darkModeQueryHandler);
+    };
   }, []);
   (0, import_react12.useEffect)(() => {
     const fontSet = /* @__PURE__ */ new Set([]);
@@ -10799,23 +10856,18 @@ var EmbedProvider = ({
     }
   }, [state.accessToken, apiConfig, customHeaders]);
   (0, import_react12.useEffect)(() => {
-    if (state.error) {
-      debug(state.error.message);
-    }
-  }, [debug, state.error]);
-  (0, import_react12.useEffect)(() => {
-    const providedSettings = { ...options2.settings || {} };
+    const providedSettings = { ...options.settings || {} };
     updateSettings(providedSettings, { update: false });
-  }, [options2.settings, updateSettings]);
+  }, [options.settings, updateSettings]);
   (0, import_react12.useEffect)(() => {
-    const planChanged = (event) => {
+    function planChangedHandler(event) {
       if (event instanceof CustomEvent) {
         debug("plan changed", event.detail);
       }
-    };
-    window.addEventListener("plan-changed", planChanged);
+    }
+    window.addEventListener("plan-changed", planChangedHandler);
     return () => {
-      window.removeEventListener("plan-changed", planChanged);
+      window.removeEventListener("plan-changed", planChangedHandler);
     };
   }, [debug]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -10840,13 +10892,15 @@ var EmbedProvider = ({
         previewCheckout: debouncedPreviewCheckout,
         unsubscribe: debouncedUnsubscribe,
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
+        getCustomerBalance: debouncedGetCustomerBalance,
         listInvoices: debouncedListInvoices,
         setError,
         setAccessToken,
         setLayout,
         setCheckoutState,
         setData,
-        updateSettings
+        updateSettings,
+        debug
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ot, { theme: state.settings.theme, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconStyles, {}),
@@ -12489,6 +12543,7 @@ var Sidebar = ({
   addOns,
   creditBundles = [],
   usageBasedEntitlements,
+  addOnUsageBasedEntitlements = [],
   charges,
   checkoutRef,
   checkoutStage,
@@ -12673,6 +12728,35 @@ var Sidebar = ({
       }
       setError(void 0);
       setIsLoading(true);
+      const planPayInAdvance = payInAdvanceEntitlements.reduce(
+        (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+          const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
+          if (priceId2) {
+            acc.push({
+              priceId: priceId2,
+              quantity
+            });
+          }
+          return acc;
+        },
+        []
+      );
+      const addOnPayInAdvance = addOnUsageBasedEntitlements.filter(
+        (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
+      ).reduce(
+        (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+          const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
+          if (priceId2) {
+            acc.push({
+              priceId: priceId2,
+              quantity
+            });
+          }
+          return acc;
+        },
+        []
+      );
+      const allPayInAdvance = [...planPayInAdvance, ...addOnPayInAdvance];
       await checkout({
         newPlanId: planId,
         newPriceId: priceId,
@@ -12688,19 +12772,7 @@ var Sidebar = ({
           }
           return acc;
         }, []),
-        payInAdvance: payInAdvanceEntitlements.reduce(
-          (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-            const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-            if (priceId2) {
-              acc.push({
-                priceId: priceId2,
-                quantity
-              });
-            }
-            return acc;
-          },
-          []
-        ),
+        payInAdvance: allPayInAdvance,
         creditBundles: creditBundles.reduce(
           (acc, { id, count }) => {
             if (count > 0) {
@@ -12738,6 +12810,7 @@ var Sidebar = ({
     setIsLoading,
     setLayout,
     payInAdvanceEntitlements,
+    addOnUsageBasedEntitlements,
     willTrialWithoutPaymentMethod,
     promoCode
   ]);
@@ -14433,6 +14506,12 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
+  const addOnPayInAdvanceEntitlements = (0, import_react30.useMemo)(
+    () => addOnUsageBasedEntitlements.filter(
+      (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
+    ),
+    [addOnUsageBasedEntitlements]
+  );
   const [promoCode, setPromoCode] = (0, import_react30.useState)(null);
   const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react30.useState)(false);
   const willTrialWithoutPaymentMethod = (0, import_react30.useMemo)(
@@ -14656,11 +14735,12 @@ var CheckoutDialog = ({ top = 0 }) => {
       const entitlements = plan.entitlements.reduce(
         (acc, entitlement) => {
           if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
+            const allocation = entitlement.valueNumeric || 0;
             acc.push({
               ...entitlement,
-              allocation: entitlement.valueNumeric || 0,
+              allocation,
               usage: 0,
-              quantity: 0
+              quantity: allocation
             });
           }
           return acc;
@@ -14727,7 +14807,10 @@ var CheckoutDialog = ({ top = 0 }) => {
           }))
         );
         setAddOnUsageBasedEntitlements(updatedAddOnEntitlements);
-        handlePreviewCheckout({ addOns: updated });
+        handlePreviewCheckout({
+          addOns: updated,
+          addOnPayInAdvanceEntitlements: updatedAddOnEntitlements
+        });
         return updated;
       });
     },
@@ -14973,7 +15056,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     isLoading,
                     period: planPeriod,
                     selectedPlan,
-                    entitlements: addOnUsageBasedEntitlements,
+                    entitlements: addOnPayInAdvanceEntitlements,
                     updateQuantity: updateAddOnEntitlementQuantity
                   }
                 ) : checkoutStage === "credits" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -15001,6 +15084,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               selectedPlan,
               addOns,
               usageBasedEntitlements,
+              addOnUsageBasedEntitlements,
               creditBundles,
               charges,
               checkoutRef,
@@ -15122,7 +15206,7 @@ var PaymentForm = ({ onConfirm }) => {
 var import_react33 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var PeriodToggle = ({
-  options: options2,
+  options,
   selectedOption,
   selectedPlan,
   onSelect
@@ -15155,7 +15239,7 @@ var PeriodToggle = ({
           $width: "fit-content"
         }
       },
-      children: options2.map((option) => {
+      children: options.map((option) => {
         const element = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Flex,
           {
@@ -16207,8 +16291,8 @@ function resolveDesignProps3(props) {
     }
   };
 }
-function formatInvoices(invoices, options2) {
-  const { hideUpcoming = true } = options2 || {};
+function formatInvoices(invoices, options) {
+  const { hideUpcoming = true } = options || {};
   const now = /* @__PURE__ */ new Date();
   return (invoices || []).filter(({ dueDate }) => !hideUpcoming || dueDate && +dueDate <= +now).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
     amount: formatCurrency(amountDue, currency),
@@ -17129,7 +17213,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.8.0",
+    version: "7.9.0",
     startTime
   });
 };
@@ -17204,7 +17288,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.8.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.9.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);
@@ -17742,11 +17826,29 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         featureUsage: featureUsage2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
+      const creditGroups2 = groupCreditGrants(creditGrants, {
+        groupBy: "bundle"
+      }).reduce(
+        (acc, grant) => {
+          switch (grant.grantReason) {
+            case "plan" /* Plan */:
+              acc.plan.push(grant);
+              break;
+            case "purchased" /* Purchased */:
+              acc.bundles.push(grant);
+              break;
+            case "free" /* Free */:
+              acc.promotional.push(grant);
+          }
+          return acc;
+        },
+        { plan: [], bundles: [], promotional: [] }
+      );
       return {
         currentPlan: company?.plan,
         currentAddOns: company?.addOns || [],
         creditBundles: creditBundles2,
-        creditGroups: groupCreditGrants(creditGrants, { groupBy: "bundle" }),
+        creditGroups: creditGroups2,
         billingSubscription: company?.billingSubscription,
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
@@ -17758,7 +17860,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
       currentPlan: void 0,
       currentAddOns: [],
       creditBundles: [],
-      creditGroups: [],
+      creditGroups: { plan: [], bundles: [], promotional: [] },
       billingSubscription: void 0,
       canCheckout: false,
       defaultPlan: void 0,
@@ -17915,77 +18017,151 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+          props.addOns.isVisible && creditGroups.plan.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
             props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
                 $leading: 1,
-                children: t2("Credits")
+                children: t2("Credits in plan")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.reduce(
-              (acc, group, groupIndex) => {
-                const bundle = group.grantReason === "purchased" /* Purchased */ && group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
-                acc.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-                    Flex,
-                    {
-                      $justifyContent: "space-between",
-                      $alignItems: "center",
-                      $flexWrap: "wrap",
-                      $gap: "0.5rem",
-                      children: [
-                        group.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
-                          " ",
-                          getFeatureName(group, group.quantity),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      " ",
+                      subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                        t2("per"),
+                        " ",
+                        t2(subscriptionInterval)
+                      ] })
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-                            t2("per"),
-                            " ",
-                            t2(subscriptionInterval)
-                          ] })
-                        ] }) : bundle ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                          group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { style: { opacity: 0.5 }, children: [
-                            "(",
-                            group.grants.length,
-                            ")",
-                            " "
-                          ] }),
-                          bundle.name,
-                          " (",
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Credit bundles")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+              const bundle = group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    bundle ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { style: { opacity: 0.5 }, children: [
+                        "(",
+                        group.grants.length,
+                        ")",
+                        " "
+                      ] }),
+                      bundle.name,
+                      " (",
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      ")"
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity),
-                          ")"
-                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Promotional credits")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity)
-                        ] }),
-                        group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-                          Text,
-                          {
-                            style: { opacity: 0.54 },
-                            $size: 0.875 * settings.theme.typography.text.fontSize,
-                            $color: settings.theme.typography.text.color,
-                            children: [
-                              group.total.used,
-                              " ",
-                              t2("used")
-                            ]
-                          }
-                        )
-                      ]
-                    },
-                    groupIndex
-                  )
-                );
-                return acc;
-              },
-              []
-            ) })
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
           ] }),
           canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             Button,
@@ -18998,11 +19174,12 @@ function resolveDesignProps11(props) {
 var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
-  const { data, settings, getUpcomingInvoice } = useEmbed();
+  const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const [isLoading, setIsLoading] = (0, import_react54.useState)(false);
   const [error, setError] = (0, import_react54.useState)();
   const [upcomingInvoice, setUpcomingInvoice] = (0, import_react54.useState)();
+  const [balances, setBalances] = (0, import_react54.useState)([]);
   const discounts = (0, import_react54.useMemo)(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
@@ -19031,9 +19208,22 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
       }
     }
   }, [data, getUpcomingInvoice]);
+  const getBalances = (0, import_react54.useCallback)(async () => {
+    try {
+      const response = await getCustomerBalance();
+      if (response) {
+        setBalances(response.data.balances);
+      }
+    } catch (err2) {
+      debug("Failed to fetch customer balance.", err2);
+    }
+  }, [debug, getCustomerBalance]);
   (0, import_react54.useEffect)(() => {
     getInvoice();
   }, [getInvoice]);
+  (0, import_react54.useEffect)(() => {
+    getBalances();
+  }, [getBalances]);
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
     return null;
   }
@@ -19083,6 +19273,19 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
           ]
         }
       ),
+      balances.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        Flex,
+        {
+          as: TransitionBox,
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+          ]
+        }
+      ),
       discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         Flex,
         {
@@ -21224,7 +21427,7 @@ var {
   Z_DEFAULT_STRATEGY,
   Z_DEFLATED: Z_DEFLATED$1
 } = constants$2;
-function Deflate$1(options2) {
+function Deflate$1(options) {
   this.options = common.assign({
     level: Z_DEFAULT_COMPRESSION,
     method: Z_DEFLATED$1,
@@ -21232,7 +21435,7 @@ function Deflate$1(options2) {
     windowBits: 15,
     memLevel: 8,
     strategy: Z_DEFAULT_STRATEGY
-  }, options2 || {});
+  }, options || {});
   let opt = this.options;
   if (opt.raw && opt.windowBits > 0) {
     opt.windowBits = -opt.windowBits;
@@ -21338,23 +21541,23 @@ Deflate$1.prototype.onEnd = function(status) {
   this.err = status;
   this.msg = this.strm.msg;
 };
-function deflate$1(input, options2) {
-  const deflator = new Deflate$1(options2);
+function deflate$1(input, options) {
+  const deflator = new Deflate$1(options);
   deflator.push(input, true);
   if (deflator.err) {
     throw deflator.msg || messages[deflator.err];
   }
   return deflator.result;
 }
-function deflateRaw$1(input, options2) {
-  options2 = options2 || {};
-  options2.raw = true;
-  return deflate$1(input, options2);
+function deflateRaw$1(input, options) {
+  options = options || {};
+  options.raw = true;
+  return deflate$1(input, options);
 }
-function gzip$1(input, options2) {
-  options2 = options2 || {};
-  options2.gzip = true;
-  return deflate$1(input, options2);
+function gzip$1(input, options) {
+  options = options || {};
+  options.gzip = true;
+  return deflate$1(input, options);
 }
 var Deflate_1$1 = Deflate$1;
 var deflate_2 = deflate$1;
@@ -23167,12 +23370,12 @@ var {
   Z_DATA_ERROR,
   Z_MEM_ERROR
 } = constants$2;
-function Inflate$1(options2) {
+function Inflate$1(options) {
   this.options = common.assign({
     chunkSize: 1024 * 64,
     windowBits: 15,
     to: ""
-  }, options2 || {});
+  }, options || {});
   const opt = this.options;
   if (opt.raw && opt.windowBits >= 0 && opt.windowBits < 16) {
     opt.windowBits = -opt.windowBits;
@@ -23180,7 +23383,7 @@ function Inflate$1(options2) {
       opt.windowBits = -15;
     }
   }
-  if (opt.windowBits >= 0 && opt.windowBits < 16 && !(options2 && options2.windowBits)) {
+  if (opt.windowBits >= 0 && opt.windowBits < 16 && !(options && options.windowBits)) {
     opt.windowBits += 32;
   }
   if (opt.windowBits > 15 && opt.windowBits < 48) {
@@ -23302,16 +23505,16 @@ Inflate$1.prototype.onEnd = function(status) {
   this.err = status;
   this.msg = this.strm.msg;
 };
-function inflate$1(input, options2) {
-  const inflator = new Inflate$1(options2);
+function inflate$1(input, options) {
+  const inflator = new Inflate$1(options);
   inflator.push(input);
   if (inflator.err) throw inflator.msg || messages[inflator.err];
   return inflator.result;
 }
-function inflateRaw$1(input, options2) {
-  options2 = options2 || {};
-  options2.raw = true;
-  return inflate$1(input, options2);
+function inflateRaw$1(input, options) {
+  options = options || {};
+  options.raw = true;
+  return inflate$1(input, options);
 }
 var Inflate_1$1 = Inflate$1;
 var inflate_2 = inflate$1;
@@ -23379,8 +23582,8 @@ function parseEditorState(data) {
   });
   return arr;
 }
-function createRenderer(options2) {
-  const { useFallback = false } = options2 || {};
+function createRenderer(options) {
+  const { useFallback = false } = options || {};
   return function renderNode(node2, index) {
     const { type, props = {}, children } = node2;
     const name = typeof type !== "string" ? type.resolvedName : type;