@schematichq/schematic-components 0.7.13 → 0.7.15

package/dist/schematic-components.esm.js

@@ -6692,9 +6692,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;
@@ -7801,8 +7801,7 @@ var looksLikeObjectPath = (key, nsSeparator, keySeparator) => {
   }
   return matched;
 };
-var deepFind = function(obj, path) {
-  let keySeparator = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : ".";
+var deepFind = (obj, path, keySeparator = ".") => {
   if (!obj) return void 0;
   if (obj[path]) {
     if (!Object.prototype.hasOwnProperty.call(obj, path)) return void 0;
@@ -7851,39 +7850,25 @@ var consoleLogger = {
   }
 };
 var Logger = class _Logger {
-  constructor(concreteLogger) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(concreteLogger, options2 = {}) {
     this.init(concreteLogger, options2);
   }
-  init(concreteLogger) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  init(concreteLogger, options2 = {}) {
     this.prefix = options2.prefix || "i18next:";
     this.logger = concreteLogger || consoleLogger;
     this.options = options2;
     this.debug = options2.debug;
   }
-  log() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  log(...args) {
     return this.forward(args, "log", "", true);
   }
-  warn() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
+  warn(...args) {
     return this.forward(args, "warn", "", true);
   }
-  error() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  error(...args) {
     return this.forward(args, "error", "");
   }
-  deprecate() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  deprecate(...args) {
     return this.forward(args, "warn", "WARNING DEPRECATED: ", true);
   }
   forward(args, lvl, prefix2, debugOnly) {
@@ -7926,14 +7911,10 @@ var EventEmitter = class {
     }
     this.observers[event].delete(listener);
   }
-  emit(event) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  emit(event, ...args) {
     if (this.observers[event]) {
       const cloned = Array.from(this.observers[event].entries());
-      cloned.forEach((_ref) => {
-        let [observer, numTimesAdded] = _ref;
+      cloned.forEach(([observer, numTimesAdded]) => {
         for (let i2 = 0; i2 < numTimesAdded; i2++) {
           observer(...args);
         }
@@ -7941,8 +7922,7 @@ var EventEmitter = class {
     }
     if (this.observers["*"]) {
       const cloned = Array.from(this.observers["*"].entries());
-      cloned.forEach((_ref2) => {
-        let [observer, numTimesAdded] = _ref2;
+      cloned.forEach(([observer, numTimesAdded]) => {
         for (let i2 = 0; i2 < numTimesAdded; i2++) {
           observer.apply(observer, [event, ...args]);
         }
@@ -7951,11 +7931,10 @@ var EventEmitter = class {
   }
 };
 var ResourceStore = class extends EventEmitter {
-  constructor(data) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      ns: ["translation"],
-      defaultNS: "translation"
-    };
+  constructor(data, options2 = {
+    ns: ["translation"],
+    defaultNS: "translation"
+  }) {
     super();
     this.data = data || {};
     this.options = options2;
@@ -7977,8 +7956,7 @@ var ResourceStore = class extends EventEmitter {
       this.options.ns.splice(index, 1);
     }
   }
-  getResource(lng, ns, key) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  getResource(lng, ns, key, options2 = {}) {
     const keySeparator = options2.keySeparator !== void 0 ? options2.keySeparator : this.options.keySeparator;
     const ignoreJSONStructure = options2.ignoreJSONStructure !== void 0 ? options2.ignoreJSONStructure : this.options.ignoreJSONStructure;
     let path;
@@ -8005,10 +7983,9 @@ var ResourceStore = class extends EventEmitter {
     if (result || !ignoreJSONStructure || !isString(key)) return result;
     return deepFind(this.data?.[lng]?.[ns], key, keySeparator);
   }
-  addResource(lng, ns, key, value) {
-    let options2 = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : {
-      silent: false
-    };
+  addResource(lng, ns, key, value, options2 = {
+    silent: false
+  }) {
     const keySeparator = options2.keySeparator !== void 0 ? options2.keySeparator : this.options.keySeparator;
     let path = [lng, ns];
     if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
@@ -8021,10 +7998,9 @@ var ResourceStore = class extends EventEmitter {
     setPath(this.data, path, value);
     if (!options2.silent) this.emit("added", lng, ns, key, value);
   }
-  addResources(lng, ns, resources) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {
-      silent: false
-    };
+  addResources(lng, ns, resources, options2 = {
+    silent: false
+  }) {
     for (const m2 in resources) {
       if (isString(resources[m2]) || Array.isArray(resources[m2])) this.addResource(lng, ns, m2, resources[m2], {
         silent: true
@@ -8032,11 +8008,10 @@ var ResourceStore = class extends EventEmitter {
     }
     if (!options2.silent) this.emit("added", lng, ns, resources);
   }
-  addResourceBundle(lng, ns, resources, deep, overwrite) {
-    let options2 = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : {
-      silent: false,
-      skipCopy: false
-    };
+  addResourceBundle(lng, ns, resources, deep, overwrite, options2 = {
+    silent: false,
+    skipCopy: false
+  }) {
     let path = [lng, ns];
     if (lng.indexOf(".") > -1) {
       path = lng.split(".");
@@ -8099,8 +8074,7 @@ var postProcessor = {
 var checkedLoadedFor = {};
 var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
-  constructor(services) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(services, options2 = {}) {
     super();
     copy2(["resourceStore", "languageUtils", "pluralResolver", "interpolator", "backendConnector", "i18nFormat", "utils"], services, this);
     this.options = options2;
@@ -8112,14 +8086,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) {
@@ -8146,7 +8120,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);
     }
@@ -8163,11 +8140,12 @@ var Translator = class _Translator extends EventEmitter {
       namespaces
     } = this.extractFromKey(keys[keys.length - 1], opt);
     const namespace = namespaces[namespaces.length - 1];
+    let nsSeparator = opt.nsSeparator !== void 0 ? opt.nsSeparator : this.options.nsSeparator;
+    if (nsSeparator === void 0) nsSeparator = ":";
     const lng = opt.lng || this.language;
     const appendNamespaceToCIMode = opt.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
     if (lng?.toLowerCase() === "cimode") {
       if (appendNamespaceToCIMode) {
-        const nsSeparator = opt.nsSeparator || this.options.nsSeparator;
         if (returnDetails) {
           return {
             res: `${namespace}${nsSeparator}${key}`,
@@ -8322,9 +8300,11 @@ var Translator = class _Translator extends EventEmitter {
         }
       }
       res = this.extendTranslation(res, keys, opt, resolved, lastKey);
-      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = `${namespace}:${key}`;
+      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) {
+        res = `${namespace}${nsSeparator}${key}`;
+      }
       if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
-        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}:${key}` : key, usedDefault ? res : void 0);
+        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}${nsSeparator}${key}` : key, usedDefault ? res : void 0, opt);
       }
     }
     if (returnDetails) {
@@ -8335,7 +8315,6 @@ var Translator = class _Translator extends EventEmitter {
     return res;
   }
   extendTranslation(res, key, opt, resolved, lastKey) {
-    var _this = this;
     if (this.i18nFormat?.parse) {
       res = this.i18nFormat.parse(res, {
         ...this.options.interpolation.defaultVariables,
@@ -8371,15 +8350,12 @@ var Translator = class _Translator extends EventEmitter {
         if (nestBef < nestAft) opt.nest = false;
       }
       if (!opt.lng && resolved && resolved.res) opt.lng = this.language || resolved.usedLng;
-      if (opt.nest !== false) res = this.interpolator.nest(res, function() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+      if (opt.nest !== false) res = this.interpolator.nest(res, (...args) => {
         if (lastKey?.[0] === args[0] && !opt.context) {
-          _this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
+          this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
           return null;
         }
-        return _this.translate(...args, key);
+        return this.translate(...args, key);
       }, opt);
       if (opt.interpolation) this.interpolator.reset();
     }
@@ -8396,8 +8372,7 @@ var Translator = class _Translator extends EventEmitter {
     }
     return res;
   }
-  resolve(keys) {
-    let opt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  resolve(keys, opt = {}) {
     let found;
     let usedKey;
     let exactUsedKey;
@@ -8477,13 +8452,11 @@ var Translator = class _Translator extends EventEmitter {
   isValidLookup(res) {
     return res !== void 0 && !(!this.options.returnNull && res === null) && !(!this.options.returnEmptyString && res === "");
   }
-  getResource(code, ns, key) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  getResource(code, ns, key, options2 = {}) {
     if (this.i18nFormat?.getResource) return this.i18nFormat.getResource(code, ns, key, options2);
     return this.resourceStore.getResource(code, ns, key, options2);
   }
-  getUsedParamsDetails() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  getUsedParamsDetails(options2 = {}) {
     const optionsKeys = ["defaultValue", "ordinal", "context", "replace", "lng", "lngs", "fallbackLng", "ns", "keySeparator", "nsSeparator", "returnObjects", "returnDetails", "joinArrays", "postProcess", "interpolation"];
     const useOptionsReplaceForData = options2.replace && !isString(options2.replace);
     let data = useOptionsReplaceForData ? options2.replace : options2;
@@ -8639,8 +8612,7 @@ var dummyRule = {
   })
 };
 var PluralResolver = class {
-  constructor(languageUtils) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(languageUtils, options2 = {}) {
     this.languageUtils = languageUtils;
     this.options = options2;
     this.logger = baseLogger.create("pluralResolver");
@@ -8652,8 +8624,7 @@ var PluralResolver = class {
   clearCache() {
     this.pluralRulesCache = {};
   }
-  getRule(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  getRule(code, options2 = {}) {
     const cleanedCode = getCleanedCode(code === "dev" ? "en" : code);
     const type = options2.ordinal ? "ordinal" : "cardinal";
     const cacheKey = JSON.stringify({
@@ -8680,25 +8651,21 @@ var PluralResolver = class {
     this.pluralRulesCache[cacheKey] = rule;
     return rule;
   }
-  needsPlural(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  needsPlural(code, options2 = {}) {
     let rule = this.getRule(code, options2);
     if (!rule) rule = this.getRule("dev", options2);
     return rule?.resolvedOptions().pluralCategories.length > 1;
   }
-  getPluralFormsOfKey(code, key) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  getPluralFormsOfKey(code, key, options2 = {}) {
     return this.getSuffixes(code, options2).map((suffix) => `${key}${suffix}`);
   }
-  getSuffixes(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  getSuffixes(code, options2 = {}) {
     let rule = this.getRule(code, options2);
     if (!rule) rule = this.getRule("dev", options2);
     if (!rule) return [];
     return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map((pluralCategory) => `${this.options.prepend}${options2.ordinal ? `ordinal${this.options.prepend}` : ""}${pluralCategory}`);
   }
-  getSuffix(code, count) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  getSuffix(code, count, options2 = {}) {
     const rule = this.getRule(code, options2);
     if (rule) {
       return `${this.options.prepend}${options2.ordinal ? `ordinal${this.options.prepend}` : ""}${rule.select(count)}`;
@@ -8707,9 +8674,7 @@ var PluralResolver = class {
     return this.getSuffix("dev", count, options2);
   }
 };
-var deepFindWithDefaults = function(data, defaultData, key) {
-  let keySeparator = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : ".";
-  let ignoreJSONStructure = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true;
+var deepFindWithDefaults = (data, defaultData, key, keySeparator = ".", ignoreJSONStructure = true) => {
   let path = getPathWithDefaults(data, defaultData, key);
   if (!path && ignoreJSONStructure && isString(key)) {
     path = deepFind(data, key, keySeparator);
@@ -8719,15 +8684,13 @@ var deepFindWithDefaults = function(data, defaultData, key) {
 };
 var regexSafe = (val) => val.replace(/\$/g, "$$$$");
 var Interpolator = class {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  constructor(options2 = {}) {
     this.logger = baseLogger.create("interpolator");
     this.options = options2;
     this.format = options2?.interpolation?.format || ((value) => value);
     this.init(options2);
   }
-  init() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  init(options2 = {}) {
     if (!options2.interpolation) options2.interpolation = {
       escapeValue: true
     };
@@ -8850,8 +8813,7 @@ var Interpolator = class {
     });
     return str;
   }
-  nest(str, fc) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  nest(str, fc, options2 = {}) {
     let match2;
     let value;
     let clonedOptions;
@@ -8947,68 +8909,68 @@ var parseFormatStr = (formatStr) => {
 };
 var createCachedFormatter = (fn) => {
   const cache = {};
-  return (val, lng, options2) => {
-    let optForCache = options2;
-    if (options2 && options2.interpolationkey && options2.formatParams && options2.formatParams[options2.interpolationkey] && options2[options2.interpolationkey]) {
+  return (v2, l2, o2) => {
+    let optForCache = o2;
+    if (o2 && o2.interpolationkey && o2.formatParams && o2.formatParams[o2.interpolationkey] && o2[o2.interpolationkey]) {
       optForCache = {
         ...optForCache,
-        [options2.interpolationkey]: void 0
+        [o2.interpolationkey]: void 0
       };
     }
-    const key = lng + JSON.stringify(optForCache);
-    let formatter = cache[key];
-    if (!formatter) {
-      formatter = fn(getCleanedCode(lng), options2);
-      cache[key] = formatter;
+    const key = l2 + JSON.stringify(optForCache);
+    let frm = cache[key];
+    if (!frm) {
+      frm = fn(getCleanedCode(l2), o2);
+      cache[key] = frm;
     }
-    return formatter(val);
+    return frm(v2);
   };
 };
+var createNonCachedFormatter = (fn) => (v2, l2, o2) => fn(getCleanedCode(l2), o2)(v2);
 var Formatter = class {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  constructor(options2 = {}) {
     this.logger = baseLogger.create("formatter");
     this.options = options2;
+    this.init(options2);
+  }
+  init(services, options2 = {
+    interpolation: {}
+  }) {
+    this.formatSeparator = options2.interpolation.formatSeparator || ",";
+    const cf = options2.cacheInBuiltFormats ? createCachedFormatter : createNonCachedFormatter;
     this.formats = {
-      number: createCachedFormatter((lng, opt) => {
+      number: cf((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       }),
-      currency: createCachedFormatter((lng, opt) => {
+      currency: cf((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt,
           style: "currency"
         });
         return (val) => formatter.format(val);
       }),
-      datetime: createCachedFormatter((lng, opt) => {
+      datetime: cf((lng, opt) => {
         const formatter = new Intl.DateTimeFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       }),
-      relativetime: createCachedFormatter((lng, opt) => {
+      relativetime: cf((lng, opt) => {
         const formatter = new Intl.RelativeTimeFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val, opt.range || "day");
       }),
-      list: createCachedFormatter((lng, opt) => {
+      list: cf((lng, opt) => {
         const formatter = new Intl.ListFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       })
     };
-    this.init(options2);
-  }
-  init(services) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      interpolation: {}
-    };
-    this.formatSeparator = options2.interpolation.formatSeparator || ",";
   }
   add(name, fc) {
     this.formats[name.toLowerCase().trim()] = fc;
@@ -9016,8 +8978,7 @@ var Formatter = class {
   addCached(name, fc) {
     this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
   }
-  format(value, format, lng) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  format(value, format, lng, options2 = {}) {
     const formats = format.split(this.formatSeparator);
     if (formats.length > 1 && formats[0].indexOf("(") > 1 && formats[0].indexOf(")") < 0 && formats.find((f2) => f2.indexOf(")") > -1)) {
       const lastIndex = formats.findIndex((f2) => f2.indexOf(")") > -1);
@@ -9057,8 +9018,7 @@ var removePending = (q2, name) => {
   }
 };
 var Connector = class extends EventEmitter {
-  constructor(backend, store, services) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  constructor(backend, store, services, options2 = {}) {
     super();
     this.backend = backend;
     this.store = store;
@@ -9153,10 +9113,7 @@ var Connector = class extends EventEmitter {
     this.emit("loaded", loaded);
     this.queue = this.queue.filter((q2) => !q2.done);
   }
-  read(lng, ns, fcName) {
-    let tried = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
-    let wait = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : this.retryTimeout;
-    let callback = arguments.length > 5 ? arguments[5] : void 0;
+  read(lng, ns, fcName, tried = 0, wait = this.retryTimeout, callback) {
     if (!lng.length) return callback(null, {});
     if (this.readingCalls >= this.maxParallelReads) {
       this.waitingReads.push({
@@ -9200,9 +9157,7 @@ var Connector = class extends EventEmitter {
     }
     return fc(lng, ns, resolver);
   }
-  prepareLoading(languages, namespaces) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    let callback = arguments.length > 3 ? arguments[3] : void 0;
+  prepareLoading(languages, namespaces, options2 = {}, callback) {
     if (!this.backend) {
       this.logger.warn("No backend was added via i18next.use. Will not load resources.");
       return callback && callback();
@@ -9226,8 +9181,7 @@ var Connector = class extends EventEmitter {
       reload: true
     }, callback);
   }
-  loadOne(name) {
-    let prefix2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
+  loadOne(name, prefix2 = "") {
     const s2 = name.split("|");
     const lng = s2[0];
     const ns = s2[1];
@@ -9237,10 +9191,8 @@ var Connector = class extends EventEmitter {
       this.loaded(name, err2, data);
     });
   }
-  saveMissing(languages, namespace, key, fallbackValue, isUpdate) {
-    let options2 = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : {};
-    let clb = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : () => {
-    };
+  saveMissing(languages, namespace, key, fallbackValue, isUpdate, options2 = {}, clb = () => {
+  }) {
     if (this.services?.utils?.hasLoadedNamespace && !this.services?.utils?.hasLoadedNamespace(namespace)) {
       this.logger.warn(`did not save key "${key}" as the namespace "${namespace}" was not yet loaded`, "This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!");
       return;
@@ -9334,7 +9286,8 @@ var get = () => ({
     nestingOptionsSeparator: ",",
     maxReplaces: 1e3,
     skipOnVariables: true
-  }
+  },
+  cacheInBuiltFormats: true
 });
 var transformOptions = (options2) => {
   if (isString(options2.ns)) options2.ns = [options2.ns];
@@ -9357,9 +9310,7 @@ var bindMemberFunctions = (inst) => {
   });
 };
 var I18n = class _I18n extends EventEmitter {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  constructor(options2 = {}, callback) {
     super();
     this.options = transformOptions(options2);
     this.services = {};
@@ -9378,10 +9329,7 @@ var I18n = class _I18n extends EventEmitter {
       }, 0);
     }
   }
-  init() {
-    var _this = this;
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  init(options2 = {}, callback) {
     this.isInitializing = true;
     if (typeof options2 === "function") {
       callback = options2;
@@ -9447,11 +9395,8 @@ var I18n = class _I18n extends EventEmitter {
         hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
       };
       s2.backendConnector = new Connector(createClassOnDemand(this.modules.backend), s2.resourceStore, s2, this.options);
-      s2.backendConnector.on("*", function(event) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-        _this.emit(event, ...args);
+      s2.backendConnector.on("*", (event, ...args) => {
+        this.emit(event, ...args);
       });
       if (this.modules.languageDetector) {
         s2.languageDetector = createClassOnDemand(this.modules.languageDetector);
@@ -9462,11 +9407,8 @@ var I18n = class _I18n extends EventEmitter {
         if (s2.i18nFormat.init) s2.i18nFormat.init(this);
       }
       this.translator = new Translator(this.services, this.options);
-      this.translator.on("*", function(event) {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
-        }
-        _this.emit(event, ...args);
+      this.translator.on("*", (event, ...args) => {
+        this.emit(event, ...args);
       });
       this.modules.external.forEach((m2) => {
         if (m2.init) m2.init(this);
@@ -9483,15 +9425,13 @@ var I18n = class _I18n extends EventEmitter {
     }
     const storeApi = ["getResource", "hasResourceBundle", "getResourceBundle", "getDataByLanguage"];
     storeApi.forEach((fcName) => {
-      this[fcName] = function() {
-        return _this.store[fcName](...arguments);
-      };
+      this[fcName] = (...args) => this.store[fcName](...args);
     });
     const storeApiChained = ["addResource", "addResources", "addResourceBundle", "removeResourceBundle"];
     storeApiChained.forEach((fcName) => {
-      this[fcName] = function() {
-        _this.store[fcName](...arguments);
-        return _this;
+      this[fcName] = (...args) => {
+        this.store[fcName](...args);
+        return this;
       };
     });
     const deferred = defer();
@@ -9515,8 +9455,7 @@ var I18n = class _I18n extends EventEmitter {
     }
     return deferred;
   }
-  loadResources(language) {
-    let callback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
+  loadResources(language, callback = noop) {
     let usedCallback = callback;
     const usedLng = isString(language) ? language : this.language;
     if (typeof language === "function") usedCallback = language;
@@ -9605,11 +9544,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);
@@ -9631,12 +9569,8 @@ var I18n = class _I18n extends EventEmitter {
       } else {
         this.isLanguageChangingTo = void 0;
       }
-      deferred.resolve(function() {
-        return _this2.t(...arguments);
-      });
-      if (callback) callback(err2, function() {
-        return _this2.t(...arguments);
-      });
+      deferred.resolve((...args) => this.t(...args));
+      if (callback) callback(err2, (...args) => this.t(...args));
     };
     const setLng = (lngs) => {
       if (!lng && !lngs && this.services.languageDetector) lngs = [];
@@ -9667,14 +9601,10 @@ var I18n = class _I18n extends EventEmitter {
     return deferred;
   }
   getFixedT(lng, ns, keyPrefix) {
-    var _this3 = this;
-    const fixedT = function(key, opts) {
+    const fixedT = (key, opts, ...rest) => {
       let o2;
       if (typeof opts !== "object") {
-        for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
-          rest[_key3 - 2] = arguments[_key3];
-        }
-        o2 = _this3.options.overloadTranslationOptionHandler([key, opts].concat(rest));
+        o2 = this.options.overloadTranslationOptionHandler([key, opts].concat(rest));
       } else {
         o2 = {
           ...opts
@@ -9684,14 +9614,14 @@ var I18n = class _I18n extends EventEmitter {
       o2.lngs = o2.lngs || fixedT.lngs;
       o2.ns = o2.ns || fixedT.ns;
       if (o2.keyPrefix !== "") o2.keyPrefix = o2.keyPrefix || keyPrefix || fixedT.keyPrefix;
-      const keySeparator = _this3.options.keySeparator || ".";
+      const keySeparator = this.options.keySeparator || ".";
       let resultKey;
       if (o2.keyPrefix && Array.isArray(key)) {
         resultKey = key.map((k2) => `${o2.keyPrefix}${keySeparator}${k2}`);
       } else {
         resultKey = o2.keyPrefix ? `${o2.keyPrefix}${keySeparator}${key}` : key;
       }
-      return _this3.t(resultKey, o2);
+      return this.t(resultKey, o2);
     };
     if (isString(lng)) {
       fixedT.lng = lng;
@@ -9702,23 +9632,16 @@ var I18n = class _I18n extends EventEmitter {
     fixedT.keyPrefix = keyPrefix;
     return fixedT;
   }
-  t() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  t(...args) {
     return this.translator?.translate(...args);
   }
-  exists() {
-    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-      args[_key5] = arguments[_key5];
-    }
+  exists(...args) {
     return this.translator?.exists(...args);
   }
   setDefaultNamespace(ns) {
     this.options.defaultNS = ns;
   }
-  hasLoadedNamespace(ns) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  hasLoadedNamespace(ns, options2 = {}) {
     if (!this.isInitialized) {
       this.logger.warn("hasLoadedNamespace: i18next was not initialized", this.languages);
       return false;
@@ -9783,14 +9706,10 @@ var I18n = class _I18n extends EventEmitter {
     const languageUtils = this.services?.languageUtils || new LanguageUtil(get());
     return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf("-arab") > 1 ? "rtl" : "ltr";
   }
-  static createInstance() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  static createInstance(options2 = {}, callback) {
     return new _I18n(options2, callback);
   }
-  cloneInstance() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
+  cloneInstance(options2 = {}, callback = noop) {
     const forkResourceStore = options2.forkResourceStore;
     if (forkResourceStore) delete options2.forkResourceStore;
     const mergedOptions = {
@@ -9819,21 +9738,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);
@@ -14681,6 +14598,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"],
@@ -15221,12 +15140,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"]
   };
 }
 
@@ -15494,6 +15413,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     chargeType: json["charge_type"],
     companyCanTrial: json["company_can_trial"],
     companyCount: json["company_count"],
+    controlledBy: json["controlled_by"],
     createdAt: new Date(json["created_at"]),
     current: json["current"],
     custom: json["custom"],
@@ -15579,6 +15499,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
     chargeType: json["charge_type"],
     companyCount: json["company_count"],
+    controlledBy: json["controlled_by"],
     createdAt: new Date(json["created_at"]),
     description: json["description"],
     features: json["features"].map(
@@ -15725,31 +15646,45 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/checkoutexternal/models/DeletePaymentMethodResponse.ts
-function DeletePaymentMethodResponseFromJSON(json) {
-  return DeletePaymentMethodResponseFromJSONTyped(json, false);
+// src/api/checkoutexternal/models/SetupIntentResponseData.ts
+function SetupIntentResponseDataFromJSON(json) {
+  return SetupIntentResponseDataFromJSONTyped(json, false);
 }
-function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
+function SetupIntentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    data: DeleteResponseFromJSON(json["data"]),
+    publishableKey: json["publishable_key"],
+    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
+  };
+}
+
+// src/api/checkoutexternal/models/CreateSetupIntentResponse.ts
+function CreateSetupIntentResponseFromJSON(json) {
+  return CreateSetupIntentResponseFromJSONTyped(json, false);
+}
+function CreateSetupIntentResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: SetupIntentResponseDataFromJSON(json["data"]),
     params: json["params"]
   };
 }
 
-// src/api/checkoutexternal/models/SetupIntentResponseData.ts
-function SetupIntentResponseDataFromJSON(json) {
-  return SetupIntentResponseDataFromJSONTyped(json, false);
+// src/api/checkoutexternal/models/DeletePaymentMethodResponse.ts
+function DeletePaymentMethodResponseFromJSON(json) {
+  return DeletePaymentMethodResponseFromJSONTyped(json, false);
 }
-function SetupIntentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    publishableKey: json["publishable_key"],
-    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
+    data: DeleteResponseFromJSON(json["data"]),
+    params: json["params"]
   };
 }
 
@@ -15999,6 +15934,38 @@ var CheckoutexternalApi = class extends BaseAPI {
     const response = await this.checkoutUnsubscribeRaw(initOverrides);
     return await response.value();
   }
+  /**
+   * Create setup intent
+   */
+  async createSetupIntentRaw(initOverrides) {
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/components/setup-intent`,
+        method: "POST",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => CreateSetupIntentResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Create setup intent
+   */
+  async createSetupIntent(initOverrides) {
+    const response = await this.createSetupIntentRaw(initOverrides);
+    return await response.value();
+  }
   /**
    * Delete payment method
    */
@@ -16362,8 +16329,10 @@ var en_default = {
     "Manage plan": "Manage plan",
     Monthly: "Monthly",
     Next: "Next",
+    "No invoices created yet": "No invoices created yet",
     "No limit": "No limit",
     "No payment method added yet": "No payment method added yet",
+    "No upcoming invoice": "No upcoming invoice",
     "Not ready to cancel?": "Not ready to cancel?",
     "On demand": "On demand",
     "One time ": "One time",
@@ -16373,6 +16342,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.",
@@ -16394,13 +16364,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",
@@ -17095,7 +17067,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     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,
@@ -17222,7 +17194,7 @@ var Box = dt.div((props) => {
   function reducer(acc, [key, value]) {
     if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
-        // keys will always be CSS properties
+        // keys should always be CSS properties
         attr(camelToHyphen(key.slice(1)), value)
       );
     }
@@ -17232,11 +17204,11 @@ var Box = dt.div((props) => {
   for (const [key, value] of Object.entries(props.$viewport || {})) {
     styles.push(lt`
       ${{
-      sm: "@media (min-width: 640px)",
-      md: "@media (min-width: 768px)",
-      lg: "@media (min-width: 1024px)",
-      xl: "@media (min-width: 1280px)",
-      "2xl": "@media (min-width: 1536px)"
+      sm: "@container (min-width: 640px)",
+      md: "@container (min-width: 768px)",
+      lg: "@container (min-width: 1024px)",
+      xl: "@container (min-width: 1280px)",
+      "2xl": "@container (min-width: 1536px)"
     }[key] || key} {
         ${Object.entries(value || {}).reduce(reducer, [])}
       }
@@ -17539,29 +17511,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;
             `;
       }
     }}
@@ -18425,6 +18391,7 @@ var Container2 = dt.div`
   line-height: 1.35;
   width: 100%;
   height: 100%;
+  container-type: inline-size;
 
   *,
   *::before,
@@ -18466,7 +18433,7 @@ import {
   useCallback as useCallback8,
   useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef5,
   useState as useState8
 } from "react";
@@ -18589,7 +18556,8 @@ var StageButton = ({
   isLoading,
   requiresPayment,
   setCheckoutStage,
-  trialPaymentMethodRequired
+  trialPaymentMethodRequired,
+  willTrial
 }) => {
   const { t: t2 } = useTranslation();
   const NoPaymentRequired = () => {
@@ -18605,42 +18573,14 @@ var StageButton = ({
     );
   };
   if (checkoutStage === "plan") {
-    if (canTrial) {
-      if (trialPaymentMethodRequired) {
-        return /* @__PURE__ */ jsx12(
-          Button,
-          {
-            type: "button",
-            disabled: !hasAddOns && !canUpdateSubscription,
-            onClick: async () => {
-              setCheckoutStage?.("checkout");
-            },
-            $isLoading: isLoading,
-            children: /* @__PURE__ */ jsxs7(
-              Flex,
-              {
-                $gap: "0.5rem",
-                $justifyContent: "center",
-                $alignItems: "center",
-                $padding: "0 1rem",
-                children: [
-                  t2("Next"),
-                  ": ",
-                  t2("Checkout"),
-                  /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
-                ]
-              }
-            )
-          }
-        );
-      }
+    if (canTrial && trialPaymentMethodRequired) {
       return /* @__PURE__ */ jsx12(
         Button,
         {
           type: "button",
-          disabled: !hasUnstagedChanges || !canUpdateSubscription,
+          disabled: !hasAddOns && !canUpdateSubscription,
           onClick: async () => {
-            checkout();
+            setCheckoutStage?.("checkout");
           },
           $isLoading: isLoading,
           children: /* @__PURE__ */ jsxs7(
@@ -18651,7 +18591,9 @@ var StageButton = ({
               $alignItems: "center",
               $padding: "0 1rem",
               children: [
-                t2("Subscribe and close"),
+                t2("Next"),
+                ": ",
+                t2("Checkout"),
                 /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
               ]
             }
@@ -18660,7 +18602,7 @@ var StageButton = ({
       );
     }
     if (!requiresPayment && !checkoutStages?.some(
-      (stage) => stage.id === "addons" || stage.id === "usage"
+      (stage) => stage.id === "usage" || stage.id === "addons"
     )) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
@@ -18686,7 +18628,7 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "usage") {
-    if (!requiresPayment) {
+    if (!requiresPayment && !checkoutStages?.some((stage) => stage.id === "addons")) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
     return /* @__PURE__ */ jsx12(
@@ -18758,7 +18700,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")
       }
     );
   }
@@ -18784,7 +18726,8 @@ var Sidebar = ({
   setError,
   setIsLoading,
   updatePromoCode,
-  showHeader = true
+  showHeader = true,
+  willTrial = false
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -18914,10 +18857,10 @@ var Sidebar = ({
           ...promoCode && { promoCode }
         }
       });
-      dispatchPlanChangedEvent(response.data);
       setIsLoading(false);
       setLayout("portal");
-      hydrate();
+      await hydrate();
+      dispatchPlanChangedEvent(response.data);
     } catch {
       setLayout("checkout");
       setError(
@@ -19015,6 +18958,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"
@@ -19024,10 +18968,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) {
@@ -19103,7 +19047,7 @@ var Sidebar = ({
                 }
               ) }),
               /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                data.company?.plan && /* @__PURE__ */ jsxs8(
+                currentPlan && /* @__PURE__ */ jsxs8(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -19122,10 +19066,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__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                      typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -19134,14 +19078,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__ */ jsxs8("sub", { children: [
                               "/",
-                              shortenPeriod(
-                                data.company.plan.planPeriod || planPeriod
-                              )
+                              shortenPeriod(currentPlan.planPeriod || planPeriod)
                             ] })
                           ]
                         }
@@ -19907,7 +19849,7 @@ var Sidebar = ({
               layout === "checkout" && /* @__PURE__ */ jsx13(
                 StageButton,
                 {
-                  canTrial: selectedPlan?.companyCanTrial === true,
+                  canTrial: isTrialable,
                   canCheckout,
                   canUpdateSubscription,
                   checkout,
@@ -19919,7 +19861,8 @@ var Sidebar = ({
                   isLoading,
                   requiresPayment,
                   setCheckoutStage,
-                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
+                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true,
+                  willTrial
                 }
               ),
               layout === "unsubscribe" && /* @__PURE__ */ jsx13(Button, { onClick: unsubscribe, $isLoading: isLoading, children: t2("Cancel subscription") }),
@@ -20229,13 +20172,11 @@ var Navigation = ({
             }
           ),
           /* @__PURE__ */ jsxs11(
-            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",
@@ -20275,7 +20216,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-import { useState as useState7 } from "react";
+import { useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/components/elements/pricing-table/styles.ts
 var ButtonLink = dt.a`
@@ -20288,15 +20229,162 @@ var ButtonLink = dt.a`
 
 // src/components/shared/checkout-dialog/Plan.tsx
 import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var Selected = ({ isCurrent = false, isTrial = false }) => {
+  const { t: t2 } = useTranslation();
+  const theme = nt();
+  const text = useMemo5(() => {
+    if (isCurrent) {
+      return isTrial ? t2("Trial in progress") : t2("Current plan");
+    }
+    return isTrial ? t2("Trial selected") : t2("Plan selected");
+  }, [t2, isCurrent, isTrial]);
+  return /* @__PURE__ */ jsxs12(
+    Flex,
+    {
+      $justifyContent: "center",
+      $alignItems: "center",
+      $gap: "0.25rem",
+      $padding: "0.625rem 0",
+      children: [
+        /* @__PURE__ */ jsx17(
+          Icon2,
+          {
+            name: "check-rounded",
+            style: {
+              fontSize: 20,
+              lineHeight: 1,
+              color: theme.primary
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          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__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
+      data.subscription?.status !== "trialing" && /* @__PURE__ */ jsx17(Fragment8, { children: isSelected && willTrial ? /* @__PURE__ */ jsx17(
+        Selected,
+        {
+          isCurrent,
+          isTrial: plan.companyCanTrial && willTrial
+        }
+      ) : /* @__PURE__ */ jsx17(
+        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__ */ jsx17(
+            ButtonLink,
+            {
+              href: plan.customPlanConfig?.ctaWebSite ?? "#",
+              target: "_blank",
+              children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+            }
+          ) : !plan.valid ? /* @__PURE__ */ jsx17(
+            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__ */ jsx17(Fragment8, { children: isSelected && (!willTrial || data.subscription?.status === "trialing") ? /* @__PURE__ */ jsx17(Selected, { isCurrent }) : /* @__PURE__ */ jsx17(
+        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__ */ jsx17(
+            Tooltip,
+            {
+              trigger: t2("Over usage limit"),
+              content: t2("Current usage exceeds the limit of this plan.")
+            }
+          ) : t2("Choose plan")
+        }
+      ) })
+    ] });
+  }
+  return isSelected ? /* @__PURE__ */ jsx17(Selected, { isCurrent }) : /* @__PURE__ */ jsx17(
+    Button,
+    {
+      type: "button",
+      disabled: (isLoading || !plan.valid) && !plan.custom,
+      ...!plan.custom && {
+        onClick: () => {
+          onSelect({ plan });
+        }
+      },
+      $size: "sm",
+      $color: "primary",
+      $variant: "filled",
+      children: plan.custom ? /* @__PURE__ */ jsx17(
+        ButtonLink,
+        {
+          href: plan.customPlanConfig?.ctaWebSite ?? "#",
+          target: "_blank",
+          children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+        }
+      ) : !plan.valid ? /* @__PURE__ */ jsx17(
+        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] = useState7(
     () => plans.reduce(
@@ -20310,7 +20398,6 @@ var Plan = ({
       {}
     )
   );
-  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = { ...prev2[id] };
@@ -20323,6 +20410,7 @@ var Plan = ({
       };
     });
   };
+  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ jsx17(Fragment8, { children: /* @__PURE__ */ jsx17(
     Box,
     {
@@ -20431,7 +20519,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")
                           }
                         )
                       }
@@ -20646,70 +20734,14 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    plan.id === selectedPlan?.id ? /* @__PURE__ */ jsxs12(
-                      Flex,
+                    /* @__PURE__ */ jsx17(
+                      PlanButtonGroup,
                       {
-                        $justifyContent: "center",
-                        $alignItems: "center",
-                        $gap: "0.25rem",
-                        $padding: "0.625rem 0",
-                        children: [
-                          /* @__PURE__ */ jsx17(
-                            Icon2,
-                            {
-                              name: "check-rounded",
-                              style: {
-                                fontSize: 20,
-                                lineHeight: 1,
-                                color: theme.primary
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx17(
-                            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__ */ jsx17(
-                      Button,
-                      {
-                        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__ */ jsx17(
-                          ButtonLink,
-                          {
-                            href: plan.customPlanConfig?.ctaWebSite ?? "#",
-                            target: "_blank",
-                            children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
-                          }
-                        ) : !plan.valid ? /* @__PURE__ */ jsx17(
-                          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
                       }
                     )
                   ]
@@ -20924,7 +20956,6 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = useState8(false);
   const [error, setError] = useState8();
-  const [promoCode, setPromoCode] = useState8();
   const [planPeriod, setPlanPeriod] = useState8(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
@@ -20938,6 +20969,9 @@ var CheckoutDialog = ({ top = 0 }) => {
       (plan) => selected.planId ? plan.id === selected.planId : plan.current
     )
   );
+  const [willTrial, setWillTrial] = useState8(
+    data.subscription?.status !== "trialing" && !data.trialPaymentMethodRequired
+  );
   const [addOns, setAddOns] = useState8(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
@@ -20946,7 +20980,8 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }))
   );
-  const currentEntitlements = useMemo5(() => {
+  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
+  const currentEntitlements = useMemo6(() => {
     return data.featureUsage?.features || [];
   }, [data.featureUsage?.features]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = useState8(
@@ -20958,18 +20993,21 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const payInAdvanceEntitlements = useMemo5(
+  const payInAdvanceEntitlements = useMemo6(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
     [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 checkoutStages = useMemo5(() => {
+  const [promoCode, setPromoCode] = useState8();
+  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 = useMemo6(() => {
     const stages = [
       {
         id: "plan",
@@ -20978,13 +21016,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"),
@@ -21002,9 +21043,9 @@ var CheckoutDialog = ({ top = 0 }) => {
     return stages;
   }, [
     t2,
+    willTrial,
     payInAdvanceEntitlements,
     availableAddOns,
-    selectedPlan?.companyCanTrial,
     requiresPayment
   ]);
   const [checkoutStage, setCheckoutStage] = useState8(() => {
@@ -21109,6 +21150,8 @@ var CheckoutDialog = ({ top = 0 }) => {
         setSelectedPlan(plan);
         setUsageBasedEntitlements(entitlements);
       }
+      const shouldTrial = updates.shouldTrial ?? false;
+      setWillTrial(shouldTrial && !data.trialPaymentMethodRequired);
       previewCheckout({
         period,
         plan: updates.plan,
@@ -21117,7 +21160,13 @@ var CheckoutDialog = ({ top = 0 }) => {
         )
       });
     },
-    [planPeriod, selectedPlan, currentEntitlements, previewCheckout]
+    [
+      data.trialPaymentMethodRequired,
+      planPeriod,
+      selectedPlan,
+      currentEntitlements,
+      previewCheckout
+    ]
   );
   const changePlanPeriod = useCallback8(
     (period) => {
@@ -21314,7 +21363,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                         period: planPeriod,
                         plans: availablePlans,
                         selectedPlan,
-                        selectPlan
+                        selectPlan,
+                        willTrial
                       }
                     ),
                     checkoutStage === "usage" && /* @__PURE__ */ jsx19(
@@ -21366,7 +21416,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                   setCheckoutStage: (stage) => setCheckoutStage(stage),
                   setError: (msg) => setError(msg),
                   setIsLoading,
-                  updatePromoCode: (code) => updatePromoCode(code)
+                  updatePromoCode: (code) => updatePromoCode(code),
+                  willTrial
                 }
               )
             ]
@@ -21495,7 +21546,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
-import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo6, useState as useState10 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo7, useState as useState10 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var PeriodToggle = ({
   options: options2,
@@ -21508,7 +21559,7 @@ var PeriodToggle = ({
   const theme = nt();
   const isLightBackground = useIsLightBackground();
   const [tooltipZIndex, setTooltipZIndex] = useState10(1);
-  const savingsPercentage = useMemo6(() => {
+  const savingsPercentage = useMemo7(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
       const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
@@ -21608,7 +21659,7 @@ var PeriodToggle = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-import { useCallback as useCallback9, useMemo as useMemo7, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo8, useRef as useRef6, useState as useState11 } from "react";
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
@@ -21617,12 +21668,12 @@ var UnsubscribeDialog = ({ top = 0 }) => {
   const contentRef = useRef6(null);
   const [error, setError] = useState11();
   const [isLoading, setIsLoading] = useState11(false);
-  const planPeriod = useMemo7(
+  const planPeriod = useMemo8(
     () => data.company?.plan?.planPeriod ?? "month",
     [data.company?.plan?.planPeriod]
   );
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = useMemo7(
+  const selectedPlan = useMemo8(
     () => availablePlans.find(
       (plan) => plan.id === data.company?.plan?.id && data.company?.plan.planPeriod === planPeriod
     ),
@@ -21633,7 +21684,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = useMemo7(
+  const addOns = useMemo8(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: data.company?.addOns.some((current) => available.id === current.id) ?? false
@@ -21957,17 +22008,16 @@ var StyledViewport = dt.div.withConfig({
   shouldForwardProp: (prop) => !["$numberOfColumns", "numberOfColumns"].includes(prop)
 })`
   display: grid;
-  grid-template-columns: repeat(1, minmax(300px, 1fr));
   margin-left: auto;
   margin-right: auto;
   gap: 1rem;
 
-  @media (min-width: 768px) {
-    grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
+  @container (max-width: 767px) {
+    grid-template-columns: repeat(1, minmax(300px, 1fr));
   }
 
-  @container (max-width: 768px) {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  @container (min-width: 768px) {
+    grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
   }
 `;
 
@@ -22070,10 +22120,10 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo9, useRef as useRef7, useState as useState13 } from "react";
+import { forwardRef as forwardRef7, useMemo as useMemo10, useRef as useRef7, useState as useState13 } from "react";
 
 // src/components/elements/included-features/Details.tsx
-import { Fragment as Fragment11, useMemo as useMemo8 } from "react";
+import { Fragment as Fragment11, useMemo as useMemo9 } from "react";
 import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var Details = ({
   shouldWrapChildren,
@@ -22098,7 +22148,7 @@ var Details = ({
     priceTier,
     currency,
     packageSize = 1
-  } = useMemo8(() => {
+  } = useMemo9(() => {
     const {
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
@@ -22120,7 +22170,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = useMemo8(() => {
+  const text = useMemo9(() => {
     if (!feature) {
       return;
     }
@@ -22171,7 +22221,7 @@ var Details = ({
     packageSize,
     softLimit
   ]);
-  const usageText = useMemo8(() => {
+  const usageText = useMemo9(() => {
     if (!feature) {
       return;
     }
@@ -22348,7 +22398,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
   const [showCount, setShowCount] = useState13(VISIBLE_ENTITLEMENT_COUNT);
-  const featureUsage = useMemo9(() => {
+  const featureUsage = useMemo10(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22507,7 +22557,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect5, useState as useState14 } from "react";
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -22578,9 +22628,6 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
   useEffect5(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
-  if (invoices.length === 0) {
-    return null;
-  }
   return /* @__PURE__ */ jsx30(Element, { ref, className, children: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx30(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx30(
       Text,
@@ -22592,54 +22639,56 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ jsx30(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-      return /* @__PURE__ */ jsxs23(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ jsx30(
-          InvoiceDate,
+    invoices.length > 0 ? /* @__PURE__ */ jsxs23(Fragment13, { children: [
+      /* @__PURE__ */ jsx30(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+        return /* @__PURE__ */ jsxs23(Flex, { $justifyContent: "space-between", children: [
+          props.date.isVisible && date && /* @__PURE__ */ jsx30(
+            InvoiceDate,
+            {
+              date,
+              fontStyle: props.date.fontStyle,
+              url
+            }
+          ),
+          props.amount.isVisible && /* @__PURE__ */ jsx30(
+            Text,
+            {
+              $font: theme.typography[props.amount.fontStyle].fontFamily,
+              $size: theme.typography[props.amount.fontStyle].fontSize,
+              $weight: theme.typography[props.amount.fontStyle].fontWeight,
+              $color: theme.typography[props.amount.fontStyle].color,
+              children: amount
+            }
+          )
+        ] }, index);
+      }) }),
+      props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+        /* @__PURE__ */ jsx30(
+          Icon2,
           {
-            date,
-            fontStyle: props.date.fontStyle,
-            url
+            name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
+            style: { color: "#D0D0D0" }
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx30(
           Text,
           {
-            $font: theme.typography[props.amount.fontStyle].fontFamily,
-            $size: theme.typography[props.amount.fontStyle].fontSize,
-            $weight: theme.typography[props.amount.fontStyle].fontWeight,
-            $color: theme.typography[props.amount.fontStyle].color,
-            children: amount
+            onClick: toggleListSize,
+            $font: theme.typography[props.collapse.fontStyle].fontFamily,
+            $size: theme.typography[props.collapse.fontStyle].fontSize,
+            $weight: theme.typography[props.collapse.fontStyle].fontWeight,
+            $color: theme.typography[props.collapse.fontStyle].color,
+            children: listSize === props.limit.number ? t2("See more") : t2("See less")
           }
         )
-      ] }, index);
-    }) }),
-    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsx30(
-        Icon2,
-        {
-          name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
-          style: { color: "#D0D0D0" }
-        }
-      ),
-      /* @__PURE__ */ jsx30(
-        Text,
-        {
-          onClick: toggleListSize,
-          $font: theme.typography[props.collapse.fontStyle].fontFamily,
-          $size: theme.typography[props.collapse.fontStyle].fontSize,
-          $weight: theme.typography[props.collapse.fontStyle].fontWeight,
-          $color: theme.typography[props.collapse.fontStyle].color,
-          children: listSize === props.limit.number ? t2("See more") : t2("See less")
-        }
-      )
-    ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsx30(Text, { display: "heading2", children: t2("No invoices created yet") })
   ] }) });
 });
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useMemo as useMemo10, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef9, useMemo as useMemo11, useRef as useRef8 } from "react";
 
 // src/components/elements/metered-features/styles.ts
 var Container3 = dt.div`
@@ -22647,11 +22696,10 @@ var Container3 = dt.div`
   flex-direction: column;
 
   &:last-child {
-    overflow: hidden;
-
     ${({ theme }) => {
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
   return theme.sectionLayout === "merged" && lt`
+          overflow: hidden;
           border-bottom-left-radius: ${borderRadius};
           border-bottom-right-radius: ${borderRadius};
         `;
@@ -22660,7 +22708,7 @@ var Container3 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -22694,7 +22742,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const featureUsage = useMemo10(() => {
+  const featureUsage = useMemo11(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22799,7 +22847,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                             $weight: theme.typography[props.header.fontStyle].fontWeight,
                             $color: theme.typography[props.header.fontStyle].color,
                             $leading: 1.35,
-                            children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                            children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                               formatNumber(usage),
                               " ",
                               getFeatureName(feature, usage)
@@ -22837,15 +22885,15 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                                 style: {
                                   whiteSpace: "nowrap"
                                 },
-                                children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                                   formatNumber(allocation),
                                   " ",
                                   getFeatureName(feature, allocation)
-                                ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                                   formatNumber(usage),
                                   " ",
                                   getFeatureName(feature, usage),
-                                  priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                  priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                                     " ",
                                     t2("used")
                                   ] })
@@ -22938,18 +22986,18 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                       $weight: theme.typography.text.fontWeight,
                       $color: theme.typography.text.color,
                       $leading: 1.35,
-                      children: /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                      children: /* @__PURE__ */ jsxs24(Fragment14, { children: [
                         t2("Additional"),
                         ": ",
                         formatCurrency(price, currency),
                         feature && /* @__PURE__ */ jsxs24(Box, { as: "sub", $whiteSpace: "nowrap", children: [
                           "/",
-                          packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                          packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                             packageSize,
                             " "
                           ] }),
                           getFeatureName(feature, packageSize),
-                          feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                          feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment14, { children: [
                             "/",
                             shortenPeriod(planPeriod)
                           ] })
@@ -22991,10 +23039,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef10, useMemo as useMemo12 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo13 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
@@ -23169,7 +23217,7 @@ var PaymentListElement = ({
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
   const iconStyles = getIconStyles({ size: "lg", theme });
-  const expirationDate = useMemo11(() => {
+  const expirationDate = useMemo12(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth && !cardExpYear) {
       return "";
@@ -23284,10 +23332,10 @@ var resolveDesignProps5 = (props) => {
 var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const paymentMethod = useMemo12(() => {
+  const paymentMethod = useMemo13(() => {
     return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
   }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
-  const monthsToExpiration = useMemo12(() => {
+  const monthsToExpiration = useMemo13(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23356,7 +23404,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.2.0",
+    version: "7.3.0",
     startTime
   });
 };
@@ -23431,7 +23479,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);
@@ -23468,7 +23516,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo13, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo14, useState as useState15 } from "react";
 import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
@@ -23497,7 +23545,7 @@ var PaymentMethodDetails = ({
   const [setupIntent, setSetupIntent] = useState15();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState15(false);
   const [paymentMethod, setPaymentMethod] = useState15(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
-  const monthsToExpiration = useMemo13(() => {
+  const monthsToExpiration = useMemo14(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23767,8 +23815,8 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef as forwardRef11, useMemo as useMemo14 } from "react";
-import { Fragment as Fragment14, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11, useMemo as useMemo15 } from "react";
+import { Fragment as Fragment15, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -23823,7 +23871,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const trialEndDays = useMemo14(() => {
+  const trialEndDays = useMemo15(() => {
     const trialEnd = billingSubscription?.trialEnd;
     const trialEndDate = trialEnd ? new Date(trialEnd * 1e3) : /* @__PURE__ */ new Date();
     const todayDate = /* @__PURE__ */ new Date();
@@ -23836,7 +23884,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
   const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
-  return /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment15, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
       Notice,
       {
@@ -23981,12 +24029,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                         $gap: "1rem",
                         children: [
                           /* @__PURE__ */ jsxs27(Text, { display: props.addOns.fontStyle, children: [
-                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
                               limit,
                               " ",
                               getFeatureName(entitlement.feature, limit)
                             ] }) : entitlement.feature.name,
-                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                               "/",
                               shortenPeriod(currentPlan.planPeriod)
                             ] })
@@ -23999,7 +24047,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
                                 children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X additional", {
                                   amount: overageAmount
-                                }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                }) : /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                   t2("Additional"),
                                   ":",
                                   " ",
@@ -24009,7 +24057,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
                                     "/",
-                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                       packageSize,
                                       " "
                                     ] }),
@@ -24017,7 +24065,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                       entitlement.feature,
                                       packageSize
                                     ),
-                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                       "/",
                                       shortenPeriod(currentPlan.planPeriod)
                                     ] })
@@ -24036,7 +24084,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                   ),
                                   /* @__PURE__ */ jsxs27("sub", { children: [
                                     "/",
-                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                    packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                       packageSize,
                                       " "
                                     ] }),
@@ -24057,8 +24105,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                               ),
                               (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
                                 "/",
-                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
-                                  packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
+                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : /* @__PURE__ */ jsxs27(Fragment15, { children: [
+                                  packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment15, { children: [
                                     packageSize,
                                     " "
                                   ] }),
@@ -24107,7 +24155,7 @@ PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
 import { forwardRef as forwardRef12, useState as useState16 } from "react";
-import { Fragment as Fragment15, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -24418,7 +24466,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                 $weight: theme.typography.text.fontWeight,
                                                 $color: theme.typography.text.color,
                                                 $leading: 1.35,
-                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   formatCurrency(
                                                     entitlementPrice,
                                                     entitlementCurrency
@@ -24426,7 +24474,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                   " ",
                                                   t2("per"),
                                                   " ",
-                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     entitlementPackageSize,
                                                     " "
                                                   ] }),
@@ -24434,18 +24482,18 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlement.feature,
                                                     entitlementPackageSize
                                                   ),
-                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
                                                     selectedPeriod
                                                   ] })
-                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   entitlement.valueType === "unlimited" && !entitlement.priceBehavior ? t2("Unlimited", {
                                                     item: getFeatureName(
                                                       entitlement.feature
                                                     )
-                                                  }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     formatNumber(limit),
                                                     " ",
                                                     getFeatureName(
@@ -24453,7 +24501,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                       limit
                                                     )
                                                   ] }),
-                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
@@ -24463,7 +24511,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                       current_month: "month",
                                                       current_year: "year"
                                                     }[entitlement.metricPeriod]
-                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     "/",
                                                     shortenPeriod(
                                                       selectedPeriod
@@ -24494,7 +24542,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlementCurrency
                                                   ),
                                                   "/",
-                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     entitlementPackageSize,
                                                     " "
                                                   ] }),
@@ -24502,7 +24550,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlement.feature,
                                                     entitlementPackageSize
                                                   ),
-                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                     "/",
                                                     shortenPeriod(selectedPeriod)
                                                   ] }),
@@ -24627,7 +24675,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                       "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")
                               }
                             )
                           ]
@@ -24641,7 +24689,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment16, { children: [
           props.header.isVisible && /* @__PURE__ */ jsx36(
             Flex,
             {
@@ -24796,12 +24844,12 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                               $size: theme.typography.text.fontSize,
                                               $weight: theme.typography.text.fontWeight,
                                               $color: theme.typography.text.color,
-                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                 entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                                   item: getFeatureName(
                                                     entitlement.feature
                                                   )
-                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   formatNumber(
                                                     entitlement.valueNumeric
                                                   ),
@@ -24811,7 +24859,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                                     entitlement.valueNumeric
                                                   )
                                                 ] }),
-                                                entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment15, { children: [
+                                                entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment16, { children: [
                                                   " ",
                                                   t2("per"),
                                                   " ",
@@ -24961,8 +25009,8 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef15, useMemo as useMemo15 } from "react";
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { forwardRef as forwardRef15, useMemo as useMemo16 } from "react";
+import { Fragment as Fragment17, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -24987,7 +25035,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = useMemo15(() => {
+  const { discounts, upcomingInvoice } = useMemo16(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,
@@ -24997,24 +25045,10 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
     }));
     return {
       discounts: discounts2,
-      upcomingInvoice: {
-        ...typeof data.upcomingInvoice?.amountDue === "number" && {
-          amountDue: data.upcomingInvoice.amountDue
-        },
-        ...data.subscription?.interval && {
-          interval: data.subscription.interval
-        },
-        ...data.upcomingInvoice?.dueDate && {
-          dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
-        },
-        currency: data.upcomingInvoice?.currency
-      }
+      upcomingInvoice: data.upcomingInvoice
     };
   }, [data.subscription, data.upcomingInvoice]);
-  if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsx39(
     Element,
     {
       as: Flex,
@@ -25022,8 +25056,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       className,
       $flexDirection: "column",
       $gap: "1rem",
-      children: [
-        props.header.isVisible && /* @__PURE__ */ jsx39(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
+      children: upcomingInvoice ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
+        props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx39(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -25033,7 +25067,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
             children: [
               props.header.prefix,
               " ",
-              upcomingInvoice.dueDate
+              toPrettyDate(upcomingInvoice.dueDate)
             ]
           }
         ) }),
@@ -25075,41 +25109,49 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ jsx39(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ jsx39(
-              Flex,
-              {
-                $alignItems: "center",
-                $padding: "0.1875rem 0.375rem",
-                $borderWidth: "1px",
-                $borderStyle: "solid",
-                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
-                $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx39(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(
+            Flex,
+            {
+              $alignItems: "center",
+              $gap: "0.5rem",
+              children: [
+                /* @__PURE__ */ jsx39(
+                  Flex,
+                  {
+                    $alignItems: "center",
+                    $padding: "0.1875rem 0.375rem",
+                    $borderWidth: "1px",
+                    $borderStyle: "solid",
+                    $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
+                    $borderRadius: "0.3125rem",
+                    children: /* @__PURE__ */ jsx39(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: 0.75 * theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: discount.customerFacingCode
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
-                    $size: 0.75 * theme.typography.text.fontSize,
+                    $size: theme.typography.text.fontSize,
                     $weight: theme.typography.text.fontWeight,
                     $color: theme.typography.text.color,
-                    children: discount.customerFacingCode
+                    children: t2("Percent off", { percent: discount.percentOff })
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
-              Text,
-              {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
-                $color: theme.typography.text.color,
-                children: t2("Percent off", { percent: discount.percentOff })
-              }
-            ) })
-          ] }, discount.couponId)) })
+                ) })
+              ]
+            },
+            discount.couponId
+          )) })
         ] })
-      ]
+      ] }) : /* @__PURE__ */ jsx39(Text, { display: "heading2", children: t2("No upcoming invoice") })
     }
   );
 });
@@ -25167,7 +25209,7 @@ function createRenderer(options2) {
 }
 
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
   return /* @__PURE__ */ jsx40(
@@ -25235,7 +25277,7 @@ var ComponentTree = () => {
   if (isPending) {
     return /* @__PURE__ */ jsx40(Loading, {});
   }
-  return /* @__PURE__ */ jsx40(Fragment16, { children });
+  return /* @__PURE__ */ jsx40(Fragment18, { children });
 };
 
 // src/components/embed/Embed.tsx