@schematichq/schematic-components 1.4.0 → 1.4.2

package/dist/schematic-components.esm.js

@@ -283,17 +283,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;
@@ -1879,8 +1879,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) };
   }
@@ -2012,14 +2012,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
@@ -4079,7 +4079,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 = useCallback(() => {
     const periods = [];
@@ -4094,14 +4094,14 @@ function useAvailablePlans(activePeriod, options2 = { useSelectedPeriod: true })
   const getActivePlans = 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 useMemo(() => {
     return {
@@ -4431,14 +4431,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);
@@ -4465,10 +4465,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();
@@ -4512,13 +4512,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 = ".";
     }
@@ -4537,9 +4537,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(".");
@@ -4564,10 +4564,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) {
@@ -4577,9 +4577,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) {
@@ -4587,9 +4587,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
   }) {
@@ -4602,7 +4602,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 {
@@ -4612,7 +4612,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)) {
@@ -4645,9 +4645,9 @@ var postProcessor = {
   addPostProcessor(module) {
     this.processors[module.name] = module;
   },
-  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;
   }
@@ -4675,10 +4675,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 = ".";
     }
@@ -4728,12 +4728,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;
@@ -5054,16 +5057,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 = {
@@ -5081,10 +5084,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;
       }
     }
@@ -5092,8 +5095,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");
   }
@@ -5214,9 +5217,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 = {};
   }
@@ -5226,9 +5229,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
@@ -5248,32 +5251,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) => {
@@ -5286,14 +5289,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 {
@@ -5314,7 +5317,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;
@@ -5345,7 +5348,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;
@@ -5354,7 +5357,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;
@@ -5363,14 +5366,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)
@@ -5385,9 +5388,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];
@@ -5415,7 +5418,7 @@ var Interpolator = class {
     });
     return str;
   }
-  nest(str, fc, options2 = {}) {
+  nest(str, fc, options = {}) {
     let match2;
     let value;
     let clonedOptions;
@@ -5447,7 +5450,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;
@@ -5465,8 +5468,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());
       }
@@ -5528,16 +5531,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, {
@@ -5578,7 +5581,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);
@@ -5592,11 +5595,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) {
@@ -5618,24 +5621,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 = {};
@@ -5644,7 +5647,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) {
@@ -5757,14 +5760,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;
@@ -5791,7 +5794,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!!!");
@@ -5800,7 +5803,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);
@@ -5867,9 +5870,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;
@@ -5889,15 +5892,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 = () => {
 };
@@ -5910,53 +5913,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;
@@ -6221,8 +6224,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);
@@ -6245,7 +6258,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;
@@ -6254,7 +6267,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;
@@ -6262,8 +6275,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;
@@ -6319,22 +6332,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) => {
@@ -6455,7 +6468,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
@@ -6463,9 +6476,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;
     }
   });
 };
@@ -6510,10 +6523,10 @@ var defaultOptions = {
   useSuspense: true,
   unescape
 };
-var setDefaults = (options2 = {}) => {
+var setDefaults = (options = {}) => {
   defaultOptions = {
     ...defaultOptions,
-    ...options2
+    ...options
   };
 };
 var getDefaults = () => defaultOptions;
@@ -7044,12 +7057,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");
   }
@@ -7372,6 +7385,7 @@ function BillingCreditBundleViewFromJSONTyped(json, ignoreDiscriminator) {
     expiryType: json["expiry_type"],
     expiryUnit: json["expiry_unit"],
     expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
+    hasGrants: json["has_grants"],
     id: json["id"],
     name: json["name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
@@ -7542,6 +7556,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
   }
   return {
     billingScheme: json["billing_scheme"],
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     environmentId: json["environment_id"],
@@ -7560,6 +7575,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     ),
     quantity: json["quantity"],
     subscriptionId: json["subscription_id"],
+    subscriptionItemExternalId: json["subscription_item_external_id"] == null ? void 0 : json["subscription_item_external_id"],
     updatedAt: new Date(json["updated_at"]),
     usageType: json["usage_type"]
   };
@@ -8322,6 +8338,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     createdAt: new Date(json["created_at"]),
     environmentId: json["environment_id"],
@@ -8469,6 +8486,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);
@@ -8537,6 +8569,9 @@ function CreditCompanyGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditName: json["credit_name"],
     expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     grantReason: json["grant_reason"],
     id: json["id"],
     planId: json["plan_id"] == null ? void 0 : json["plan_id"],
@@ -8564,6 +8599,7 @@ function UsageBasedEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminato
     return json;
   }
   return {
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     featureId: json["feature_id"],
     meteredPrice: json["metered_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_price"]),
@@ -8662,6 +8698,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(
@@ -10134,6 +10173,7 @@ function PlanEntitlementResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     createdAt: new Date(json["created_at"]),
     environmentId: json["environment_id"],
@@ -10223,7 +10263,8 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     addOnCompatibilities: json["add_on_compatibilities"].map(
       CompatiblePlansFromJSON2
     ),
-    capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"])
+    capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
+    showPeriodToggle: json["show_period_toggle"]
   };
 }
 
@@ -10410,18 +10451,18 @@ var EmbedProvider = ({
   children,
   apiKey,
   apiConfig,
-  ...options2
+  ...options
 }) => {
   const sessionIdRef = useRef2(v4_default());
   const styleRef = useRef2(null);
-  const [state, dispatch] = useReducer(reducer, options2, (opts) => {
+  const [state, dispatch] = useReducer(reducer, options, (opts) => {
     const providedState = { settings: opts.settings || {} };
     const resolvedState = (0, import_merge2.default)({}, initialState, providedState);
     return resolvedState;
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.4.0",
+      "X-Schematic-Components-Version": "1.4.2",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10429,11 +10470,11 @@ var EmbedProvider = ({
   const [api, setApi] = useState2({});
   const debug = useCallback3(
     (message, ...args) => {
-      if (options2.debug) {
+      if (options.debug) {
         console.debug(`[Schematic] ${message}`, ...args);
       }
     },
-    [options2.debug]
+    [options.debug]
   );
   const hydratePublic = useCallback3(async () => {
     dispatch({ type: "HYDRATE_STARTED" });
@@ -10643,8 +10684,8 @@ var EmbedProvider = ({
     dispatch({ type: "SET_DATA", data });
   }, []);
   const updateSettings = useCallback3(
-    (settings = {}, options3) => {
-      dispatch({ type: "UPDATE_SETTINGS", settings, update: options3?.update });
+    (settings = {}, options2) => {
+      dispatch({ type: "UPDATE_SETTINGS", settings, update: options2?.update });
     },
     []
   );
@@ -10735,9 +10776,9 @@ var EmbedProvider = ({
     }
   }, [debug, state.error]);
   useEffect2(() => {
-    const providedSettings = { ...options2.settings || {} };
+    const providedSettings = { ...options.settings || {} };
     updateSettings(providedSettings, { update: false });
-  }, [options2.settings, updateSettings]);
+  }, [options.settings, updateSettings]);
   useEffect2(() => {
     const planChanged = (event) => {
       if (event instanceof CustomEvent) {
@@ -11126,7 +11167,6 @@ var Button = dt.button(
       ${() => $selfAlignment && lt`
           align-self: ${$selfAlignment};
         `}
-      gap: 0.5rem;
       width: ${$fullWidth ? "100%" : "fit-content"};
       border: 1px solid transparent;
       transition: 0.1s;
@@ -11230,6 +11270,9 @@ var Button = dt.button(
       &::before {
         content: "";
         ${loaderStyles({ $color: theme[$color], $size, $isLoading })}
+        ${$isLoading && lt`
+          margin-right: 0.5rem;
+        `}
       }
 
       &:disabled {
@@ -12428,6 +12471,7 @@ var Sidebar = ({
   addOns,
   creditBundles = [],
   usageBasedEntitlements,
+  addOnUsageBasedEntitlements = [],
   charges,
   checkoutRef,
   checkoutStage,
@@ -12612,6 +12656,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,
@@ -12627,19 +12700,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) {
@@ -12677,6 +12738,7 @@ var Sidebar = ({
     setIsLoading,
     setLayout,
     payInAdvanceEntitlements,
+    addOnUsageBasedEntitlements,
     willTrialWithoutPaymentMethod,
     promoCode
   ]);
@@ -14165,7 +14227,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         $size: "lg",
                         type: "number",
                         value: entitlement.quantity,
-                        min: 1,
+                        min: 0,
                         autoFocus: true,
                         onFocus: (event) => {
                           event.target.select();
@@ -14173,7 +14235,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         onChange: (event) => {
                           event.preventDefault();
                           const value = parseInt(event.target.value);
-                          if (!isNaN(value) && value > 0) {
+                          if (!isNaN(value)) {
                             updateQuantity(entitlement.id, value);
                           }
                         }
@@ -14252,7 +14314,7 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
     const featureUsage = entitlements.find(
       (usage2) => usage2.feature?.id === entitlement.feature?.id
     );
-    const allocation = featureUsage?.allocation || 1;
+    const allocation = featureUsage?.allocation || 0;
     const usage = featureUsage?.usage || 0;
     acc.push({
       ...entitlement,
@@ -14265,7 +14327,7 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
 };
 var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
-  const { data, checkoutState, previewCheckout } = useEmbed();
+  const { data, settings, isPending, checkoutState, previewCheckout } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const contentRef = useRef6(null);
   const checkoutRef = useRef6(null);
@@ -14279,16 +14341,6 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = useState9(false);
   const [error, setError] = useState9();
-  const currentPeriod = useMemo9(
-    () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
-    [data, checkoutState?.period]
-  );
-  const [planPeriod, setPlanPeriod] = useState9(currentPeriod);
-  const {
-    plans: availablePlans,
-    addOns: availableAddOns,
-    periods: availablePeriods
-  } = useAvailablePlans(planPeriod);
   const {
     currentPlanId,
     currentEntitlements,
@@ -14310,6 +14362,18 @@ var CheckoutDialog = ({ top = 0 }) => {
       trialPaymentMethodRequired: false
     };
   }, [data]);
+  const currentPeriod = useMemo9(
+    () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
+    [data, checkoutState?.period]
+  );
+  const [planPeriod, setPlanPeriod] = useState9(currentPeriod);
+  const {
+    plans: availablePlans,
+    addOns: availableAddOns,
+    periods: availablePeriods
+  } = useAvailablePlans(planPeriod, {
+    useSelectedPeriod: showPeriodToggle
+  });
   const [selectedPlan, setSelectedPlan] = useState9(
     () => {
       return availablePlans.find(
@@ -14370,6 +14434,12 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
+  const addOnPayInAdvanceEntitlements = useMemo9(
+    () => addOnUsageBasedEntitlements.filter(
+      (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
+    ),
+    [addOnUsageBasedEntitlements]
+  );
   const [promoCode, setPromoCode] = useState9(null);
   const [isPaymentMethodRequired, setIsPaymentMethodRequired] = useState9(false);
   const willTrialWithoutPaymentMethod = useMemo9(
@@ -14457,20 +14527,8 @@ var CheckoutDialog = ({ top = 0 }) => {
     if (checkoutState?.credits) {
       return "credits";
     }
-    if (checkoutState?.planId !== currentPlanId) {
-      const hasUsageStage = checkoutStages.some(
-        (stage) => stage.id === "usage"
-      );
-      const hasAddonsStage = checkoutStages.some(
-        (stage) => stage.id === "addons"
-      );
-      const hasAddonsUsageStage = checkoutStages.some(
-        (stage) => stage.id === "addonsUsage"
-      );
-      if (hasUsageStage) return "usage";
-      if (hasAddonsStage) return "addons";
-      if (hasAddonsUsageStage) return "addonsUsage";
-      return "plan";
+    if (typeof checkoutState?.planId !== "undefined" && checkoutState.planId !== currentPlanId) {
+      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "addonsUsage") ? "addonsUsage" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : "plan";
     }
     return "plan";
   });
@@ -14609,7 +14667,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               ...entitlement,
               allocation: entitlement.valueNumeric || 0,
               usage: 0,
-              quantity: entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ ? 1 : 0
+              quantity: 0
             });
           }
           return acc;
@@ -14676,7 +14734,10 @@ var CheckoutDialog = ({ top = 0 }) => {
           }))
         );
         setAddOnUsageBasedEntitlements(updatedAddOnEntitlements);
-        handlePreviewCheckout({ addOns: updated });
+        handlePreviewCheckout({
+          addOns: updated,
+          addOnPayInAdvanceEntitlements: updatedAddOnEntitlements
+        });
         return updated;
       });
     },
@@ -14878,7 +14939,17 @@ var CheckoutDialog = ({ top = 0 }) => {
                     ]
                   }
                 ),
-                checkoutStage === "plan" && /* @__PURE__ */ jsx20(
+                isPending ? /* @__PURE__ */ jsx20(
+                  Flex,
+                  {
+                    $width: "100%",
+                    $height: "100%",
+                    $alignItems: "center",
+                    $justifyContent: "center",
+                    $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
+                    children: /* @__PURE__ */ jsx20(Loader, { $size: "2xl" })
+                  }
+                ) : checkoutStage === "plan" ? /* @__PURE__ */ jsx20(
                   Plan,
                   {
                     isLoading,
@@ -14889,8 +14960,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     shouldTrial,
                     showPeriodToggle
                   }
-                ),
-                checkoutStage === "usage" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "usage" ? /* @__PURE__ */ jsx20(
                   Usage,
                   {
                     isLoading,
@@ -14899,8 +14969,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: payInAdvanceEntitlements,
                     updateQuantity: updateUsageBasedEntitlementQuantity
                   }
-                ),
-                checkoutStage === "addons" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addons" ? /* @__PURE__ */ jsx20(
                   AddOns,
                   {
                     isLoading,
@@ -14908,26 +14977,23 @@ var CheckoutDialog = ({ top = 0 }) => {
                     addOns,
                     toggle: (id) => toggleAddOn(id)
                   }
-                ),
-                checkoutStage === "addonsUsage" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addonsUsage" ? /* @__PURE__ */ jsx20(
                   Usage,
                   {
                     isLoading,
                     period: planPeriod,
                     selectedPlan,
-                    entitlements: addOnUsageBasedEntitlements,
+                    entitlements: addOnPayInAdvanceEntitlements,
                     updateQuantity: updateAddOnEntitlementQuantity
                   }
-                ),
-                checkoutStage === "credits" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "credits" ? /* @__PURE__ */ jsx20(
                   Credits,
                   {
                     isLoading,
                     bundles: creditBundles,
                     updateCount: updateCreditBundleCount
                   }
-                ),
-                checkoutStage === "checkout" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "checkout" && /* @__PURE__ */ jsx20(
                   Checkout,
                   {
                     isPaymentMethodRequired,
@@ -14945,6 +15011,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               selectedPlan,
               addOns,
               usageBasedEntitlements,
+              addOnUsageBasedEntitlements,
               creditBundles,
               charges,
               checkoutRef,
@@ -15070,7 +15137,7 @@ var PaymentForm = ({ onConfirm }) => {
 import { useMemo as useMemo10 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var PeriodToggle = ({
-  options: options2,
+  options,
   selectedOption,
   selectedPlan,
   onSelect
@@ -15103,7 +15170,7 @@ var PeriodToggle = ({
           $width: "fit-content"
         }
       },
-      children: options2.map((option) => {
+      children: options.map((option) => {
         const element = /* @__PURE__ */ jsx23(
           Flex,
           {
@@ -16155,8 +16222,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),
@@ -17077,7 +17144,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.8.0",
+    version: "7.9.0",
     startTime
   });
 };
@@ -17152,7 +17219,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);
@@ -18639,6 +18706,7 @@ var PricingTable = forwardRef12(
     const { t: t2 } = useTranslation();
     const { data, settings, isPending, hydratePublic } = useEmbed();
     const { currentPeriod, showPeriodToggle, isStandalone } = useMemo26(() => {
+      const showPeriodToggle2 = data?.showPeriodToggle ?? props.showPeriodToggle;
       if (isCheckoutData(data)) {
         const billingSubscription = data.company?.billingSubscription;
         const isTrialSubscription = billingSubscription?.status === "trialing";
@@ -18647,7 +18715,7 @@ var PricingTable = forwardRef12(
           currentPeriod: data.company?.plan?.planPeriod || "month",
           currentAddOns: data.company?.addOns || [],
           canCheckout: data.capabilities?.checkout ?? true,
-          showPeriodToggle: data.showPeriodToggle ?? props.showPeriodToggle,
+          showPeriodToggle: showPeriodToggle2,
           isTrialSubscription,
           willSubscriptionCancel,
           isStandalone: false
@@ -18657,7 +18725,7 @@ var PricingTable = forwardRef12(
         currentPeriod: "month",
         currentAddOns: [],
         canCheckout: true,
-        showPeriodToggle: props.showPeriodToggle,
+        showPeriodToggle: showPeriodToggle2,
         isTrialSubscription: false,
         willSubscriptionCancel: false,
         isStandalone: true
@@ -18693,7 +18761,7 @@ var PricingTable = forwardRef12(
     useEffect8(() => {
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
-    if (isStandalone && isPending) {
+    if (isPending) {
       return /* @__PURE__ */ jsx46(
         Flex,
         {
@@ -21177,7 +21245,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,
@@ -21185,7 +21253,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;
@@ -21291,23 +21359,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;
@@ -23120,12 +23188,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;
@@ -23133,7 +23201,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) {
@@ -23255,16 +23323,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;
@@ -23332,8 +23400,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;