@schematichq/schematic-components 0.7.1 → 0.7.3

package/dist/schematic-components.cjs.js

@@ -30,28 +30,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// node_modules/void-elements/index.js
-var require_void_elements = __commonJS({
-  "node_modules/void-elements/index.js"(exports, module2) {
-    module2.exports = {
-      "area": true,
-      "base": true,
-      "br": true,
-      "col": true,
-      "embed": true,
-      "hr": true,
-      "img": true,
-      "input": true,
-      "link": true,
-      "meta": true,
-      "param": true,
-      "source": true,
-      "track": true,
-      "wbr": true
-    };
-  }
-});
-
 // node_modules/shallowequal/index.js
 var require_shallowequal = __commonJS({
   "node_modules/shallowequal/index.js"(exports, module2) {
@@ -1664,6 +1642,28 @@ var require_merge = __commonJS({
   }
 });
 
+// node_modules/void-elements/index.js
+var require_void_elements = __commonJS({
+  "node_modules/void-elements/index.js"(exports, module2) {
+    module2.exports = {
+      "area": true,
+      "base": true,
+      "br": true,
+      "col": true,
+      "embed": true,
+      "hr": true,
+      "img": true,
+      "input": true,
+      "link": true,
+      "meta": true,
+      "param": true,
+      "source": true,
+      "track": true,
+      "wbr": true
+    };
+  }
+});
+
 // node_modules/pluralize/pluralize.js
 var require_pluralize = __commonJS({
   "node_modules/pluralize/pluralize.js"(exports, module2) {
@@ -2257,6 +2257,7 @@ var index_exports = {};
 __export(index_exports, {
   Box: () => Box,
   Button: () => Button2,
+  ButtonElement: () => ButtonElement,
   Card: () => Card,
   Column: () => Column,
   Container: () => Container2,
@@ -2285,6 +2286,7 @@ __export(index_exports, {
   SchematicEmbed: () => SchematicEmbed,
   StyledCard: () => StyledCard,
   Text: () => Text,
+  TextElement: () => TextElement,
   TextPropNames: () => TextPropNames,
   Tooltip: () => Tooltip,
   UnsubscribeButton: () => UnsubscribeButton,
@@ -2303,280 +2305,11 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/elements/included-features/IncludedFeatures.tsx
-var import_react32 = require("react");
-
-// node_modules/react-i18next/dist/es/Trans.js
-var import_react3 = require("react");
-
-// node_modules/react-i18next/dist/es/TransWithoutContext.js
-var import_react = require("react");
-
-// node_modules/html-parse-stringify/dist/html-parse-stringify.module.js
-var import_void_elements = __toESM(require_void_elements());
-
-// node_modules/react-i18next/dist/es/utils.js
-var warn = (i18n, code, msg, rest) => {
-  const args = [msg, {
-    code,
-    ...rest || {}
-  }];
-  if (i18n?.services?.logger?.forward) {
-    return i18n.services.logger.forward(args, "warn", "react-i18next::", true);
-  }
-  if (isString(args[0])) args[0] = `react-i18next:: ${args[0]}`;
-  if (i18n?.services?.logger?.warn) {
-    i18n.services.logger.warn(...args);
-  } else if (console?.warn) {
-    console.warn(...args);
-  }
-};
-var alreadyWarned = {};
-var warnOnce = (i18n, code, msg, rest) => {
-  if (isString(msg) && alreadyWarned[msg]) return;
-  if (isString(msg)) alreadyWarned[msg] = /* @__PURE__ */ new Date();
-  warn(i18n, code, msg, rest);
-};
-var loadedClb = (i18n, cb) => () => {
-  if (i18n.isInitialized) {
-    cb();
-  } else {
-    const initialized = () => {
-      setTimeout(() => {
-        i18n.off("initialized", initialized);
-      }, 0);
-      cb();
-    };
-    i18n.on("initialized", initialized);
-  }
-};
-var loadNamespaces = (i18n, ns, cb) => {
-  i18n.loadNamespaces(ns, loadedClb(i18n, cb));
-};
-var loadLanguages = (i18n, lng, ns, cb) => {
-  if (isString(ns)) ns = [ns];
-  if (i18n.options.preload && i18n.options.preload.indexOf(lng) > -1) return loadNamespaces(i18n, ns, cb);
-  ns.forEach((n) => {
-    if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
-  });
-  i18n.loadLanguages(lng, loadedClb(i18n, cb));
-};
-var hasLoadedNamespace = (ns, i18n, options = {}) => {
-  if (!i18n.languages || !i18n.languages.length) {
-    warnOnce(i18n, "NO_LANGUAGES", "i18n.languages were undefined or empty", {
-      languages: i18n.languages
-    });
-    return true;
-  }
-  return i18n.hasLoadedNamespace(ns, {
-    lng: options.lng,
-    precheck: (i18nInstance2, loadNotPending) => {
-      if (options.bindI18n?.indexOf("languageChanging") > -1 && i18nInstance2.services.backendConnector.backend && i18nInstance2.isLanguageChangingTo && !loadNotPending(i18nInstance2.isLanguageChangingTo, ns)) return false;
-    }
-  });
-};
-var isString = (obj) => typeof obj === "string";
-var isObject = (obj) => typeof obj === "object" && obj !== null;
-
-// node_modules/react-i18next/dist/es/unescape.js
-var matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
-var htmlEntities = {
-  "&amp;": "&",
-  "&#38;": "&",
-  "&lt;": "<",
-  "&#60;": "<",
-  "&gt;": ">",
-  "&#62;": ">",
-  "&apos;": "'",
-  "&#39;": "'",
-  "&quot;": '"',
-  "&#34;": '"',
-  "&nbsp;": " ",
-  "&#160;": " ",
-  "&copy;": "\xA9",
-  "&#169;": "\xA9",
-  "&reg;": "\xAE",
-  "&#174;": "\xAE",
-  "&hellip;": "\u2026",
-  "&#8230;": "\u2026",
-  "&#x2F;": "/",
-  "&#47;": "/"
-};
-var unescapeHtmlEntity = (m2) => htmlEntities[m2];
-var unescape = (text) => text.replace(matchHtmlEntity, unescapeHtmlEntity);
-
-// node_modules/react-i18next/dist/es/defaults.js
-var defaultOptions = {
-  bindI18n: "languageChanged",
-  bindI18nStore: "",
-  transEmptyNodeValue: "",
-  transSupportBasicHtmlNodes: true,
-  transWrapTextNodes: "",
-  transKeepBasicHtmlNodesFor: ["br", "strong", "i", "p"],
-  useSuspense: true,
-  unescape
-};
-var setDefaults = (options = {}) => {
-  defaultOptions = {
-    ...defaultOptions,
-    ...options
-  };
-};
-var getDefaults = () => defaultOptions;
-
-// node_modules/react-i18next/dist/es/i18nInstance.js
-var i18nInstance;
-var setI18n = (instance2) => {
-  i18nInstance = instance2;
-};
-var getI18n = () => i18nInstance;
-
-// node_modules/react-i18next/dist/es/context.js
-var import_react2 = require("react");
-
-// node_modules/react-i18next/dist/es/initReactI18next.js
-var initReactI18next = {
-  type: "3rdParty",
-  init(instance2) {
-    setDefaults(instance2.options.react);
-    setI18n(instance2);
-  }
-};
-
-// node_modules/react-i18next/dist/es/context.js
-var I18nContext = (0, import_react2.createContext)();
-var ReportNamespaces = class {
-  constructor() {
-    this.usedNamespaces = {};
-  }
-  addUsedNamespaces(namespaces) {
-    namespaces.forEach((ns) => {
-      if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
-    });
-  }
-  getUsedNamespaces() {
-    return Object.keys(this.usedNamespaces);
-  }
-};
-
-// node_modules/react-i18next/dist/es/useTranslation.js
-var import_react4 = require("react");
-var usePrevious = (value, ignore) => {
-  const ref = (0, import_react4.useRef)();
-  (0, import_react4.useEffect)(() => {
-    ref.current = ignore ? ref.current : value;
-  }, [value, ignore]);
-  return ref.current;
-};
-var alwaysNewT = (i18n, language, namespace, keyPrefix) => i18n.getFixedT(language, namespace, keyPrefix);
-var useMemoizedT = (i18n, language, namespace, keyPrefix) => (0, import_react4.useCallback)(alwaysNewT(i18n, language, namespace, keyPrefix), [i18n, language, namespace, keyPrefix]);
-var useTranslation = (ns, props = {}) => {
-  const {
-    i18n: i18nFromProps
-  } = props;
-  const {
-    i18n: i18nFromContext,
-    defaultNS: defaultNSFromContext
-  } = (0, import_react4.useContext)(I18nContext) || {};
-  const i18n = i18nFromProps || i18nFromContext || getI18n();
-  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
-  if (!i18n) {
-    warnOnce(i18n, "NO_I18NEXT_INSTANCE", "useTranslation: You will need to pass in an i18next instance by using initReactI18next");
-    const notReadyT = (k2, optsOrDefaultValue) => {
-      if (isString(optsOrDefaultValue)) return optsOrDefaultValue;
-      if (isObject(optsOrDefaultValue) && isString(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
-      return Array.isArray(k2) ? k2[k2.length - 1] : k2;
-    };
-    const retNotReady = [notReadyT, {}, false];
-    retNotReady.t = notReadyT;
-    retNotReady.i18n = {};
-    retNotReady.ready = false;
-    return retNotReady;
-  }
-  if (i18n.options.react?.wait) warnOnce(i18n, "DEPRECATED_OPTION", "useTranslation: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
-  const i18nOptions = {
-    ...getDefaults(),
-    ...i18n.options.react,
-    ...props
-  };
-  const {
-    useSuspense,
-    keyPrefix
-  } = i18nOptions;
-  let namespaces = ns || defaultNSFromContext || i18n.options?.defaultNS;
-  namespaces = isString(namespaces) ? [namespaces] : namespaces || ["translation"];
-  i18n.reportNamespaces.addUsedNamespaces?.(namespaces);
-  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every((n) => hasLoadedNamespace(n, i18n, i18nOptions));
-  const memoGetT = useMemoizedT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
-  const getT = () => memoGetT;
-  const getNewT = () => alwaysNewT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
-  const [t2, setT] = (0, import_react4.useState)(getT);
-  let joinedNS = namespaces.join();
-  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-  const previousJoinedNS = usePrevious(joinedNS);
-  const isMounted = (0, import_react4.useRef)(true);
-  (0, import_react4.useEffect)(() => {
-    const {
-      bindI18n,
-      bindI18nStore
-    } = i18nOptions;
-    isMounted.current = true;
-    if (!ready && !useSuspense) {
-      if (props.lng) {
-        loadLanguages(i18n, props.lng, namespaces, () => {
-          if (isMounted.current) setT(getNewT);
-        });
-      } else {
-        loadNamespaces(i18n, namespaces, () => {
-          if (isMounted.current) setT(getNewT);
-        });
-      }
-    }
-    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
-      setT(getNewT);
-    }
-    const boundReset = () => {
-      if (isMounted.current) setT(getNewT);
-    };
-    if (bindI18n) i18n?.on(bindI18n, boundReset);
-    if (bindI18nStore) i18n?.store.on(bindI18nStore, boundReset);
-    return () => {
-      isMounted.current = false;
-      if (i18n) bindI18n?.split(" ").forEach((e2) => i18n.off(e2, boundReset));
-      if (bindI18nStore && i18n) bindI18nStore.split(" ").forEach((e2) => i18n.store.off(e2, boundReset));
-    };
-  }, [i18n, joinedNS]);
-  (0, import_react4.useEffect)(() => {
-    if (isMounted.current && ready) {
-      setT(getT);
-    }
-  }, [i18n, keyPrefix, ready]);
-  const ret = [t2, i18n, ready];
-  ret.t = t2;
-  ret.i18n = i18n;
-  ret.ready = ready;
-  if (ready) return ret;
-  if (!ready && !useSuspense) return ret;
-  throw new Promise((resolve) => {
-    if (props.lng) {
-      loadLanguages(i18n, props.lng, namespaces, () => resolve());
-    } else {
-      loadNamespaces(i18n, namespaces, () => resolve());
-    }
-  });
-};
-
-// node_modules/react-i18next/dist/es/withTranslation.js
-var import_react5 = require("react");
-
-// node_modules/react-i18next/dist/es/I18nextProvider.js
-var import_react6 = require("react");
-
-// node_modules/react-i18next/dist/es/withSSR.js
-var import_react8 = require("react");
+// src/components/elements/button/Button.tsx
+var import_react31 = require("react");
 
-// node_modules/react-i18next/dist/es/useSSR.js
-var import_react7 = require("react");
+// src/components/layout/card/Card.tsx
+var import_react20 = require("react");
 
 // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
@@ -2618,7 +2351,7 @@ var isPropValid = /* @__PURE__ */ memoize(
 );
 
 // node_modules/styled-components/dist/styled-components.browser.esm.js
-var import_react9 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 var import_shallowequal = __toESM(require_shallowequal());
 
 // node_modules/stylis/src/Enum.js
@@ -3299,7 +3032,7 @@ var P = function(t2, n) {
       console.error = function(t3) {
         for (var n2 = [], o3 = 1; o3 < arguments.length; o3++) n2[o3 - 1] = arguments[o3];
         E.test(t3) ? (a2 = false, N.delete(s2)) : i2.apply(void 0, __spreadArray([t3], n2, false));
-      }, (0, import_react9.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
+      }, (0, import_react.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
     } catch (e2) {
       E.test(e2.message) && N.delete(s2);
     } finally {
@@ -3637,26 +3370,26 @@ function Fe(e2) {
 }
 var Me = new ke();
 var ze = Fe();
-var $e = import_react9.default.createContext({ shouldForwardProp: void 0, styleSheet: Me, stylis: ze });
+var $e = import_react.default.createContext({ shouldForwardProp: void 0, styleSheet: Me, stylis: ze });
 var Be = $e.Consumer;
-var Le = import_react9.default.createContext(void 0);
+var Le = import_react.default.createContext(void 0);
 function Ge() {
-  return (0, import_react9.useContext)($e);
+  return (0, import_react.useContext)($e);
 }
 function Ye(e2) {
-  var t2 = (0, import_react9.useState)(e2.stylisPlugins), n = t2[0], r2 = t2[1], c2 = Ge().styleSheet, l2 = (0, import_react9.useMemo)(function() {
+  var t2 = (0, import_react.useState)(e2.stylisPlugins), n = t2[0], r2 = t2[1], c2 = Ge().styleSheet, l2 = (0, import_react.useMemo)(function() {
     var t3 = c2;
     return e2.sheet ? t3 = e2.sheet : e2.target && (t3 = t3.reconstructWithOptions({ target: e2.target }, false)), e2.disableCSSOMInjection && (t3 = t3.reconstructWithOptions({ useCSSOMInjection: false })), t3;
-  }, [e2.disableCSSOMInjection, e2.sheet, e2.target, c2]), u2 = (0, import_react9.useMemo)(function() {
+  }, [e2.disableCSSOMInjection, e2.sheet, e2.target, c2]), u2 = (0, import_react.useMemo)(function() {
     return Fe({ options: { namespace: e2.namespace, prefix: e2.enableVendorPrefixes }, plugins: n });
   }, [e2.enableVendorPrefixes, e2.namespace, n]);
-  (0, import_react9.useEffect)(function() {
+  (0, import_react.useEffect)(function() {
     (0, import_shallowequal.default)(n, e2.stylisPlugins) || r2(e2.stylisPlugins);
   }, [e2.stylisPlugins]);
-  var d = (0, import_react9.useMemo)(function() {
+  var d = (0, import_react.useMemo)(function() {
     return { shouldForwardProp: e2.shouldForwardProp, styleSheet: l2, stylis: u2 };
   }, [e2.shouldForwardProp, l2, u2]);
-  return import_react9.default.createElement($e.Provider, { value: d }, import_react9.default.createElement(Le.Provider, { value: u2 }, e2.children));
+  return import_react.default.createElement($e.Provider, { value: d }, import_react.default.createElement(Le.Provider, { value: u2 }, e2.children));
 }
 var We = function() {
   function e2(e3, t2) {
@@ -3748,15 +3481,15 @@ var Qe = function() {
     return o2;
   }, e2;
 }();
-var et = import_react9.default.createContext(void 0);
+var et = import_react.default.createContext(void 0);
 var tt = et.Consumer;
 function nt() {
-  var e2 = (0, import_react9.useContext)(et);
+  var e2 = (0, import_react.useContext)(et);
   if (!e2) throw he(18);
   return e2;
 }
 function ot(e2) {
-  var n = import_react9.default.useContext(et), r2 = (0, import_react9.useMemo)(function() {
+  var n = import_react.default.useContext(et), r2 = (0, import_react.useMemo)(function() {
     return function(e3, n2) {
       if (!e3) throw he(14);
       if (re(e3)) {
@@ -3768,7 +3501,7 @@ function ot(e2) {
       return n2 ? __assign(__assign({}, n2), e3) : e3;
     }(e2.theme, n);
   }, [e2.theme, n]);
-  return e2.children ? import_react9.default.createElement(et.Provider, { value: r2 }, e2.children) : null;
+  return e2.children ? import_react.default.createElement(et.Provider, { value: r2 }, e2.children) : null;
 }
 var rt = {};
 var st = /* @__PURE__ */ new Set();
@@ -3793,8 +3526,8 @@ function it(e2, r2, s2) {
   var N2 = new Qe(s2, g2, i2 ? a2.componentStyle : void 0);
   function O2(e3, r3) {
     return function(e4, r4, s3) {
-      var i3 = e4.attrs, a3 = e4.componentStyle, c3 = e4.defaultProps, p3 = e4.foldedComponentIds, d2 = e4.styledComponentId, h2 = e4.target, f3 = import_react9.default.useContext(et), m3 = Ge(), y3 = e4.shouldForwardProp || m3.shouldForwardProp;
-      (0, import_react9.useDebugValue)(d2);
+      var i3 = e4.attrs, a3 = e4.componentStyle, c3 = e4.defaultProps, p3 = e4.foldedComponentIds, d2 = e4.styledComponentId, h2 = e4.target, f3 = import_react.default.useContext(et), m3 = Ge(), y3 = e4.shouldForwardProp || m3.shouldForwardProp;
+      (0, import_react.useDebugValue)(d2);
       var v2 = I(r4, f3, c3) || C, g3 = function(e5, n, o2) {
         for (var r5, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i4 = 0; i4 < e5.length; i4 += 1) {
           var a4 = re(r5 = e5[i4]) ? r5(s4) : r5;
@@ -3805,15 +3538,15 @@ function it(e2, r2, s2) {
       for (var b3 in g3) void 0 === g3[b3] || "$" === b3[0] || "as" === b3 || "theme" === b3 && g3.theme === v2 || ("forwardedAs" === b3 ? w3.as = g3.forwardedAs : y3 && !y3(b3, S3) || (w3[b3] = g3[b3], y3 || false || isPropValid(b3) || st.has(b3) || !A.has(S3) || (st.add(b3), console.warn('styled-components: it looks like an unknown prop "'.concat(b3, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
       var E3 = function(e5, t2) {
         var n = Ge(), o2 = e5.generateAndInjectStyles(t2, n.styleSheet, n.stylis);
-        return (0, import_react9.useDebugValue)(o2), o2;
+        return (0, import_react.useDebugValue)(o2), o2;
       }(a3, g3);
       e4.warnTooManyClasses && e4.warnTooManyClasses(E3);
       var N3 = ie(p3, d2);
-      return E3 && (N3 += " " + E3), g3.className && (N3 += " " + g3.className), w3[L(S3) && !A.has(S3) ? "class" : "className"] = N3, s3 && (w3.ref = s3), (0, import_react9.createElement)(S3, w3);
+      return E3 && (N3 += " " + E3), g3.className && (N3 += " " + g3.className), w3[L(S3) && !A.has(S3) ? "class" : "className"] = N3, s3 && (w3.ref = s3), (0, import_react.createElement)(S3, w3);
     }(D2, e3, r3);
   }
   O2.displayName = y2;
-  var D2 = import_react9.default.forwardRef(O2);
+  var D2 = import_react.default.forwardRef(O2);
   return D2.attrs = S2, D2.componentStyle = N2, D2.displayName = y2, D2.shouldForwardProp = w2, D2.foldedComponentIds = i2 ? ie(a2.foldedComponentIds, a2.styledComponentId) : "", D2.styledComponentId = g2, D2.target = i2 ? a2.target : e2, Object.defineProperty(D2, "defaultProps", { get: function() {
     return this._foldedDefaultProps;
   }, set: function(e3) {
@@ -3884,10 +3617,10 @@ function ft(n) {
   var i2 = lt.apply(void 0, __spreadArray([n], r2, false)), a2 = "sc-global-".concat($(JSON.stringify(i2))), c2 = new ht(i2, a2);
   P(a2);
   var l2 = function(e2) {
-    var t2 = Ge(), n2 = import_react9.default.useContext(et), r3 = import_react9.default.useRef(t2.styleSheet.allocateGSInstance(a2)).current;
-    return import_react9.default.Children.count(e2.children) && console.warn("The global style component ".concat(a2, " was given child JSX. createGlobalStyle does not render children.")), i2.some(function(e3) {
+    var t2 = Ge(), n2 = import_react.default.useContext(et), r3 = import_react.default.useRef(t2.styleSheet.allocateGSInstance(a2)).current;
+    return import_react.default.Children.count(e2.children) && console.warn("The global style component ".concat(a2, " was given child JSX. createGlobalStyle does not render children.")), i2.some(function(e3) {
       return "string" == typeof e3 && -1 !== e3.indexOf("@import");
-    }) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), t2.styleSheet.server && u2(r3, e2, t2.styleSheet, n2, t2.stylis), import_react9.default.useLayoutEffect(function() {
+    }) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), t2.styleSheet.server && u2(r3, e2, t2.styleSheet, n2, t2.stylis), import_react.default.useLayoutEffect(function() {
       if (!t2.styleSheet.server) return u2(r3, e2, t2.styleSheet, n2, t2.stylis), function() {
         return c2.removeStyles(r3, t2.styleSheet);
       };
@@ -3900,7 +3633,7 @@ function ft(n) {
       c2.renderStyles(e2, i3, o2, s3);
     }
   }
-  return import_react9.default.memo(l2);
+  return import_react.default.memo(l2);
 }
 function mt(t2) {
   for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
@@ -3925,14 +3658,14 @@ var vt = function() {
       var r2 = e3.instance.toString();
       if (!r2) return [];
       var s2 = ((n = {})[f] = "", n[y] = v, n.dangerouslySetInnerHTML = { __html: r2 }, n), i2 = Ce();
-      return i2 && (s2.nonce = i2), [import_react9.default.createElement("style", __assign({}, s2, { key: "sc-0-0" }))];
+      return i2 && (s2.nonce = i2), [import_react.default.createElement("style", __assign({}, s2, { key: "sc-0-0" }))];
     }, this.seal = function() {
       e3.sealed = true;
     }, this.instance = new ke({ isServer: true }), this.sealed = false;
   }
   return e2.prototype.collectStyles = function(e3) {
     if (this.sealed) throw he(2);
-    return import_react9.default.createElement(Ye, { sheet: this.instance }, e3);
+    return import_react.default.createElement(Ye, { sheet: this.instance }, e3);
   }, e2.prototype.interleaveWithNodeStream = function(e3) {
     throw he(3);
   }, e2;
@@ -3950,10 +3683,10 @@ var DEFAULT_CURRENCY = "USD";
 var MAXIMUM_SIGNIFICANT_DIGITS = 6;
 
 // src/hooks/useAvailablePlans.ts
-var import_react10 = require("react");
+var import_react2 = require("react");
 function useAvailablePlans(activePeriod) {
   const { data, mode } = useEmbed();
-  const getAvailablePeriods = (0, import_react10.useCallback)(() => {
+  const getAvailablePeriods = (0, import_react2.useCallback)(() => {
     const periods = [];
     if (data.activePlans.some((plan) => plan.monthlyPrice) || data.activeAddOns.some((addOn) => addOn.monthlyPrice)) {
       periods.push("month");
@@ -3963,7 +3696,7 @@ function useAvailablePlans(activePeriod) {
     }
     return periods;
   }, [data.activePlans, data.activeAddOns]);
-  const getActivePlans = (0, import_react10.useCallback)(
+  const getActivePlans = (0, import_react2.useCallback)(
     (plans) => {
       const customPlanExist = plans.some((plan) => plan.custom);
       const plansWithSelected = mode === "edit" ? plans.slice() : plans.filter(
@@ -3984,7 +3717,7 @@ function useAvailablePlans(activePeriod) {
     },
     [activePeriod, mode]
   );
-  return (0, import_react10.useMemo)(() => {
+  return (0, import_react2.useMemo)(() => {
     return {
       plans: getActivePlans(data.activePlans),
       addOns: getActivePlans(data.activeAddOns),
@@ -4002,7 +3735,7 @@ function useAvailablePlans(activePeriod) {
 var import_react12 = require("react");
 
 // node_modules/i18next/dist/esm/i18next.js
-var isString2 = (obj) => typeof obj === "string";
+var isString = (obj) => typeof obj === "string";
 var defer = () => {
   let res;
   let rej;
@@ -4025,9 +3758,9 @@ var copy2 = (a2, s2, t2) => {
 };
 var lastOfPathSeparatorRegExp = /###/g;
 var cleanKey = (key) => key && key.indexOf("###") > -1 ? key.replace(lastOfPathSeparatorRegExp, ".") : key;
-var canNotTraverseDeeper = (object) => !object || isString2(object);
+var canNotTraverseDeeper = (object) => !object || isString(object);
 var getLastOfPath = (object, path, Empty) => {
-  const stack = !isString2(path) ? path : path.split(".");
+  const stack = !isString(path) ? path : path.split(".");
   let stackIndex = 0;
   while (stackIndex < stack.length - 1) {
     if (canNotTraverseDeeper(object)) return {};
@@ -4096,7 +3829,7 @@ var deepExtend = (target, source, overwrite) => {
   for (const prop in source) {
     if (prop !== "__proto__" && prop !== "constructor") {
       if (prop in target) {
-        if (isString2(target[prop]) || target[prop] instanceof String || isString2(source[prop]) || source[prop] instanceof String) {
+        if (isString(target[prop]) || target[prop] instanceof String || isString(source[prop]) || source[prop] instanceof String) {
           if (overwrite) target[prop] = source[prop];
         } else {
           deepExtend(target[prop], source[prop], overwrite);
@@ -4118,7 +3851,7 @@ var _entityMap = {
   "/": "&#x2F;"
 };
 var escape = (data) => {
-  if (isString2(data)) {
+  if (isString(data)) {
     return data.replace(/[&<>"'\/]/g, (s2) => _entityMap[s2]);
   }
   return data;
@@ -4247,7 +3980,7 @@ var Logger = class _Logger {
   }
   forward(args, lvl, prefix2, debugOnly) {
     if (debugOnly && !this.debug) return null;
-    if (isString2(args[0])) args[0] = `${prefix2}${this.prefix} ${args[0]}`;
+    if (isString(args[0])) args[0] = `${prefix2}${this.prefix} ${args[0]}`;
     return this.logger[lvl](args);
   }
   create(moduleName) {
@@ -4348,7 +4081,7 @@ var ResourceStore = class extends EventEmitter {
       if (key) {
         if (Array.isArray(key)) {
           path.push(...key);
-        } else if (isString2(key) && keySeparator) {
+        } else if (isString(key) && keySeparator) {
           path.push(...key.split(keySeparator));
         } else {
           path.push(key);
@@ -4361,7 +4094,7 @@ var ResourceStore = class extends EventEmitter {
       ns = path[1];
       key = path.slice(2).join(".");
     }
-    if (result || !ignoreJSONStructure || !isString2(key)) return result;
+    if (result || !ignoreJSONStructure || !isString(key)) return result;
     return deepFind(this.data?.[lng]?.[ns], key, keySeparator);
   }
   addResource(lng, ns, key, value) {
@@ -4385,7 +4118,7 @@ var ResourceStore = class extends EventEmitter {
       silent: false
     };
     for (const m2 in resources) {
-      if (isString2(resources[m2]) || Array.isArray(resources[m2])) this.addResource(lng, ns, m2, resources[m2], {
+      if (isString(resources[m2]) || Array.isArray(resources[m2])) this.addResource(lng, ns, m2, resources[m2], {
         silent: true
       });
     }
@@ -4456,7 +4189,7 @@ var postProcessor = {
   }
 };
 var checkedLoadedFor = {};
-var shouldHandleAsObject = (res) => !isString2(res) && typeof res !== "boolean" && typeof res !== "number";
+var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
   constructor(services) {
     let options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
@@ -4493,7 +4226,7 @@ var Translator = class _Translator extends EventEmitter {
       if (m2 && m2.length > 0) {
         return {
           key,
-          namespaces: isString2(namespaces) ? [namespaces] : namespaces
+          namespaces: isString(namespaces) ? [namespaces] : namespaces
         };
       }
       const parts = key.split(nsSeparator);
@@ -4502,7 +4235,7 @@ var Translator = class _Translator extends EventEmitter {
     }
     return {
       key,
-      namespaces: isString2(namespaces) ? [namespaces] : namespaces
+      namespaces: isString(namespaces) ? [namespaces] : namespaces
     };
   }
   translate(keys, options, lastKey) {
@@ -4558,7 +4291,7 @@ var Translator = class _Translator extends EventEmitter {
     const noObject = ["[object Number]", "[object Function]", "[object RegExp]"];
     const joinArrays = options.joinArrays !== void 0 ? options.joinArrays : this.options.joinArrays;
     const handleAsObjectInI18nFormat = !this.i18nFormat || this.i18nFormat.handleAsObject;
-    const needsPluralHandling = options.count !== void 0 && !isString2(options.count);
+    const needsPluralHandling = options.count !== void 0 && !isString(options.count);
     const hasDefaultValue = _Translator.hasDefaultValue(options);
     const defaultValueSuffix = needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, options) : "";
     const defaultValueSuffixOrdinalFallback = options.ordinal && needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, {
@@ -4572,7 +4305,7 @@ var Translator = class _Translator extends EventEmitter {
     }
     const handleAsObject = shouldHandleAsObject(resForObjHndl);
     const resType = Object.prototype.toString.apply(resForObjHndl);
-    if (handleAsObjectInI18nFormat && resForObjHndl && handleAsObject && noObject.indexOf(resType) < 0 && !(isString2(joinArrays) && Array.isArray(resForObjHndl))) {
+    if (handleAsObjectInI18nFormat && resForObjHndl && handleAsObject && noObject.indexOf(resType) < 0 && !(isString(joinArrays) && Array.isArray(resForObjHndl))) {
       if (!options.returnObjects && !this.options.returnObjects) {
         if (!this.options.returnedObjectHandler) {
           this.logger.warn("accessing an object - but returnObjects options is not enabled!");
@@ -4618,7 +4351,7 @@ var Translator = class _Translator extends EventEmitter {
         }
         res = copy3;
       }
-    } else if (handleAsObjectInI18nFormat && isString2(joinArrays) && Array.isArray(res)) {
+    } else if (handleAsObjectInI18nFormat && isString(joinArrays) && Array.isArray(res)) {
       res = res.join(joinArrays);
       if (res) res = this.extendTranslation(res, keys, options, lastKey);
     } else {
@@ -4712,13 +4445,13 @@ var Translator = class _Translator extends EventEmitter {
           }
         }
       });
-      const skipOnVariables = isString2(res) && (options?.interpolation?.skipOnVariables !== void 0 ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
+      const skipOnVariables = isString(res) && (options?.interpolation?.skipOnVariables !== void 0 ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
       let nestBef;
       if (skipOnVariables) {
         const nb = res.match(this.interpolator.nestingRegexp);
         nestBef = nb && nb.length;
       }
-      let data = options.replace && !isString2(options.replace) ? options.replace : options;
+      let data = options.replace && !isString(options.replace) ? options.replace : options;
       if (this.options.interpolation.defaultVariables) data = {
         ...this.options.interpolation.defaultVariables,
         ...data
@@ -4743,7 +4476,7 @@ var Translator = class _Translator extends EventEmitter {
       if (options.interpolation) this.interpolator.reset();
     }
     const postProcess = options.postProcess || this.options.postProcess;
-    const postProcessorNames = isString2(postProcess) ? [postProcess] : postProcess;
+    const postProcessorNames = isString(postProcess) ? [postProcess] : postProcess;
     if (res != null && postProcessorNames?.length && options.applyPostProcessor !== false) {
       res = postProcessor.handle(postProcessorNames, res, key, this.options && this.options.postProcessPassResolved ? {
         i18nResolved: {
@@ -4762,7 +4495,7 @@ var Translator = class _Translator extends EventEmitter {
     let exactUsedKey;
     let usedLng;
     let usedNS;
-    if (isString2(keys)) keys = [keys];
+    if (isString(keys)) keys = [keys];
     keys.forEach((k2) => {
       if (this.isValidLookup(found)) return;
       const extracted = this.extractFromKey(k2, options);
@@ -4770,9 +4503,9 @@ var Translator = class _Translator extends EventEmitter {
       usedKey = key;
       let namespaces = extracted.namespaces;
       if (this.options.fallbackNS) namespaces = namespaces.concat(this.options.fallbackNS);
-      const needsPluralHandling = options.count !== void 0 && !isString2(options.count);
+      const needsPluralHandling = options.count !== void 0 && !isString(options.count);
       const needsZeroSuffixLookup = needsPluralHandling && !options.ordinal && options.count === 0;
-      const needsContextHandling = options.context !== void 0 && (isString2(options.context) || typeof options.context === "number") && options.context !== "";
+      const needsContextHandling = options.context !== void 0 && (isString(options.context) || typeof options.context === "number") && options.context !== "";
       const codes = options.lngs ? options.lngs : this.languageUtils.toResolveHierarchy(options.lng || this.language, options.fallbackLng);
       namespaces.forEach((ns) => {
         if (this.isValidLookup(found)) return;
@@ -4844,7 +4577,7 @@ var Translator = class _Translator extends EventEmitter {
   getUsedParamsDetails() {
     let options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     const optionsKeys = ["defaultValue", "ordinal", "context", "replace", "lng", "lngs", "fallbackLng", "ns", "keySeparator", "nsSeparator", "returnObjects", "returnDetails", "joinArrays", "postProcess", "interpolation"];
-    const useOptionsReplaceForData = options.replace && !isString2(options.replace);
+    const useOptionsReplaceForData = options.replace && !isString(options.replace);
     let data = useOptionsReplaceForData ? options.replace : options;
     if (useOptionsReplaceForData && typeof options.count !== "undefined") {
       data.count = options.count;
@@ -4897,7 +4630,7 @@ var LanguageUtil = class {
     return this.formatLanguageCode(p2[0]);
   }
   formatLanguageCode(code) {
-    if (isString2(code) && code.indexOf("-") > -1) {
+    if (isString(code) && code.indexOf("-") > -1) {
       let formattedCode;
       try {
         formattedCode = Intl.getCanonicalLocales(code)[0];
@@ -4947,7 +4680,7 @@ var LanguageUtil = class {
   getFallbackCodes(fallbacks, code) {
     if (!fallbacks) return [];
     if (typeof fallbacks === "function") fallbacks = fallbacks(code);
-    if (isString2(fallbacks)) fallbacks = [fallbacks];
+    if (isString(fallbacks)) fallbacks = [fallbacks];
     if (Array.isArray(fallbacks)) return fallbacks;
     if (!code) return fallbacks.default || [];
     let found = fallbacks[code];
@@ -4968,11 +4701,11 @@ var LanguageUtil = class {
         this.logger.warn(`rejecting language code not found in supportedLngs: ${c2}`);
       }
     };
-    if (isString2(code) && (code.indexOf("-") > -1 || code.indexOf("_") > -1)) {
+    if (isString(code) && (code.indexOf("-") > -1 || code.indexOf("_") > -1)) {
       if (this.options.load !== "languageOnly") addCode(this.formatLanguageCode(code));
       if (this.options.load !== "languageOnly" && this.options.load !== "currentOnly") addCode(this.getScriptPartFromCode(code));
       if (this.options.load !== "currentOnly") addCode(this.getLanguagePartFromCode(code));
-    } else if (isString2(code)) {
+    } else if (isString(code)) {
       addCode(this.formatLanguageCode(code));
     }
     fallbackCodes.forEach((fc) => {
@@ -5068,7 +4801,7 @@ 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;
   let path = getPathWithDefaults(data, defaultData, key);
-  if (!path && ignoreJSONStructure && isString2(key)) {
+  if (!path && ignoreJSONStructure && isString(key)) {
     path = deepFind(data, key, keySeparator);
     if (path === void 0) path = deepFind(defaultData, key, keySeparator);
   }
@@ -5178,7 +4911,7 @@ var Interpolator = class {
         if (value === void 0) {
           if (typeof missingInterpolationHandler === "function") {
             const temp = missingInterpolationHandler(str, match2, options);
-            value = isString2(temp) ? temp : "";
+            value = isString(temp) ? temp : "";
           } else if (options && Object.prototype.hasOwnProperty.call(options, matchedVar)) {
             value = "";
           } else if (skipOnVariables) {
@@ -5188,7 +4921,7 @@ var Interpolator = class {
             this.logger.warn(`missed to pass in variable ${matchedVar} for interpolating ${str}`);
             value = "";
           }
-        } else if (!isString2(value) && !this.useRawValueToEscape) {
+        } else if (!isString(value) && !this.useRawValueToEscape) {
           value = makeString(value);
         }
         const safeValue = todo.safeValue(value);
@@ -5242,7 +4975,7 @@ var Interpolator = class {
       clonedOptions = {
         ...options
       };
-      clonedOptions = clonedOptions.replace && !isString2(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
+      clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
       clonedOptions.applyPostProcessor = false;
       delete clonedOptions.defaultValue;
       let doReduce = false;
@@ -5253,8 +4986,8 @@ var Interpolator = class {
         doReduce = true;
       }
       value = fc(handleHasOptions.call(this, match2[1].trim(), clonedOptions), clonedOptions);
-      if (value && match2[0] === str && !isString2(value)) return value;
-      if (!isString2(value)) value = makeString(value);
+      if (value && match2[0] === str && !isString(value)) return value;
+      if (!isString(value)) value = makeString(value);
       if (!value) {
         this.logger.warn(`missed to resolve ${match2[1]} for nesting ${str}`);
         value = "";
@@ -5564,8 +5297,8 @@ var Connector = class extends EventEmitter {
       this.logger.warn("No backend was added via i18next.use. Will not load resources.");
       return callback && callback();
     }
-    if (isString2(languages)) languages = this.languageUtils.toResolveHierarchy(languages);
-    if (isString2(namespaces)) namespaces = [namespaces];
+    if (isString(languages)) languages = this.languageUtils.toResolveHierarchy(languages);
+    if (isString(namespaces)) namespaces = [namespaces];
     const toLoad = this.queueLoad(languages, namespaces, options, callback);
     if (!toLoad.toLoad.length) {
       if (!toLoad.pending.length) callback();
@@ -5669,8 +5402,8 @@ var get = () => ({
   overloadTranslationOptionHandler: (args) => {
     let ret = {};
     if (typeof args[1] === "object") ret = args[1];
-    if (isString2(args[1])) ret.defaultValue = args[1];
-    if (isString2(args[2])) ret.tDescription = args[2];
+    if (isString(args[1])) ret.defaultValue = args[1];
+    if (isString(args[2])) ret.tDescription = args[2];
     if (typeof args[2] === "object" || typeof args[3] === "object") {
       const options = args[3] || args[2];
       Object.keys(options).forEach((key) => {
@@ -5694,9 +5427,9 @@ var get = () => ({
   }
 });
 var transformOptions = (options) => {
-  if (isString2(options.ns)) options.ns = [options.ns];
-  if (isString2(options.fallbackLng)) options.fallbackLng = [options.fallbackLng];
-  if (isString2(options.fallbackNS)) options.fallbackNS = [options.fallbackNS];
+  if (isString(options.ns)) options.ns = [options.ns];
+  if (isString(options.fallbackLng)) options.fallbackLng = [options.fallbackLng];
+  if (isString(options.fallbackNS)) options.fallbackNS = [options.fallbackNS];
   if (options.supportedLngs?.indexOf?.("cimode") < 0) {
     options.supportedLngs = options.supportedLngs.concat(["cimode"]);
   }
@@ -5745,7 +5478,7 @@ var I18n = class _I18n extends EventEmitter {
       options = {};
     }
     if (options.defaultNS == null && options.ns) {
-      if (isString2(options.ns)) {
+      if (isString(options.ns)) {
         options.defaultNS = options.ns;
       } else if (options.ns.indexOf("translation") < 0) {
         options.defaultNS = options.ns[0];
@@ -5875,7 +5608,7 @@ var I18n = class _I18n extends EventEmitter {
   loadResources(language) {
     let callback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
     let usedCallback = callback;
-    const usedLng = isString2(language) ? language : this.language;
+    const usedLng = isString(language) ? language : this.language;
     if (typeof language === "function") usedCallback = language;
     if (!this.options.resources || this.options.partialBundledLanguages) {
       if (usedLng?.toLowerCase() === "cimode" && (!this.options.preload || this.options.preload.length === 0)) return usedCallback();
@@ -5991,7 +5724,7 @@ var I18n = class _I18n extends EventEmitter {
     };
     const setLng = (lngs) => {
       if (!lng && !lngs && this.services.languageDetector) lngs = [];
-      const l2 = isString2(lngs) ? lngs : this.services.languageUtils.getBestMatchFromCodes(lngs);
+      const l2 = isString(lngs) ? lngs : this.services.languageUtils.getBestMatchFromCodes(lngs);
       if (l2) {
         if (!this.language) {
           setLngProps(l2);
@@ -6043,7 +5776,7 @@ var I18n = class _I18n extends EventEmitter {
       }
       return _this3.t(resultKey, options);
     };
-    if (isString2(lng)) {
+    if (isString(lng)) {
       fixedT.lng = lng;
     } else {
       fixedT.lngs = lng;
@@ -6100,7 +5833,7 @@ var I18n = class _I18n extends EventEmitter {
       if (callback) callback();
       return Promise.resolve();
     }
-    if (isString2(ns)) ns = [ns];
+    if (isString(ns)) ns = [ns];
     ns.forEach((n) => {
       if (this.options.ns.indexOf(n) < 0) this.options.ns.push(n);
     });
@@ -6112,7 +5845,7 @@ var I18n = class _I18n extends EventEmitter {
   }
   loadLanguages(lngs, callback) {
     const deferred = defer();
-    if (isString2(lngs)) lngs = [lngs];
+    if (isString(lngs)) lngs = [lngs];
     const preloaded = this.options.preload || [];
     const newLngs = lngs.filter((lng) => preloaded.indexOf(lng) < 0 && this.services.languageUtils.isSupportedCode(lng));
     if (!newLngs.length) {
@@ -6216,9 +5949,9 @@ var getFixedT = instance.getFixedT;
 var t = instance.t;
 var exists = instance.exists;
 var setDefaultNamespace = instance.setDefaultNamespace;
-var hasLoadedNamespace2 = instance.hasLoadedNamespace;
-var loadNamespaces2 = instance.loadNamespaces;
-var loadLanguages2 = instance.loadLanguages;
+var hasLoadedNamespace = instance.hasLoadedNamespace;
+var loadNamespaces = instance.loadNamespaces;
+var loadLanguages = instance.loadLanguages;
 
 // src/context/embed.tsx
 var import_merge = __toESM(require_merge());
@@ -10393,12 +10126,284 @@ var inflate_1$1 = {
   ungzip: ungzip$1,
   constants
 };
-var { Deflate, deflate, deflateRaw, gzip } = deflate_1$1;
-var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
-var inflate_1 = inflate;
+var { Deflate, deflate, deflateRaw, gzip } = deflate_1$1;
+var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
+var inflate_1 = inflate;
+
+// src/context/embed.tsx
+var import_react11 = require("react");
+
+// node_modules/react-i18next/dist/es/Trans.js
+var import_react5 = require("react");
+
+// node_modules/react-i18next/dist/es/TransWithoutContext.js
+var import_react3 = require("react");
+
+// node_modules/html-parse-stringify/dist/html-parse-stringify.module.js
+var import_void_elements = __toESM(require_void_elements());
+
+// node_modules/react-i18next/dist/es/utils.js
+var warn = (i18n, code, msg, rest) => {
+  const args = [msg, {
+    code,
+    ...rest || {}
+  }];
+  if (i18n?.services?.logger?.forward) {
+    return i18n.services.logger.forward(args, "warn", "react-i18next::", true);
+  }
+  if (isString2(args[0])) args[0] = `react-i18next:: ${args[0]}`;
+  if (i18n?.services?.logger?.warn) {
+    i18n.services.logger.warn(...args);
+  } else if (console?.warn) {
+    console.warn(...args);
+  }
+};
+var alreadyWarned = {};
+var warnOnce = (i18n, code, msg, rest) => {
+  if (isString2(msg) && alreadyWarned[msg]) return;
+  if (isString2(msg)) alreadyWarned[msg] = /* @__PURE__ */ new Date();
+  warn(i18n, code, msg, rest);
+};
+var loadedClb = (i18n, cb) => () => {
+  if (i18n.isInitialized) {
+    cb();
+  } else {
+    const initialized = () => {
+      setTimeout(() => {
+        i18n.off("initialized", initialized);
+      }, 0);
+      cb();
+    };
+    i18n.on("initialized", initialized);
+  }
+};
+var loadNamespaces2 = (i18n, ns, cb) => {
+  i18n.loadNamespaces(ns, loadedClb(i18n, cb));
+};
+var loadLanguages2 = (i18n, lng, ns, cb) => {
+  if (isString2(ns)) ns = [ns];
+  if (i18n.options.preload && i18n.options.preload.indexOf(lng) > -1) return loadNamespaces2(i18n, ns, cb);
+  ns.forEach((n) => {
+    if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
+  });
+  i18n.loadLanguages(lng, loadedClb(i18n, cb));
+};
+var hasLoadedNamespace2 = (ns, i18n, options = {}) => {
+  if (!i18n.languages || !i18n.languages.length) {
+    warnOnce(i18n, "NO_LANGUAGES", "i18n.languages were undefined or empty", {
+      languages: i18n.languages
+    });
+    return true;
+  }
+  return i18n.hasLoadedNamespace(ns, {
+    lng: options.lng,
+    precheck: (i18nInstance2, loadNotPending) => {
+      if (options.bindI18n?.indexOf("languageChanging") > -1 && i18nInstance2.services.backendConnector.backend && i18nInstance2.isLanguageChangingTo && !loadNotPending(i18nInstance2.isLanguageChangingTo, ns)) return false;
+    }
+  });
+};
+var isString2 = (obj) => typeof obj === "string";
+var isObject = (obj) => typeof obj === "object" && obj !== null;
+
+// node_modules/react-i18next/dist/es/unescape.js
+var matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
+var htmlEntities = {
+  "&amp;": "&",
+  "&#38;": "&",
+  "&lt;": "<",
+  "&#60;": "<",
+  "&gt;": ">",
+  "&#62;": ">",
+  "&apos;": "'",
+  "&#39;": "'",
+  "&quot;": '"',
+  "&#34;": '"',
+  "&nbsp;": " ",
+  "&#160;": " ",
+  "&copy;": "\xA9",
+  "&#169;": "\xA9",
+  "&reg;": "\xAE",
+  "&#174;": "\xAE",
+  "&hellip;": "\u2026",
+  "&#8230;": "\u2026",
+  "&#x2F;": "/",
+  "&#47;": "/"
+};
+var unescapeHtmlEntity = (m2) => htmlEntities[m2];
+var unescape = (text) => text.replace(matchHtmlEntity, unescapeHtmlEntity);
+
+// node_modules/react-i18next/dist/es/defaults.js
+var defaultOptions = {
+  bindI18n: "languageChanged",
+  bindI18nStore: "",
+  transEmptyNodeValue: "",
+  transSupportBasicHtmlNodes: true,
+  transWrapTextNodes: "",
+  transKeepBasicHtmlNodesFor: ["br", "strong", "i", "p"],
+  useSuspense: true,
+  unescape
+};
+var setDefaults = (options = {}) => {
+  defaultOptions = {
+    ...defaultOptions,
+    ...options
+  };
+};
+var getDefaults = () => defaultOptions;
+
+// node_modules/react-i18next/dist/es/i18nInstance.js
+var i18nInstance;
+var setI18n = (instance2) => {
+  i18nInstance = instance2;
+};
+var getI18n = () => i18nInstance;
+
+// node_modules/react-i18next/dist/es/context.js
+var import_react4 = require("react");
+
+// node_modules/react-i18next/dist/es/initReactI18next.js
+var initReactI18next = {
+  type: "3rdParty",
+  init(instance2) {
+    setDefaults(instance2.options.react);
+    setI18n(instance2);
+  }
+};
+
+// node_modules/react-i18next/dist/es/context.js
+var I18nContext = (0, import_react4.createContext)();
+var ReportNamespaces = class {
+  constructor() {
+    this.usedNamespaces = {};
+  }
+  addUsedNamespaces(namespaces) {
+    namespaces.forEach((ns) => {
+      if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
+    });
+  }
+  getUsedNamespaces() {
+    return Object.keys(this.usedNamespaces);
+  }
+};
+
+// node_modules/react-i18next/dist/es/useTranslation.js
+var import_react6 = require("react");
+var usePrevious = (value, ignore) => {
+  const ref = (0, import_react6.useRef)();
+  (0, import_react6.useEffect)(() => {
+    ref.current = ignore ? ref.current : value;
+  }, [value, ignore]);
+  return ref.current;
+};
+var alwaysNewT = (i18n, language, namespace, keyPrefix) => i18n.getFixedT(language, namespace, keyPrefix);
+var useMemoizedT = (i18n, language, namespace, keyPrefix) => (0, import_react6.useCallback)(alwaysNewT(i18n, language, namespace, keyPrefix), [i18n, language, namespace, keyPrefix]);
+var useTranslation = (ns, props = {}) => {
+  const {
+    i18n: i18nFromProps
+  } = props;
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = (0, import_react6.useContext)(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
+  if (!i18n) {
+    warnOnce(i18n, "NO_I18NEXT_INSTANCE", "useTranslation: You will need to pass in an i18next instance by using initReactI18next");
+    const notReadyT = (k2, optsOrDefaultValue) => {
+      if (isString2(optsOrDefaultValue)) return optsOrDefaultValue;
+      if (isObject(optsOrDefaultValue) && isString2(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
+      return Array.isArray(k2) ? k2[k2.length - 1] : k2;
+    };
+    const retNotReady = [notReadyT, {}, false];
+    retNotReady.t = notReadyT;
+    retNotReady.i18n = {};
+    retNotReady.ready = false;
+    return retNotReady;
+  }
+  if (i18n.options.react?.wait) warnOnce(i18n, "DEPRECATED_OPTION", "useTranslation: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
+  const i18nOptions = {
+    ...getDefaults(),
+    ...i18n.options.react,
+    ...props
+  };
+  const {
+    useSuspense,
+    keyPrefix
+  } = i18nOptions;
+  let namespaces = ns || defaultNSFromContext || i18n.options?.defaultNS;
+  namespaces = isString2(namespaces) ? [namespaces] : namespaces || ["translation"];
+  i18n.reportNamespaces.addUsedNamespaces?.(namespaces);
+  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every((n) => hasLoadedNamespace2(n, i18n, i18nOptions));
+  const memoGetT = useMemoizedT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
+  const getT = () => memoGetT;
+  const getNewT = () => alwaysNewT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
+  const [t2, setT] = (0, import_react6.useState)(getT);
+  let joinedNS = namespaces.join();
+  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
+  const previousJoinedNS = usePrevious(joinedNS);
+  const isMounted = (0, import_react6.useRef)(true);
+  (0, import_react6.useEffect)(() => {
+    const {
+      bindI18n,
+      bindI18nStore
+    } = i18nOptions;
+    isMounted.current = true;
+    if (!ready && !useSuspense) {
+      if (props.lng) {
+        loadLanguages2(i18n, props.lng, namespaces, () => {
+          if (isMounted.current) setT(getNewT);
+        });
+      } else {
+        loadNamespaces2(i18n, namespaces, () => {
+          if (isMounted.current) setT(getNewT);
+        });
+      }
+    }
+    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
+      setT(getNewT);
+    }
+    const boundReset = () => {
+      if (isMounted.current) setT(getNewT);
+    };
+    if (bindI18n) i18n?.on(bindI18n, boundReset);
+    if (bindI18nStore) i18n?.store.on(bindI18nStore, boundReset);
+    return () => {
+      isMounted.current = false;
+      if (i18n) bindI18n?.split(" ").forEach((e2) => i18n.off(e2, boundReset));
+      if (bindI18nStore && i18n) bindI18nStore.split(" ").forEach((e2) => i18n.store.off(e2, boundReset));
+    };
+  }, [i18n, joinedNS]);
+  (0, import_react6.useEffect)(() => {
+    if (isMounted.current && ready) {
+      setT(getT);
+    }
+  }, [i18n, keyPrefix, ready]);
+  const ret = [t2, i18n, ready];
+  ret.t = t2;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready) return ret;
+  if (!ready && !useSuspense) return ret;
+  throw new Promise((resolve) => {
+    if (props.lng) {
+      loadLanguages2(i18n, props.lng, namespaces, () => resolve());
+    } else {
+      loadNamespaces2(i18n, namespaces, () => resolve());
+    }
+  });
+};
 
-// src/context/embed.tsx
-var import_react11 = require("react");
+// node_modules/react-i18next/dist/es/withTranslation.js
+var import_react7 = require("react");
+
+// node_modules/react-i18next/dist/es/I18nextProvider.js
+var import_react8 = require("react");
+
+// node_modules/react-i18next/dist/es/withSSR.js
+var import_react10 = require("react");
+
+// node_modules/react-i18next/dist/es/useSSR.js
+var import_react9 = require("react");
 
 // node_modules/uuid/dist/esm-browser/stringify.js
 var byteToHex = [];
@@ -10723,7 +10728,23 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     id: json["id"],
     interval: json["interval"],
     price: json["price"],
-    priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"]
+    priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
+    scheme: json["scheme"]
+  };
+}
+
+// src/api/models/BillingProductPriceTierResponseData.ts
+function BillingProductPriceTierResponseDataFromJSON(json) {
+  return BillingProductPriceTierResponseDataFromJSONTyped(json, false);
+}
+function BillingProductPriceTierResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    flatAmount: json["flat_amount"] == null ? void 0 : json["flat_amount"],
+    perUnitPrice: json["per_unit_price"],
+    upTo: json["up_to"] == null ? void 0 : json["up_to"]
   };
 }
 
@@ -10736,6 +10757,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    billingScheme: json["billing_scheme"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     id: json["id"],
@@ -10746,6 +10768,9 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
     priceId: json["price_id"],
+    priceTier: json["price_tier"].map(
+      BillingProductPriceTierResponseDataFromJSON
+    ),
     productExternalId: json["product_external_id"],
     productId: json["product_id"],
     productName: json["product_name"],
@@ -10790,6 +10815,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     return json;
   }
   return {
+    billingScheme: json["billing_scheme"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     environmentId: json["environment_id"],
@@ -10802,6 +10828,9 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
     priceExternalId: json["price_external_id"],
     priceId: json["price_id"],
+    priceTier: json["price_tier"].map(
+      BillingProductPriceTierResponseDataFromJSON
+    ),
     quantity: json["quantity"],
     subscriptionId: json["subscription_id"],
     updatedAt: new Date(json["updated_at"]),
@@ -10809,6 +10838,29 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
   };
 }
 
+// src/api/models/BillingProductResponseData.ts
+function BillingProductResponseDataFromJSON(json) {
+  return BillingProductResponseDataFromJSONTyped(json, false);
+}
+function BillingProductResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    name: json["name"],
+    price: json["price"],
+    priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
+    productId: json["product_id"],
+    quantity: json["quantity"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/models/BillingSubscriptionDiscountView.ts
 function BillingSubscriptionDiscountViewFromJSON(json) {
   return BillingSubscriptionDiscountViewFromJSONTyped(json, false);
@@ -11479,6 +11531,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ruleIdUsageExceeded: json["rule_id_usage_exceeded"] == null ? void 0 : json["rule_id_usage_exceeded"],
     softLimit: json["soft_limit"] == null ? void 0 : json["soft_limit"],
     updatedAt: new Date(json["updated_at"]),
+    usageBasedProduct: json["usage_based_product"] == null ? void 0 : BillingProductResponseDataFromJSON(json["usage_based_product"]),
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
     valueTrait: json["value_trait"] == null ? void 0 : EntityTraitDefinitionResponseDataFromJSON(json["value_trait"]),
@@ -11827,6 +11880,26 @@ function ListInvoicesResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/PreviewSubscriptionFinanceResponseData.ts
+function PreviewSubscriptionFinanceResponseDataFromJSON(json) {
+  return PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, false);
+}
+function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    amountOff: json["amount_off"],
+    dueNow: json["due_now"],
+    newCharges: json["new_charges"],
+    percentOff: json["percent_off"],
+    periodStart: new Date(json["period_start"]),
+    promoCodeApplied: json["promo_code_applied"],
+    proration: json["proration"],
+    trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"])
+  };
+}
+
 // src/api/models/PreviewSubscriptionChangeResponseData.ts
 function PreviewSubscriptionChangeResponseDataFromJSON(json) {
   return PreviewSubscriptionChangeResponseDataFromJSONTyped(json, false);
@@ -11838,12 +11911,16 @@ function PreviewSubscriptionChangeResponseDataFromJSONTyped(json, ignoreDiscrimi
   return {
     amountOff: json["amount_off"],
     dueNow: json["due_now"],
+    finance: json["finance"] == null ? void 0 : PreviewSubscriptionFinanceResponseDataFromJSON(json["finance"]),
     newCharges: json["new_charges"],
     percentOff: json["percent_off"],
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
-    trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"])
+    trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"]),
+    usageViolations: json["usage_violations"].map(
+      FeatureUsageResponseDataFromJSON
+    )
   };
 }
 
@@ -13112,7 +13189,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.1";
+      headers["X-Schematic-Components-Version"] = "0.7.3";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13451,9 +13528,6 @@ function useWrapChildren(elements) {
   return shouldWrap.some((wrap) => wrap);
 }
 
-// src/components/layout/card/Card.tsx
-var import_react20 = require("react");
-
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
   function reducer(acc, [key, value]) {
@@ -13668,6 +13742,8 @@ var EmbedButton = dt(Button2)`
   font-family: "Public Sans", sans-serif;
   font-weight: 500;
   text-align: center;
+  display: flex;
+  align-items: center;
 
   ${({ disabled, $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
@@ -13815,6 +13891,24 @@ var EmbedButton = dt(Button2)`
         `;
   }
 }}
+  
+  ${({ $selfAlignment = "center" }) => {
+  switch ($selfAlignment) {
+    case "start":
+      return lt`
+          align-self: start;
+        `;
+    case "end":
+      return lt`
+          align-self: end;
+        `;
+    case "center":
+    default:
+      return lt`
+          align-self: center;
+        `;
+  }
+}}
 
   ${({ $fullWidth = true }) => {
   if ($fullWidth) {
@@ -17400,7 +17494,7 @@ var CheckoutDialog = ({ top = 0 }) => {
             promoCode: updates.promoCode || promoCode
           }
         });
-        setCharges(data2);
+        setCharges(data2.finance);
       } catch (error2) {
         if (error2 instanceof ResponseError && error2.response.status === 401) {
           const data2 = await error2.response.json();
@@ -18325,9 +18419,72 @@ var Viewport = (0, import_react30.forwardRef)(
 );
 Viewport.displayName = "Viewport";
 
-// src/components/elements/included-features/Details.tsx
-var import_react31 = require("react");
+// src/components/elements/button/Button.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
+var resolveDesignProps = (props) => {
+  return {
+    button: {
+      link: props.button?.link ?? "",
+      openInNewTab: props.button?.openInNewTab ?? true,
+      text: props.button?.text ?? "Button",
+      style: props.button?.style ?? "primary",
+      size: props.button?.size ?? "md",
+      fullWidth: props.button?.fullWidth ?? true,
+      alignment: props.button?.alignment ?? "center",
+      selfAlignment: props.button?.selfAlignment ?? "center"
+    }
+  };
+};
+var ButtonElement = (0, import_react31.forwardRef)(({ children, className, ...rest }, ref) => {
+  const props = resolveDesignProps(rest);
+  const buttonStyles = {
+    primary: {
+      color: "primary",
+      variant: "filled"
+    },
+    secondary: {
+      color: "primary",
+      variant: "outline"
+    },
+    tertiary: {
+      color: "primary",
+      variant: "text"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    Element,
+    {
+      as: Flex,
+      ref,
+      className,
+      $flexDirection: "column",
+      $gap: "2rem",
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        EmbedButton,
+        {
+          as: "a",
+          href: props.button.link,
+          target: props.button.openInNewTab ? "_blank" : "_self",
+          $size: props.button.size,
+          $color: buttonStyles[props.button.style].color,
+          $variant: buttonStyles[props.button.style].variant,
+          $alignment: props.button.alignment,
+          $selfAlignment: props.button.selfAlignment,
+          $fullWidth: props.button.fullWidth,
+          children: props.button.text
+        }
+      )
+    }
+  );
+});
+ButtonElement.displayName = "Button";
+
+// src/components/elements/included-features/IncludedFeatures.tsx
+var import_react33 = require("react");
+
+// src/components/elements/included-features/Details.tsx
+var import_react32 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Details = ({
   shouldWrapChildren,
   featureUsage,
@@ -18345,7 +18502,7 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const { price, currency } = (0, import_react31.useMemo)(() => {
+  const { price, currency } = (0, import_react32.useMemo)(() => {
     const { price: entitlementPrice, currency: entitlementCurrency } = getBillingPrice(
       data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
     ) || {};
@@ -18355,7 +18512,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = (0, import_react31.useMemo)(() => {
+  const text = (0, import_react32.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -18375,7 +18532,7 @@ var Details = ({
       return t2("Unlimited", { item: getFeatureName(feature) });
     }
   }, [t2, allocation, feature, price, priceBehavior, currency, softLimit]);
-  const usageText = (0, import_react31.useMemo)(() => {
+  const usageText = (0, import_react32.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -18419,14 +18576,14 @@ var Details = ({
   if (!text) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Box,
     {
       $flexBasis: "min-content",
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Text,
           {
             $font: theme.typography[props.entitlement.fontStyle].fontFamily,
@@ -18437,7 +18594,7 @@ var Details = ({
             children: text
           }
         ) }),
-        props.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        props.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Text,
           {
             $font: theme.typography[props.usage.fontStyle].fontFamily,
@@ -18454,8 +18611,8 @@ var Details = ({
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function resolveDesignProps(props) {
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function resolveDesignProps2(props) {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -18483,16 +18640,16 @@ function resolveDesignProps(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps(rest);
+var IncludedFeatures = (0, import_react33.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react32.useRef)([]);
+  const elements = (0, import_react33.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = (0, import_react32.useState)(VISIBLE_ENTITLEMENT_COUNT);
-  const featureUsage = (0, import_react32.useMemo)(() => {
+  const [showCount, setShowCount] = (0, import_react33.useState)(VISIBLE_ENTITLEMENT_COUNT);
+  const featureUsage = (0, import_react33.useMemo)(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -18519,7 +18676,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Element,
     {
       as: Flex,
@@ -18528,7 +18685,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18541,7 +18698,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
         featureUsage.slice(0, showCount).map((usage, index) => {
           const feature = usage.feature;
           const shouldShowDetails = feature?.name && (feature?.featureType === "event" || feature?.featureType === "trait");
-          return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             Flex,
             {
               ref: (el) => {
@@ -18554,7 +18711,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                   Flex,
                   {
                     $alignItems: "center",
@@ -18562,7 +18719,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         IconRound,
                         {
                           name: feature.icon,
@@ -18573,7 +18730,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                           ]
                         }
                       ),
-                      feature?.name && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         Text,
                         {
                           $font: theme.typography[props.icons.fontStyle].fontFamily,
@@ -18583,7 +18740,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                           children: feature.name
                         }
                       ),
-                      props.entitlementExpiration.isVisible && usage.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                      props.entitlementExpiration.isVisible && usage.entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                         Text,
                         {
                           $font: theme.typography[props.entitlementExpiration.fontStyle].fontFamily,
@@ -18603,7 +18760,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Details,
                   {
                     featureUsage: usage,
@@ -18616,8 +18773,8 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
             index
           );
         }),
-        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Icon2,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
@@ -18629,7 +18786,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -18650,9 +18807,9 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react33 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function resolveDesignProps2(props) {
+var import_react34 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function resolveDesignProps3(props) {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -18685,7 +18842,7 @@ function formatInvoices(invoices = []) {
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
   const theme = nt();
-  const dateText = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  const dateText = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Text,
     {
       ...url && { onClick: () => {
@@ -18698,23 +18855,23 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
     }
   );
   if (url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
   }
   return dateText;
 };
-var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref) => {
-  const props = resolveDesignProps2(rest);
+var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref) => {
+  const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react33.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react33.useState)(props.limit.number);
+  const [invoices, setInvoices] = (0, import_react34.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react34.useState)(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     api?.listInvoices().then(({ data: data2 }) => {
       setInvoices(formatInvoices(data2));
     });
@@ -18722,8 +18879,8 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  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,
       {
         $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18733,9 +18890,9 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__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,
@@ -18743,7 +18900,7 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
             url
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Text,
           {
             $font: theme.typography[props.amount.fontStyle].fontFamily,
@@ -18755,15 +18912,15 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    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_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Text,
         {
           onClick: toggleListSize,
@@ -18780,7 +18937,7 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/elements/metered-features/styles.ts
 var Container4 = dt.div`
@@ -18823,8 +18980,8 @@ var Container4 = dt.div`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-function resolveDesignProps3(props) {
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function resolveDesignProps4(props) {
   return {
     isVisible: props.isVisible ?? true,
     header: {
@@ -18849,15 +19006,15 @@ function resolveDesignProps3(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps3(rest);
-  const elements = (0, import_react34.useRef)([]);
+var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps4(rest);
+  const elements = (0, import_react35.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_react34.useMemo)(() => {
+  const featureUsage = (0, import_react35.useMemo)(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -18879,7 +19036,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Container4, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -18895,7 +19052,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
       const { price, currency } = getBillingPrice(
         planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
       ) || {};
-      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         ProgressBar,
         {
           progress: (isOverage ? softLimit / usage : usage / limit) * 100,
@@ -18908,8 +19065,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
           $flexGrow: 1
         }
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column-reverse", children: [
-        priceBehavior === "overage" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column-reverse", children: [
+        priceBehavior === "overage" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
@@ -18921,7 +19078,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
               $borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -18929,14 +19086,14 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                   $weight: theme.typography.text.fontWeight,
                   $color: theme.typography.text.color,
                   $leading: 1.35,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                     t2("Overage fee"),
                     ": ",
                     formatCurrency(price, currency),
-                    feature && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+                    feature && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
                       "/",
                       getFeatureName(feature, 1),
-                      feature.featureType === "trait" && planPeriod && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                      feature.featureType === "trait" && planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                         "/",
                         shortenPeriod(planPeriod)
                       ] })
@@ -18944,7 +19101,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                   ] })
                 }
               ),
-              isOverage && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              isOverage && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -18958,7 +19115,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                     }),
                     " \xB7 ",
                     formatCurrency(price * (usage - softLimit), currency),
-                    feature?.featureType === "trait" && typeof planPeriod === "string" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
+                    feature?.featureType === "trait" && typeof planPeriod === "string" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
                       "/",
                       shortenPeriod(planPeriod)
                     ] })
@@ -18968,8 +19125,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             IconRound,
             {
               name: feature.icon,
@@ -18980,8 +19137,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
               Flex,
               {
                 ref: (el) => {
@@ -18992,8 +19149,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       Text,
                       {
                         as: Box,
@@ -19002,14 +19159,14 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                         $weight: theme.typography[props.header.fontStyle].fontWeight,
                         $color: theme.typography[props.header.fontStyle].color,
                         $leading: 1.35,
-                        children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                        children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                           formatNumber(usage),
                           " ",
                           getFeatureName(feature, usage)
                         ] }) : feature.name
                       }
                     ),
-                    props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       Text,
                       {
                         as: Box,
@@ -19021,14 +19178,14 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                       }
                     )
                   ] }),
-                  (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                  (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                     Box,
                     {
                       $flexBasis: "min-content",
                       $flexGrow: 1,
                       $textAlign: shouldWrapChildren ? "left" : "right",
                       children: [
-                        props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           Text,
                           {
                             as: Box,
@@ -19037,22 +19194,22 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                             $weight: theme.typography[props.usage.fontStyle].fontWeight,
                             $color: theme.typography[props.usage.fontStyle].color,
                             $leading: 1.35,
-                            children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                            children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                               formatNumber(allocation),
                               " ",
                               getFeatureName(feature, allocation)
-                            ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                            ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                               formatNumber(usage),
                               " ",
                               getFeatureName(feature, usage),
-                              priceBehavior === "overage" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                              priceBehavior === "overage" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                                 " ",
                                 t2("used")
                               ] })
                             ] })
                           }
                         ),
-                        props.allocation.isVisible && priceBehavior !== "overage" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        props.allocation.isVisible && priceBehavior !== "overage" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           Text,
                           {
                             $font: theme.typography[props.allocation.fontStyle].fontFamily,
@@ -19077,12 +19234,12 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                 ]
               }
             ),
-            props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $gap: "2rem", children: [
-              typeof allocation === "number" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $gap: "2rem", children: [
+              typeof allocation === "number" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 Tooltip,
                 {
                   trigger: progressBar,
-                  content: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  content: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
@@ -19099,7 +19256,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                   $flexGrow: 1
                 }
               ) : progressBar,
-              priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 EmbedButton,
                 {
                   onClick: () => {
@@ -19123,11 +19280,11 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-var import_react35 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
   iconTitle,
@@ -19136,17 +19293,17 @@ var PaymentElement2 = ({
   paymentLast4
 }) => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
-      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
+      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -19235,9 +19392,9 @@ var PaymentMethodElement = ({
   if (size === "md") {
     sizeFactor = 1;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Text,
         {
           $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19247,7 +19404,7 @@ var PaymentMethodElement = ({
           children: t2("Payment Method")
         }
       ),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Text,
         {
           $font: theme.typography.text.fontFamily,
@@ -19258,7 +19415,7 @@ var PaymentMethodElement = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -19267,15 +19424,15 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.2}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             PaymentElement2,
             {
               ...getPaymentMethodData(paymentMethod),
               ...getIconStyles({ size, theme })
             }
           ),
-          !paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          !paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Text,
             {
               onClick: onEdit,
@@ -19301,7 +19458,7 @@ var PaymentListElement = ({
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
   const iconStyles = getIconStyles({ size: "lg", theme });
-  const expirationDate = (0, import_react35.useMemo)(() => {
+  const expirationDate = (0, import_react36.useMemo)(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth && !cardExpYear) {
       return "";
@@ -19315,7 +19472,7 @@ var PaymentListElement = ({
     }
     return `${cardExpMonth}/${formatedYear}`;
   }, [paymentMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     Flex,
     {
       $flexDirection: "row",
@@ -19329,8 +19486,8 @@ var PaymentListElement = ({
       $font: theme.typography.text.fontFamily,
       $color: theme.typography.text.color,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $paddingLeft: "0.5rem", $paddingRight: "0.5rem", children: iconName && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $paddingLeft: "0.5rem", $paddingRight: "0.5rem", children: iconName && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           Text,
           {
             $font: theme.typography.text.fontFamily,
@@ -19344,12 +19501,12 @@ var PaymentListElement = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Box,
           {
             $flexGrow: "1",
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19361,7 +19518,7 @@ var PaymentListElement = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Text,
           {
             onClick: () => {
@@ -19374,7 +19531,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Box,
           {
             $cursor: "pointer",
@@ -19382,7 +19539,7 @@ var PaymentListElement = ({
             onClick: () => {
               handleDelete(paymentMethod.id);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Icon2,
               {
                 name: "close",
@@ -19400,8 +19557,8 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var resolveDesignProps4 = (props) => {
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var resolveDesignProps5 = (props) => {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -19413,13 +19570,13 @@ var resolveDesignProps4 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react36.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
-  const props = resolveDesignProps4(rest);
+var PaymentMethod = (0, import_react37.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+  const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const paymentMethod = (0, import_react36.useMemo)(() => {
+  const paymentMethod = (0, import_react37.useMemo)(() => {
     return data.subscription?.paymentMethod;
   }, [data.subscription?.paymentMethod]);
-  const monthsToExpiration = (0, import_react36.useMemo)(() => {
+  const monthsToExpiration = (0, import_react37.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -19432,7 +19589,7 @@ var PaymentMethod = (0, import_react36.forwardRef)(({ children, className, porta
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -19446,9 +19603,9 @@ PaymentMethod.displayName = "PaymentMethod";
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
-var import_react37 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var resolveDesignProps5 = () => {
+var import_react38 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var resolveDesignProps6 = () => {
   return {
     header: {
       isVisible: true,
@@ -19463,24 +19620,24 @@ var resolveDesignProps5 = () => {
 var PaymentMethodDetails = ({
   setPaymentMethodId
 }) => {
-  const props = resolveDesignProps5();
+  const props = resolveDesignProps6();
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, setData } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react37.useState)(false);
-  const [error, setError] = (0, import_react37.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react37.useState)(false);
-  const [stripe, setStripe] = (0, import_react37.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react37.useState)();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react37.useState)(false);
-  const [paymentMethod, setPaymentMethod] = (0, import_react37.useState)(void 0);
-  (0, import_react37.useEffect)(() => {
+  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)(void 0);
+  (0, import_react38.useEffect)(() => {
     if (data.subscription?.paymentMethod) {
       setPaymentMethod(data.subscription.paymentMethod);
     }
   }, [data.subscription?.paymentMethod]);
-  const monthsToExpiration = (0, import_react37.useMemo)(() => {
+  const monthsToExpiration = (0, import_react38.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -19493,12 +19650,12 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  const createSetupIntent = (0, import_react37.useCallback)(async () => {
+  const createSetupIntent = (0, import_react38.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -19517,10 +19674,10 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const dropDownDifferentPaymentMethods = (0, import_react37.useCallback)(() => {
+  const dropDownDifferentPaymentMethods = (0, import_react38.useCallback)(() => {
     setShowDifferentPaymentMethods((state) => !state);
   }, []);
-  const updatePaymentMethod = (0, import_react37.useCallback)(
+  const updatePaymentMethod = (0, import_react38.useCallback)(
     async (externalId) => {
       if (!api || !externalId) {
         return;
@@ -19553,7 +19710,7 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, setPaymentMethodId, t2]
   );
-  const deletePaymentMethod = (0, import_react37.useCallback)(
+  const deletePaymentMethod = (0, import_react38.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -19580,8 +19737,8 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $position: "relative", children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Flex,
       {
         $position: "absolute",
@@ -19593,10 +19750,10 @@ var PaymentMethodDetails = ({
         $zIndex: 1,
         $backgroundColor: "black",
         $opacity: 0.5,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { $color: theme.primary, $size: "2xl" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: theme.primary, $size: "2xl" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Flex,
       {
         $flexDirection: "column",
@@ -19606,7 +19763,7 @@ var PaymentMethodDetails = ({
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
         $overflow: "auto",
         children: [
-          showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_react_stripe_js2.Elements,
             {
               stripe,
@@ -19635,7 +19792,7 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 PaymentForm,
                 {
                   onConfirm: async (paymentMethodId) => {
@@ -19646,8 +19803,8 @@ var PaymentMethodDetails = ({
                 }
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               PaymentMethodElement,
               {
                 size: "lg",
@@ -19656,7 +19813,7 @@ var PaymentMethodDetails = ({
                 ...props
               }
             ),
-            (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               Text,
               {
                 onClick: dropDownDifferentPaymentMethods,
@@ -19666,7 +19823,7 @@ var PaymentMethodDetails = ({
                 $color: theme.typography.link.color,
                 children: [
                   t2("Choose different payment method"),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Icon2,
                     {
                       name: "chevron-down",
@@ -19682,9 +19839,9 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
               (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               PaymentListElement,
               {
                 paymentMethod: paymentMethod2,
@@ -19693,9 +19850,9 @@ var PaymentMethodDetails = ({
               },
               paymentMethod2.id
             )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EmbedButton, { onClick: createSetupIntent, size: "lg", children: t2("Add new payment method") })
+            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EmbedButton, { onClick: createSetupIntent, size: "lg", children: t2("Add new payment method") })
           ] }),
-          !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -19712,9 +19869,9 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react38 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var resolveDesignProps6 = (props) => {
+var import_react39 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var resolveDesignProps7 = (props) => {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -19742,8 +19899,8 @@ var resolveDesignProps6 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal, ...rest }, ref) => {
-  const props = resolveDesignProps6(rest);
+var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps7(rest);
   const theme = nt();
   const { t: t2 } = useTranslation();
   const { data, setLayout, setSelected } = useEmbed();
@@ -19768,7 +19925,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const trialEndDays = (0, import_react38.useMemo)(() => {
+  const trialEndDays = (0, import_react39.useMemo)(() => {
     const trialEnd = billingSubscription?.trialEnd;
     const trialEndDate = trialEnd ? new Date(trialEnd * 1e3) : /* @__PURE__ */ new Date();
     const todayDate = /* @__PURE__ */ new Date();
@@ -19781,8 +19938,8 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
   const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       Notice,
       {
         as: Flex,
@@ -19792,7 +19949,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Text,
             {
               as: "h3",
@@ -19803,7 +19960,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               children: t2("Trial ends in", { days: trialEndDays.toString() })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Text,
             {
               as: "p",
@@ -19820,7 +19977,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
           )
         ]
       }
-    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       Notice,
       {
         as: Flex,
@@ -19830,7 +19987,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Text,
             {
               as: "h3",
@@ -19841,7 +19998,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               children: t2("Subscription canceled")
             }
           ),
-          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Text,
             {
               as: "p",
@@ -19862,7 +20019,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       Element,
       {
         as: Flex,
@@ -19871,7 +20028,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
@@ -19879,8 +20036,8 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     Text,
                     {
                       as: Box,
@@ -19892,7 +20049,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                       children: currentPlan.name
                     }
                   ),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     Text,
                     {
                       as: Box,
@@ -19904,8 +20061,8 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                     }
                   )
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     Text,
                     {
                       $font: headerPriceFontStyle.fontFamily,
@@ -19918,14 +20075,14 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     Text,
                     {
                       $font: theme.typography[props.header.price.fontStyle].fontFamily,
                       $size: theme.typography[props.header.price.fontStyle].fontSize,
                       $weight: theme.typography[props.header.price.fontStyle].fontWeight,
                       $color: theme.typography[props.header.price.fontStyle].color,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
                         "/",
                         shortenPeriod(currentPlan.planPeriod)
                       ] })
@@ -19935,8 +20092,8 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               ]
             }
           ),
-          props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19947,7 +20104,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                 children: t2("Add-ons")
               }
             ),
-            addOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            addOns.map((addOn, addOnIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               Flex,
               {
                 $justifyContent: "space-between",
@@ -19955,7 +20112,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     Text,
                     {
                       $font: theme.typography[props.addOns.fontStyle].fontFamily,
@@ -19965,7 +20122,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                       children: addOn.name
                     }
                   ),
-                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
@@ -19974,7 +20131,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                       $color: theme.typography.text.color,
                       children: [
                         formatCurrency(addOn.planPrice, subscriptionCurrency),
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
                           "/",
                           shortenPeriod(addOn.planPeriod)
                         ] })
@@ -19986,8 +20143,8 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               addOnIndex
             ))
           ] }),
-          usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -20005,7 +20162,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                 const amount = overageAmount || entitlement.allocation || 0;
                 if (entitlement.feature?.name) {
                   acc.push(
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                       Flex,
                       {
                         $justifyContent: "space-between",
@@ -20013,7 +20170,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                         $flexWrap: "wrap",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                             Text,
                             {
                               $font: theme.typography[props.addOns.fontStyle].fontFamily,
@@ -20021,20 +20178,20 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                               $weight: theme.typography[props.addOns.fontStyle].fontWeight,
                               $color: theme.typography[props.addOns.fontStyle].color,
                               children: [
-                                entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                                entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                   limit,
                                   " ",
                                   getFeatureName(entitlement.feature, limit)
                                 ] }) : entitlement.feature.name,
-                                entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                                entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                   "/",
                                   shortenPeriod(currentPlan.planPeriod)
                                 ] })
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                            entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                            entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -20043,7 +20200,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                 $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
                                 children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X over the limit", {
                                   amount: overageAmount
-                                }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                                }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                   t2("Overage fee"),
                                   ":",
                                   " ",
@@ -20051,17 +20208,17 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                     entitlement.price ?? 0,
                                     entitlement.currency
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
                                     "/",
                                     getFeatureName(entitlement.feature, 1),
-                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                                    entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                       "/",
                                       shortenPeriod(currentPlan.planPeriod)
                                     ] })
                                   ] })
                                 ] })
                               }
-                            ) : entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                            ) : entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -20073,7 +20230,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                     entitlement.price ?? 0,
                                     entitlement.currency
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
                                     "/",
                                     getFeatureName(entitlement.feature, 1),
                                     "/",
@@ -20082,7 +20239,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                 ]
                               }
                             ),
-                            amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                            amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -20094,7 +20251,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
                                     (entitlement.price ?? 0) * amount,
                                     entitlement.currency
                                   ),
-                                  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
+                                  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
                                     "/",
                                     currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
                                   ] })
@@ -20113,7 +20270,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               []
             )
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             EmbedButton,
             {
               type: "button",
@@ -20138,9 +20295,9 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react39 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var resolveDesignProps7 = (props) => {
+var import_react40 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
     showDiscount: props.showDiscount ?? true,
@@ -20179,18 +20336,18 @@ var resolveDesignProps7 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...rest }, ref) => {
-  const props = resolveDesignProps7(rest);
+var PricingTable = (0, import_react40.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_react39.useState)(
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react40.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react39.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react40.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -20217,7 +20374,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
       };
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     FussyChild,
     {
       ref,
@@ -20226,8 +20383,8 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
       $flexDirection: "column",
       $gap: "2rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
             Flex,
             {
               $flexDirection: "column",
@@ -20242,7 +20399,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   Text,
                   {
                     $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20252,7 +20409,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                   }
                 ),
-                props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   PeriodToggle,
                   {
                     options: periods,
@@ -20263,7 +20420,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Box,
             {
               $display: "grid",
@@ -20281,7 +20438,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                 );
                 const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
                 const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.plans.name.fontStyle];
-                return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                   Flex,
                   {
                     $position: "relative",
@@ -20294,7 +20451,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                     $outlineColor: isActivePlan ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -20305,7 +20462,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                           $borderStyle: "solid",
                           $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                               Text,
                               {
                                 $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20315,7 +20472,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 children: plan.name
                               }
                             ) }),
-                            props.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            props.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                               Text,
                               {
                                 $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -20325,8 +20482,8 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 children: plan.description
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Box, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                 Text,
                                 {
                                   $font: headerPriceFontStyle.fontFamily,
@@ -20336,7 +20493,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                   children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
                                 }
                               ),
-                              !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                              !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20350,7 +20507,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                               Flex,
                               {
                                 $position: "absolute",
@@ -20359,7 +20516,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
                                 $padding: "0.125rem 0.85rem",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                   Text,
                                   {
                                     $font: theme.typography.text.fontFamily,
@@ -20374,7 +20531,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -20383,8 +20540,8 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                           $gap: `${cardPadding}rem`,
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
-                            props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                              props.plans.showInclusionText && planIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
+                              props.plans.showInclusionText && planIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -20409,8 +20566,8 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                     return acc;
                                   }
                                   acc.push(
-                                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $gap: "1rem", children: [
-                                      props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $gap: "1rem", children: [
+                                      props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                         IconRound,
                                         {
                                           name: entitlement.feature.icon,
@@ -20421,14 +20578,14 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                           ]
                                         }
                                       ),
-                                      entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                                      entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                                         Flex,
                                         {
                                           $flexDirection: "column",
                                           $justifyContent: "center",
                                           $gap: "0.5rem",
                                           children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                               Text,
                                               {
                                                 $font: theme.typography.text.fontFamily,
@@ -20436,7 +20593,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                                 $weight: theme.typography.text.fontWeight,
                                                 $color: theme.typography.text.color,
                                                 $leading: 1.35,
-                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                   formatCurrency(
                                                     entitlementPrice,
                                                     entitlementCurrency
@@ -20448,18 +20605,18 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                                     entitlement.feature,
                                                     1
                                                   ),
-                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
                                                     selectedPeriod
                                                   ] })
-                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                   entitlement.valueType === "unlimited" && !entitlement.priceBehavior ? t2("Unlimited", {
                                                     item: getFeatureName(
                                                       entitlement.feature
                                                     )
-                                                  }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                  }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                     formatNumber(limit),
                                                     " ",
                                                     getFeatureName(
@@ -20467,7 +20624,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                                       limit
                                                     )
                                                   ] }),
-                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                  entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                     " ",
                                                     t2("per"),
                                                     " ",
@@ -20477,7 +20634,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                                       current_month: "month",
                                                       current_year: "year"
                                                     }[entitlement.metricPeriod]
-                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                  ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                     "/",
                                                     shortenPeriod(
                                                       selectedPeriod
@@ -20486,7 +20643,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                                 ] }) : entitlement.feature.name
                                               }
                                             ),
-                                            entitlement.priceBehavior === "overage" && typeof entitlementPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                                            entitlement.priceBehavior === "overage" && typeof entitlementPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                                               Text,
                                               {
                                                 $font: theme.typography.text.fontFamily,
@@ -20512,7 +20669,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                                     entitlement.feature,
                                                     1
                                                   ),
-                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                  entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                     "/",
                                                     shortenPeriod(selectedPeriod)
                                                   ] }),
@@ -20530,14 +20687,14 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 },
                                 []
                               ).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
-                              (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                              (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                                 Flex,
                                 {
                                   $alignItems: "center",
                                   $justifyContent: "start",
                                   $marginTop: "1rem",
                                   children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                       Icon2,
                                       {
                                         name: isExpanded ? "chevron-up" : "chevron-down",
@@ -20549,7 +20706,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                         }
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                       Text,
                                       {
                                         onClick: () => handleToggleShowAll(plan.id),
@@ -20566,7 +20723,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 }
                               )
                             ] }),
-                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                               Flex,
                               {
                                 $justifyContent: "center",
@@ -20574,7 +20731,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 $gap: "0.25rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                     Icon2,
                                     {
                                       name: "check-rounded",
@@ -20585,7 +20742,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                     Text,
                                     {
                                       $font: theme.typography.text.fontFamily,
@@ -20598,7 +20755,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                   )
                                 ]
                               }
-                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                               EmbedButton,
                               {
                                 type: "button",
@@ -20622,14 +20779,14 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                   ButtonLink,
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
                                     children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                                   }
-                                ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                   Tooltip,
                                   {
                                     trigger: t2("Over usage limit"),
@@ -20651,14 +20808,14 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 Text,
                 {
                   $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20670,7 +20827,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Box,
             {
               $display: "grid",
@@ -20681,7 +20838,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                 const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
                   selectedPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
                 ) || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                   Flex,
                   {
                     $position: "relative",
@@ -20695,8 +20852,8 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                     $outlineColor: isActiveAddOn ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                           Text,
                           {
                             $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20706,7 +20863,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                             children: addOn.name
                           }
                         ) }),
-                        props.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                        props.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                           Text,
                           {
                             $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -20716,8 +20873,8 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                             children: addOn.description
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Box, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20727,7 +20884,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                               children: formatCurrency(addOnPrice ?? 0, addOnCurrency)
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20741,7 +20898,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                           Flex,
                           {
                             $position: "absolute",
@@ -20750,7 +20907,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                             $backgroundColor: theme.primary,
                             $borderRadius: "9999px",
                             $padding: "0.125rem 0.85rem",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -20763,7 +20920,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -20771,7 +20928,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                           $gap: `${cardPadding}rem`,
                           $flexGrow: 1,
                           children: [
-                            props.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            props.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                               Flex,
                               {
                                 $flexDirection: "column",
@@ -20780,15 +20937,15 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 $flexGrow: 1,
                                 children: addOn.entitlements.map(
                                   (entitlement, entitlementIndex) => {
-                                    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                       Flex,
                                       {
                                         $flexWrap: "wrap",
                                         $justifyContent: "space-between",
                                         $alignItems: "center",
                                         $gap: "1rem",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $gap: "1rem", children: [
-                                          props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $gap: "1rem", children: [
+                                          props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                             IconRound,
                                             {
                                               name: entitlement.feature.icon,
@@ -20799,19 +20956,19 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                               ]
                                             }
                                           ),
-                                          entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                          entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                             Text,
                                             {
                                               $font: theme.typography.text.fontFamily,
                                               $size: theme.typography.text.fontSize,
                                               $weight: theme.typography.text.fontWeight,
                                               $color: theme.typography.text.color,
-                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                              children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                 entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                                   item: getFeatureName(
                                                     entitlement.feature
                                                   )
-                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                   formatNumber(
                                                     entitlement.valueNumeric
                                                   ),
@@ -20821,7 +20978,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                                     entitlement.valueNumeric
                                                   )
                                                 ] }),
-                                                entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                                entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                                   " ",
                                                   t2("per"),
                                                   " ",
@@ -20843,7 +21000,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
                                 )
                               }
                             ),
-                            props.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            props.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                               EmbedButton,
                               {
                                 type: "button",
@@ -20879,10 +21036,39 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
 });
 PricingTable.displayName = "PricingTable";
 
+// src/components/elements/text/Text.tsx
+var import_react41 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var resolveDesignProps9 = (props) => {
+  return {
+    text: {
+      fontStyle: props.text?.fontStyle ?? "text",
+      alignment: props.text?.alignment ?? "left",
+      textContent: props.text?.textContent ?? "Text"
+    }
+  };
+};
+var TextElement = (0, import_react41.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)(
+    Text,
+    {
+      $font: theme.typography[props.text.fontStyle].fontFamily,
+      $size: theme.typography[props.text.fontStyle].fontSize,
+      $weight: theme.typography[props.text.fontStyle].fontWeight,
+      $color: theme.typography[props.text.fontStyle].color,
+      $align: props.text.alignment,
+      children: props.text.textContent
+    }
+  ) });
+});
+TextElement.displayName = "Text";
+
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-var import_react40 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var resolveDesignProps8 = (props) => {
+var import_react42 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var resolveDesignProps10 = (props) => {
   return {
     button: {
       text: props.button?.text ?? "Unsubscribe",
@@ -20893,8 +21079,8 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var UnsubscribeButton = (0, import_react40.forwardRef)(({ children, className, ...rest }, ref) => {
-  const props = resolveDesignProps8(rest);
+var UnsubscribeButton = (0, import_react42.forwardRef)(({ children, className, ...rest }, ref) => {
+  const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
   const disabled = !data.subscription || data.subscription.status === "cancelled" || data.subscription.cancelAtPeriodEnd;
@@ -20912,7 +21098,7 @@ var UnsubscribeButton = (0, import_react40.forwardRef)(({ children, className, .
       variant: "text"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Element,
     {
       as: Flex,
@@ -20920,7 +21106,7 @@ var UnsubscribeButton = (0, import_react40.forwardRef)(({ children, className, .
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         EmbedButton,
         {
           $size: props.button.size,
@@ -20941,9 +21127,9 @@ var UnsubscribeButton = (0, import_react40.forwardRef)(({ children, className, .
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react41 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-function resolveDesignProps9(props) {
+var import_react43 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function resolveDesignProps11(props) {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -20961,13 +21147,13 @@ function resolveDesignProps9(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps9(rest);
+var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = (0, import_react41.useMemo)(() => {
+  const { upcomingInvoice, discounts } = (0, import_react43.useMemo)(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,
@@ -20994,7 +21180,7 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
   if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     Element,
     {
       as: Flex,
@@ -21003,7 +21189,7 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        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,
@@ -21017,8 +21203,8 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__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,
@@ -21032,7 +21218,7 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__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,
@@ -21044,8 +21230,8 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
             }
           ) })
         ] }),
-        discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        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,
             {
               $font: theme.typography.text.fontFamily,
@@ -21055,8 +21241,8 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Flex,
               {
                 $alignItems: "center",
@@ -21065,7 +21251,7 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
                 $borderStyle: "solid",
                 $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                 $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -21077,7 +21263,7 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -21096,10 +21282,10 @@ var UpcomingBill = (0, import_react41.forwardRef)(({ className, ...rest }, ref)
 UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/embed/ComponentTree.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react42 = require("react");
+var import_react44 = require("react");
 var components = {
   Root,
   Viewport,
@@ -21112,7 +21298,8 @@ var components = {
   PaymentMethod,
   Invoices,
   PricingTable,
-  UnsubscribeButton
+  UnsubscribeButton,
+  ButtonElement
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};
@@ -21132,7 +21319,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react42.createElement)(
+    return (0, import_react44.createElement)(
       component,
       {
         key: index,
@@ -21145,10 +21332,10 @@ function createRenderer(options) {
 }
 
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Loading = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     Flex,
     {
       $width: "100%",
@@ -21156,13 +21343,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     Flex,
     {
       $flexDirection: "column",
@@ -21173,7 +21360,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21184,7 +21371,7 @@ var Error2 = ({ message }) => {
             children: "Error"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21201,23 +21388,23 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = (0, import_react43.useState)(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loading, {}));
-  (0, import_react43.useEffect)(() => {
+  const [children, setChildren] = (0, import_react45.useState)(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loading, {}));
+  (0, import_react45.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     console.error(error);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Error2, { message: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Error2, { message: error.message });
   }
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loading, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loading, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children });
 };
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var SchematicEmbed = ({
   id,
   accessToken,
@@ -21225,19 +21412,19 @@ var SchematicEmbed = ({
   debug
 }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     EmbedProvider,
     {
       id,
       accessToken,
       apiConfig,
       debug,
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ComponentTree, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ComponentTree, {})
     }
   );
 };