npm - @schematichq/schematic-components - Versions diffs - 0.7.14 → 0.7.16 - Mend

@schematichq/schematic-components 0.7.14 → 0.7.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/schematic-components.cjs.js +693 -631
package/dist/schematic-components.d.ts +52 -2
package/dist/schematic-components.esm.js +703 -641
package/package.json +1 -1

package/dist/schematic-components.cjs.js CHANGED Viewed

@@ -6028,16 +6028,17 @@ __export(index_exports, {
   useEmbed: () => useEmbed,
   useIsLightBackground: () => useIsLightBackground,
   usePrevious: () => usePrevious2,
+  useRequest: () => useRequest,
   useTrialEnd: () => useTrialEnd,
   useWrapChildren: () => useWrapChildren
 });
 module.exports = __toCommonJS(index_exports);
 // src/components/elements/button/Button.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 // src/components/layout/card/Card.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
@@ -7854,8 +7855,7 @@ var looksLikeObjectPath = (key, nsSeparator, keySeparator) => {
   }
   return matched;
 };
-var deepFind = function(obj, path) {
-  let keySeparator = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : ".";
+var deepFind = (obj, path, keySeparator = ".") => {
   if (!obj) return void 0;
   if (obj[path]) {
     if (!Object.prototype.hasOwnProperty.call(obj, path)) return void 0;
@@ -7904,39 +7904,25 @@ var consoleLogger = {
   }
 };
 var Logger = class _Logger {
-  constructor(concreteLogger) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(concreteLogger, options2 = {}) {
     this.init(concreteLogger, options2);
   }
-  init(concreteLogger) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  init(concreteLogger, options2 = {}) {
     this.prefix = options2.prefix || "i18next:";
     this.logger = concreteLogger || consoleLogger;
     this.options = options2;
     this.debug = options2.debug;
   }
-  log() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  log(...args) {
     return this.forward(args, "log", "", true);
   }
-  warn() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
+  warn(...args) {
     return this.forward(args, "warn", "", true);
   }
-  error() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  error(...args) {
     return this.forward(args, "error", "");
   }
-  deprecate() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  deprecate(...args) {
     return this.forward(args, "warn", "WARNING DEPRECATED: ", true);
   }
   forward(args, lvl, prefix2, debugOnly) {
@@ -7979,14 +7965,10 @@ var EventEmitter = class {
     }
     this.observers[event].delete(listener);
   }
-  emit(event) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  emit(event, ...args) {
     if (this.observers[event]) {
       const cloned = Array.from(this.observers[event].entries());
-      cloned.forEach((_ref) => {
-        let [observer, numTimesAdded] = _ref;
+      cloned.forEach(([observer, numTimesAdded]) => {
         for (let i2 = 0; i2 < numTimesAdded; i2++) {
           observer(...args);
         }
@@ -7994,8 +7976,7 @@ var EventEmitter = class {
     }
     if (this.observers["*"]) {
       const cloned = Array.from(this.observers["*"].entries());
-      cloned.forEach((_ref2) => {
-        let [observer, numTimesAdded] = _ref2;
+      cloned.forEach(([observer, numTimesAdded]) => {
         for (let i2 = 0; i2 < numTimesAdded; i2++) {
           observer.apply(observer, [event, ...args]);
         }
@@ -8004,11 +7985,10 @@ var EventEmitter = class {
   }
 };
 var ResourceStore = class extends EventEmitter {
-  constructor(data) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      ns: ["translation"],
-      defaultNS: "translation"
-    };
+  constructor(data, options2 = {
+    ns: ["translation"],
+    defaultNS: "translation"
+  }) {
     super();
     this.data = data || {};
     this.options = options2;
@@ -8030,8 +8010,7 @@ var ResourceStore = class extends EventEmitter {
       this.options.ns.splice(index, 1);
     }
   }
-  getResource(lng, ns, key) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  getResource(lng, ns, key, options2 = {}) {
     const keySeparator = options2.keySeparator !== void 0 ? options2.keySeparator : this.options.keySeparator;
     const ignoreJSONStructure = options2.ignoreJSONStructure !== void 0 ? options2.ignoreJSONStructure : this.options.ignoreJSONStructure;
     let path;
@@ -8058,10 +8037,9 @@ var ResourceStore = class extends EventEmitter {
     if (result || !ignoreJSONStructure || !isString(key)) return result;
     return deepFind(this.data?.[lng]?.[ns], key, keySeparator);
   }
-  addResource(lng, ns, key, value) {
-    let options2 = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : {
-      silent: false
-    };
+  addResource(lng, ns, key, value, options2 = {
+    silent: false
+  }) {
     const keySeparator = options2.keySeparator !== void 0 ? options2.keySeparator : this.options.keySeparator;
     let path = [lng, ns];
     if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
@@ -8074,10 +8052,9 @@ var ResourceStore = class extends EventEmitter {
     setPath(this.data, path, value);
     if (!options2.silent) this.emit("added", lng, ns, key, value);
   }
-  addResources(lng, ns, resources) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {
-      silent: false
-    };
+  addResources(lng, ns, resources, options2 = {
+    silent: false
+  }) {
     for (const m2 in resources) {
       if (isString(resources[m2]) || Array.isArray(resources[m2])) this.addResource(lng, ns, m2, resources[m2], {
         silent: true
@@ -8085,11 +8062,10 @@ var ResourceStore = class extends EventEmitter {
     }
     if (!options2.silent) this.emit("added", lng, ns, resources);
   }
-  addResourceBundle(lng, ns, resources, deep, overwrite) {
-    let options2 = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : {
-      silent: false,
-      skipCopy: false
-    };
+  addResourceBundle(lng, ns, resources, deep, overwrite, options2 = {
+    silent: false,
+    skipCopy: false
+  }) {
     let path = [lng, ns];
     if (lng.indexOf(".") > -1) {
       path = lng.split(".");
@@ -8152,8 +8128,7 @@ var postProcessor = {
 var checkedLoadedFor = {};
 var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
-  constructor(services) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(services, options2 = {}) {
     super();
     copy2(["resourceStore", "languageUtils", "pluralResolver", "interpolator", "backendConnector", "i18nFormat", "utils"], services, this);
     this.options = options2;
@@ -8165,10 +8140,9 @@ var Translator = class _Translator extends EventEmitter {
   changeLanguage(lng) {
     if (lng) this.language = lng;
   }
-  exists(key) {
-    let o2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      interpolation: {}
-    };
+  exists(key, o2 = {
+    interpolation: {}
+  }) {
     const opt = {
       ...o2
     };
@@ -8220,11 +8194,12 @@ var Translator = class _Translator extends EventEmitter {
       namespaces
     } = this.extractFromKey(keys[keys.length - 1], opt);
     const namespace = namespaces[namespaces.length - 1];
+    let nsSeparator = opt.nsSeparator !== void 0 ? opt.nsSeparator : this.options.nsSeparator;
+    if (nsSeparator === void 0) nsSeparator = ":";
     const lng = opt.lng || this.language;
     const appendNamespaceToCIMode = opt.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
     if (lng?.toLowerCase() === "cimode") {
       if (appendNamespaceToCIMode) {
-        const nsSeparator = opt.nsSeparator || this.options.nsSeparator;
         if (returnDetails) {
           return {
             res: `${namespace}${nsSeparator}${key}`,
@@ -8379,9 +8354,11 @@ var Translator = class _Translator extends EventEmitter {
         }
       }
       res = this.extendTranslation(res, keys, opt, resolved, lastKey);
-      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = `${namespace}:${key}`;
+      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) {
+        res = `${namespace}${nsSeparator}${key}`;
+      }
       if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
-        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}:${key}` : key, usedDefault ? res : void 0, opt);
+        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}${nsSeparator}${key}` : key, usedDefault ? res : void 0, opt);
       }
     }
     if (returnDetails) {
@@ -8392,7 +8369,6 @@ var Translator = class _Translator extends EventEmitter {
     return res;
   }
   extendTranslation(res, key, opt, resolved, lastKey) {
-    var _this = this;
     if (this.i18nFormat?.parse) {
       res = this.i18nFormat.parse(res, {
         ...this.options.interpolation.defaultVariables,
@@ -8428,15 +8404,12 @@ var Translator = class _Translator extends EventEmitter {
         if (nestBef < nestAft) opt.nest = false;
       }
       if (!opt.lng && resolved && resolved.res) opt.lng = this.language || resolved.usedLng;
-      if (opt.nest !== false) res = this.interpolator.nest(res, function() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+      if (opt.nest !== false) res = this.interpolator.nest(res, (...args) => {
         if (lastKey?.[0] === args[0] && !opt.context) {
-          _this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
+          this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
           return null;
         }
-        return _this.translate(...args, key);
+        return this.translate(...args, key);
       }, opt);
       if (opt.interpolation) this.interpolator.reset();
     }
@@ -8453,8 +8426,7 @@ var Translator = class _Translator extends EventEmitter {
     }
     return res;
   }
-  resolve(keys) {
-    let opt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  resolve(keys, opt = {}) {
     let found;
     let usedKey;
     let exactUsedKey;
@@ -8534,13 +8506,11 @@ var Translator = class _Translator extends EventEmitter {
   isValidLookup(res) {
     return res !== void 0 && !(!this.options.returnNull && res === null) && !(!this.options.returnEmptyString && res === "");
   }
-  getResource(code, ns, key) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  getResource(code, ns, key, options2 = {}) {
     if (this.i18nFormat?.getResource) return this.i18nFormat.getResource(code, ns, key, options2);
     return this.resourceStore.getResource(code, ns, key, options2);
   }
-  getUsedParamsDetails() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  getUsedParamsDetails(options2 = {}) {
     const optionsKeys = ["defaultValue", "ordinal", "context", "replace", "lng", "lngs", "fallbackLng", "ns", "keySeparator", "nsSeparator", "returnObjects", "returnDetails", "joinArrays", "postProcess", "interpolation"];
     const useOptionsReplaceForData = options2.replace && !isString(options2.replace);
     let data = useOptionsReplaceForData ? options2.replace : options2;
@@ -8696,8 +8666,7 @@ var dummyRule = {
   })
 };
 var PluralResolver = class {
-  constructor(languageUtils) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  constructor(languageUtils, options2 = {}) {
     this.languageUtils = languageUtils;
     this.options = options2;
     this.logger = baseLogger.create("pluralResolver");
@@ -8709,8 +8678,7 @@ var PluralResolver = class {
   clearCache() {
     this.pluralRulesCache = {};
   }
-  getRule(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  getRule(code, options2 = {}) {
     const cleanedCode = getCleanedCode(code === "dev" ? "en" : code);
     const type = options2.ordinal ? "ordinal" : "cardinal";
     const cacheKey = JSON.stringify({
@@ -8737,25 +8705,21 @@ var PluralResolver = class {
     this.pluralRulesCache[cacheKey] = rule;
     return rule;
   }
-  needsPlural(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  needsPlural(code, options2 = {}) {
     let rule = this.getRule(code, options2);
     if (!rule) rule = this.getRule("dev", options2);
     return rule?.resolvedOptions().pluralCategories.length > 1;
   }
-  getPluralFormsOfKey(code, key) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  getPluralFormsOfKey(code, key, options2 = {}) {
     return this.getSuffixes(code, options2).map((suffix) => `${key}${suffix}`);
   }
-  getSuffixes(code) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  getSuffixes(code, options2 = {}) {
     let rule = this.getRule(code, options2);
     if (!rule) rule = this.getRule("dev", options2);
     if (!rule) return [];
     return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map((pluralCategory) => `${this.options.prepend}${options2.ordinal ? `ordinal${this.options.prepend}` : ""}${pluralCategory}`);
   }
-  getSuffix(code, count) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  getSuffix(code, count, options2 = {}) {
     const rule = this.getRule(code, options2);
     if (rule) {
       return `${this.options.prepend}${options2.ordinal ? `ordinal${this.options.prepend}` : ""}${rule.select(count)}`;
@@ -8764,9 +8728,7 @@ var PluralResolver = class {
     return this.getSuffix("dev", count, options2);
   }
 };
-var deepFindWithDefaults = function(data, defaultData, key) {
-  let keySeparator = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : ".";
-  let ignoreJSONStructure = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true;
+var deepFindWithDefaults = (data, defaultData, key, keySeparator = ".", ignoreJSONStructure = true) => {
   let path = getPathWithDefaults(data, defaultData, key);
   if (!path && ignoreJSONStructure && isString(key)) {
     path = deepFind(data, key, keySeparator);
@@ -8776,15 +8738,13 @@ var deepFindWithDefaults = function(data, defaultData, key) {
 };
 var regexSafe = (val) => val.replace(/\$/g, "$$$$");
 var Interpolator = class {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  constructor(options2 = {}) {
     this.logger = baseLogger.create("interpolator");
     this.options = options2;
     this.format = options2?.interpolation?.format || ((value) => value);
     this.init(options2);
   }
-  init() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  init(options2 = {}) {
     if (!options2.interpolation) options2.interpolation = {
       escapeValue: true
     };
@@ -8907,8 +8867,7 @@ var Interpolator = class {
     });
     return str;
   }
-  nest(str, fc) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  nest(str, fc, options2 = {}) {
     let match2;
     let value;
     let clonedOptions;
@@ -9004,68 +8963,68 @@ var parseFormatStr = (formatStr) => {
 };
 var createCachedFormatter = (fn) => {
   const cache = {};
-  return (val, lng, options2) => {
-    let optForCache = options2;
-    if (options2 && options2.interpolationkey && options2.formatParams && options2.formatParams[options2.interpolationkey] && options2[options2.interpolationkey]) {
+  return (v2, l2, o2) => {
+    let optForCache = o2;
+    if (o2 && o2.interpolationkey && o2.formatParams && o2.formatParams[o2.interpolationkey] && o2[o2.interpolationkey]) {
       optForCache = {
         ...optForCache,
-        [options2.interpolationkey]: void 0
+        [o2.interpolationkey]: void 0
       };
     }
-    const key = lng + JSON.stringify(optForCache);
-    let formatter = cache[key];
-    if (!formatter) {
-      formatter = fn(getCleanedCode(lng), options2);
-      cache[key] = formatter;
+    const key = l2 + JSON.stringify(optForCache);
+    let frm = cache[key];
+    if (!frm) {
+      frm = fn(getCleanedCode(l2), o2);
+      cache[key] = frm;
     }
-    return formatter(val);
+    return frm(v2);
   };
 };
+var createNonCachedFormatter = (fn) => (v2, l2, o2) => fn(getCleanedCode(l2), o2)(v2);
 var Formatter = class {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  constructor(options2 = {}) {
     this.logger = baseLogger.create("formatter");
     this.options = options2;
+    this.init(options2);
+  }
+  init(services, options2 = {
+    interpolation: {}
+  }) {
+    this.formatSeparator = options2.interpolation.formatSeparator || ",";
+    const cf = options2.cacheInBuiltFormats ? createCachedFormatter : createNonCachedFormatter;
     this.formats = {
-      number: createCachedFormatter((lng, opt) => {
+      number: cf((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       }),
-      currency: createCachedFormatter((lng, opt) => {
+      currency: cf((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt,
           style: "currency"
         });
         return (val) => formatter.format(val);
       }),
-      datetime: createCachedFormatter((lng, opt) => {
+      datetime: cf((lng, opt) => {
         const formatter = new Intl.DateTimeFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       }),
-      relativetime: createCachedFormatter((lng, opt) => {
+      relativetime: cf((lng, opt) => {
         const formatter = new Intl.RelativeTimeFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val, opt.range || "day");
       }),
-      list: createCachedFormatter((lng, opt) => {
+      list: cf((lng, opt) => {
         const formatter = new Intl.ListFormat(lng, {
           ...opt
         });
         return (val) => formatter.format(val);
       })
     };
-    this.init(options2);
-  }
-  init(services) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-      interpolation: {}
-    };
-    this.formatSeparator = options2.interpolation.formatSeparator || ",";
   }
   add(name, fc) {
     this.formats[name.toLowerCase().trim()] = fc;
@@ -9073,8 +9032,7 @@ var Formatter = class {
   addCached(name, fc) {
     this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
   }
-  format(value, format, lng) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  format(value, format, lng, options2 = {}) {
     const formats = format.split(this.formatSeparator);
     if (formats.length > 1 && formats[0].indexOf("(") > 1 && formats[0].indexOf(")") < 0 && formats.find((f2) => f2.indexOf(")") > -1)) {
       const lastIndex = formats.findIndex((f2) => f2.indexOf(")") > -1);
@@ -9114,8 +9072,7 @@ var removePending = (q2, name) => {
   }
 };
 var Connector = class extends EventEmitter {
-  constructor(backend, store, services) {
-    let options2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
+  constructor(backend, store, services, options2 = {}) {
     super();
     this.backend = backend;
     this.store = store;
@@ -9210,10 +9167,7 @@ var Connector = class extends EventEmitter {
     this.emit("loaded", loaded);
     this.queue = this.queue.filter((q2) => !q2.done);
   }
-  read(lng, ns, fcName) {
-    let tried = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
-    let wait = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : this.retryTimeout;
-    let callback = arguments.length > 5 ? arguments[5] : void 0;
+  read(lng, ns, fcName, tried = 0, wait = this.retryTimeout, callback) {
     if (!lng.length) return callback(null, {});
     if (this.readingCalls >= this.maxParallelReads) {
       this.waitingReads.push({
@@ -9257,9 +9211,7 @@ var Connector = class extends EventEmitter {
     }
     return fc(lng, ns, resolver);
   }
-  prepareLoading(languages, namespaces) {
-    let options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    let callback = arguments.length > 3 ? arguments[3] : void 0;
+  prepareLoading(languages, namespaces, options2 = {}, callback) {
     if (!this.backend) {
       this.logger.warn("No backend was added via i18next.use. Will not load resources.");
       return callback && callback();
@@ -9283,8 +9235,7 @@ var Connector = class extends EventEmitter {
       reload: true
     }, callback);
   }
-  loadOne(name) {
-    let prefix2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
+  loadOne(name, prefix2 = "") {
     const s2 = name.split("|");
     const lng = s2[0];
     const ns = s2[1];
@@ -9294,10 +9245,8 @@ var Connector = class extends EventEmitter {
       this.loaded(name, err2, data);
     });
   }
-  saveMissing(languages, namespace, key, fallbackValue, isUpdate) {
-    let options2 = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : {};
-    let clb = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : () => {
-    };
+  saveMissing(languages, namespace, key, fallbackValue, isUpdate, options2 = {}, clb = () => {
+  }) {
     if (this.services?.utils?.hasLoadedNamespace && !this.services?.utils?.hasLoadedNamespace(namespace)) {
       this.logger.warn(`did not save key "${key}" as the namespace "${namespace}" was not yet loaded`, "This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!");
       return;
@@ -9391,7 +9340,8 @@ var get = () => ({
     nestingOptionsSeparator: ",",
     maxReplaces: 1e3,
     skipOnVariables: true
-  }
+  },
+  cacheInBuiltFormats: true
 });
 var transformOptions = (options2) => {
   if (isString(options2.ns)) options2.ns = [options2.ns];
@@ -9414,9 +9364,7 @@ var bindMemberFunctions = (inst) => {
   });
 };
 var I18n = class _I18n extends EventEmitter {
-  constructor() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  constructor(options2 = {}, callback) {
     super();
     this.options = transformOptions(options2);
     this.services = {};
@@ -9435,10 +9383,7 @@ var I18n = class _I18n extends EventEmitter {
       }, 0);
     }
   }
-  init() {
-    var _this = this;
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  init(options2 = {}, callback) {
     this.isInitializing = true;
     if (typeof options2 === "function") {
       callback = options2;
@@ -9504,11 +9449,8 @@ var I18n = class _I18n extends EventEmitter {
         hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
       };
       s2.backendConnector = new Connector(createClassOnDemand(this.modules.backend), s2.resourceStore, s2, this.options);
-      s2.backendConnector.on("*", function(event) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-        _this.emit(event, ...args);
+      s2.backendConnector.on("*", (event, ...args) => {
+        this.emit(event, ...args);
       });
       if (this.modules.languageDetector) {
         s2.languageDetector = createClassOnDemand(this.modules.languageDetector);
@@ -9519,11 +9461,8 @@ var I18n = class _I18n extends EventEmitter {
         if (s2.i18nFormat.init) s2.i18nFormat.init(this);
       }
       this.translator = new Translator(this.services, this.options);
-      this.translator.on("*", function(event) {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
-        }
-        _this.emit(event, ...args);
+      this.translator.on("*", (event, ...args) => {
+        this.emit(event, ...args);
       });
       this.modules.external.forEach((m2) => {
         if (m2.init) m2.init(this);
@@ -9540,15 +9479,13 @@ var I18n = class _I18n extends EventEmitter {
     }
     const storeApi = ["getResource", "hasResourceBundle", "getResourceBundle", "getDataByLanguage"];
     storeApi.forEach((fcName) => {
-      this[fcName] = function() {
-        return _this.store[fcName](...arguments);
-      };
+      this[fcName] = (...args) => this.store[fcName](...args);
     });
     const storeApiChained = ["addResource", "addResources", "addResourceBundle", "removeResourceBundle"];
     storeApiChained.forEach((fcName) => {
-      this[fcName] = function() {
-        _this.store[fcName](...arguments);
-        return _this;
+      this[fcName] = (...args) => {
+        this.store[fcName](...args);
+        return this;
       };
     });
     const deferred = defer();
@@ -9572,8 +9509,7 @@ var I18n = class _I18n extends EventEmitter {
     }
     return deferred;
   }
-  loadResources(language) {
-    let callback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
+  loadResources(language, callback = noop) {
     let usedCallback = callback;
     const usedLng = isString(language) ? language : this.language;
     if (typeof language === "function") usedCallback = language;
@@ -9666,7 +9602,6 @@ var I18n = class _I18n extends EventEmitter {
     }
   }
   changeLanguage(lng, callback) {
-    var _this2 = this;
     this.isLanguageChangingTo = lng;
     const deferred = defer();
     this.emit("languageChanging", lng);
@@ -9688,12 +9623,8 @@ var I18n = class _I18n extends EventEmitter {
       } else {
         this.isLanguageChangingTo = void 0;
       }
-      deferred.resolve(function() {
-        return _this2.t(...arguments);
-      });
-      if (callback) callback(err2, function() {
-        return _this2.t(...arguments);
-      });
+      deferred.resolve((...args) => this.t(...args));
+      if (callback) callback(err2, (...args) => this.t(...args));
     };
     const setLng = (lngs) => {
       if (!lng && !lngs && this.services.languageDetector) lngs = [];
@@ -9724,14 +9655,10 @@ var I18n = class _I18n extends EventEmitter {
     return deferred;
   }
   getFixedT(lng, ns, keyPrefix) {
-    var _this3 = this;
-    const fixedT = function(key, opts) {
+    const fixedT = (key, opts, ...rest) => {
       let o2;
       if (typeof opts !== "object") {
-        for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
-          rest[_key3 - 2] = arguments[_key3];
-        }
-        o2 = _this3.options.overloadTranslationOptionHandler([key, opts].concat(rest));
+        o2 = this.options.overloadTranslationOptionHandler([key, opts].concat(rest));
       } else {
         o2 = {
           ...opts
@@ -9741,14 +9668,14 @@ var I18n = class _I18n extends EventEmitter {
       o2.lngs = o2.lngs || fixedT.lngs;
       o2.ns = o2.ns || fixedT.ns;
       if (o2.keyPrefix !== "") o2.keyPrefix = o2.keyPrefix || keyPrefix || fixedT.keyPrefix;
-      const keySeparator = _this3.options.keySeparator || ".";
+      const keySeparator = this.options.keySeparator || ".";
       let resultKey;
       if (o2.keyPrefix && Array.isArray(key)) {
         resultKey = key.map((k2) => `${o2.keyPrefix}${keySeparator}${k2}`);
       } else {
         resultKey = o2.keyPrefix ? `${o2.keyPrefix}${keySeparator}${key}` : key;
       }
-      return _this3.t(resultKey, o2);
+      return this.t(resultKey, o2);
     };
     if (isString(lng)) {
       fixedT.lng = lng;
@@ -9759,23 +9686,16 @@ var I18n = class _I18n extends EventEmitter {
     fixedT.keyPrefix = keyPrefix;
     return fixedT;
   }
-  t() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  t(...args) {
     return this.translator?.translate(...args);
   }
-  exists() {
-    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-      args[_key5] = arguments[_key5];
-    }
+  exists(...args) {
     return this.translator?.exists(...args);
   }
   setDefaultNamespace(ns) {
     this.options.defaultNS = ns;
   }
-  hasLoadedNamespace(ns) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  hasLoadedNamespace(ns, options2 = {}) {
     if (!this.isInitialized) {
       this.logger.warn("hasLoadedNamespace: i18next was not initialized", this.languages);
       return false;
@@ -9840,14 +9760,10 @@ var I18n = class _I18n extends EventEmitter {
     const languageUtils = this.services?.languageUtils || new LanguageUtil(get());
     return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf("-arab") > 1 ? "rtl" : "ltr";
   }
-  static createInstance() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : void 0;
+  static createInstance(options2 = {}, callback) {
     return new _I18n(options2, callback);
   }
-  cloneInstance() {
-    let options2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    let callback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
+  cloneInstance(options2 = {}, callback = noop) {
     const forkResourceStore = options2.forkResourceStore;
     if (forkResourceStore) delete options2.forkResourceStore;
     const mergedOptions = {
@@ -9888,10 +9804,7 @@ var I18n = class _I18n extends EventEmitter {
       clone.services.resourceStore = clone.store;
     }
     clone.translator = new Translator(clone.services, mergedOptions);
-    clone.translator.on("*", function(event) {
-      for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
-        args[_key6 - 1] = arguments[_key6];
-      }
+    clone.translator.on("*", (event, ...args) => {
       clone.emit(event, ...args);
     });
     clone.init(mergedOptions, callback);
@@ -15554,6 +15467,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     chargeType: json["charge_type"],
     companyCanTrial: json["company_can_trial"],
     companyCount: json["company_count"],
+    controlledBy: json["controlled_by"],
     createdAt: new Date(json["created_at"]),
     current: json["current"],
     custom: json["custom"],
@@ -15639,6 +15553,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
     chargeType: json["charge_type"],
     companyCount: json["company_count"],
+    controlledBy: json["controlled_by"],
     createdAt: new Date(json["created_at"]),
     description: json["description"],
     features: json["features"].map(
@@ -15785,31 +15700,45 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
-// src/api/checkoutexternal/models/DeletePaymentMethodResponse.ts
-function DeletePaymentMethodResponseFromJSON(json) {
-  return DeletePaymentMethodResponseFromJSONTyped(json, false);
+// src/api/checkoutexternal/models/SetupIntentResponseData.ts
+function SetupIntentResponseDataFromJSON(json) {
+  return SetupIntentResponseDataFromJSONTyped(json, false);
 }
-function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
+function SetupIntentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    data: DeleteResponseFromJSON(json["data"]),
+    publishableKey: json["publishable_key"],
+    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
+  };
+}
+// src/api/checkoutexternal/models/CreateSetupIntentResponse.ts
+function CreateSetupIntentResponseFromJSON(json) {
+  return CreateSetupIntentResponseFromJSONTyped(json, false);
+}
+function CreateSetupIntentResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: SetupIntentResponseDataFromJSON(json["data"]),
     params: json["params"]
   };
 }
-// src/api/checkoutexternal/models/SetupIntentResponseData.ts
-function SetupIntentResponseDataFromJSON(json) {
-  return SetupIntentResponseDataFromJSONTyped(json, false);
+// src/api/checkoutexternal/models/DeletePaymentMethodResponse.ts
+function DeletePaymentMethodResponseFromJSON(json) {
+  return DeletePaymentMethodResponseFromJSONTyped(json, false);
 }
-function SetupIntentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
-    publishableKey: json["publishable_key"],
-    setupIntentClientSecret: json["setup_intent_client_secret"] == null ? void 0 : json["setup_intent_client_secret"]
+    data: DeleteResponseFromJSON(json["data"]),
+    params: json["params"]
   };
 }
@@ -16059,6 +15988,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
    */
@@ -16381,6 +16342,7 @@ var en_default = {
     "After the trial, cancel no default": "After the trial, you will be lose access to {{planName}} plan and your subscription will be cancelled.",
     "After the trial, cancel": "After the trial, you will be downgraded to the {{defaultPlanName}} plan and your subscription will be cancelled.",
     "After the trial, subscribe": "After the trial, subscription starts and you will be billed.",
+    "Amount off": "{{amount}} off",
     Billed: "Billed {{period}}",
     "billing period": "billing period",
     "Cancel subscription": "Cancel subscription",
@@ -16422,8 +16384,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",
@@ -16460,11 +16424,13 @@ var en_default = {
     "Subscription canceled": "Subscription canceled",
     Subscription: "Subscription",
     "Talk to support": "Talk to support",
+    "There was a problem retrieving your upcoming invoice.": "There was a problem retrieving your upcoming invoice.",
     Total: "Total",
     "Trial ends in": "Trial ends in {{days}} days",
     "Trial in progress": "Trial in progress",
     "Trial selected": "Trial selected",
     Trial: "Trial",
+    "Try again": "Try again",
     Unlimited: "Unlimited {{item}}",
     "Unsubscribe failed": "Unsubscribe failed",
     Unsubscribe: "Unsubscribe",
@@ -17158,7 +17124,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.14";
+      headers["X-Schematic-Components-Version"] = "0.7.16";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -17238,6 +17204,36 @@ function usePrevious2(value) {
   return ref.current;
 }
+// src/hooks/useRequest.ts
+var import_react15 = require("react");
+function useRequest(fn) {
+  const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [data, setData] = (0, import_react15.useState)(void 0);
+  const request = (0, import_react15.useCallback)(async () => {
+    try {
+      setError(null);
+      setIsLoading(true);
+      const response = await fn();
+      if (!response) {
+        return;
+      }
+      setData(response.data);
+    } catch (e2) {
+      if (e2 instanceof Error) {
+        setError(e2);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fn]);
+  const value = (0, import_react15.useMemo)(() => {
+    const state = { isLoading, error, data };
+    return [state, request];
+  }, [isLoading, error, data, request]);
+  return value;
+}
 // src/hooks/useTrialEnd.ts
 function useTrialEnd() {
   const { data } = useEmbed();
@@ -17253,12 +17249,12 @@ function useTrialEnd() {
 }
 // src/hooks/useWrapChildren.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = (0, import_react15.useState)(
+  const [shouldWrap, setShouldWrap] = (0, import_react16.useState)(
     () => new Array(elements.length).fill(false)
   );
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     const rowShouldWrap = (parent) => [...parent.children].some(
       (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
     );
@@ -17285,7 +17281,7 @@ var Box = dt.div((props) => {
   function reducer(acc, [key, value]) {
     if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
-        // keys will always be CSS properties
+        // keys should always be CSS properties
         attr(camelToHyphen(key.slice(1)), value)
       );
     }
@@ -17295,11 +17291,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, [])}
       }
@@ -17452,7 +17448,7 @@ var Button = dt.button(
     $isLoading = false,
     $alignment = "center",
     $selfAlignment = "center",
-    $fullWidth = true,
+    $fullWidth = false,
     disabled,
     theme
   }) => {
@@ -17495,7 +17491,7 @@ var Button = dt.button(
       return lt`
           color: ${textColor};
-          ${Icon} {
+          ${Text}, ${Icon} {
             color: ${textColor};
           }
         `;
@@ -17514,7 +17510,7 @@ var Button = dt.button(
             border-color: ${color};
             color: ${color};
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17525,7 +17521,7 @@ var Button = dt.button(
             border-color: ${l2 > 50 ? darken(theme.card.background, 0.2) : lighten(theme.card.background, 0.2)};
             color: ${color};
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17540,7 +17536,7 @@ var Button = dt.button(
               text-decoration: underline;
             }
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17581,7 +17577,7 @@ var Button = dt.button(
               border-color: ${color};
               color: ${textColor};
-              ${Icon} {
+              ${Text}, ${Icon} {
                 color: ${textColor};
               }
             `;
@@ -17913,7 +17909,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 // src/components/ui/modal/Modal.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 // src/components/ui/modal/styles.ts
 var Modal = dt(Box).attrs({
@@ -17952,15 +17948,15 @@ var Modal = dt(Box).attrs({
 // src/components/ui/modal/Modal.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Modal2 = (0, import_react16.forwardRef)(
+var Modal2 = (0, import_react17.forwardRef)(
   ({ children, contentRef, size = "auto", top = 0, onClose, ...rest }, ref) => {
     const { setLayout } = useEmbed();
     const isLightBackground = useIsLightBackground();
-    const handleClose = (0, import_react16.useCallback)(() => {
+    const handleClose = (0, import_react17.useCallback)(() => {
       setLayout("portal");
       onClose?.();
     }, [setLayout, onClose]);
-    (0, import_react16.useLayoutEffect)(() => {
+    (0, import_react17.useLayoutEffect)(() => {
       contentRef?.current?.focus({ preventScroll: true });
     }, [contentRef]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -18000,7 +17996,7 @@ var Modal2 = (0, import_react16.forwardRef)(
 Modal2.displayName = "Modal";
 // src/components/ui/modal/ModalHeader.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ModalHeader = ({
   children,
@@ -18010,7 +18006,7 @@ var ModalHeader = ({
   const theme = nt();
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react17.useCallback)(() => {
+  const handleClose = (0, import_react18.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -18058,6 +18054,7 @@ var ModalHeader = ({
 };
 // src/components/ui/progress-bar/ProgressBar.tsx
+var import_react19 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var progressColorMap = [
   "blue",
@@ -18067,68 +18064,72 @@ var progressColorMap = [
   "red",
   "red"
 ];
-var ProgressBar = ({
-  progress,
-  value,
-  total = 0,
-  color = "gray",
-  bgColor = "#F2F4F7",
-  ...props
-}) => {
-  const theme = nt();
-  const barColorMap = {
-    gray: "#9CA3AF",
-    blue: "#2563EB",
-    yellow: "#FFAA06",
-    orange: "#DB6769",
-    red: "#EF4444"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    Flex,
-    {
-      $position: "relative",
-      $alignItems: "center",
-      $gap: "1rem",
-      $width: "100%",
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          Box,
-          {
-            $overflow: "hidden",
-            $width: "100%",
-            $minWidth: "6rem",
-            $height: `${8 / TEXT_BASE_SIZE}rem`,
-            $backgroundColor: bgColor,
-            $borderRadius: "9999px",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              Box,
-              {
-                $width: `${Math.min(progress, 100)}%`,
-                $height: "100%",
-                $backgroundColor: barColorMap[color]
-              }
-            )
-          }
-        ),
-        total && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          Text,
-          {
-            $font: theme.typography.text.fontFamily,
-            $size: 14,
-            $weight: 500,
-            $color: theme.typography.text.color,
-            children: [
-              formatNumber(value),
-              "/",
-              formatNumber(total)
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+var ProgressBar = (0, import_react19.forwardRef)(
+  ({
+    progress,
+    value,
+    total = 0,
+    color = "gray",
+    bgColor = "#F2F4F7",
+    ...props
+  }, ref) => {
+    const theme = nt();
+    const barColorMap = {
+      gray: "#9CA3AF",
+      blue: "#2563EB",
+      yellow: "#FFAA06",
+      orange: "#DB6769",
+      red: "#EF4444"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Flex,
+      {
+        ref,
+        $position: "relative",
+        $alignItems: "center",
+        $gap: "1rem",
+        $width: "100%",
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Box,
+            {
+              $overflow: "hidden",
+              $width: "100%",
+              $minWidth: "6rem",
+              $height: `${8 / TEXT_BASE_SIZE}rem`,
+              $backgroundColor: bgColor,
+              $borderRadius: "9999px",
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                Box,
+                {
+                  $width: `${Math.min(progress, 100)}%`,
+                  $height: "100%",
+                  $backgroundColor: barColorMap[color]
+                }
+              )
+            }
+          ),
+          total && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            Text,
+            {
+              $font: theme.typography.text.fontFamily,
+              $size: 14,
+              $weight: 500,
+              $color: theme.typography.text.color,
+              children: [
+                formatNumber(value),
+                "/",
+                formatNumber(total)
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
 // src/components/ui/text/styles.ts
 var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
@@ -18195,12 +18196,13 @@ var Text = dt.span.withConfig({
 // src/components/ui/tooltip/Tooltip.tsx
 var import_lodash2 = __toESM(require_lodash());
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_react_dom = require("react-dom");
 // src/components/ui/tooltip/styles.ts
 var Trigger = dt.div`
   width: 100%;
+  flex-grow: 1;
 `;
 var coords = (position2) => {
   let x2 = 0;
@@ -18332,13 +18334,13 @@ var Tooltip = ({
   trigger,
   content,
   position: position2 = "top",
-  zIndex = 1,
+  zIndex = 9999999,
   ...rest
 }) => {
-  const ref = (0, import_react18.useRef)(null);
-  const [show, setShow] = (0, import_react18.useState)(false);
-  const [coords2, setCoords] = (0, import_react18.useState)({ x: 0, y: 0 });
-  const updateCoords = (0, import_react18.useCallback)(() => {
+  const ref = (0, import_react20.useRef)(null);
+  const [show, setShow] = (0, import_react20.useState)(false);
+  const [coords2, setCoords] = (0, import_react20.useState)({ x: 0, y: 0 });
+  const updateCoords = (0, import_react20.useCallback)(() => {
     if (ref.current) {
       const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
       const rect = ref.current.getBoundingClientRect();
@@ -18356,14 +18358,14 @@ var Tooltip = ({
       });
     }
   }, [position2]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const handleResize = (0, import_lodash2.debounce)(updateCoords, DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     updateCoords();
   }, [updateCoords, show]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
@@ -18425,7 +18427,7 @@ var StyledCard = dt.div(({ theme }) => {
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Card = (0, import_react19.forwardRef)(
+var Card = (0, import_react21.forwardRef)(
   ({ children, className }, ref) => {
     const { isPending } = useEmbed();
     const theme = nt();
@@ -18454,7 +18456,7 @@ var Card = (0, import_react19.forwardRef)(
 Card.displayName = "Card";
 // src/components/layout/column/Column.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
@@ -18463,15 +18465,15 @@ var StyledColumn = dt.div`
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Column = (0, import_react20.forwardRef)(
+var Column = (0, import_react22.forwardRef)(
   ({ children, basis, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react20.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react22.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
   }
 );
 Column.displayName = "Column";
 // src/components/layout/root/Root.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 // src/components/layout/root/styles.ts
 var Container2 = dt.div`
@@ -18482,6 +18484,8 @@ var Container2 = dt.div`
   line-height: 1.35;
   width: 100%;
   height: 100%;
+  container-type: inline-size;
+  interpolate-size: allow-keywords;
   *,
   *::before,
@@ -18506,7 +18510,7 @@ var Container2 = dt.div`
 // src/components/layout/root/Root.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Root = (0, import_react21.forwardRef)(
+var Root = (0, import_react23.forwardRef)(
   ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Container2, { ref, ...props });
   }
@@ -18515,17 +18519,17 @@ Root.displayName = "Root";
 // src/components/layout/viewport/Viewport.tsx
 var import_lodash3 = __toESM(require_lodash());
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_react_dom2 = require("react-dom");
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 // src/components/shared/sidebar/Sidebar.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 // src/components/shared/sidebar/Proration.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Proration = ({
   currency,
@@ -18534,7 +18538,7 @@ var Proration = ({
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const [open, setOpen] = (0, import_react22.useState)(false);
+  const [open, setOpen] = (0, import_react24.useState)(false);
   const toggle = (e2) => {
     e2.preventDefault();
     e2.stopPropagation();
@@ -18590,21 +18594,29 @@ var Proration = ({
               children: t2("Total")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Button, { onClick: toggle, $variant: "text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: open ? "chevron-up" : "chevron-down" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Text,
-              {
-                $font: theme.typography.link.fontFamily,
-                $size: theme.typography.link.fontSize,
-                $weight: theme.typography.link.fontWeight,
-                $color: theme.typography.link.color,
-                $leading: 1,
-                style: { cursor: "pointer" },
-                children: open ? t2("Hide details") : t2("Show details")
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            Button,
+            {
+              onClick: toggle,
+              style: { height: "auto", padding: 0 },
+              $variant: "text",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: open ? "chevron-up" : "chevron-down" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Text,
+                  {
+                    $font: theme.typography.link.fontFamily,
+                    $size: theme.typography.link.fontSize,
+                    $weight: theme.typography.link.fontWeight,
+                    $color: theme.typography.link.color,
+                    $leading: 1,
+                    style: { cursor: "pointer" },
+                    children: open ? t2("Hide details") : t2("Show details")
+                  }
+                )
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Text,
@@ -18648,6 +18660,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
         onClick: checkout,
         $isLoading: isLoading,
+        $fullWidth: true,
         children: t2("Subscribe and close")
       }
     );
@@ -18663,6 +18676,7 @@ var StageButton = ({
             setCheckoutStage?.("checkout");
           },
           $isLoading: isLoading,
+          $fullWidth: true,
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             Flex,
             {
@@ -18697,6 +18711,7 @@ var StageButton = ({
           );
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
           t2("Next"),
           ":",
@@ -18720,6 +18735,7 @@ var StageButton = ({
           setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           Flex,
           {
@@ -18751,6 +18767,7 @@ var StageButton = ({
           setCheckoutStage?.("checkout");
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           Flex,
           {
@@ -18780,6 +18797,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         $isLoading: isLoading,
+        $fullWidth: true,
         children: willTrial ? t2("Start trial") : t2("Pay now")
       }
     );
@@ -18815,7 +18833,7 @@ var Sidebar = ({
   const isLightBackground = useIsLightBackground();
   const currentPlan = data.company?.plan;
   const currentAddOns = data.company?.addOns || [];
-  const currentUsageBasedEntitlements = (0, import_react23.useMemo)(() => {
+  const currentUsageBasedEntitlements = (0, import_react25.useMemo)(() => {
     return (data.featureUsage?.features || []).reduce(
       (acc, entitlement) => {
         if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
@@ -18833,7 +18851,7 @@ var Sidebar = ({
       []
     );
   }, [data.featureUsage?.features, planPeriod]);
-  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = (0, import_react23.useMemo)(() => {
+  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = (0, import_react25.useMemo)(() => {
     const payAsYouGoEntitlements2 = [];
     const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
       (entitlement) => {
@@ -18845,7 +18863,7 @@ var Sidebar = ({
     );
     return { payAsYouGoEntitlements: payAsYouGoEntitlements2, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
   }, [usageBasedEntitlements]);
-  const subscriptionPrice = (0, import_react23.useMemo)(() => {
+  const subscriptionPrice = (0, import_react25.useMemo)(() => {
     let planPrice;
     let currency;
     if (selectedPlan) {
@@ -18879,7 +18897,7 @@ var Sidebar = ({
     total += payInAdvanceCost;
     return formatCurrency(total, currency);
   }, [selectedPlan, currentPlan, planPeriod, addOns, payInAdvanceEntitlements]);
-  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react23.useMemo)(() => {
+  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react25.useMemo)(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
       dueNow: charges?.dueNow ?? 0,
@@ -18896,7 +18914,7 @@ var Sidebar = ({
     });
     window.dispatchEvent(event);
   };
-  const checkout = (0, import_react23.useCallback)(async () => {
+  const checkout = (0, import_react25.useCallback)(async () => {
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -18963,7 +18981,7 @@ var Sidebar = ({
     payInAdvanceEntitlements,
     promoCode
   ]);
-  const unsubscribe = (0, import_react23.useCallback)(async () => {
+  const unsubscribe = (0, import_react25.useCallback)(async () => {
     if (!api) {
       return;
     }
@@ -18987,7 +19005,7 @@ var Sidebar = ({
     addedUsageBasedEntitlements,
     removedUsageBasedEntitlements,
     willUsageBasedEntitlementsChange
-  } = (0, import_react23.useMemo)(() => {
+  } = (0, import_react25.useMemo)(() => {
     const changedUsageBasedEntitlements2 = [];
     const addedUsageBasedEntitlements2 = selectedPlan ? usageBasedEntitlements.reduce(
       (acc, selected) => {
@@ -19051,7 +19069,7 @@ var Sidebar = ({
   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 === true;
+  const isTrialable = selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
   const today = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(today);
   if (isTrialable && selectedPlan.trialDays) {
@@ -19945,7 +19963,7 @@ var Sidebar = ({
                   willTrial
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: unsubscribe, $isLoading: isLoading, children: t2("Cancel subscription") }),
+              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: unsubscribe, $isLoading: isLoading, $fullWidth: true, children: t2("Cancel subscription") }),
               !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Text,
                 {
@@ -20082,6 +20100,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $size: "sm",
                   $color: "primary",
                   $variant: "outline",
+                  $fullWidth: true,
                   children: t2("Choose add-on")
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -20093,6 +20112,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $size: "sm",
                   $color: addOn.current ? "danger" : "primary",
                   $variant: addOn.current ? "ghost" : "text",
+                  $fullWidth: true,
                   children: addOn.current ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                       Icon2,
@@ -20118,7 +20138,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 // src/components/shared/checkout-dialog/Checkout.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Checkout = ({
   requiresPayment,
@@ -20128,7 +20148,7 @@ var Checkout = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = (0, import_react24.useState)("");
+  const [discount, setDiscount] = (0, import_react26.useState)("");
   if (!requiresPayment) {
     return null;
   }
@@ -20296,7 +20316,7 @@ var Navigation = ({
 };
 // src/components/shared/checkout-dialog/Plan.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 // src/components/elements/pricing-table/styles.ts
 var ButtonLink = dt.a`
@@ -20312,7 +20332,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const text = (0, import_react25.useMemo)(() => {
+  const text = (0, import_react27.useMemo)(() => {
     if (isCurrent) {
       return isTrial ? t2("Trial in progress") : t2("Current plan");
     }
@@ -20362,15 +20382,9 @@ var PlanButtonGroup = ({
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
   const isCurrent = plan.id === data.company?.plan?.id;
-  if (plan.companyCanTrial) {
+  if (plan.companyCanTrial && plan.isTrialable) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      data.subscription?.status !== "trialing" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && willTrial ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        Selected,
-        {
-          isCurrent,
-          isTrial: plan.companyCanTrial && willTrial
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      data.subscription?.status !== "trialing" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && willTrial ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Selected, { isCurrent, isTrial: willTrial }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Button,
         {
           type: "button",
@@ -20386,6 +20400,7 @@ var PlanButtonGroup = ({
           $size: "sm",
           $color: "primary",
           $variant: "filled",
+          $fullWidth: true,
           children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             ButtonLink,
             {
@@ -20396,8 +20411,8 @@ var PlanButtonGroup = ({
           ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Tooltip,
             {
-              trigger: t2("Over usage limit"),
-              content: t2("Current usage exceeds the limit of this plan.")
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Start X day trial", { days: plan.trialDays })
         }
@@ -20413,11 +20428,12 @@ var PlanButtonGroup = ({
           $size: "sm",
           $color: "primary",
           $variant: data.subscription?.status === "trialing" ? "filled" : "text",
+          $fullWidth: true,
           children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Tooltip,
             {
-              trigger: t2("Over usage limit"),
-              content: t2("Current usage exceeds the limit of this plan.")
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Choose plan")
         }
@@ -20437,6 +20453,7 @@ var PlanButtonGroup = ({
       $size: "sm",
       $color: "primary",
       $variant: "filled",
+      $fullWidth: true,
       children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ButtonLink,
         {
@@ -20447,8 +20464,8 @@ var PlanButtonGroup = ({
       ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Tooltip,
         {
-          trigger: t2("Over usage limit"),
-          content: t2("Current usage exceeds the limit of this plan.")
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Over usage limit") }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
         }
       ) : t2("Choose plan")
     }
@@ -20466,7 +20483,7 @@ var Plan = ({
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react25.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react27.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -21027,16 +21044,16 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, selected } = useEmbed();
-  const modalRef = (0, import_react26.useRef)(null);
-  const contentRef = (0, import_react26.useRef)(null);
-  const checkoutRef = (0, import_react26.useRef)(null);
-  const [charges, setCharges] = (0, import_react26.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)(
+  const modalRef = (0, import_react28.useRef)(null);
+  const contentRef = (0, import_react28.useRef)(null);
+  const checkoutRef = (0, import_react28.useRef)(null);
+  const [charges, setCharges] = (0, import_react28.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react28.useState)(
     (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
   );
-  const [isLoading, setIsLoading] = (0, import_react26.useState)(false);
-  const [error, setError] = (0, import_react26.useState)();
-  const [planPeriod, setPlanPeriod] = (0, import_react26.useState)(
+  const [isLoading, setIsLoading] = (0, import_react28.useState)(false);
+  const [error, setError] = (0, import_react28.useState)();
+  const [planPeriod, setPlanPeriod] = (0, import_react28.useState)(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
   const {
@@ -21044,15 +21061,13 @@ var CheckoutDialog = ({ top = 0 }) => {
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const [selectedPlan, setSelectedPlan] = (0, import_react26.useState)(
+  const [selectedPlan, setSelectedPlan] = (0, import_react28.useState)(
     () => availablePlans.find(
       (plan) => selected.planId ? plan.id === selected.planId : plan.current
     )
   );
-  const [willTrial, setWillTrial] = (0, import_react26.useState)(
-    data.subscription?.status !== "trialing" && !data.trialPaymentMethodRequired
-  );
-  const [addOns, setAddOns] = (0, import_react26.useState)(
+  const [willTrial, setWillTrial] = (0, import_react28.useState)(false);
+  const [addOns, setAddOns] = (0, import_react28.useState)(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
       isSelected: typeof selected.addOnId !== "undefined" ? addOn.id === selected.addOnId : (data.company?.addOns || []).some(
@@ -21061,10 +21076,10 @@ var CheckoutDialog = ({ top = 0 }) => {
     }))
   );
   const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
-  const currentEntitlements = (0, import_react26.useMemo)(() => {
+  const currentEntitlements = (0, import_react28.useMemo)(() => {
     return data.featureUsage?.features || [];
   }, [data.featureUsage?.features]);
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react26.useState)(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react28.useState)(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
         currentEntitlements,
@@ -21073,7 +21088,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const payInAdvanceEntitlements = (0, import_react26.useMemo)(
+  const payInAdvanceEntitlements = (0, import_react28.useMemo)(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
@@ -21082,12 +21097,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
   );
-  const [promoCode, setPromoCode] = (0, import_react26.useState)();
+  const [promoCode, setPromoCode] = (0, import_react28.useState)();
   const isTrialable = selectedPlan?.isTrialable === true && selectedPlan?.companyCanTrial === true;
   const isTrialableAndFree = isTrialable && data.trialPaymentMethodRequired !== true;
   const planRequiresPayment = !isTrialableAndFree || !isTrialable && selectedPlan?.isFree !== true;
   const requiresPayment = planRequiresPayment || hasActiveAddOns || hasActivePayInAdvanceEntitlements;
-  const checkoutStages = (0, import_react26.useMemo)(() => {
+  const checkoutStages = (0, import_react28.useMemo)(() => {
     const stages = [
       {
         id: "plan",
@@ -21128,7 +21143,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     availableAddOns,
     requiresPayment
   ]);
-  const [checkoutStage, setCheckoutStage] = (0, import_react26.useState)(() => {
+  const [checkoutStage, setCheckoutStage] = (0, import_react28.useState)(() => {
     if (selected.addOnId) {
       return "addons";
     }
@@ -21141,7 +21156,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     return "plan";
   });
   const isLightBackground = useIsLightBackground();
-  const previewCheckout = (0, import_react26.useCallback)(
+  const previewCheckout = (0, import_react28.useCallback)(
     async (updates) => {
       const period = updates.period || planPeriod;
       const plan = updates.plan || selectedPlan;
@@ -21215,7 +21230,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       promoCode
     ]
   );
-  const selectPlan = (0, import_react26.useCallback)(
+  const selectPlan = (0, import_react28.useCallback)(
     (updates) => {
       const plan = updates.plan || selectedPlan;
       if (!plan) {
@@ -21248,7 +21263,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       previewCheckout
     ]
   );
-  const changePlanPeriod = (0, import_react26.useCallback)(
+  const changePlanPeriod = (0, import_react28.useCallback)(
     (period) => {
       setPlanPeriod(period);
       previewCheckout({ period });
@@ -21265,7 +21280,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       return updated;
     });
   };
-  const updateUsageBasedEntitlementQuantity = (0, import_react26.useCallback)(
+  const updateUsageBasedEntitlementQuantity = (0, import_react28.useCallback)(
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -21288,7 +21303,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     setPromoCode(code);
     previewCheckout({ promoCode: code });
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (charges) {
       checkoutRef.current?.scrollIntoView({
         behavior: "smooth",
@@ -21296,7 +21311,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     }
   }, [charges]);
-  (0, import_react26.useLayoutEffect)(() => {
+  (0, import_react28.useLayoutEffect)(() => {
     if (contentRef.current) {
       contentRef.current.scrollTo({
         top: 0,
@@ -21531,7 +21546,7 @@ var PaymentDialog = ({ top = 0 }) => {
 // src/components/shared/payment-form/PaymentForm.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
@@ -21539,10 +21554,10 @@ var PaymentForm = ({ onConfirm }) => {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
   const { api } = useEmbed();
-  const [message, setMessage] = (0, import_react27.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react27.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react27.useState)(false);
+  const [message, setMessage] = (0, import_react29.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react29.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react29.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react29.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21602,6 +21617,7 @@ var PaymentForm = ({ onConfirm }) => {
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
+            $fullWidth: true,
             children: isLoading ? t2("Loading") : t2("Save payment method")
           }
         ),
@@ -21622,7 +21638,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 // src/components/shared/period-toggle/PeriodToggle.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options: options2,
@@ -21634,8 +21650,8 @@ var PeriodToggle = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [tooltipZIndex, setTooltipZIndex] = (0, import_react28.useState)(1);
-  const savingsPercentage = (0, import_react28.useMemo)(() => {
+  const [tooltipZIndex, setTooltipZIndex] = (0, import_react30.useState)(1);
+  const savingsPercentage = (0, import_react30.useMemo)(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
       const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
@@ -21645,7 +21661,7 @@ var PeriodToggle = ({
     }
     return 0;
   }, [selectedPlan]);
-  (0, import_react28.useLayoutEffect)(() => {
+  (0, import_react30.useLayoutEffect)(() => {
     const element = layerRef?.current;
     if (element) {
       const style = getComputedStyle(element);
@@ -21735,21 +21751,21 @@ var PeriodToggle = ({
 };
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
-  const contentRef = (0, import_react29.useRef)(null);
-  const [error, setError] = (0, import_react29.useState)();
-  const [isLoading, setIsLoading] = (0, import_react29.useState)(false);
-  const planPeriod = (0, import_react29.useMemo)(
+  const contentRef = (0, import_react31.useRef)(null);
+  const [error, setError] = (0, import_react31.useState)();
+  const [isLoading, setIsLoading] = (0, import_react31.useState)(false);
+  const planPeriod = (0, import_react31.useMemo)(
     () => data.company?.plan?.planPeriod ?? "month",
     [data.company?.plan?.planPeriod]
   );
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = (0, import_react29.useMemo)(
+  const selectedPlan = (0, import_react31.useMemo)(
     () => availablePlans.find(
       (plan) => plan.id === data.company?.plan?.id && data.company?.plan.planPeriod === planPeriod
     ),
@@ -21760,7 +21776,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = (0, import_react29.useMemo)(
+  const addOns = (0, import_react31.useMemo)(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: data.company?.addOns.some((current) => available.id === current.id) ?? false
@@ -21771,7 +21787,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     data.subscription?.cancelAt || data.upcomingInvoice?.dueDate || Date.now()
   );
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react29.useCallback)(() => {
+  const handleClose = (0, import_react31.useCallback)(() => {
     setLayout("portal");
   }, [setLayout]);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -21884,7 +21900,6 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                           $size: "sm",
                           $color: "secondary",
                           $variant: "ghost",
-                          $fullWidth: false,
                           children: t2("Manage plan")
                         }
                       )
@@ -22084,28 +22099,27 @@ 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))`};
   }
 `;
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Viewport = (0, import_react30.forwardRef)(
+var Viewport = (0, import_react32.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
-    const [top, setTop] = (0, import_react30.useState)(0);
+    const [top, setTop] = (0, import_react32.useState)(0);
     const canCheckout = data.capabilities?.checkout ?? true;
-    (0, import_react30.useLayoutEffect)(() => {
+    (0, import_react32.useLayoutEffect)(() => {
       const parent = portal || document.body;
       const setModalY = (0, import_lodash3.debounce)(() => {
         const value = Math.abs(
@@ -22152,7 +22166,7 @@ var resolveDesignProps = (props) => {
     }
   };
 };
-var ButtonElement = (0, import_react31.forwardRef)(({ children, className, ...rest }, ref) => {
+var ButtonElement = (0, import_react33.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const buttonStyles = {
     primary: {
@@ -22197,10 +22211,10 @@ var ButtonElement = (0, import_react31.forwardRef)(({ children, className, ...re
 ButtonElement.displayName = "Button";
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 // src/components/elements/included-features/Details.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Details = ({
   shouldWrapChildren,
@@ -22225,7 +22239,7 @@ var Details = ({
     priceTier,
     currency,
     packageSize = 1
-  } = (0, import_react32.useMemo)(() => {
+  } = (0, import_react34.useMemo)(() => {
     const {
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
@@ -22247,7 +22261,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = (0, import_react32.useMemo)(() => {
+  const text = (0, import_react34.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -22298,7 +22312,7 @@ var Details = ({
     packageSize,
     softLimit
   ]);
-  const usageText = (0, import_react32.useMemo)(() => {
+  const usageText = (0, import_react34.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -22306,7 +22320,7 @@ var Details = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
           formatCurrency(price, currency),
           "/",
           packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
@@ -22321,7 +22335,7 @@ var Details = ({
       index += 1;
     } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -22334,7 +22348,7 @@ var Details = ({
     if (acc) {
       if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
         acc.push(
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
             " ",
             "\u2022 ",
             formatCurrency(price * allocation, currency)
@@ -22343,7 +22357,7 @@ var Details = ({
         index += 1;
       } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
         acc.push(
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
             " ",
             "\u2022 ",
             formatCurrency(price * usage, currency)
@@ -22364,7 +22378,7 @@ var Details = ({
         const period = feature.featureType === "trait" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
         if (cost > 0) {
           acc.push(
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
               " ",
               "\u2022 ",
               formatCurrency(cost),
@@ -22466,16 +22480,16 @@ function resolveDesignProps2(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react33.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react33.useRef)([]);
+  const elements = (0, import_react35.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = (0, import_react33.useState)(VISIBLE_ENTITLEMENT_COUNT);
-  const featureUsage = (0, import_react33.useMemo)(() => {
+  const [showCount, setShowCount] = (0, import_react35.useState)(VISIBLE_ENTITLEMENT_COUNT);
+  const featureUsage = (0, import_react35.useMemo)(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22633,7 +22647,7 @@ var IncludedFeatures = (0, import_react33.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 // src/components/elements/invoices/Invoices.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
@@ -22685,29 +22699,26 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   }
   return dateText;
 };
-var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react36.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react34.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react34.useState)(props.limit.number);
+  const [invoices, setInvoices] = (0, import_react36.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react36.useState)(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     api?.listInvoices().then((response) => {
       setInvoices(formatInvoices(response.data));
     });
   }, [api]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
-  if (invoices.length === 0) {
-    return null;
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
     props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Text,
@@ -22719,54 +22730,56 @@ var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          InvoiceDate,
+    invoices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $justifyContent: "space-between", children: [
+          props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            InvoiceDate,
+            {
+              date,
+              fontStyle: props.date.fontStyle,
+              url
+            }
+          ),
+          props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Text,
+            {
+              $font: theme.typography[props.amount.fontStyle].fontFamily,
+              $size: theme.typography[props.amount.fontStyle].fontSize,
+              $weight: theme.typography[props.amount.fontStyle].fontWeight,
+              $color: theme.typography[props.amount.fontStyle].color,
+              children: amount
+            }
+          )
+        ] }, index);
+      }) }),
+      props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          Icon2,
           {
-            date,
-            fontStyle: props.date.fontStyle,
-            url
+            name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
+            style: { color: "#D0D0D0" }
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Text,
           {
-            $font: theme.typography[props.amount.fontStyle].fontFamily,
-            $size: theme.typography[props.amount.fontStyle].fontSize,
-            $weight: theme.typography[props.amount.fontStyle].fontWeight,
-            $color: theme.typography[props.amount.fontStyle].color,
-            children: amount
+            onClick: toggleListSize,
+            $font: theme.typography[props.collapse.fontStyle].fontFamily,
+            $size: theme.typography[props.collapse.fontStyle].fontSize,
+            $weight: theme.typography[props.collapse.fontStyle].fontWeight,
+            $color: theme.typography[props.collapse.fontStyle].color,
+            children: listSize === props.limit.number ? t2("See more") : t2("See less")
           }
         )
-      ] }, index);
-    }) }),
-    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        Icon2,
-        {
-          name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
-          style: { color: "#D0D0D0" }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        Text,
-        {
-          onClick: toggleListSize,
-          $font: theme.typography[props.collapse.fontStyle].fontFamily,
-          $size: theme.typography[props.collapse.fontStyle].fontSize,
-          $weight: theme.typography[props.collapse.fontStyle].fontWeight,
-          $color: theme.typography[props.collapse.fontStyle].color,
-          children: listSize === props.limit.number ? t2("See more") : t2("See less")
-        }
-      )
-    ] })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { display: "heading2", children: t2("No invoices created yet") })
   ] }) });
 });
 Invoices.displayName = "Invoices";
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 // src/components/elements/metered-features/styles.ts
 var Container3 = dt.div`
@@ -22774,11 +22787,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};
         `;
@@ -22813,15 +22825,15 @@ function resolveDesignProps4(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react37.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const elements = (0, import_react35.useRef)([]);
+  const elements = (0, import_react37.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const featureUsage = (0, import_react35.useMemo)(() => {
+  const featureUsage = (0, import_react37.useMemo)(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -23007,7 +23019,7 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
                   }
                 ),
                 props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexWrap: "wrap", $justifyContent: "end", $gap: "2rem", children: [
-                  typeof allocation === "number" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  typeof allocation === "number" && progressBar ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Tooltip,
                     {
                       trigger: progressBar,
@@ -23035,7 +23047,6 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
                         setSelected({ usage: true });
                         setLayout("checkout");
                       },
-                      $fullWidth: false,
                       style: { whiteSpace: "nowrap" },
                       children: t2("Add More")
                     }
@@ -23118,10 +23129,10 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
@@ -23296,7 +23307,7 @@ var PaymentListElement = ({
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
   const iconStyles = getIconStyles({ size: "lg", theme });
-  const expirationDate = (0, import_react36.useMemo)(() => {
+  const expirationDate = (0, import_react38.useMemo)(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth && !cardExpYear) {
       return "";
@@ -23408,13 +23419,13 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react37.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react39.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const paymentMethod = (0, import_react37.useMemo)(() => {
+  const paymentMethod = (0, import_react39.useMemo)(() => {
     return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
   }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
-  const monthsToExpiration = (0, import_react37.useMemo)(() => {
+  const monthsToExpiration = (0, import_react39.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23595,7 +23606,7 @@ var loadStripe = function loadStripe2() {
 };
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
   return {
@@ -23617,14 +23628,14 @@ var PaymentMethodDetails = ({
   const theme = nt();
   const { api, data, setData } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react38.useState)(false);
-  const [error, setError] = (0, import_react38.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react38.useState)(false);
-  const [stripe, setStripe] = (0, import_react38.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react38.useState)();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react38.useState)(false);
-  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
-  const monthsToExpiration = (0, import_react38.useMemo)(() => {
+  const [isLoading, setIsLoading] = (0, import_react40.useState)(false);
+  const [error, setError] = (0, import_react40.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react40.useState)(false);
+  const [stripe, setStripe] = (0, import_react40.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react40.useState)();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react40.useState)(false);
+  const [paymentMethod, setPaymentMethod] = (0, import_react40.useState)(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
+  const monthsToExpiration = (0, import_react40.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23637,7 +23648,7 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  const createSetupIntent = (0, import_react38.useCallback)(async () => {
+  const createSetupIntent = (0, import_react40.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -23656,7 +23667,7 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const updatePaymentMethod = (0, import_react38.useCallback)(
+  const updatePaymentMethod = (0, import_react40.useCallback)(
     async (externalId) => {
       if (!api || !externalId) {
         return;
@@ -23705,7 +23716,7 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, setPaymentMethodId, t2]
   );
-  const deletePaymentMethod = (0, import_react38.useCallback)(
+  const deletePaymentMethod = (0, import_react40.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -23732,12 +23743,12 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!setupIntent && (!paymentMethod || showPaymentForm)) {
       createSetupIntent();
     }
@@ -23874,7 +23885,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod2.id
               )) }),
-              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", $fullWidth: true, children: t2("Add new payment method") })
             ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -23894,7 +23905,7 @@ var PaymentMethodDetails = ({
 };
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var resolveDesignProps7 = (props) => {
   return {
@@ -23924,7 +23935,7 @@ var resolveDesignProps7 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react41.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const theme = nt();
   const { t: t2 } = useTranslation();
@@ -23950,7 +23961,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const trialEndDays = (0, import_react39.useMemo)(() => {
+  const trialEndDays = (0, import_react41.useMemo)(() => {
     const trialEnd = billingSubscription?.trialEnd;
     const trialEndDate = trialEnd ? new Date(trialEnd * 1e3) : /* @__PURE__ */ new Date();
     const todayDate = /* @__PURE__ */ new Date();
@@ -24222,6 +24233,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
               },
               $size: props.callToAction.buttonSize,
               $color: props.callToAction.buttonStyle,
+              $fullWidth: true,
               children: t2("Change plan")
             }
           )
@@ -24233,7 +24245,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var resolveDesignProps8 = (props) => {
   return {
@@ -24274,18 +24286,18 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...rest }, ref) => {
+var PricingTable = (0, import_react42.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps8(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const trialEndDays = useTrialEnd();
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react40.useState)(
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react42.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react40.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react42.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -24739,6 +24751,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
+                                $fullWidth: true,
                                 children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                   ButtonLink,
                                   {
@@ -24749,12 +24762,12 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                 ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                   Tooltip,
                                   {
-                                    trigger: t2("Over usage limit"),
-                                    content: t2(
+                                    trigger: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: t2("Over usage limit") }),
+                                    content: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: t2(
                                       "Current usage exceeds the limit of this plan."
-                                    )
+                                    ) })
                                   }
-                                ) : plan.companyCanTrial ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
+                                ) : plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
                               }
                             )
                           ]
@@ -24976,6 +24989,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                 $size: props.upgrade.buttonSize,
                                 $color: isActiveAddOn ? "danger" : props.upgrade.buttonStyle,
                                 $variant: isActiveAddOn ? "ghost" : addOn.current ? "outline" : "filled",
+                                $fullWidth: true,
                                 children: isActiveAddOn ? t2("Remove add-on") : addOn.current ? t2("Change add-on") : t2("Choose add-on")
                               }
                             )
@@ -24997,7 +25011,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
 PricingTable.displayName = "PricingTable";
 // src/components/elements/text/Text.tsx
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var resolveDesignProps9 = (props) => {
   return {
@@ -25008,7 +25022,7 @@ var resolveDesignProps9 = (props) => {
     }
   };
 };
-var TextElement = (0, import_react41.forwardRef)(({ children, className, ...rest }, ref) => {
+var TextElement = (0, import_react43.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
   const theme = nt();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -25027,7 +25041,7 @@ var TextElement = (0, import_react41.forwardRef)(({ children, className, ...rest
 TextElement.displayName = "Text";
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-var import_react42 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var resolveDesignProps10 = (props) => {
   return {
@@ -25040,7 +25054,7 @@ var resolveDesignProps10 = (props) => {
     }
   };
 };
-var UnsubscribeButton = (0, import_react42.forwardRef)(({ children, className, ...rest }, ref) => {
+var UnsubscribeButton = (0, import_react44.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
@@ -25088,7 +25102,21 @@ var UnsubscribeButton = (0, import_react42.forwardRef)(({ children, className, .
 UnsubscribeButton.displayName = "UnsubscribeButton";
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
+// src/components/elements/upcoming-bill/styles.ts
+var Container4 = dt.div`
+  height: auto;
+  opacity: 1;
+  transition: 0.1s;
+  @starting-style {
+    height: 0;
+    opacity: 0;
+  }
+`;
+// src/components/elements/upcoming-bill/UpcomingBill.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function resolveDesignProps11(props) {
   return {
@@ -25108,145 +25136,179 @@ function resolveDesignProps11(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react45.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const { data } = useEmbed();
+  const { api, data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = (0, import_react43.useMemo)(() => {
-    const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
-      amountOff: discount.amountOff,
+  const [isLoading, setIsLoading] = (0, import_react45.useState)(false);
+  const [error, setError] = (0, import_react45.useState)();
+  const [upcomingInvoice, setUpcomingInvoice] = (0, import_react45.useState)();
+  const discounts = (0, import_react45.useMemo)(() => {
+    return (data.subscription?.discounts || []).map((discount) => ({
       couponId: discount.couponId,
-      customerFacingCode: discount.customerFacingCode,
-      isActive: discount.isActive,
-      percentOff: discount.percentOff
+      customerFacingCode: discount.customerFacingCode || void 0,
+      currency: discount.currency || void 0,
+      amountOff: discount.amountOff ?? void 0,
+      percentOff: discount.percentOff ?? void 0,
+      isActive: discount.isActive
     }));
-    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
+  }, [data.subscription]);
+  const loadInvoice = (0, import_react45.useCallback)(async () => {
+    if (!api || !data.component?.id) {
+      return;
+    }
+    try {
+      setError(void 0);
+      setIsLoading(true);
+      const response = await api.hydrateUpcomingInvoice({
+        componentId: data.component.id
+      });
+      setUpcomingInvoice(response.data);
+    } catch (e2) {
+      if (e2 instanceof Error) {
+        setError(e2);
       }
-    };
-  }, [data.subscription, data.upcomingInvoice]);
-  if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-    Element,
-    {
-      as: Flex,
-      ref,
-      className,
-      $flexDirection: "column",
-      $gap: "1rem",
-      children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-          Text,
-          {
-            $font: theme.typography[props.header.fontStyle].fontFamily,
-            $size: theme.typography[props.header.fontStyle].fontSize,
-            $weight: theme.typography[props.header.fontStyle].fontWeight,
-            $color: theme.typography[props.header.fontStyle].color,
-            children: [
-              props.header.prefix,
-              " ",
-              upcomingInvoice.dueDate
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            Text,
-            {
-              $font: theme.typography[props.price.fontStyle].fontFamily,
-              $size: theme.typography[props.price.fontStyle].fontSize,
-              $weight: theme.typography[props.price.fontStyle].fontWeight,
-              $color: theme.typography[props.price.fontStyle].color,
-              $leading: 1,
-              children: formatCurrency(
-                upcomingInvoice.amountDue,
-                upcomingInvoice.currency
-              )
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            Text,
-            {
-              $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
-              $size: theme.typography[props.contractEndDate.fontStyle].fontSize,
-              $weight: theme.typography[props.contractEndDate.fontStyle].fontWeight,
-              $color: theme.typography[props.contractEndDate.fontStyle].color,
-              $leading: 1,
-              children: t2("Estimated bill.")
-            }
-          ) })
-        ] }),
-        discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            Text,
+    } finally {
+      setIsLoading(false);
+    }
+  }, [api, data.component?.id]);
+  (0, import_react45.useEffect)(() => {
+    loadInvoice();
+  }, [loadInvoice]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { as: Container4, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Loader, { $color: theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      Flex,
+      {
+        as: Container4,
+        $flexDirection: "column",
+        $justifyContent: "center",
+        $alignItems: "center",
+        $gap: "1rem",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            Button,
             {
-              $font: theme.typography.text.fontFamily,
-              $size: theme.typography.text.fontSize,
-              $weight: 600,
-              $color: theme.typography.text.color,
-              children: t2("Discount")
+              onClick: () => loadInvoice(),
+              $size: "sm",
+              $variant: "ghost",
+              $fullWidth: false,
+              children: t2("Try again")
             }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+          )
+        ]
+      }
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Container4, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text, { display: props.header.fontStyle, children: [
+        props.header.prefix,
+        " ",
+        toPrettyDate(upcomingInvoice.dueDate)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+              upcomingInvoice.amountDue,
+              upcomingInvoice.currency
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill.") }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "center",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: formatCurrency(5e3, upcomingInvoice.currency) })
+          ]
+        }
+      ),
+      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $weight: 600, children: t2("Discount") }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Flex,
               {
-                $alignItems: "center",
-                $padding: "0.1875rem 0.375rem",
-                $borderWidth: "1px",
-                $borderStyle: "solid",
-                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
-                $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  Text,
-                  {
-                    $font: theme.typography.text.fontFamily,
-                    $size: 0.75 * theme.typography.text.fontSize,
-                    $weight: theme.typography.text.fontWeight,
-                    $color: theme.typography.text.color,
-                    children: discount.customerFacingCode
-                  }
+                $flexDirection: "column",
+                $alignItems: "end",
+                $gap: "0.5rem",
+                children: discounts.reduce(
+                  (acc, discount) => {
+                    if (typeof discount.customerFacingCode === "string" && (typeof discount.percentOff === "number" || typeof discount.amountOff === "number")) {
+                      acc.push(
+                        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+                          Flex,
+                          {
+                            $alignItems: "center",
+                            $gap: "0.5rem",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                                Flex,
+                                {
+                                  $alignItems: "center",
+                                  $padding: "0.1875rem 0.375rem",
+                                  $borderWidth: "1px",
+                                  $borderStyle: "solid",
+                                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
+                                  $borderRadius: "0.3125rem",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                                    Text,
+                                    {
+                                      $size: 0.75 * theme.typography.text.fontSize,
+                                      children: discount.customerFacingCode
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
+                                percent: discount.percentOff
+                              }) : t2("Amount off", {
+                                amount: formatCurrency(
+                                  discount.amountOff,
+                                  discount?.currency
+                                )
+                              }) }) })
+                            ]
+                          },
+                          discount.couponId
+                        )
+                      );
+                    }
+                    return acc;
+                  },
+                  []
                 )
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              Text,
-              {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
-                $color: theme.typography.text.color,
-                children: t2("Percent off", { percent: discount.percentOff })
-              }
-            ) })
-          ] }, discount.couponId)) })
-        ] })
-      ]
-    }
-  );
+            )
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+  ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
 // src/components/embed/ComponentTree.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 // src/components/embed/renderer.ts
-var import_react44 = require("react");
+var import_react46 = require("react");
 var components = {
   Root,
   Viewport,
@@ -25281,7 +25343,7 @@ function createRenderer(options2) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react44.createElement)(
+    return (0, import_react46.createElement)(
       component,
       {
         key: index,
@@ -25350,8 +25412,8 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = (0, import_react45.useState)(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loading, {}));
-  (0, import_react45.useEffect)(() => {
+  const [children, setChildren] = (0, import_react47.useState)(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loading, {}));
+  (0, import_react47.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);