@schematichq/schematic-components 0.7.14 → 0.7.15

package/dist/schematic-components.esm.js

@@ -7801,8 +7801,7 @@ var looksLikeObjectPath = (key, nsSeparator, keySeparator) => {
   }
   return matched;
 };
-var deepFind = function(obj, path) {
-  let keySeparator = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : ".";
+var deepFind = (obj, path, keySeparator = ".") => {
   if (!obj) return void 0;
   if (obj[path]) {
     if (!Object.prototype.hasOwnProperty.call(obj, path)) return void 0;
@@ -7851,39 +7850,25 @@ var consoleLogger = {
   }
 };
 var Logger = class _Logger {
-  constructor(concreteLogger) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(concreteLogger, options2 = {}) {
     this.init(concreteLogger, options2);
   }
-  init(concreteLogger) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  init(concreteLogger, options2 = {}) {
     this.prefix = options2.prefix || "i18next:";
     this.logger = concreteLogger || consoleLogger;
     this.options = options2;
     this.debug = options2.debug;
   }
-  log() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  log(...args) {
     return this.forward(args, "log", "", true);
   }
-  warn() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
+  warn(...args) {
     return this.forward(args, "warn", "", true);
   }
-  error() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  error(...args) {
     return this.forward(args, "error", "");
   }
-  deprecate() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  deprecate(...args) {
     return this.forward(args, "warn", "WARNING DEPRECATED: ", true);
   }
   forward(args, lvl, prefix2, debugOnly) {
@@ -7926,14 +7911,10 @@ var EventEmitter = class {
     }
     this.observers[event].delete(listener);
   }
-  emit(event) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  emit(event, ...args) {
     if (this.observers[event]) {
       const cloned = Array.from(this.observers[event].entries());
-      cloned.forEach((_ref) => {
-        let [observer, numTimesAdded] = _ref;
+      cloned.forEach(([observer, numTimesAdded]) => {
         for (let i2 = 0; i2 < numTimesAdded; i2++) {
           observer(...args);
         }
@@ -7941,8 +7922,7 @@ var EventEmitter = class {
     }
     if (this.observers["*"]) {
       const cloned = Array.from(this.observers["*"].entries());
-      cloned.forEach((_ref2) => {
-        let [observer, numTimesAdded] = _ref2;
+      cloned.forEach(([observer, numTimesAdded]) => {
         for (let i2 = 0; i2 < numTimesAdded; i2++) {
           observer.apply(observer, [event, ...args]);
         }
@@ -7951,11 +7931,10 @@ var EventEmitter = class {
   }
 };
 var ResourceStore = class extends EventEmitter {
-  constructor(data) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      ns: ["translation"],
-      defaultNS: "translation"
-    };
+  constructor(data, options2 = {
+    ns: ["translation"],
+    defaultNS: "translation"
+  }) {
     super();
     this.data = data || {};
     this.options = options2;
@@ -7977,8 +7956,7 @@ var ResourceStore = class extends EventEmitter {
       this.options.ns.splice(index, 1);
     }
   }
-  getResource(lng, ns, key) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  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;
     let path;
@@ -8005,10 +7983,9 @@ 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) {
-    let options2 = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : {
-      silent: false
-    };
+  addResource(lng, ns, key, value, options2 = {
+    silent: false
+  }) {
     const keySeparator = options2.keySeparator !== void 0 ? options2.keySeparator : this.options.keySeparator;
     let path = [lng, ns];
     if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
@@ -8021,10 +7998,9 @@ var ResourceStore = class extends EventEmitter {
     setPath(this.data, path, value);
     if (!options2.silent) this.emit("added", lng, ns, key, value);
   }
-  addResources(lng, ns, resources) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {
-      silent: false
-    };
+  addResources(lng, ns, resources, options2 = {
+    silent: false
+  }) {
     for (const m2 in resources) {
       if (isString(resources[m2]) || Array.isArray(resources[m2])) this.addResource(lng, ns, m2, resources[m2], {
         silent: true
@@ -8032,11 +8008,10 @@ var ResourceStore = class extends EventEmitter {
     }
     if (!options2.silent) this.emit("added", lng, ns, resources);
   }
-  addResourceBundle(lng, ns, resources, deep, overwrite) {
-    let options2 = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : {
-      silent: false,
-      skipCopy: false
-    };
+  addResourceBundle(lng, ns, resources, deep, overwrite, options2 = {
+    silent: false,
+    skipCopy: false
+  }) {
     let path = [lng, ns];
     if (lng.indexOf(".") > -1) {
       path = lng.split(".");
@@ -8099,8 +8074,7 @@ var postProcessor = {
 var checkedLoadedFor = {};
 var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
-  constructor(services) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(services, options2 = {}) {
     super();
     copy2(["resourceStore", "languageUtils", "pluralResolver", "interpolator", "backendConnector", "i18nFormat", "utils"], services, this);
     this.options = options2;
@@ -8112,10 +8086,9 @@ var Translator = class _Translator extends EventEmitter {
   changeLanguage(lng) {
     if (lng) this.language = lng;
   }
-  exists(key) {
-    let o2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      interpolation: {}
-    };
+  exists(key, o2 = {
+    interpolation: {}
+  }) {
     const opt = {
       ...o2
     };
@@ -8167,11 +8140,12 @@ var Translator = class _Translator extends EventEmitter {
       namespaces
     } = this.extractFromKey(keys[keys.length - 1], opt);
     const namespace = namespaces[namespaces.length - 1];
+    let nsSeparator = opt.nsSeparator !== void 0 ? opt.nsSeparator : this.options.nsSeparator;
+    if (nsSeparator === void 0) nsSeparator = ":";
     const lng = opt.lng || this.language;
     const appendNamespaceToCIMode = opt.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
     if (lng?.toLowerCase() === "cimode") {
       if (appendNamespaceToCIMode) {
-        const nsSeparator = opt.nsSeparator || this.options.nsSeparator;
         if (returnDetails) {
           return {
             res: `${namespace}${nsSeparator}${key}`,
@@ -8326,9 +8300,11 @@ var Translator = class _Translator extends EventEmitter {
         }
       }
       res = this.extendTranslation(res, keys, opt, resolved, lastKey);
-      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = `${namespace}:${key}`;
+      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) {
+        res = `${namespace}${nsSeparator}${key}`;
+      }
       if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
-        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}:${key}` : key, usedDefault ? res : void 0, opt);
+        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}${nsSeparator}${key}` : key, usedDefault ? res : void 0, opt);
       }
     }
     if (returnDetails) {
@@ -8339,7 +8315,6 @@ var Translator = class _Translator extends EventEmitter {
     return res;
   }
   extendTranslation(res, key, opt, resolved, lastKey) {
-    var _this = this;
     if (this.i18nFormat?.parse) {
       res = this.i18nFormat.parse(res, {
         ...this.options.interpolation.defaultVariables,
@@ -8375,15 +8350,12 @@ var Translator = class _Translator extends EventEmitter {
         if (nestBef < nestAft) opt.nest = false;
       }
       if (!opt.lng && resolved && resolved.res) opt.lng = this.language || resolved.usedLng;
-      if (opt.nest !== false) res = this.interpolator.nest(res, function() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+      if (opt.nest !== false) res = this.interpolator.nest(res, (...args) => {
         if (lastKey?.[0] === args[0] && !opt.context) {
-          _this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
+          this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
           return null;
         }
-        return _this.translate(...args, key);
+        return this.translate(...args, key);
       }, opt);
       if (opt.interpolation) this.interpolator.reset();
     }
@@ -8400,8 +8372,7 @@ var Translator = class _Translator extends EventEmitter {
     }
     return res;
   }
-  resolve(keys) {
-    let opt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  resolve(keys, opt = {}) {
     let found;
     let usedKey;
     let exactUsedKey;
@@ -8481,13 +8452,11 @@ 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) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  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);
   }
-  getUsedParamsDetails() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  getUsedParamsDetails(options2 = {}) {
     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;
@@ -8643,8 +8612,7 @@ var dummyRule = {
   })
 };
 var PluralResolver = class {
-  constructor(languageUtils) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(languageUtils, options2 = {}) {
     this.languageUtils = languageUtils;
     this.options = options2;
     this.logger = baseLogger.create("pluralResolver");
@@ -8656,8 +8624,7 @@ var PluralResolver = class {
   clearCache() {
     this.pluralRulesCache = {};
   }
-  getRule(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  getRule(code, options2 = {}) {
     const cleanedCode = getCleanedCode(code === "dev" ? "en" : code);
     const type = options2.ordinal ? "ordinal" : "cardinal";
     const cacheKey = JSON.stringify({
@@ -8684,25 +8651,21 @@ var PluralResolver = class {
     this.pluralRulesCache[cacheKey] = rule;
     return rule;
   }
-  needsPlural(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  needsPlural(code, options2 = {}) {
     let rule = this.getRule(code, options2);
     if (!rule) rule = this.getRule("dev", options2);
     return rule?.resolvedOptions().pluralCategories.length > 1;
   }
-  getPluralFormsOfKey(code, key) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  getPluralFormsOfKey(code, key, options2 = {}) {
     return this.getSuffixes(code, options2).map((suffix) => `${key}${suffix}`);
   }
-  getSuffixes(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  getSuffixes(code, options2 = {}) {
     let rule = this.getRule(code, options2);
     if (!rule) rule = this.getRule("dev", options2);
     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}`);
   }
-  getSuffix(code, count) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  getSuffix(code, count, options2 = {}) {
     const rule = this.getRule(code, options2);
     if (rule) {
       return `${this.options.prepend}${options2.ordinal ? `ordinal${this.options.prepend}` : ""}${rule.select(count)}`;
@@ -8711,9 +8674,7 @@ var PluralResolver = class {
     return this.getSuffix("dev", count, options2);
   }
 };
-var deepFindWithDefaults = function(data, defaultData, key) {
-  let keySeparator = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : ".";
-  let ignoreJSONStructure = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true;
+var deepFindWithDefaults = (data, defaultData, key, keySeparator = ".", ignoreJSONStructure = true) => {
   let path = getPathWithDefaults(data, defaultData, key);
   if (!path && ignoreJSONStructure && isString(key)) {
     path = deepFind(data, key, keySeparator);
@@ -8723,15 +8684,13 @@ var deepFindWithDefaults = function(data, defaultData, key) {
 };
 var regexSafe = (val) => val.replace(/\$/g, "$$$$");
 var Interpolator = class {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  constructor(options2 = {}) {
     this.logger = baseLogger.create("interpolator");
     this.options = options2;
     this.format = options2?.interpolation?.format || ((value) => value);
     this.init(options2);
   }
-  init() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  init(options2 = {}) {
     if (!options2.interpolation) options2.interpolation = {
       escapeValue: true
     };
@@ -8854,8 +8813,7 @@ var Interpolator = class {
     });
     return str;
   }
-  nest(str, fc) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  nest(str, fc, options2 = {}) {
     let match2;
     let value;
     let clonedOptions;
@@ -8951,68 +8909,68 @@ var parseFormatStr = (formatStr) => {
 };
 var createCachedFormatter = (fn) => {
   const cache = {};
-  return (val, lng, options2) => {
-    let optForCache = options2;
-    if (options2 && options2.interpolationkey && options2.formatParams && options2.formatParams[options2.interpolationkey] && options2[options2.interpolationkey]) {
+  return (v2, l2, o2) => {
+    let optForCache = o2;
+    if (o2 && o2.interpolationkey && o2.formatParams && o2.formatParams[o2.interpolationkey] && o2[o2.interpolationkey]) {
       optForCache = {
         ...optForCache,
-        [options2.interpolationkey]: void 0
+        [o2.interpolationkey]: void 0
       };
     }
-    const key = lng + JSON.stringify(optForCache);
-    let formatter = cache[key];
-    if (!formatter) {
-      formatter = fn(getCleanedCode(lng), options2);
-      cache[key] = formatter;
+    const key = l2 + JSON.stringify(optForCache);
+    let frm = cache[key];
+    if (!frm) {
+      frm = fn(getCleanedCode(l2), o2);
+      cache[key] = frm;
     }
-    return formatter(val);
+    return frm(v2);
   };
 };
+var createNonCachedFormatter = (fn) => (v2, l2, o2) => fn(getCleanedCode(l2), o2)(v2);
 var Formatter = class {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  constructor(options2 = {}) {
     this.logger = baseLogger.create("formatter");
     this.options = options2;
+    this.init(options2);
+  }
+  init(services, options2 = {
+    interpolation: {}
+  }) {
+    this.formatSeparator = options2.interpolation.formatSeparator || ",";
+    const cf = options2.cacheInBuiltFormats ? createCachedFormatter : createNonCachedFormatter;
     this.formats = {
-      number: createCachedFormatter((lng, opt) => {
+      number: cf((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       }),
-      currency: createCachedFormatter((lng, opt) => {
+      currency: cf((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt,
           style: "currency"
         });
         return (val) => formatter.format(val);
       }),
-      datetime: createCachedFormatter((lng, opt) => {
+      datetime: cf((lng, opt) => {
         const formatter = new Intl.DateTimeFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       }),
-      relativetime: createCachedFormatter((lng, opt) => {
+      relativetime: cf((lng, opt) => {
         const formatter = new Intl.RelativeTimeFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val, opt.range || "day");
       }),
-      list: createCachedFormatter((lng, opt) => {
+      list: cf((lng, opt) => {
         const formatter = new Intl.ListFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       })
     };
-    this.init(options2);
-  }
-  init(services) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      interpolation: {}
-    };
-    this.formatSeparator = options2.interpolation.formatSeparator || ",";
   }
   add(name, fc) {
     this.formats[name.toLowerCase().trim()] = fc;
@@ -9020,8 +8978,7 @@ var Formatter = class {
   addCached(name, fc) {
     this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
   }
-  format(value, format, lng) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  format(value, format, lng, options2 = {}) {
     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);
@@ -9061,8 +9018,7 @@ var removePending = (q2, name) => {
   }
 };
 var Connector = class extends EventEmitter {
-  constructor(backend, store, services) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  constructor(backend, store, services, options2 = {}) {
     super();
     this.backend = backend;
     this.store = store;
@@ -9157,10 +9113,7 @@ var Connector = class extends EventEmitter {
     this.emit("loaded", loaded);
     this.queue = this.queue.filter((q2) => !q2.done);
   }
-  read(lng, ns, fcName) {
-    let tried = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
-    let wait = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : this.retryTimeout;
-    let callback = arguments.length > 5 ? arguments[5] : void 0;
+  read(lng, ns, fcName, tried = 0, wait = this.retryTimeout, callback) {
     if (!lng.length) return callback(null, {});
     if (this.readingCalls >= this.maxParallelReads) {
       this.waitingReads.push({
@@ -9204,9 +9157,7 @@ var Connector = class extends EventEmitter {
     }
     return fc(lng, ns, resolver);
   }
-  prepareLoading(languages, namespaces) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    let callback = arguments.length > 3 ? arguments[3] : void 0;
+  prepareLoading(languages, namespaces, options2 = {}, callback) {
     if (!this.backend) {
       this.logger.warn("No backend was added via i18next.use. Will not load resources.");
       return callback && callback();
@@ -9230,8 +9181,7 @@ var Connector = class extends EventEmitter {
       reload: true
     }, callback);
   }
-  loadOne(name) {
-    let prefix2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
+  loadOne(name, prefix2 = "") {
     const s2 = name.split("|");
     const lng = s2[0];
     const ns = s2[1];
@@ -9241,10 +9191,8 @@ var Connector = class extends EventEmitter {
       this.loaded(name, err2, data);
     });
   }
-  saveMissing(languages, namespace, key, fallbackValue, isUpdate) {
-    let options2 = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : {};
-    let clb = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : () => {
-    };
+  saveMissing(languages, namespace, key, fallbackValue, isUpdate, options2 = {}, 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!!!");
       return;
@@ -9338,7 +9286,8 @@ var get = () => ({
     nestingOptionsSeparator: ",",
     maxReplaces: 1e3,
     skipOnVariables: true
-  }
+  },
+  cacheInBuiltFormats: true
 });
 var transformOptions = (options2) => {
   if (isString(options2.ns)) options2.ns = [options2.ns];
@@ -9361,9 +9310,7 @@ var bindMemberFunctions = (inst) => {
   });
 };
 var I18n = class _I18n extends EventEmitter {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  constructor(options2 = {}, callback) {
     super();
     this.options = transformOptions(options2);
     this.services = {};
@@ -9382,10 +9329,7 @@ var I18n = class _I18n extends EventEmitter {
       }, 0);
     }
   }
-  init() {
-    var _this = this;
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  init(options2 = {}, callback) {
     this.isInitializing = true;
     if (typeof options2 === "function") {
       callback = options2;
@@ -9451,11 +9395,8 @@ var I18n = class _I18n extends EventEmitter {
         hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
       };
       s2.backendConnector = new Connector(createClassOnDemand(this.modules.backend), s2.resourceStore, s2, this.options);
-      s2.backendConnector.on("*", function(event) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-        _this.emit(event, ...args);
+      s2.backendConnector.on("*", (event, ...args) => {
+        this.emit(event, ...args);
       });
       if (this.modules.languageDetector) {
         s2.languageDetector = createClassOnDemand(this.modules.languageDetector);
@@ -9466,11 +9407,8 @@ var I18n = class _I18n extends EventEmitter {
         if (s2.i18nFormat.init) s2.i18nFormat.init(this);
       }
       this.translator = new Translator(this.services, this.options);
-      this.translator.on("*", function(event) {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
-        }
-        _this.emit(event, ...args);
+      this.translator.on("*", (event, ...args) => {
+        this.emit(event, ...args);
       });
       this.modules.external.forEach((m2) => {
         if (m2.init) m2.init(this);
@@ -9487,15 +9425,13 @@ var I18n = class _I18n extends EventEmitter {
     }
     const storeApi = ["getResource", "hasResourceBundle", "getResourceBundle", "getDataByLanguage"];
     storeApi.forEach((fcName) => {
-      this[fcName] = function() {
-        return _this.store[fcName](...arguments);
-      };
+      this[fcName] = (...args) => this.store[fcName](...args);
     });
     const storeApiChained = ["addResource", "addResources", "addResourceBundle", "removeResourceBundle"];
     storeApiChained.forEach((fcName) => {
-      this[fcName] = function() {
-        _this.store[fcName](...arguments);
-        return _this;
+      this[fcName] = (...args) => {
+        this.store[fcName](...args);
+        return this;
       };
     });
     const deferred = defer();
@@ -9519,8 +9455,7 @@ var I18n = class _I18n extends EventEmitter {
     }
     return deferred;
   }
-  loadResources(language) {
-    let callback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
+  loadResources(language, callback = noop) {
     let usedCallback = callback;
     const usedLng = isString(language) ? language : this.language;
     if (typeof language === "function") usedCallback = language;
@@ -9613,7 +9548,6 @@ var I18n = class _I18n extends EventEmitter {
     }
   }
   changeLanguage(lng, callback) {
-    var _this2 = this;
     this.isLanguageChangingTo = lng;
     const deferred = defer();
     this.emit("languageChanging", lng);
@@ -9635,12 +9569,8 @@ var I18n = class _I18n extends EventEmitter {
       } else {
         this.isLanguageChangingTo = void 0;
       }
-      deferred.resolve(function() {
-        return _this2.t(...arguments);
-      });
-      if (callback) callback(err2, function() {
-        return _this2.t(...arguments);
-      });
+      deferred.resolve((...args) => this.t(...args));
+      if (callback) callback(err2, (...args) => this.t(...args));
     };
     const setLng = (lngs) => {
       if (!lng && !lngs && this.services.languageDetector) lngs = [];
@@ -9671,14 +9601,10 @@ var I18n = class _I18n extends EventEmitter {
     return deferred;
   }
   getFixedT(lng, ns, keyPrefix) {
-    var _this3 = this;
-    const fixedT = function(key, opts) {
+    const fixedT = (key, opts, ...rest) => {
       let o2;
       if (typeof opts !== "object") {
-        for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
-          rest[_key3 - 2] = arguments[_key3];
-        }
-        o2 = _this3.options.overloadTranslationOptionHandler([key, opts].concat(rest));
+        o2 = this.options.overloadTranslationOptionHandler([key, opts].concat(rest));
       } else {
         o2 = {
           ...opts
@@ -9688,14 +9614,14 @@ var I18n = class _I18n extends EventEmitter {
       o2.lngs = o2.lngs || fixedT.lngs;
       o2.ns = o2.ns || fixedT.ns;
       if (o2.keyPrefix !== "") o2.keyPrefix = o2.keyPrefix || keyPrefix || fixedT.keyPrefix;
-      const keySeparator = _this3.options.keySeparator || ".";
+      const keySeparator = this.options.keySeparator || ".";
       let resultKey;
       if (o2.keyPrefix && Array.isArray(key)) {
         resultKey = key.map((k2) => `${o2.keyPrefix}${keySeparator}${k2}`);
       } else {
         resultKey = o2.keyPrefix ? `${o2.keyPrefix}${keySeparator}${key}` : key;
       }
-      return _this3.t(resultKey, o2);
+      return this.t(resultKey, o2);
     };
     if (isString(lng)) {
       fixedT.lng = lng;
@@ -9706,23 +9632,16 @@ var I18n = class _I18n extends EventEmitter {
     fixedT.keyPrefix = keyPrefix;
     return fixedT;
   }
-  t() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  t(...args) {
     return this.translator?.translate(...args);
   }
-  exists() {
-    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-      args[_key5] = arguments[_key5];
-    }
+  exists(...args) {
     return this.translator?.exists(...args);
   }
   setDefaultNamespace(ns) {
     this.options.defaultNS = ns;
   }
-  hasLoadedNamespace(ns) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  hasLoadedNamespace(ns, options2 = {}) {
     if (!this.isInitialized) {
       this.logger.warn("hasLoadedNamespace: i18next was not initialized", this.languages);
       return false;
@@ -9787,14 +9706,10 @@ var I18n = class _I18n extends EventEmitter {
     const languageUtils = this.services?.languageUtils || new LanguageUtil(get());
     return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf("-arab") > 1 ? "rtl" : "ltr";
   }
-  static createInstance() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  static createInstance(options2 = {}, callback) {
     return new _I18n(options2, callback);
   }
-  cloneInstance() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
+  cloneInstance(options2 = {}, callback = noop) {
     const forkResourceStore = options2.forkResourceStore;
     if (forkResourceStore) delete options2.forkResourceStore;
     const mergedOptions = {
@@ -9835,10 +9750,7 @@ var I18n = class _I18n extends EventEmitter {
       clone.services.resourceStore = clone.store;
     }
     clone.translator = new Translator(clone.services, mergedOptions);
-    clone.translator.on("*", function(event) {
-      for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
-        args[_key6 - 1] = arguments[_key6];
-      }
+    clone.translator.on("*", (event, ...args) => {
       clone.emit(event, ...args);
     });
     clone.init(mergedOptions, callback);
@@ -15501,6 +15413,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     chargeType: json["charge_type"],
     companyCanTrial: json["company_can_trial"],
     companyCount: json["company_count"],
+    controlledBy: json["controlled_by"],
     createdAt: new Date(json["created_at"]),
     current: json["current"],
     custom: json["custom"],
@@ -15586,6 +15499,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
     chargeType: json["charge_type"],
     companyCount: json["company_count"],
+    controlledBy: json["controlled_by"],
     createdAt: new Date(json["created_at"]),
     description: json["description"],
     features: json["features"].map(
@@ -15732,31 +15646,45 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/checkoutexternal/models/DeletePaymentMethodResponse.ts
-function DeletePaymentMethodResponseFromJSON(json) {
-  return DeletePaymentMethodResponseFromJSONTyped(json, false);
+// src/api/checkoutexternal/models/SetupIntentResponseData.ts
+function SetupIntentResponseDataFromJSON(json) {
+  return SetupIntentResponseDataFromJSONTyped(json, false);
 }
-function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
+function SetupIntentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    data: DeleteResponseFromJSON(json["data"]),
+    publishableKey: json["publishable_key"],
+    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
+  };
+}
+
+// src/api/checkoutexternal/models/CreateSetupIntentResponse.ts
+function CreateSetupIntentResponseFromJSON(json) {
+  return CreateSetupIntentResponseFromJSONTyped(json, false);
+}
+function CreateSetupIntentResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: SetupIntentResponseDataFromJSON(json["data"]),
     params: json["params"]
   };
 }
 
-// src/api/checkoutexternal/models/SetupIntentResponseData.ts
-function SetupIntentResponseDataFromJSON(json) {
-  return SetupIntentResponseDataFromJSONTyped(json, false);
+// src/api/checkoutexternal/models/DeletePaymentMethodResponse.ts
+function DeletePaymentMethodResponseFromJSON(json) {
+  return DeletePaymentMethodResponseFromJSONTyped(json, false);
 }
-function SetupIntentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    publishableKey: json["publishable_key"],
-    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
+    data: DeleteResponseFromJSON(json["data"]),
+    params: json["params"]
   };
 }
 
@@ -16006,6 +15934,38 @@ var CheckoutexternalApi = class extends BaseAPI {
     const response = await this.checkoutUnsubscribeRaw(initOverrides);
     return await response.value();
   }
+  /**
+   * Create setup intent
+   */
+  async createSetupIntentRaw(initOverrides) {
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/components/setup-intent`,
+        method: "POST",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => CreateSetupIntentResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Create setup intent
+   */
+  async createSetupIntent(initOverrides) {
+    const response = await this.createSetupIntentRaw(initOverrides);
+    return await response.value();
+  }
   /**
    * Delete payment method
    */
@@ -16369,8 +16329,10 @@ var en_default = {
     "Manage plan": "Manage plan",
     Monthly: "Monthly",
     Next: "Next",
+    "No invoices created yet": "No invoices created yet",
     "No limit": "No limit",
     "No payment method added yet": "No payment method added yet",
+    "No upcoming invoice": "No upcoming invoice",
     "Not ready to cancel?": "Not ready to cancel?",
     "On demand": "On demand",
     "One time ": "One time",
@@ -17105,7 +17067,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.14";
+      headers["X-Schematic-Components-Version"] = "0.7.15";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -17232,7 +17194,7 @@ var Box = dt.div((props) => {
   function reducer(acc, [key, value]) {
     if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
-        // keys will always be CSS properties
+        // keys should always be CSS properties
         attr(camelToHyphen(key.slice(1)), value)
       );
     }
@@ -17242,11 +17204,11 @@ var Box = dt.div((props) => {
   for (const [key, value] of Object.entries(props.$viewport || {})) {
     styles.push(lt`
       ${{
-      sm: "@media (min-width: 640px)",
-      md: "@media (min-width: 768px)",
-      lg: "@media (min-width: 1024px)",
-      xl: "@media (min-width: 1280px)",
-      "2xl": "@media (min-width: 1536px)"
+      sm: "@container (min-width: 640px)",
+      md: "@container (min-width: 768px)",
+      lg: "@container (min-width: 1024px)",
+      xl: "@container (min-width: 1280px)",
+      "2xl": "@container (min-width: 1536px)"
     }[key] || key} {
         ${Object.entries(value || {}).reduce(reducer, [])}
       }
@@ -18429,6 +18391,7 @@ var Container2 = dt.div`
   line-height: 1.35;
   width: 100%;
   height: 100%;
+  container-type: inline-size;
 
   *,
   *::before,
@@ -22045,17 +22008,16 @@ var StyledViewport = dt.div.withConfig({
   shouldForwardProp: (prop) => !["$numberOfColumns", "numberOfColumns"].includes(prop)
 })`
   display: grid;
-  grid-template-columns: repeat(1, minmax(300px, 1fr));
   margin-left: auto;
   margin-right: auto;
   gap: 1rem;
 
-  @media (min-width: 768px) {
-    grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
+  @container (max-width: 767px) {
+    grid-template-columns: repeat(1, minmax(300px, 1fr));
   }
 
-  @container (max-width: 768px) {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  @container (min-width: 768px) {
+    grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
   }
 `;
 
@@ -22595,7 +22557,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect5, useState as useState14 } from "react";
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -22666,9 +22628,6 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
   useEffect5(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
-  if (invoices.length === 0) {
-    return null;
-  }
   return /* @__PURE__ */ jsx30(Element, { ref, className, children: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx30(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx30(
       Text,
@@ -22680,48 +22639,50 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ jsx30(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-      return /* @__PURE__ */ jsxs23(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ jsx30(
-          InvoiceDate,
+    invoices.length > 0 ? /* @__PURE__ */ jsxs23(Fragment13, { children: [
+      /* @__PURE__ */ jsx30(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+        return /* @__PURE__ */ jsxs23(Flex, { $justifyContent: "space-between", children: [
+          props.date.isVisible && date && /* @__PURE__ */ jsx30(
+            InvoiceDate,
+            {
+              date,
+              fontStyle: props.date.fontStyle,
+              url
+            }
+          ),
+          props.amount.isVisible && /* @__PURE__ */ jsx30(
+            Text,
+            {
+              $font: theme.typography[props.amount.fontStyle].fontFamily,
+              $size: theme.typography[props.amount.fontStyle].fontSize,
+              $weight: theme.typography[props.amount.fontStyle].fontWeight,
+              $color: theme.typography[props.amount.fontStyle].color,
+              children: amount
+            }
+          )
+        ] }, index);
+      }) }),
+      props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+        /* @__PURE__ */ jsx30(
+          Icon2,
           {
-            date,
-            fontStyle: props.date.fontStyle,
-            url
+            name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
+            style: { color: "#D0D0D0" }
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx30(
           Text,
           {
-            $font: theme.typography[props.amount.fontStyle].fontFamily,
-            $size: theme.typography[props.amount.fontStyle].fontSize,
-            $weight: theme.typography[props.amount.fontStyle].fontWeight,
-            $color: theme.typography[props.amount.fontStyle].color,
-            children: amount
+            onClick: toggleListSize,
+            $font: theme.typography[props.collapse.fontStyle].fontFamily,
+            $size: theme.typography[props.collapse.fontStyle].fontSize,
+            $weight: theme.typography[props.collapse.fontStyle].fontWeight,
+            $color: theme.typography[props.collapse.fontStyle].color,
+            children: listSize === props.limit.number ? t2("See more") : t2("See less")
           }
         )
-      ] }, index);
-    }) }),
-    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsx30(
-        Icon2,
-        {
-          name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
-          style: { color: "#D0D0D0" }
-        }
-      ),
-      /* @__PURE__ */ jsx30(
-        Text,
-        {
-          onClick: toggleListSize,
-          $font: theme.typography[props.collapse.fontStyle].fontFamily,
-          $size: theme.typography[props.collapse.fontStyle].fontSize,
-          $weight: theme.typography[props.collapse.fontStyle].fontWeight,
-          $color: theme.typography[props.collapse.fontStyle].color,
-          children: listSize === props.limit.number ? t2("See more") : t2("See less")
-        }
-      )
-    ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsx30(Text, { display: "heading2", children: t2("No invoices created yet") })
   ] }) });
 });
 Invoices.displayName = "Invoices";
@@ -22735,11 +22696,10 @@ var Container3 = dt.div`
   flex-direction: column;
 
   &:last-child {
-    overflow: hidden;
-
     ${({ theme }) => {
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
   return theme.sectionLayout === "merged" && lt`
+          overflow: hidden;
           border-bottom-left-radius: ${borderRadius};
           border-bottom-right-radius: ${borderRadius};
         `;
@@ -22748,7 +22708,7 @@ var Container3 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -22887,7 +22847,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                             $weight: theme.typography[props.header.fontStyle].fontWeight,
                             $color: theme.typography[props.header.fontStyle].color,
                             $leading: 1.35,
-                            children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                            children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                               formatNumber(usage),
                               " ",
                               getFeatureName(feature, usage)
@@ -22925,15 +22885,15 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                                 style: {
                                   whiteSpace: "nowrap"
                                 },
-                                children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                                   formatNumber(allocation),
                                   " ",
                                   getFeatureName(feature, allocation)
-                                ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                                   formatNumber(usage),
                                   " ",
                                   getFeatureName(feature, usage),
-                                  priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                  priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                                     " ",
                                     t2("used")
                                   ] })
@@ -23026,18 +22986,18 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                       $weight: theme.typography.text.fontWeight,
                       $color: theme.typography.text.color,
                       $leading: 1.35,
-                      children: /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                      children: /* @__PURE__ */ jsxs24(Fragment14, { children: [
                         t2("Additional"),
                         ": ",
                         formatCurrency(price, currency),
                         feature && /* @__PURE__ */ jsxs24(Box, { as: "sub", $whiteSpace: "nowrap", children: [
                           "/",
-                          packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                          packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                             packageSize,
                             " "
                           ] }),
                           getFeatureName(feature, packageSize),
-                          feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                          feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                             "/",
                             shortenPeriod(planPeriod)
                           ] })
@@ -23856,7 +23816,7 @@ var PaymentMethodDetails = ({
 
 // src/components/elements/plan-manager/PlanManager.tsx
 import { forwardRef as forwardRef11, useMemo as useMemo15 } from "react";
-import { Fragment as Fragment14, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -23924,7 +23884,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
   const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
-  return /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment15, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
       Notice,
       {
@@ -24069,12 +24029,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                         $gap: "1rem",
                         children: [
                           /* @__PURE__ */ jsxs27(Text, { display: props.addOns.fontStyle, children: [
-                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
                               limit,
                               " ",
                               getFeatureName(entitlement.feature, limit)
                             ] }) : entitlement.feature.name,
-                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                               "/",
                               shortenPeriod(currentPlan.planPeriod)
                             ] })
@@ -24087,7 +24047,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
                                 children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X additional", {
                                   amount: overageAmount
-                                }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                }) : /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                   t2("Additional"),
                                   ":",
                                   " ",
@@ -24097,7 +24057,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
                                     "/",
-                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                       packageSize,
                                       " "
                                     ] }),
@@ -24105,7 +24065,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                       entitlement.feature,
                                       packageSize
                                     ),
-                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                       "/",
                                       shortenPeriod(currentPlan.planPeriod)
                                     ] })
@@ -24124,7 +24084,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
                                     "/",
-                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                       packageSize,
                                       " "
                                     ] }),
@@ -24145,8 +24105,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                               ),
                               (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
                                 "/",
-                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
-                                  packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : /* @__PURE__ */ jsxs27(Fragment15, { children: [
+                                  packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                     packageSize,
                                     " "
                                   ] }),
@@ -24195,7 +24155,7 @@ PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
 import { forwardRef as forwardRef12, useState as useState16 } from "react";
-import { Fragment as Fragment15, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -24506,7 +24466,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                 $weight: theme.typography.text.fontWeight,
                                                 $color: theme.typography.text.color,
                                                 $leading: 1.35,
-                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   formatCurrency(
                                                     entitlementPrice,
                                                     entitlementCurrency
@@ -24514,7 +24474,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                   " ",
                                                   t2("per"),
                                                   " ",
-                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     entitlementPackageSize,
                                                     " "
                                                   ] }),
@@ -24522,18 +24482,18 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlement.feature,
                                                     entitlementPackageSize
                                                   ),
-                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
                                                     selectedPeriod
                                                   ] })
-                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   entitlement.valueType === "unlimited" && !entitlement.priceBehavior ? t2("Unlimited", {
                                                     item: getFeatureName(
                                                       entitlement.feature
                                                     )
-                                                  }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     formatNumber(limit),
                                                     " ",
                                                     getFeatureName(
@@ -24541,7 +24501,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                       limit
                                                     )
                                                   ] }),
-                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
@@ -24551,7 +24511,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                       current_month: "month",
                                                       current_year: "year"
                                                     }[entitlement.metricPeriod]
-                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     "/",
                                                     shortenPeriod(
                                                       selectedPeriod
@@ -24582,7 +24542,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlementCurrency
                                                   ),
                                                   "/",
-                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     entitlementPackageSize,
                                                     " "
                                                   ] }),
@@ -24590,7 +24550,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlement.feature,
                                                     entitlementPackageSize
                                                   ),
-                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     "/",
                                                     shortenPeriod(selectedPeriod)
                                                   ] }),
@@ -24729,7 +24689,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
           props.header.isVisible && /* @__PURE__ */ jsx36(
             Flex,
             {
@@ -24884,12 +24844,12 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                               $size: theme.typography.text.fontSize,
                                               $weight: theme.typography.text.fontWeight,
                                               $color: theme.typography.text.color,
-                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                 entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                                   item: getFeatureName(
                                                     entitlement.feature
                                                   )
-                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   formatNumber(
                                                     entitlement.valueNumeric
                                                   ),
@@ -24899,7 +24859,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlement.valueNumeric
                                                   )
                                                 ] }),
-                                                entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   " ",
                                                   t2("per"),
                                                   " ",
@@ -25050,7 +25010,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 import { forwardRef as forwardRef15, useMemo as useMemo16 } from "react";
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -25075,7 +25035,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = useMemo16(() => {
+  const { discounts, upcomingInvoice } = useMemo16(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,
@@ -25085,24 +25045,10 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
     }));
     return {
       discounts: discounts2,
-      upcomingInvoice: {
-        ...typeof data.upcomingInvoice?.amountDue === "number" && {
-          amountDue: data.upcomingInvoice.amountDue
-        },
-        ...data.subscription?.interval && {
-          interval: data.subscription.interval
-        },
-        ...data.upcomingInvoice?.dueDate && {
-          dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
-        },
-        currency: data.upcomingInvoice?.currency
-      }
+      upcomingInvoice: data.upcomingInvoice
     };
   }, [data.subscription, data.upcomingInvoice]);
-  if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsx39(
     Element,
     {
       as: Flex,
@@ -25110,8 +25056,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "1rem",
-      children: [
-        props.header.isVisible && /* @__PURE__ */ jsx39(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
+      children: upcomingInvoice ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
+        props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx39(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -25121,7 +25067,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
             children: [
               props.header.prefix,
               " ",
-              upcomingInvoice.dueDate
+              toPrettyDate(upcomingInvoice.dueDate)
             ]
           }
         ) }),
@@ -25163,41 +25109,49 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ jsx39(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ jsx39(
-              Flex,
-              {
-                $alignItems: "center",
-                $padding: "0.1875rem 0.375rem",
-                $borderWidth: "1px",
-                $borderStyle: "solid",
-                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
-                $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx39(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(
+            Flex,
+            {
+              $alignItems: "center",
+              $gap: "0.5rem",
+              children: [
+                /* @__PURE__ */ jsx39(
+                  Flex,
+                  {
+                    $alignItems: "center",
+                    $padding: "0.1875rem 0.375rem",
+                    $borderWidth: "1px",
+                    $borderStyle: "solid",
+                    $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
+                    $borderRadius: "0.3125rem",
+                    children: /* @__PURE__ */ jsx39(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: 0.75 * theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: discount.customerFacingCode
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
-                    $size: 0.75 * theme.typography.text.fontSize,
+                    $size: theme.typography.text.fontSize,
                     $weight: theme.typography.text.fontWeight,
                     $color: theme.typography.text.color,
-                    children: discount.customerFacingCode
+                    children: t2("Percent off", { percent: discount.percentOff })
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
-              Text,
-              {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
-                $color: theme.typography.text.color,
-                children: t2("Percent off", { percent: discount.percentOff })
-              }
-            ) })
-          ] }, discount.couponId)) })
+                ) })
+              ]
+            },
+            discount.couponId
+          )) })
         ] })
-      ]
+      ] }) : /* @__PURE__ */ jsx39(Text, { display: "heading2", children: t2("No upcoming invoice") })
     }
   );
 });
@@ -25255,7 +25209,7 @@ function createRenderer(options2) {
 }
 
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
   return /* @__PURE__ */ jsx40(
@@ -25323,7 +25277,7 @@ var ComponentTree = () => {
   if (isPending) {
     return /* @__PURE__ */ jsx40(Loading, {});
   }
-  return /* @__PURE__ */ jsx40(Fragment16, { children });
+  return /* @__PURE__ */ jsx40(Fragment18, { children });
 };
 
 // src/components/embed/Embed.tsx