npm - @schematichq/schematic-components - Versions diffs - 0.7.0 → 0.7.3 - Mend

@schematichq/schematic-components 0.7.0 → 0.7.3

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

Files changed (4) hide show

package/dist/schematic-components.cjs.js +1195 -990
package/dist/schematic-components.d.ts +328 -914
package/dist/schematic-components.esm.js +996 -791
package/package.json +4 -4

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

@@ -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,
@@ -2275,6 +2276,7 @@ __export(index_exports, {
   MeteredFeatures: () => MeteredFeatures,
   Modal: () => Modal,
   ModalHeader: () => ModalHeader,
+  Notice: () => Notice,
   PaymentMethod: () => PaymentMethod,
   PaymentMethodDetails: () => PaymentMethodDetails,
   PlanManager: () => PlanManager,
@@ -2284,6 +2286,7 @@ __export(index_exports, {
   SchematicEmbed: () => SchematicEmbed,
   StyledCard: () => StyledCard,
   Text: () => Text,
+  TextElement: () => TextElement,
   TextPropNames: () => TextPropNames,
   Tooltip: () => Tooltip,
   UnsubscribeButton: () => UnsubscribeButton,
@@ -2302,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() {
@@ -2617,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
@@ -3298,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 {
@@ -3636,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) {
@@ -3747,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)) {
@@ -3767,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();
@@ -3792,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;
@@ -3804,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) {
@@ -3883,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);
       };
@@ -3899,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];
@@ -3924,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;
@@ -3949,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");
@@ -3962,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(
@@ -3983,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),
@@ -4001,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;
@@ -4024,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 {};
@@ -4095,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);
@@ -4117,7 +3851,7 @@ var _entityMap = {
   "/": "&#x2F;"
 };
 var escape = (data) => {
-  if (isString2(data)) {
+  if (isString(data)) {
     return data.replace(/[&<>"'\/]/g, (s2) => _entityMap[s2]);
   }
   return data;
@@ -4246,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) {
@@ -4347,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);
@@ -4360,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) {
@@ -4384,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
       });
     }
@@ -4455,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] : {};
@@ -4492,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);
@@ -4501,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) {
@@ -4557,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, {
@@ -4571,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!");
@@ -4617,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 {
@@ -4711,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
@@ -4742,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: {
@@ -4761,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);
@@ -4769,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;
@@ -4843,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;
@@ -4896,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];
@@ -4946,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];
@@ -4967,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) => {
@@ -5067,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);
   }
@@ -5177,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) {
@@ -5187,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);
@@ -5241,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;
@@ -5252,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 = "";
@@ -5563,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();
@@ -5668,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) => {
@@ -5693,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"]);
   }
@@ -5744,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];
@@ -5874,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();
@@ -5990,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);
@@ -6042,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;
@@ -6099,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);
     });
@@ -6111,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) {
@@ -6215,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());
@@ -10314,90 +10048,362 @@ Inflate$1.prototype.push = function(data, flush_mode) {
         status = Z_NEED_DICT;
       }
     }
-    while (strm.avail_in > 0 && status === Z_STREAM_END && strm.state.wrap > 0 && data[strm.next_in] !== 0) {
-      inflate_1$2.inflateReset(strm);
-      status = inflate_1$2.inflate(strm, _flush_mode);
-    }
-    switch (status) {
-      case Z_STREAM_ERROR:
-      case Z_DATA_ERROR:
-      case Z_NEED_DICT:
-      case Z_MEM_ERROR:
-        this.onEnd(status);
-        this.ended = true;
-        return false;
-    }
-    last_avail_out = strm.avail_out;
-    if (strm.next_out) {
-      if (strm.avail_out === 0 || status === Z_STREAM_END) {
-        if (this.options.to === "string") {
-          let next_out_utf8 = strings.utf8border(strm.output, strm.next_out);
-          let tail = strm.next_out - next_out_utf8;
-          let utf8str = strings.buf2string(strm.output, next_out_utf8);
-          strm.next_out = tail;
-          strm.avail_out = chunkSize - tail;
-          if (tail) strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
-          this.onData(utf8str);
-        } else {
-          this.onData(strm.output.length === strm.next_out ? strm.output : strm.output.subarray(0, strm.next_out));
-        }
-      }
+    while (strm.avail_in > 0 && status === Z_STREAM_END && strm.state.wrap > 0 && data[strm.next_in] !== 0) {
+      inflate_1$2.inflateReset(strm);
+      status = inflate_1$2.inflate(strm, _flush_mode);
+    }
+    switch (status) {
+      case Z_STREAM_ERROR:
+      case Z_DATA_ERROR:
+      case Z_NEED_DICT:
+      case Z_MEM_ERROR:
+        this.onEnd(status);
+        this.ended = true;
+        return false;
+    }
+    last_avail_out = strm.avail_out;
+    if (strm.next_out) {
+      if (strm.avail_out === 0 || status === Z_STREAM_END) {
+        if (this.options.to === "string") {
+          let next_out_utf8 = strings.utf8border(strm.output, strm.next_out);
+          let tail = strm.next_out - next_out_utf8;
+          let utf8str = strings.buf2string(strm.output, next_out_utf8);
+          strm.next_out = tail;
+          strm.avail_out = chunkSize - tail;
+          if (tail) strm.output.set(strm.output.subarray(next_out_utf8, next_out_utf8 + tail), 0);
+          this.onData(utf8str);
+        } else {
+          this.onData(strm.output.length === strm.next_out ? strm.output : strm.output.subarray(0, strm.next_out));
+        }
+      }
+    }
+    if (status === Z_OK && last_avail_out === 0) continue;
+    if (status === Z_STREAM_END) {
+      status = inflate_1$2.inflateEnd(this.strm);
+      this.onEnd(status);
+      this.ended = true;
+      return true;
+    }
+    if (strm.avail_in === 0) break;
+  }
+  return true;
+};
+Inflate$1.prototype.onData = function(chunk) {
+  this.chunks.push(chunk);
+};
+Inflate$1.prototype.onEnd = function(status) {
+  if (status === Z_OK) {
+    if (this.options.to === "string") {
+      this.result = this.chunks.join("");
+    } else {
+      this.result = common.flattenChunks(this.chunks);
+    }
+  }
+  this.chunks = [];
+  this.err = status;
+  this.msg = this.strm.msg;
+};
+function inflate$1(input, options) {
+  const inflator = new Inflate$1(options);
+  inflator.push(input);
+  if (inflator.err) throw inflator.msg || messages[inflator.err];
+  return inflator.result;
+}
+function inflateRaw$1(input, options) {
+  options = options || {};
+  options.raw = true;
+  return inflate$1(input, options);
+}
+var Inflate_1$1 = Inflate$1;
+var inflate_2 = inflate$1;
+var inflateRaw_1$1 = inflateRaw$1;
+var ungzip$1 = inflate$1;
+var constants = constants$2;
+var inflate_1$1 = {
+  Inflate: Inflate_1$1,
+  inflate: inflate_2,
+  inflateRaw: inflateRaw_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;
+// 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);
     }
-    if (status === Z_OK && last_avail_out === 0) continue;
-    if (status === Z_STREAM_END) {
-      status = inflate_1$2.inflateEnd(this.strm);
-      this.onEnd(status);
-      this.ended = true;
-      return true;
+    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);
     }
-    if (strm.avail_in === 0) break;
-  }
-  return true;
-};
-Inflate$1.prototype.onData = function(chunk) {
-  this.chunks.push(chunk);
-};
-Inflate$1.prototype.onEnd = function(status) {
-  if (status === Z_OK) {
-    if (this.options.to === "string") {
-      this.result = this.chunks.join("");
+  }, [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 {
-      this.result = common.flattenChunks(this.chunks);
+      loadNamespaces2(i18n, namespaces, () => resolve());
     }
-  }
-  this.chunks = [];
-  this.err = status;
-  this.msg = this.strm.msg;
-};
-function inflate$1(input, options) {
-  const inflator = new Inflate$1(options);
-  inflator.push(input);
-  if (inflator.err) throw inflator.msg || messages[inflator.err];
-  return inflator.result;
-}
-function inflateRaw$1(input, options) {
-  options = options || {};
-  options.raw = true;
-  return inflate$1(input, options);
-}
-var Inflate_1$1 = Inflate$1;
-var inflate_2 = inflate$1;
-var inflateRaw_1$1 = inflateRaw$1;
-var ungzip$1 = inflate$1;
-var constants = constants$2;
-var inflate_1$1 = {
-  Inflate: Inflate_1$1,
-  inflate: inflate_2,
-  inflateRaw: inflateRaw_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;
-// 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 = [];
@@ -10722,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"]
   };
 }
@@ -10735,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"],
@@ -10745,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"],
@@ -10789,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"],
@@ -10801,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"]),
@@ -10808,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);
@@ -11478,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"]),
@@ -11826,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);
@@ -11837,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
+    )
   };
 }
@@ -13111,7 +13189,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.0";
+      headers["X-Schematic-Components-Version"] = "0.7.3";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13450,16 +13528,10 @@ 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]) {
-    if (key.startsWith("$") && ![
-      "$viewport",
-      ...Object.values(TextPropNames).filter((prop) => prop !== "$color")
-    ].includes(key)) {
+    if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
         // keys will always be CSS properties
         attr(camelToHyphen(key.slice(1)), value)
@@ -13582,6 +13654,7 @@ var Button2 = (0, import_react16.forwardRef)(
     children,
     ...props
   }, ref) => {
+    const theme = nt();
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       Button,
       {
@@ -13592,7 +13665,7 @@ var Button2 = (0, import_react16.forwardRef)(
         disabled,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { $size: "sm", $isLoading: isLoading }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { $color: theme.primary, $size: "sm", $isLoading: isLoading }),
           children
         ]
       }
@@ -13669,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]);
@@ -13816,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) {
@@ -14100,7 +14193,7 @@ var Loader = dt.div`
   }
   return lt`
       border-color: ${color};
-      border-top-color: ${colorFn(color, 42.5)};
+      border-top-color: ${colorFn(color, 0.425)};
     `;
 }}
@@ -14280,8 +14373,11 @@ var ModalHeader = ({
 };
 // src/components/ui/progress-bar/styles.ts
-var Container3 = dt(Flex)`
+var Container3 = dt.div`
   position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 `;
 // src/components/ui/progress-bar/ProgressBar.tsx
@@ -14311,59 +14407,51 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    Container3,
-    {
-      $alignItems: "center",
-      $gap: `${16 / TEXT_BASE_SIZE}rem`,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Container3, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Flex,
+      {
+        $position: "relative",
+        $alignItems: "center",
+        $width: `${barWidth}`,
+        $maxWidth: "100%",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Flex,
           {
             $position: "relative",
-            $alignItems: "center",
-            $width: `${barWidth}`,
-            $maxWidth: "100%",
+            $overflow: "hidden",
+            $width: "100%",
+            $height: `${8 / TEXT_BASE_SIZE}rem`,
+            $backgroundColor: bgColor,
+            $borderRadius: "9999px",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              Flex,
+              Box,
               {
-                $position: "relative",
-                $overflow: "hidden",
-                $width: "100%",
-                $height: `${8 / TEXT_BASE_SIZE}rem`,
-                $backgroundColor: bgColor,
-                $borderRadius: "9999px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  Box,
-                  {
-                    $width: `${Math.min(progress, 100)}%`,
-                    $height: "100%",
-                    $backgroundColor: barColorMap[color],
-                    $borderRadius: "9999px"
-                  }
-                )
+                $width: `${Math.min(progress, 100)}%`,
+                $height: "100%",
+                $backgroundColor: barColorMap[color],
+                $borderRadius: "9999px"
               }
             )
           }
-        ),
-        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          Text,
-          {
-            $font: theme.typography.text.fontFamily,
-            $size: 14,
-            $weight: 500,
-            $color: theme.typography.text.color,
-            children: [
-              value,
-              "/",
-              total
-            ]
-          }
         )
-      ]
-    }
-  );
+      }
+    ),
+    total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      Text,
+      {
+        $font: theme.typography.text.fontFamily,
+        $size: 14,
+        $weight: 500,
+        $color: theme.typography.text.color,
+        children: [
+          value,
+          "/",
+          total
+        ]
+      }
+    )
+  ] });
 };
 // src/components/ui/text/styles.ts
@@ -14376,8 +14464,7 @@ var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
   TextPropNames2["Leading"] = "$leading";
   return TextPropNames2;
 })(TextPropNames || {});
-var Text = dt(Box).attrs(({ as = "span", onClick }) => ({
-  as,
+var Text = dt.span.attrs(({ onClick }) => ({
   ...onClick && { tabIndex: 0 }
 }))`
   ${({ $font }) => $font && lt`
@@ -14413,7 +14500,7 @@ var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 // src/components/ui/tooltip/styles.ts
-var Trigger = dt(Box)``;
+var Trigger = dt.div``;
 var coords = (position2) => {
   let x2 = 0;
   let y2 = 0;
@@ -14480,7 +14567,7 @@ var grow = (translate) => {
     }
   `;
 };
-var Content = dt(Box).withConfig({
+var Content = dt.div.withConfig({
   shouldForwardProp: (prop) => !["x", "y", "position", "zIndex"].includes(prop)
 })(({ x: x2, y: y2, position: position2, zIndex }) => {
   const translate = coords(position2);
@@ -14597,6 +14684,7 @@ var Tooltip = ({
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
 var FussyChild = dt(Element)``;
+var Notice = dt(Box)``;
 var cardBoxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
 var StyledCard = dt.div(({ theme }) => {
   const { l: l2 } = hexToHSL(theme.card.background);
@@ -14624,6 +14712,11 @@ var StyledCard = dt.div(({ theme }) => {
             `}
       }
     }
+    ${Notice}:first-child {
+      border-top-left-radius: ${borderRadius};
+      border-top-right-radius: ${borderRadius};
+    }
   `;
 });
@@ -14678,11 +14771,12 @@ Column.displayName = "Column";
 var import_react22 = require("react");
 // src/components/layout/root/styles.ts
-var Container2 = dt(Box)`
+var Container2 = dt.div`
   all: initial;
   box-sizing: border-box;
   display: block;
   font-size: ${TEXT_BASE_SIZE}px;
+  line-height: 1.35;
   width: 100%;
   height: 100%;
@@ -14953,29 +15047,36 @@ var Sidebar = ({
   const isLightBackground = useIsLightBackground();
   const currentPlan = data.company?.plan;
   const currentAddOns = data.company?.addOns || [];
-  const currentUsageBasedEntitlements = data.activeUsageBasedEntitlements.reduce(
-    (acc, usageData) => {
-      const featureUsage = data.featureUsage?.features.find(
-        (usage2) => usage2.feature?.id === usageData.featureId
-      );
-      const allocation = featureUsage?.allocation || 0;
-      const usage = featureUsage?.usage || 0;
-      acc.push({
-        usageData,
-        allocation,
-        quantity: allocation ?? usage,
-        usage
-      });
-      return acc;
-    },
-    []
-  );
-  const payInAdvanceEntitlements = usageBasedEntitlements.filter(
-    ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
-  );
-  const payAsYouGoEntitlements = usageBasedEntitlements.filter(
-    ({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
-  );
+  const currentUsageBasedEntitlements = (0, import_react23.useMemo)(() => {
+    return (data.featureUsage?.features || []).reduce(
+      (acc, entitlement) => {
+        if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
+          const allocation = entitlement.allocation || 0;
+          const usage = entitlement.usage || 0;
+          acc.push({
+            ...entitlement,
+            allocation,
+            usage,
+            quantity: allocation ?? usage
+          });
+        }
+        return acc;
+      },
+      []
+    );
+  }, [data.featureUsage?.features, planPeriod]);
+  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = (0, import_react23.useMemo)(() => {
+    const payAsYouGoEntitlements2 = [];
+    const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
+      (entitlement) => {
+        if (entitlement.priceBehavior === "pay_as_you_go") {
+          payAsYouGoEntitlements2.push(entitlement);
+        }
+        return entitlement.priceBehavior === "pay_in_advance";
+      }
+    );
+    return { payAsYouGoEntitlements: payAsYouGoEntitlements2, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
+  }, [usageBasedEntitlements]);
   const subscriptionPrice = (0, import_react23.useMemo)(() => {
     let planPrice;
     let currency;
@@ -14992,15 +15093,17 @@ var Sidebar = ({
     if (planPrice) {
       total += planPrice;
     }
-    const addOnCost = addOns.reduce(
-      (sum, addOn) => sum + (getBillingPrice(
-        planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
-      )?.price ?? 0),
-      0
-    );
+    const addOnCost = addOns.reduce((sum, addOn) => {
+      if (addOn.isSelected) {
+        sum += getBillingPrice(
+          planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
+        )?.price ?? 0;
+      }
+      return sum;
+    }, 0);
     total += addOnCost;
     const payInAdvanceCost = payInAdvanceEntitlements.reduce(
-      (sum, { entitlement, quantity }) => sum + quantity * (getBillingPrice(
+      (sum, entitlement) => sum + entitlement.quantity * (getBillingPrice(
         planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
       )?.price ?? 0),
       0
@@ -15050,8 +15153,8 @@ var Sidebar = ({
             return acc;
           }, []),
           payInAdvance: payInAdvanceEntitlements.reduce(
-            (acc, { entitlement, quantity }) => {
-              const priceId2 = (planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
+            (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+              const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
               if (priceId2) {
                 acc.push({
                   priceId: priceId2,
@@ -15119,48 +15222,62 @@ var Sidebar = ({
     ({ quantity, usage }) => quantity >= usage
   )) && !isLoading;
   const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
-  const changedUsageBasedEntitlements = [];
-  const addedUsageBasedEntitlements = usageBasedEntitlements.reduce(
-    (acc, selected) => {
-      const changed = currentUsageBasedEntitlements.find(
-        (current) => current.usageData.featureId === selected.entitlement.featureId && current.quantity !== selected.quantity
-      );
-      if (changed) {
-        changedUsageBasedEntitlements.push({
-          entitlement: selected.entitlement,
-          previous: changed,
-          next: {
-            allocation: selected.allocation,
-            quantity: selected.quantity,
-            usage: selected.usage
-          }
-        });
-      } else {
-        acc.push(selected);
-      }
-      return acc;
-    },
-    []
-  );
-  const removedUsageBasedEntitlements = currentUsageBasedEntitlements.reduce(
-    (acc, current) => {
-      const match2 = usageBasedEntitlements.every(
-        ({ entitlement }) => entitlement.featureId !== current.usageData.featureId
-      ) && data.featureUsage?.features.find(
-        (usage) => usage.feature?.id === current.usageData.featureId
-      );
-      if (match2) {
-        acc.push({
-          usage: match2,
-          allocation: current.allocation,
-          quantity: current.quantity
-        });
-      }
-      return acc;
-    },
-    []
-  );
-  const willUsageBasedEntitlementsChange = changedUsageBasedEntitlements.length > 0 || addedUsageBasedEntitlements.length > 0 || removedUsageBasedEntitlements.length > 0;
+  const {
+    changedUsageBasedEntitlements,
+    addedUsageBasedEntitlements,
+    removedUsageBasedEntitlements,
+    willUsageBasedEntitlementsChange
+  } = (0, import_react23.useMemo)(() => {
+    const changedUsageBasedEntitlements2 = [];
+    const addedUsageBasedEntitlements2 = selectedPlan ? usageBasedEntitlements.reduce(
+      (acc, selected) => {
+        const changed = currentUsageBasedEntitlements.find(
+          (current) => current.entitlementId === selected.id && current.quantity !== selected.quantity
+        );
+        if (changed) {
+          changedUsageBasedEntitlements2.push({
+            previous: changed,
+            next: selected
+          });
+        } else {
+          acc.push(selected);
+        }
+        return acc;
+      },
+      []
+    ) : [];
+    const removedUsageBasedEntitlements2 = selectedPlan ? currentUsageBasedEntitlements.reduce(
+      (acc, current) => {
+        const match2 = usageBasedEntitlements.every(
+          (entitlement) => entitlement.id !== current.entitlementId
+        ) && data.featureUsage?.features.find(
+          (usage) => usage.entitlementId === current.entitlementId
+        );
+        if (match2) {
+          acc.push({
+            ...match2,
+            allocation: current.allocation,
+            usage: current.usage,
+            quantity: current.quantity
+          });
+        }
+        return acc;
+      },
+      []
+    ) : [];
+    const willUsageBasedEntitlementsChange2 = changedUsageBasedEntitlements2.length > 0 || addedUsageBasedEntitlements2.length > 0 || removedUsageBasedEntitlements2.length > 0;
+    return {
+      changedUsageBasedEntitlements: changedUsageBasedEntitlements2,
+      addedUsageBasedEntitlements: addedUsageBasedEntitlements2,
+      removedUsageBasedEntitlements: removedUsageBasedEntitlements2,
+      willUsageBasedEntitlementsChange: willUsageBasedEntitlementsChange2
+    };
+  }, [
+    selectedPlan,
+    data.featureUsage?.features,
+    currentUsageBasedEntitlements,
+    usageBasedEntitlements
+  ]);
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id)
   );
@@ -15364,13 +15481,13 @@ var Sidebar = ({
                   }
                 ) }),
                 removedUsageBasedEntitlements.reduce(
-                  (acc, { allocation, quantity, usage }, index) => {
-                    if (typeof allocation === "number" && usage.feature?.name) {
+                  (acc, entitlement, index) => {
+                    if (typeof entitlement.allocation === "number" && entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
                         currency: entitlementCurrency
                       } = getBillingPrice(
-                        planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
+                        planPeriod === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice
                       ) || {};
                       acc.push(
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -15390,11 +15507,14 @@ var Sidebar = ({
                                   $size: theme.typography.heading4.fontSize,
                                   $weight: theme.typography.heading4.fontWeight,
                                   $color: theme.typography.heading4.color,
-                                  children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                    quantity,
+                                  children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.quantity,
                                     " ",
-                                    getFeatureName(usage.feature, quantity)
-                                  ] }) : usage.feature.name
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      entitlement.quantity
+                                    )
+                                  ] }) : entitlement.feature.name
                                 }
                               ) }),
                               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -15405,9 +15525,9 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    usage.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
-                                        (entitlementPrice ?? 0) * quantity,
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
@@ -15415,14 +15535,14 @@ var Sidebar = ({
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    usage.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
                                         entitlementPrice ?? 0,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                                         "/",
-                                        getFeatureName(usage.feature, 1)
+                                        getFeatureName(entitlement.feature, 1)
                                       ] })
                                     ] })
                                   ]
@@ -15439,13 +15559,13 @@ var Sidebar = ({
                   []
                 ),
                 changedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, previous, next: next2 }, index) => {
-                    if (entitlement?.feature?.name) {
+                  (acc, { previous, next: next2 }, index) => {
+                    if (next2.feature?.name) {
                       const {
                         price: entitlementPrice,
                         currency: entitlementCurrency
                       } = getBillingPrice(
-                        planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
+                        planPeriod === "year" ? next2.meteredYearlyPrice : next2.meteredMonthlyPrice
                       ) || {};
                       acc.push(
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { children: [
@@ -15469,7 +15589,7 @@ var Sidebar = ({
                                     children: [
                                       previous.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15512,7 +15632,7 @@ var Sidebar = ({
                                     children: [
                                       next2.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15546,7 +15666,7 @@ var Sidebar = ({
                   []
                 ),
                 addedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, quantity }, index) => {
+                  (acc, entitlement, index) => {
                     if (entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
@@ -15570,9 +15690,12 @@ var Sidebar = ({
                                   $weight: theme.typography.heading4.fontWeight,
                                   $color: theme.typography.heading4.color,
                                   children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                    quantity,
+                                    entitlement.quantity,
                                     " ",
-                                    getFeatureName(entitlement.feature, quantity)
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      entitlement.quantity
+                                    )
                                   ] }) : entitlement.feature.name
                                 }
                               ) }),
@@ -15586,7 +15709,7 @@ var Sidebar = ({
                                   children: [
                                     entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                       formatCurrency(
-                                        (entitlementPrice ?? 0) * quantity,
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
@@ -16441,7 +16564,7 @@ var Checkout = ({
         $alignItems: "center",
         $flexGrow: 1,
         $marginTop: "-3.5rem",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { $size: "3xl" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { $color: theme.primary, $size: "3xl" })
       }
     );
   }
@@ -17047,7 +17170,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
   const unitPriceFontSize = 0.875 * theme.typography.text.fontSize;
   const unitPriceColor = hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
-    (acc, { entitlement, quantity, usage }, index) => {
+    (acc, entitlement, index) => {
       if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
         const { price, currency } = getBillingPrice(
           period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
@@ -17106,8 +17229,8 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         {
                           $size: "lg",
                           type: "number",
-                          value: quantity,
-                          min: usage,
+                          value: entitlement.quantity,
+                          min: entitlement.usage,
                           autoFocus: true,
                           onFocus: (event) => event.target.select(),
                           onChange: (event) => {
@@ -17127,12 +17250,12 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $weight: theme.typography.text.fontWeight,
                           $color: unitPriceColor,
                           children: [
-                            quantity < usage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#DB6669" }, children: [
+                            entitlement.quantity < entitlement.usage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#DB6669" }, children: [
                               t2("Cannot downgrade entitlement"),
                               " "
                             ] }),
                             t2("Currently using", {
-                              quantity: usage,
+                              quantity: entitlement.usage,
                               unit: getFeatureName(entitlement.feature)
                             })
                           ]
@@ -17155,7 +17278,10 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $weight: theme.typography.text.fontWeight,
                           $color: theme.typography.text.color,
                           children: [
-                            formatCurrency((price ?? 0) * quantity, currency),
+                            formatCurrency(
+                              (price ?? 0) * entitlement.quantity,
+                              currency
+                            ),
                             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(period)
@@ -17198,6 +17324,22 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
+  if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
+    const featureUsage = entitlements.find(
+      (usage2) => usage2.feature?.id === entitlement.feature?.id
+    );
+    const allocation = featureUsage?.allocation || 0;
+    const usage = featureUsage?.usage || 0;
+    acc.push({
+      ...entitlement,
+      allocation,
+      usage,
+      quantity: allocation
+    });
+  }
+  return acc;
+};
 var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -17231,34 +17373,21 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }))
   );
-  const createActiveUsageBasedEntitlementsReducer = (0, import_react26.useCallback)(
-    (period = planPeriod) => (acc, entitlement) => {
-      if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
-        const featureUsage = data.featureUsage?.features.find(
-          (usage2) => usage2.feature?.id === entitlement.feature?.id
-        );
-        const allocation = featureUsage?.allocation ?? 0;
-        const usage = featureUsage?.usage ?? 0;
-        acc.push({
-          entitlement,
-          allocation,
-          quantity: allocation,
-          usage
-        });
-      }
-      return acc;
-    },
-    [planPeriod, data.featureUsage?.features]
-  );
+  const currentEntitlements = (0, import_react26.useMemo)(() => {
+    return data.featureUsage?.features || [];
+  }, [data.featureUsage?.features]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react26.useState)(
     () => (selectedPlan?.entitlements || []).reduce(
-      createActiveUsageBasedEntitlementsReducer(),
+      createActiveUsageBasedEntitlementsReducer(
+        currentEntitlements,
+        planPeriod
+      ),
       []
     )
   );
   const payInAdvanceEntitlements = (0, import_react26.useMemo)(
     () => usageBasedEntitlements.filter(
-      ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+      (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
     [usageBasedEntitlements]
   );
@@ -17350,8 +17479,8 @@ var CheckoutDialog = ({ top = 0 }) => {
               []
             ),
             payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
-              (acc, { entitlement, quantity }) => {
-                const priceId = (period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
+              (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+                const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
                 if (priceId) {
                   acc.push({
                     priceId,
@@ -17365,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();
@@ -17400,7 +17529,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       }
       const period = updates.period || planPeriod;
       const entitlements = plan.entitlements.reduce(
-        createActiveUsageBasedEntitlementsReducer(period),
+        createActiveUsageBasedEntitlementsReducer(currentEntitlements, period),
         []
       );
       if (updates.plan) {
@@ -17411,16 +17540,11 @@ var CheckoutDialog = ({ top = 0 }) => {
         period,
         plan: updates.plan,
         payInAdvanceEntitlements: entitlements.filter(
-          ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+          ({ priceBehavior }) => priceBehavior === "pay_in_advance"
         )
       });
     },
-    [
-      planPeriod,
-      selectedPlan,
-      createActiveUsageBasedEntitlementsReducer,
-      previewCheckout
-    ]
+    [planPeriod, selectedPlan, currentEntitlements, previewCheckout]
   );
   const changePlanPeriod = (0, import_react26.useCallback)(
     (period) => {
@@ -17443,16 +17567,14 @@ var CheckoutDialog = ({ top = 0 }) => {
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
-          ({ entitlement, allocation, quantity, usage }) => entitlement.id === id ? {
-            entitlement,
-            allocation,
-            quantity: updatedQuantity,
-            usage
-          } : { entitlement, allocation, quantity, usage }
+          (entitlement) => entitlement.id === id ? {
+            ...entitlement,
+            quantity: updatedQuantity
+          } : entitlement
         );
         previewCheckout({
           payInAdvanceEntitlements: updated.filter(
-            ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+            ({ priceBehavior }) => priceBehavior === "pay_in_advance"
           )
         });
         return updated;
@@ -17581,7 +17703,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                                     $size: theme.typography.heading3.fontSize,
                                     $weight: theme.typography.heading3.fontWeight,
                                     $color: theme.typography.heading3.color,
-                                    $marginBottom: "0.5rem",
+                                    style: { marginBottom: "0.5rem" },
                                     children: activeCheckoutStage.label
                                   }
                                 ),
@@ -17856,11 +17978,11 @@ var PeriodToggle = ({
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Text,
               {
-                $flexShrink: 0,
                 $font: theme.typography.text.fontFamily,
                 $size: 15,
                 $weight: option === selectedOption ? 600 : 400,
                 $color: theme.typography.text.color,
+                style: { flexShrink: 0 },
                 children: t2("Billed", { period: adjectify(option) })
               }
             )
@@ -17920,23 +18042,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     ),
     [data.company?.plan, planPeriod, availablePlans]
   );
+  const currentEntitlements = data.featureUsage?.features || [];
   const usageBasedEntitlements = (selectedPlan?.entitlements || []).reduce(
-    (acc, entitlement) => {
-      if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.meteredMonthlyPrice || planPeriod === "year" && entitlement.meteredYearlyPrice)) {
-        const featureUsage = data.featureUsage?.features.find(
-          (usage2) => usage2.feature?.id === entitlement.feature?.id
-        );
-        const allocation = featureUsage?.allocation ?? 0;
-        const usage = featureUsage?.usage ?? 0;
-        acc.push({
-          entitlement,
-          allocation,
-          quantity: allocation,
-          usage
-        });
-      }
-      return acc;
-    },
+    createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
   const addOns = (0, import_react29.useMemo)(
@@ -18259,21 +18367,18 @@ var RenderLayout = ({ children }) => {
 };
 // src/components/layout/viewport/styles.ts
-var StyledViewport = dt(Box).attrs(({ theme }) => ({
-  $gridTemplateColumns: "repeat(1, minmax(300px, 1fr))",
-  $viewport: {
-    md: {
-      $gridTemplateColumns: `repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`
-    }
-  }
-})).withConfig({
+var StyledViewport = dt.div.withConfig({
   shouldForwardProp: (prop) => !["$numberOfColumns", "numberOfColumns"].includes(prop)
 })`
   display: grid;
+  grid-template-columns: repeat(1, minmax(300px, 1fr));
   margin-left: auto;
   margin-right: auto;
   gap: 1rem;
+  @media (min-width: 768px) {
+    grid-template-columns: ${({ theme }) => lt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
+  }
 `;
 // src/components/layout/viewport/Viewport.tsx
@@ -18314,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,
@@ -18334,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
     ) || {};
@@ -18344,7 +18512,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = (0, import_react31.useMemo)(() => {
+  const text = (0, import_react32.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -18364,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;
     }
@@ -18408,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,
@@ -18426,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,
@@ -18443,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,
@@ -18472,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(
@@ -18508,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,
@@ -18517,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,
@@ -18530,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) => {
@@ -18543,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",
@@ -18551,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,
@@ -18562,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,
@@ -18572,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,
@@ -18592,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,
@@ -18605,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",
@@ -18618,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,
@@ -18639,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,
@@ -18674,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: () => {
@@ -18687,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));
     });
@@ -18711,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,
@@ -18722,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,
@@ -18732,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,
@@ -18744,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,
@@ -18769,10 +18937,11 @@ 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(Flex)`
+var Container4 = dt.div`
+  display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -18811,8 +18980,8 @@ var Container4 = dt(Flex)`
 `;
 // 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: {
@@ -18837,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(
@@ -18867,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,
@@ -18883,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,
@@ -18896,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",
@@ -18909,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,
@@ -18917,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)
                       ] })
@@ -18932,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,
@@ -18946,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)
                     ] })
@@ -18956,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,
@@ -18968,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) => {
@@ -18980,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,
@@ -18990,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,
@@ -19009,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,
@@ -19025,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,
@@ -19065,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,
@@ -19087,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: () => {
@@ -19111,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,
@@ -19124,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,
@@ -19223,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,
@@ -19235,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,
@@ -19246,7 +19415,7 @@ var PaymentMethodElement = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -19255,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,
@@ -19289,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 "";
@@ -19303,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",
@@ -19317,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,
@@ -19332,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,
@@ -19349,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: () => {
@@ -19362,7 +19531,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Box,
           {
             $cursor: "pointer",
@@ -19370,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",
@@ -19388,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,
@@ -19401,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();
@@ -19420,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,
@@ -19434,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,
@@ -19451,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();
@@ -19481,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;
     }
@@ -19505,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;
@@ -19541,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;
@@ -19568,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",
@@ -19581,10 +19750,10 @@ var PaymentMethodDetails = ({
         $zIndex: 1,
         $backgroundColor: "black",
         $opacity: 0.5,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { $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",
@@ -19594,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,
@@ -19623,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) => {
@@ -19634,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",
@@ -19644,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,
@@ -19654,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",
@@ -19670,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,
@@ -19681,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,
@@ -19700,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,
@@ -19730,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();
@@ -19756,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();
@@ -19769,15 +19938,18 @@ 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)(
-      Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      Notice,
       {
-        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
+        as: Flex,
+        $flexDirection: "column",
+        $gap: "0.5rem",
+        $padding: "1.5rem",
         $textAlign: "center",
-        $padding: "1rem",
+        $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",
@@ -19788,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",
@@ -19805,14 +19977,17 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
           )
         ]
       }
-    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-      Box,
+    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      Notice,
       {
-        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
+        as: Flex,
+        $flexDirection: "column",
+        $gap: "0.5rem",
+        $padding: "1.5rem",
         $textAlign: "center",
-        $padding: "1rem",
+        $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",
@@ -19823,7 +19998,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               children: t2("Subscription canceled")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Text,
             {
               as: "p",
@@ -19831,20 +20006,20 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
               $size: 0.8125 * theme.typography.text.fontSize,
               $weight: theme.typography.text.fontWeight,
               $color: theme.typography.text.color,
-              children: billingSubscription?.cancelAt ? t2("Access to plan will end on", {
+              children: t2("Access to plan will end on", {
                 date: toPrettyDate(
                   new Date(billingSubscription.cancelAt * 1e3),
                   {
                     month: "numeric"
                   }
                 )
-              }) : ""
+              })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       Element,
       {
         as: Flex,
@@ -19853,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",
@@ -19861,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,
@@ -19874,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,
@@ -19886,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,
@@ -19900,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)
                       ] })
@@ -19917,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,
@@ -19929,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",
@@ -19937,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,
@@ -19947,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,
@@ -19956,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)
                         ] })
@@ -19968,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,
@@ -19987,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",
@@ -19995,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,
@@ -20003,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,
@@ -20025,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"),
                                   ":",
                                   " ",
@@ -20033,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,
@@ -20055,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),
                                     "/",
@@ -20064,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,
@@ -20076,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)
                                   ] })
@@ -20095,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",
@@ -20120,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,
@@ -20161,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] = {
@@ -20199,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,
@@ -20208,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",
@@ -20224,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,
@@ -20234,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,
@@ -20245,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",
@@ -20263,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",
@@ -20276,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",
@@ -20287,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,
@@ -20297,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,
@@ -20307,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,
@@ -20318,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,
@@ -20332,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",
@@ -20341,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,
@@ -20356,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",
@@ -20365,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,
@@ -20391,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,
@@ -20403,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,
@@ -20418,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
@@ -20430,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(
@@ -20449,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"),
                                                     " ",
@@ -20459,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
@@ -20468,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,
@@ -20494,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)
                                                   ] }),
@@ -20512,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",
@@ -20531,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),
@@ -20548,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",
@@ -20556,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",
@@ -20567,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,
@@ -20580,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",
@@ -20604,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"),
@@ -20633,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,
@@ -20652,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",
@@ -20663,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",
@@ -20677,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,
@@ -20688,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,
@@ -20698,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,
@@ -20709,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,
@@ -20723,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",
@@ -20732,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,
@@ -20745,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",
@@ -20753,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",
@@ -20762,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,
@@ -20781,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
                                                   ),
@@ -20803,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"),
                                                   " ",
@@ -20825,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",
@@ -20861,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",
@@ -20875,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;
@@ -20894,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,
@@ -20902,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,
@@ -20923,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,
@@ -20943,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,
@@ -20976,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,
@@ -20985,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,
@@ -20999,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,
@@ -21014,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,
@@ -21026,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,
@@ -21037,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",
@@ -21047,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,
@@ -21059,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,
@@ -21078,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,
@@ -21094,7 +21298,8 @@ var components = {
   PaymentMethod,
   Invoices,
   PricingTable,
-  UnsubscribeButton
+  UnsubscribeButton,
+  ButtonElement
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};
@@ -21114,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,
@@ -21127,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%",
@@ -21138,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, { $size: "2xl", $color: "#194BFB" })
+      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",
@@ -21155,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`,
@@ -21166,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`,
@@ -21183,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,
@@ -21207,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, {})
     }
   );
 };