@schematichq/schematic-components 0.7.13 → 0.7.15

package/dist/schematic-components.cjs.js

@@ -6745,9 +6745,9 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.17";
+var v = "6.1.18";
 var g = "/*!sc*/\n";
-var S = "undefined" != typeof window && "HTMLElement" in window;
+var S = "undefined" != typeof window && "undefined" != typeof document;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
 var b = {};
 var E = /invalid hook call/i;
@@ -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,14 +8139,14 @@ var Translator = class _Translator extends EventEmitter {
   changeLanguage(lng) {
     if (lng) this.language = lng;
   }
-  exists(key) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      interpolation: {}
+  exists(key, o2 = {
+    interpolation: {}
+  }) {
+    const opt = {
+      ...o2
     };
-    if (key == null) {
-      return false;
-    }
-    const resolved = this.resolve(key, options2);
+    if (key == null) return false;
+    const resolved = this.resolve(key, opt);
     return resolved?.res !== void 0;
   }
   extractFromKey(key, opt) {
@@ -8199,7 +8173,10 @@ var Translator = class _Translator extends EventEmitter {
       namespaces: isString(namespaces) ? [namespaces] : namespaces
     };
   }
-  translate(keys, opt, lastKey) {
+  translate(keys, o2, lastKey) {
+    let opt = typeof o2 === "object" ? {
+      ...o2
+    } : o2;
     if (typeof opt !== "object" && this.options.overloadTranslationOptionHandler) {
       opt = this.options.overloadTranslationOptionHandler(arguments);
     }
@@ -8216,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}`,
@@ -8375,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);
+        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}${nsSeparator}${key}` : key, usedDefault ? res : void 0, opt);
       }
     }
     if (returnDetails) {
@@ -8388,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,
@@ -8424,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();
     }
@@ -8449,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;
@@ -8530,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;
@@ -8692,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");
@@ -8705,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({
@@ -8733,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)}`;
@@ -8760,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);
@@ -8772,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
     };
@@ -8903,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;
@@ -9000,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;
@@ -9069,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);
@@ -9110,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;
@@ -9206,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({
@@ -9253,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();
@@ -9279,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];
@@ -9290,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;
@@ -9387,7 +9339,8 @@ var get = () => ({
     nestingOptionsSeparator: ",",
     maxReplaces: 1e3,
     skipOnVariables: true
-  }
+  },
+  cacheInBuiltFormats: true
 });
 var transformOptions = (options2) => {
   if (isString(options2.ns)) options2.ns = [options2.ns];
@@ -9410,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 = {};
@@ -9431,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;
@@ -9500,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);
@@ -9515,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);
@@ -9536,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();
@@ -9568,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;
@@ -9658,11 +9597,10 @@ var I18n = class _I18n extends EventEmitter {
     }
     if (!this.resolvedLanguage && this.languages.indexOf(l2) < 0 && this.store.hasLanguageSomeTranslations(l2)) {
       this.resolvedLanguage = l2;
-      if (this.languages.indexOf(l2) < 0) this.languages.unshift(l2);
+      this.languages.unshift(l2);
     }
   }
   changeLanguage(lng, callback) {
-    var _this2 = this;
     this.isLanguageChangingTo = lng;
     const deferred = defer();
     this.emit("languageChanging", lng);
@@ -9684,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 = [];
@@ -9720,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
@@ -9737,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;
@@ -9755,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;
@@ -9836,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 = {
@@ -9872,21 +9791,19 @@ var I18n = class _I18n extends EventEmitter {
         prev2[l2] = {
           ...this.store.data[l2]
         };
-        return Object.keys(prev2[l2]).reduce((acc, n) => {
+        prev2[l2] = Object.keys(prev2[l2]).reduce((acc, n) => {
           acc[n] = {
             ...prev2[l2][n]
           };
           return acc;
-        }, {});
+        }, prev2[l2]);
+        return prev2;
       }, {});
       clone.store = new ResourceStore(clonedData, mergedOptions);
       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);
@@ -14734,6 +14651,8 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     id: json["id"],
     interval: json["interval"],
     isActive: json["is_active"],
+    meterEventName: json["meter_event_name"] == null ? void 0 : json["meter_event_name"],
+    meterEventPayloadKey: json["meter_event_payload_key"] == null ? void 0 : json["meter_event_payload_key"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     packageSize: json["package_size"],
     price: json["price"],
@@ -15274,12 +15193,12 @@ function EventSummaryResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    companyCount: json["company_count"],
+    companyCount: json["company_count"] == null ? void 0 : json["company_count"],
     environmentId: json["environment_id"],
     eventCount: json["event_count"],
     eventSubtype: json["event_subtype"],
     lastSeenAt: json["last_seen_at"] == null ? void 0 : new Date(json["last_seen_at"]),
-    userCount: json["user_count"]
+    userCount: json["user_count"] == null ? void 0 : json["user_count"]
   };
 }
 
@@ -15547,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"],
@@ -15632,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(
@@ -15778,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"]
   };
 }
 
@@ -16052,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
    */
@@ -16415,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",
@@ -16426,6 +16395,7 @@ var en_default = {
     "Pay now": "Pay now",
     "Payment Method": "Payment Method",
     "Percent off": "{{percent}}% off",
+    "Plan selected": "Plan selected",
     Plan: "Plan",
     Plans: "Plans",
     "Please provide an access token.": "Please provide an access token.",
@@ -16447,13 +16417,15 @@ var en_default = {
     "Session expired. Please refresh and try again.": "Session expired. Please refresh and try again.",
     "Show details": "Show details",
     "Start trial": "Start trial",
+    "Start X day trial": "Start {{days}} day trial",
     "Subscribe and close": "Subscribe and close",
     "Subscription canceled": "Subscription canceled",
     Subscription: "Subscription",
     "Talk to support": "Talk to support",
     Total: "Total",
     "Trial ends in": "Trial ends in {{days}} days",
-    "Trial plan": "Try free for {{days}} days",
+    "Trial in progress": "Trial in progress",
+    "Trial selected": "Trial selected",
     Trial: "Trial",
     Unlimited: "Unlimited {{item}}",
     "Unsubscribe failed": "Unsubscribe failed",
@@ -17148,7 +17120,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.13";
+      headers["X-Schematic-Components-Version"] = "0.7.15";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -17275,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)
       );
     }
@@ -17285,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, [])}
       }
@@ -17592,29 +17564,23 @@ var Button = dt.button(
         case "sm":
           return lt`
               font-size: ${15 / TEXT_BASE_SIZE}rem;
-              ${$variant !== "text" && lt`
-                height: ${40 / TEXT_BASE_SIZE}rem;
-                padding: ${7 / TEXT_BASE_SIZE}rem ${20 / TEXT_BASE_SIZE}rem;
-                border-radius: ${6 / TEXT_BASE_SIZE}rem;
-              `}
+              height: ${40 / TEXT_BASE_SIZE}rem;
+              padding: ${7 / TEXT_BASE_SIZE}rem ${20 / TEXT_BASE_SIZE}rem;
+              border-radius: ${6 / TEXT_BASE_SIZE}rem;
             `;
         case "md":
           return lt`
               font-size: ${17 / TEXT_BASE_SIZE}rem;
-              ${$variant !== "text" && lt`
-                height: ${52 / TEXT_BASE_SIZE}rem;
-                padding: ${8 / TEXT_BASE_SIZE}rem ${24 / TEXT_BASE_SIZE}rem;
-                border-radius: ${8 / TEXT_BASE_SIZE}rem;
-              `}
+              height: ${52 / TEXT_BASE_SIZE}rem;
+              padding: ${8 / TEXT_BASE_SIZE}rem ${24 / TEXT_BASE_SIZE}rem;
+              border-radius: ${8 / TEXT_BASE_SIZE}rem;
             `;
         case "lg":
           return lt`
               font-size: ${19 / TEXT_BASE_SIZE}rem;
-              ${$variant !== "text" && lt`
-                height: ${64 / TEXT_BASE_SIZE}rem;
-                padding: ${9 / TEXT_BASE_SIZE}rem ${28 / TEXT_BASE_SIZE}rem;
-                border-radius: ${10 / TEXT_BASE_SIZE}rem;
-              `}
+              height: ${64 / TEXT_BASE_SIZE}rem;
+              padding: ${9 / TEXT_BASE_SIZE}rem ${28 / TEXT_BASE_SIZE}rem;
+              border-radius: ${10 / TEXT_BASE_SIZE}rem;
             `;
       }
     }}
@@ -18478,6 +18444,7 @@ var Container2 = dt.div`
   line-height: 1.35;
   width: 100%;
   height: 100%;
+  container-type: inline-size;
 
   *,
   *::before,
@@ -18632,7 +18599,8 @@ var StageButton = ({
   isLoading,
   requiresPayment,
   setCheckoutStage,
-  trialPaymentMethodRequired
+  trialPaymentMethodRequired,
+  willTrial
 }) => {
   const { t: t2 } = useTranslation();
   const NoPaymentRequired = () => {
@@ -18648,42 +18616,14 @@ var StageButton = ({
     );
   };
   if (checkoutStage === "plan") {
-    if (canTrial) {
-      if (trialPaymentMethodRequired) {
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          Button,
-          {
-            type: "button",
-            disabled: !hasAddOns && !canUpdateSubscription,
-            onClick: async () => {
-              setCheckoutStage?.("checkout");
-            },
-            $isLoading: isLoading,
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              Flex,
-              {
-                $gap: "0.5rem",
-                $justifyContent: "center",
-                $alignItems: "center",
-                $padding: "0 1rem",
-                children: [
-                  t2("Next"),
-                  ": ",
-                  t2("Checkout"),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "arrow-right" })
-                ]
-              }
-            )
-          }
-        );
-      }
+    if (canTrial && trialPaymentMethodRequired) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Button,
         {
           type: "button",
-          disabled: !hasUnstagedChanges || !canUpdateSubscription,
+          disabled: !hasAddOns && !canUpdateSubscription,
           onClick: async () => {
-            checkout();
+            setCheckoutStage?.("checkout");
           },
           $isLoading: isLoading,
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -18694,7 +18634,9 @@ var StageButton = ({
               $alignItems: "center",
               $padding: "0 1rem",
               children: [
-                t2("Subscribe and close"),
+                t2("Next"),
+                ": ",
+                t2("Checkout"),
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "arrow-right" })
               ]
             }
@@ -18703,7 +18645,7 @@ var StageButton = ({
       );
     }
     if (!requiresPayment && !checkoutStages?.some(
-      (stage) => stage.id === "addons" || stage.id === "usage"
+      (stage) => stage.id === "usage" || stage.id === "addons"
     )) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NoPaymentRequired, {});
     }
@@ -18729,7 +18671,7 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "usage") {
-    if (!requiresPayment) {
+    if (!requiresPayment && !checkoutStages?.some((stage) => stage.id === "addons")) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NoPaymentRequired, {});
     }
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -18801,7 +18743,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         $isLoading: isLoading,
-        children: canTrial ? t2("Start trial") : t2("Pay now")
+        children: willTrial ? t2("Start trial") : t2("Pay now")
       }
     );
   }
@@ -18827,7 +18769,8 @@ var Sidebar = ({
   setError,
   setIsLoading,
   updatePromoCode,
-  showHeader = true
+  showHeader = true,
+  willTrial = false
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -18957,10 +18900,10 @@ var Sidebar = ({
           ...promoCode && { promoCode }
         }
       });
-      dispatchPlanChangedEvent(response.data);
       setIsLoading(false);
       setLayout("portal");
-      hydrate();
+      await hydrate();
+      dispatchPlanChangedEvent(response.data);
     } catch {
       setLayout("checkout");
       setError(
@@ -19058,6 +19001,7 @@ var Sidebar = ({
     currentUsageBasedEntitlements,
     usageBasedEntitlements
   ]);
+  const willPeriodChange = planPeriod !== data.company?.plan?.planPeriod;
   const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id) && current.planPeriod !== "one-time"
@@ -19067,10 +19011,10 @@ var Sidebar = ({
   );
   const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
   const willPayInAdvanceEntitlementsChange = payInAdvanceEntitlements.length > 0 && payInAdvanceEntitlements.some(({ quantity, usage }) => quantity !== usage);
-  const hasUnstagedChanges = willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
+  const hasUnstagedChanges = willPeriodChange || willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
   const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
   const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
-  const isTrialable = selectedPlan?.companyCanTrial;
+  const isTrialable = selectedPlan?.companyCanTrial === true;
   const today = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(today);
   if (isTrialable && selectedPlan.trialDays) {
@@ -19146,7 +19090,7 @@ var Sidebar = ({
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                data.company?.plan && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                currentPlan && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -19165,10 +19109,10 @@ var Sidebar = ({
                           $size: theme.typography.heading4.fontSize,
                           $weight: theme.typography.heading4.fontWeight,
                           $color: theme.typography.heading4.color,
-                          children: data.company.plan.name
+                          children: currentPlan.name
                         }
                       ) }),
-                      typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                      typeof currentPlan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -19177,14 +19121,12 @@ var Sidebar = ({
                           $color: theme.typography.text.color,
                           children: [
                             formatCurrency(
-                              data.company.plan.planPrice,
-                              data.company.billingSubscription?.currency
+                              currentPlan.planPrice,
+                              data.company?.billingSubscription?.currency
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                               "/",
-                              shortenPeriod(
-                                data.company.plan.planPeriod || planPeriod
-                              )
+                              shortenPeriod(currentPlan.planPeriod || planPeriod)
                             ] })
                           ]
                         }
@@ -19950,7 +19892,7 @@ var Sidebar = ({
               layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 StageButton,
                 {
-                  canTrial: selectedPlan?.companyCanTrial === true,
+                  canTrial: isTrialable,
                   canCheckout,
                   canUpdateSubscription,
                   checkout,
@@ -19962,7 +19904,8 @@ var Sidebar = ({
                   isLoading,
                   requiresPayment,
                   setCheckoutStage,
-                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
+                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true,
+                  willTrial
                 }
               ),
               layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: unsubscribe, $isLoading: isLoading, children: t2("Cancel subscription") }),
@@ -20272,13 +20215,11 @@ var Navigation = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-            Box,
+            Text,
             {
+              as: Box,
               tabIndex: 0,
-              $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
-              $fontFamily: theme.typography.text.fontFamily,
-              $fontWeight: index === activeIndex ? 600 : 400,
-              $color: theme.typography.text.color,
+              $weight: index === activeIndex ? 600 : 400,
               ...!showFullContent && {
                 $overflow: "hidden",
                 $whiteSpace: "nowrap",
@@ -20331,15 +20272,162 @@ var ButtonLink = dt.a`
 
 // src/components/shared/checkout-dialog/Plan.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var Selected = ({ isCurrent = false, isTrial = false }) => {
+  const { t: t2 } = useTranslation();
+  const theme = nt();
+  const text = (0, import_react25.useMemo)(() => {
+    if (isCurrent) {
+      return isTrial ? t2("Trial in progress") : t2("Current plan");
+    }
+    return isTrial ? t2("Trial selected") : t2("Plan selected");
+  }, [t2, isCurrent, isTrial]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Flex,
+    {
+      $justifyContent: "center",
+      $alignItems: "center",
+      $gap: "0.25rem",
+      $padding: "0.625rem 0",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Icon2,
+          {
+            name: "check-rounded",
+            style: {
+              fontSize: 20,
+              lineHeight: 1,
+              color: theme.primary
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Text,
+          {
+            $font: theme.typography.text.fontFamily,
+            $size: 15 / 16 * theme.typography.text.fontSize,
+            $weight: theme.typography.text.fontWeight,
+            $color: theme.typography.text.color,
+            $leading: 1,
+            children: text
+          }
+        )
+      ]
+    }
+  );
+};
+var PlanButtonGroup = ({
+  plan,
+  isLoading,
+  isSelected,
+  onSelect,
+  willTrial
+}) => {
+  const { t: t2 } = useTranslation();
+  const { data } = useEmbed();
+  const isCurrent = plan.id === data.company?.plan?.id;
+  if (plan.companyCanTrial) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
+      data.subscription?.status !== "trialing" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && willTrial ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Selected,
+        {
+          isCurrent,
+          isTrial: plan.companyCanTrial && willTrial
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Button,
+        {
+          type: "button",
+          disabled: (isLoading || !plan.valid) && !plan.custom,
+          ...!plan.custom && {
+            onClick: () => {
+              onSelect({
+                plan,
+                shouldTrial: true
+              });
+            }
+          },
+          $size: "sm",
+          $color: "primary",
+          $variant: "filled",
+          children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            ButtonLink,
+            {
+              href: plan.customPlanConfig?.ctaWebSite ?? "#",
+              target: "_blank",
+              children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+            }
+          ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Tooltip,
+            {
+              trigger: t2("Over usage limit"),
+              content: t2("Current usage exceeds the limit of this plan.")
+            }
+          ) : t2("Start X day trial", { days: plan.trialDays })
+        }
+      ) }),
+      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && (!willTrial || data.subscription?.status === "trialing") ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Selected, { isCurrent }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Button,
+        {
+          type: "button",
+          disabled: isLoading || !plan.valid,
+          onClick: () => {
+            onSelect({ plan, shouldTrial: false });
+          },
+          $size: "sm",
+          $color: "primary",
+          $variant: data.subscription?.status === "trialing" ? "filled" : "text",
+          children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Tooltip,
+            {
+              trigger: t2("Over usage limit"),
+              content: t2("Current usage exceeds the limit of this plan.")
+            }
+          ) : t2("Choose plan")
+        }
+      ) })
+    ] });
+  }
+  return isSelected ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Selected, { isCurrent }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Button,
+    {
+      type: "button",
+      disabled: (isLoading || !plan.valid) && !plan.custom,
+      ...!plan.custom && {
+        onClick: () => {
+          onSelect({ plan });
+        }
+      },
+      $size: "sm",
+      $color: "primary",
+      $variant: "filled",
+      children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ButtonLink,
+        {
+          href: plan.customPlanConfig?.ctaWebSite ?? "#",
+          target: "_blank",
+          children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+        }
+      ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Tooltip,
+        {
+          trigger: t2("Over usage limit"),
+          content: t2("Current usage exceeds the limit of this plan.")
+        }
+      ) : t2("Choose plan")
+    }
+  );
+};
 var Plan = ({
   isLoading,
   plans,
   selectedPlan,
   period,
-  selectPlan
+  selectPlan,
+  willTrial
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
+  const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const [entitlementCounts, setEntitlementCounts] = (0, import_react25.useState)(
     () => plans.reduce(
@@ -20353,7 +20441,6 @@ var Plan = ({
       {}
     )
   );
-  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = { ...prev2[id] };
@@ -20366,6 +20453,7 @@ var Plan = ({
       };
     });
   };
+  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Box,
     {
@@ -20474,7 +20562,7 @@ var Plan = ({
                             $size: 0.75 * theme.typography.text.fontSize,
                             $weight: theme.typography.text.fontWeight,
                             $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                            children: t2("Active")
+                            children: data.subscription?.status === "trialing" ? t2("Trialing") : t2("Active")
                           }
                         )
                       }
@@ -20689,70 +20777,14 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    plan.id === selectedPlan?.id ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-                      Flex,
-                      {
-                        $justifyContent: "center",
-                        $alignItems: "center",
-                        $gap: "0.25rem",
-                        $padding: "0.625rem 0",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                            Icon2,
-                            {
-                              name: "check-rounded",
-                              style: {
-                                fontSize: 20,
-                                lineHeight: 1,
-                                color: theme.primary
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                            Text,
-                            {
-                              $font: theme.typography.text.fontFamily,
-                              $size: 15 / 16 * theme.typography.text.fontSize,
-                              $weight: theme.typography.text.fontWeight,
-                              $color: theme.typography.text.color,
-                              $leading: 1,
-                              children: plan.current ? t2("Current plan") : t2("Selected")
-                            }
-                          )
-                        ]
-                      }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                      Button,
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      PlanButtonGroup,
                       {
-                        type: "button",
-                        disabled: (isLoading || !plan.valid) && !plan.custom,
-                        ...{
-                          onClick: () => {
-                            if (plan.custom) {
-                              return;
-                            }
-                            selectPlan({ plan });
-                          }
-                        },
-                        $size: "sm",
-                        $color: "primary",
-                        $variant: plan.current ? "outline" : "filled",
-                        children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                          ButtonLink,
-                          {
-                            href: plan.customPlanConfig?.ctaWebSite ?? "#",
-                            target: "_blank",
-                            children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
-                          }
-                        ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                          Tooltip,
-                          {
-                            trigger: t2("Over usage limit"),
-                            content: t2(
-                              "Current usage exceeds the limit of this plan."
-                            )
-                          }
-                        ) : plan.companyCanTrial ? t2("Trial plan", { days: plan.trialDays }) : t2("Choose plan")
+                        plan,
+                        isLoading,
+                        isSelected: plan.id === selectedPlan?.id,
+                        onSelect: selectPlan,
+                        willTrial
                       }
                     )
                   ]
@@ -20967,7 +20999,6 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = (0, import_react26.useState)(false);
   const [error, setError] = (0, import_react26.useState)();
-  const [promoCode, setPromoCode] = (0, import_react26.useState)();
   const [planPeriod, setPlanPeriod] = (0, import_react26.useState)(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
@@ -20981,6 +21012,9 @@ var CheckoutDialog = ({ top = 0 }) => {
       (plan) => selected.planId ? plan.id === selected.planId : plan.current
     )
   );
+  const [willTrial, setWillTrial] = (0, import_react26.useState)(
+    data.subscription?.status !== "trialing" && !data.trialPaymentMethodRequired
+  );
   const [addOns, setAddOns] = (0, import_react26.useState)(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
@@ -20989,6 +21023,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }))
   );
+  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
   const currentEntitlements = (0, import_react26.useMemo)(() => {
     return data.featureUsage?.features || [];
   }, [data.featureUsage?.features]);
@@ -21007,11 +21042,14 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
-  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
   );
-  const requiresPayment = (!selectedPlan?.companyCanTrial || !!data.trialPaymentMethodRequired) && (!selectedPlan?.isFree || hasActiveAddOns || hasActivePayInAdvanceEntitlements);
+  const [promoCode, setPromoCode] = (0, import_react26.useState)();
+  const isTrialable = selectedPlan?.isTrialable === true && selectedPlan?.companyCanTrial === true;
+  const isTrialableAndFree = isTrialable && data.trialPaymentMethodRequired !== true;
+  const planRequiresPayment = !isTrialableAndFree || !isTrialable && selectedPlan?.isFree !== true;
+  const requiresPayment = planRequiresPayment || hasActiveAddOns || hasActivePayInAdvanceEntitlements;
   const checkoutStages = (0, import_react26.useMemo)(() => {
     const stages = [
       {
@@ -21021,13 +21059,16 @@ var CheckoutDialog = ({ top = 0 }) => {
         description: t2("Choose your base plan")
       }
     ];
-    if (payInAdvanceEntitlements.length) {
+    if (willTrial) {
+      return stages;
+    }
+    if (payInAdvanceEntitlements.length > 0) {
       stages.push({
         id: "usage",
         name: t2("Quantity")
       });
     }
-    if (availableAddOns.length && !selectedPlan?.companyCanTrial) {
+    if (availableAddOns.length > 0) {
       stages.push({
         id: "addons",
         name: t2("Add-ons"),
@@ -21045,9 +21086,9 @@ var CheckoutDialog = ({ top = 0 }) => {
     return stages;
   }, [
     t2,
+    willTrial,
     payInAdvanceEntitlements,
     availableAddOns,
-    selectedPlan?.companyCanTrial,
     requiresPayment
   ]);
   const [checkoutStage, setCheckoutStage] = (0, import_react26.useState)(() => {
@@ -21152,6 +21193,8 @@ var CheckoutDialog = ({ top = 0 }) => {
         setSelectedPlan(plan);
         setUsageBasedEntitlements(entitlements);
       }
+      const shouldTrial = updates.shouldTrial ?? false;
+      setWillTrial(shouldTrial && !data.trialPaymentMethodRequired);
       previewCheckout({
         period,
         plan: updates.plan,
@@ -21160,7 +21203,13 @@ var CheckoutDialog = ({ top = 0 }) => {
         )
       });
     },
-    [planPeriod, selectedPlan, currentEntitlements, previewCheckout]
+    [
+      data.trialPaymentMethodRequired,
+      planPeriod,
+      selectedPlan,
+      currentEntitlements,
+      previewCheckout
+    ]
   );
   const changePlanPeriod = (0, import_react26.useCallback)(
     (period) => {
@@ -21357,7 +21406,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                         period: planPeriod,
                         plans: availablePlans,
                         selectedPlan,
-                        selectPlan
+                        selectPlan,
+                        willTrial
                       }
                     ),
                     checkoutStage === "usage" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -21409,7 +21459,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                   setCheckoutStage: (stage) => setCheckoutStage(stage),
                   setError: (msg) => setError(msg),
                   setIsLoading,
-                  updatePromoCode: (code) => updatePromoCode(code)
+                  updatePromoCode: (code) => updatePromoCode(code),
+                  willTrial
                 }
               )
             ]
@@ -21996,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))`};
   }
 `;
 
@@ -22617,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,
@@ -22631,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";
@@ -22686,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};
         `;
@@ -23395,7 +23443,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.2.0",
+    version: "7.3.0",
     startTime
   });
 };
@@ -23470,7 +23518,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.2.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.3.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -24666,7 +24714,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                       "Current usage exceeds the limit of this plan."
                                     )
                                   }
-                                ) : plan.companyCanTrial ? t2("Trial plan", { days: plan.trialDays }) : t2("Choose plan")
+                                ) : plan.companyCanTrial ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
                               }
                             )
                           ]
@@ -25026,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,
@@ -25036,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,
@@ -25061,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,
@@ -25072,7 +25106,7 @@ var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref)
             children: [
               props.header.prefix,
               " ",
-              upcomingInvoice.dueDate
+              toPrettyDate(upcomingInvoice.dueDate)
             ]
           }
         ) }),
@@ -25114,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") })
     }
   );
 });