@schematichq/schematic-components 0.7.14 → 0.7.15

package/dist/schematic-components.cjs.js

@@ -7854,8 +7854,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;
@@ -7904,39 +7903,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) {
@@ -7979,14 +7964,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);
         }
@@ -7994,8 +7975,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]);
         }
@@ -8004,11 +7984,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;
@@ -8030,8 +8009,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;
@@ -8058,10 +8036,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);
@@ -8074,10 +8051,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
@@ -8085,11 +8061,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(".");
@@ -8152,8 +8127,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;
@@ -8165,10 +8139,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
     };
@@ -8220,11 +8193,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}`,
@@ -8379,9 +8353,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) {
@@ -8392,7 +8368,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,
@@ -8428,15 +8403,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();
     }
@@ -8453,8 +8425,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;
@@ -8534,13 +8505,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;
@@ -8696,8 +8665,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");
@@ -8709,8 +8677,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({
@@ -8737,25 +8704,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)}`;
@@ -8764,9 +8727,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);
@@ -8776,15 +8737,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
     };
@@ -8907,8 +8866,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;
@@ -9004,68 +8962,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;
@@ -9073,8 +9031,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);
@@ -9114,8 +9071,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;
@@ -9210,10 +9166,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({
@@ -9257,9 +9210,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();
@@ -9283,8 +9234,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];
@@ -9294,10 +9244,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;
@@ -9391,7 +9339,8 @@ var get = () => ({
     nestingOptionsSeparator: ",",
     maxReplaces: 1e3,
     skipOnVariables: true
-  }
+  },
+  cacheInBuiltFormats: true
 });
 var transformOptions = (options2) => {
   if (isString(options2.ns)) options2.ns = [options2.ns];
@@ -9414,9 +9363,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 = {};
@@ -9435,10 +9382,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;
@@ -9504,11 +9448,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);
@@ -9519,11 +9460,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);
@@ -9540,15 +9478,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();
@@ -9572,8 +9508,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;
@@ -9666,7 +9601,6 @@ var I18n = class _I18n extends EventEmitter {
     }
   }
   changeLanguage(lng, callback) {
-    var _this2 = this;
     this.isLanguageChangingTo = lng;
     const deferred = defer();
     this.emit("languageChanging", lng);
@@ -9688,12 +9622,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 = [];
@@ -9724,14 +9654,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
@@ -9741,14 +9667,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;
@@ -9759,23 +9685,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;
@@ -9840,14 +9759,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 = {
@@ -9888,10 +9803,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);
@@ -15554,6 +15466,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"],
@@ -15639,6 +15552,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(
@@ -15785,31 +15699,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"]
   };
 }
 
@@ -16059,6 +15987,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
    */
@@ -16422,8 +16382,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",
@@ -17158,7 +17120,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     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,
@@ -17285,7 +17247,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)
       );
     }
@@ -17295,11 +17257,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, [])}
       }
@@ -18482,6 +18444,7 @@ var Container2 = dt.div`
   line-height: 1.35;
   width: 100%;
   height: 100%;
+  container-type: inline-size;
 
   *,
   *::before,
@@ -22084,17 +22047,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))`};
   }
 `;
 
@@ -22705,9 +22667,6 @@ var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref
   (0, import_react34.useEffect)(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
-  if (invoices.length === 0) {
-    return null;
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
     props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Text,
@@ -22719,48 +22678,50 @@ var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          InvoiceDate,
+    invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $justifyContent: "space-between", children: [
+          props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            InvoiceDate,
+            {
+              date,
+              fontStyle: props.date.fontStyle,
+              url
+            }
+          ),
+          props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            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__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          Icon2,
           {
-            date,
-            fontStyle: props.date.fontStyle,
-            url
+            name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
+            style: { color: "#D0D0D0" }
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           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__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        Icon2,
-        {
-          name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
-          style: { color: "#D0D0D0" }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        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__ */ (0, import_jsx_runtime30.jsx)(Text, { display: "heading2", children: t2("No invoices created yet") })
   ] }) });
 });
 Invoices.displayName = "Invoices";
@@ -22774,11 +22735,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};
         `;
@@ -25114,7 +25074,7 @@ var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref)
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = (0, import_react43.useMemo)(() => {
+  const { discounts, upcomingInvoice } = (0, import_react43.useMemo)(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,
@@ -25124,24 +25084,10 @@ var UpcomingBill = (0, import_react43.forwardRef)(({ 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__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Element,
     {
       as: Flex,
@@ -25149,8 +25095,8 @@ var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref)
       className,
       $flexDirection: "column",
       $gap: "1rem",
-      children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+        props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -25160,7 +25106,7 @@ var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref)
             children: [
               props.header.prefix,
               " ",
-              upcomingInvoice.dueDate
+              toPrettyDate(upcomingInvoice.dueDate)
             ]
           }
         ) }),
@@ -25202,41 +25148,49 @@ var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref)
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              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__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            Flex,
+            {
+              $alignItems: "center",
+              $gap: "0.5rem",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  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__ */ (0, import_jsx_runtime39.jsx)(
+                      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__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   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__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              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__ */ (0, import_jsx_runtime39.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") })
     }
   );
 });