@schematichq/schematic-components 0.7.0 → 0.7.3

package/dist/schematic-components.esm.js

@@ -30,28 +30,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// node_modules/void-elements/index.js
-var require_void_elements = __commonJS({
-  "node_modules/void-elements/index.js"(exports, module) {
-    module.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, module) {
@@ -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, module) {
+    module.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, module) {
@@ -2252,323 +2252,54 @@ var require_debounce = __commonJS({
   }
 });
 
-// src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo9, useRef as useRef7, useState as useState12 } from "react";
-
-// node_modules/react-i18next/dist/es/Trans.js
-import { useContext } from "react";
-
-// node_modules/react-i18next/dist/es/TransWithoutContext.js
-import { Fragment, isValidElement, cloneElement, createElement, Children } from "react";
+// src/components/elements/button/Button.tsx
+import { forwardRef as forwardRef7 } from "react";
 
-// node_modules/html-parse-stringify/dist/html-parse-stringify.module.js
-var import_void_elements = __toESM(require_void_elements());
+// src/components/layout/card/Card.tsx
+import { forwardRef as forwardRef3 } from "react";
 
-// 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;
+// node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t2) {
+    for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s2 = arguments[i2];
+      for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2)) t2[p2] = s2[p2];
     }
-  });
-};
-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
+    return t2;
   };
+  return __assign.apply(this, arguments);
 };
-var getDefaults = () => defaultOptions;
-
-// node_modules/react-i18next/dist/es/i18nInstance.js
-var i18nInstance;
-var setI18n = (instance2) => {
-  i18nInstance = instance2;
-};
-var getI18n = () => i18nInstance;
+function __spreadArray(to, from2, pack) {
+  if (pack || arguments.length === 2) for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
+    if (ar || !(i2 in from2)) {
+      if (!ar) ar = Array.prototype.slice.call(from2, 0, i2);
+      ar[i2] = from2[i2];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from2));
+}
 
-// node_modules/react-i18next/dist/es/context.js
-import { createContext } from "react";
+// node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
 
-// node_modules/react-i18next/dist/es/initReactI18next.js
-var initReactI18next = {
-  type: "3rdParty",
-  init(instance2) {
-    setDefaults(instance2.options.react);
-    setI18n(instance2);
+// node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var isPropValid = /* @__PURE__ */ memoize(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
   }
-};
+  /* Z+1 */
+);
 
-// node_modules/react-i18next/dist/es/context.js
-var I18nContext = 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
-import { useState, useEffect, useContext as useContext2, useRef, useCallback } from "react";
-var usePrevious = (value, ignore) => {
-  const ref = useRef();
-  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) => useCallback(alwaysNewT(i18n, language, namespace, keyPrefix), [i18n, language, namespace, keyPrefix]);
-var useTranslation = (ns, props = {}) => {
-  const {
-    i18n: i18nFromProps
-  } = props;
-  const {
-    i18n: i18nFromContext,
-    defaultNS: defaultNSFromContext
-  } = useContext2(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] = useState(getT);
-  let joinedNS = namespaces.join();
-  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-  const previousJoinedNS = usePrevious(joinedNS);
-  const isMounted = useRef(true);
-  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]);
-  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
-import { createElement as createElement2, forwardRef as forwardRefReact } from "react";
-
-// node_modules/react-i18next/dist/es/I18nextProvider.js
-import { createElement as createElement3, useMemo } from "react";
-
-// node_modules/react-i18next/dist/es/withSSR.js
-import { createElement as createElement4 } from "react";
-
-// node_modules/react-i18next/dist/es/useSSR.js
-import { useContext as useContext3 } from "react";
-
-// node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
-var __assign = function() {
-  __assign = Object.assign || function __assign2(t2) {
-    for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
-      s2 = arguments[i2];
-      for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2)) t2[p2] = s2[p2];
-    }
-    return t2;
-  };
-  return __assign.apply(this, arguments);
-};
-function __spreadArray(to, from2, pack) {
-  if (pack || arguments.length === 2) for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
-    if (ar || !(i2 in from2)) {
-      if (!ar) ar = Array.prototype.slice.call(from2, 0, i2);
-      ar[i2] = from2[i2];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from2));
-}
-
-// node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
-function memoize(fn) {
-  var cache = /* @__PURE__ */ Object.create(null);
-  return function(arg) {
-    if (cache[arg] === void 0) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-
-// node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
-var isPropValid = /* @__PURE__ */ memoize(
-  function(prop) {
-    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
-  }
-  /* Z+1 */
-);
-
-// node_modules/styled-components/dist/styled-components.browser.esm.js
-var import_shallowequal = __toESM(require_shallowequal());
-import o, { useRef as r, useState as s, useMemo as i, useEffect as a, useContext as c, useDebugValue as l, createElement as u } from "react";
+// node_modules/styled-components/dist/styled-components.browser.esm.js
+var import_shallowequal = __toESM(require_shallowequal());
+import o, { useRef as r, useState as s, useMemo as i, useEffect as a, useContext as c, useDebugValue as l, createElement as u } from "react";
 
 // node_modules/stylis/src/Enum.js
 var MS = "-ms-";
@@ -3899,10 +3630,10 @@ var DEFAULT_CURRENCY = "USD";
 var MAXIMUM_SIGNIFICANT_DIGITS = 6;
 
 // src/hooks/useAvailablePlans.ts
-import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { useCallback, useMemo } from "react";
 function useAvailablePlans(activePeriod) {
   const { data, mode } = useEmbed();
-  const getAvailablePeriods = useCallback2(() => {
+  const getAvailablePeriods = useCallback(() => {
     const periods = [];
     if (data.activePlans.some((plan) => plan.monthlyPrice) || data.activeAddOns.some((addOn) => addOn.monthlyPrice)) {
       periods.push("month");
@@ -3912,7 +3643,7 @@ function useAvailablePlans(activePeriod) {
     }
     return periods;
   }, [data.activePlans, data.activeAddOns]);
-  const getActivePlans = useCallback2(
+  const getActivePlans = useCallback(
     (plans) => {
       const customPlanExist = plans.some((plan) => plan.custom);
       const plansWithSelected = mode === "edit" ? plans.slice() : plans.filter(
@@ -3933,7 +3664,7 @@ function useAvailablePlans(activePeriod) {
     },
     [activePeriod, mode]
   );
-  return useMemo2(() => {
+  return useMemo(() => {
     return {
       plans: getActivePlans(data.activePlans),
       addOns: getActivePlans(data.activeAddOns),
@@ -3951,7 +3682,7 @@ function useAvailablePlans(activePeriod) {
 import { useContext as useContext4 } from "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;
@@ -3974,9 +3705,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 {};
@@ -4045,7 +3776,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);
@@ -4067,7 +3798,7 @@ var _entityMap = {
   "/": "&#x2F;"
 };
 var escape = (data) => {
-  if (isString2(data)) {
+  if (isString(data)) {
     return data.replace(/[&<>"'\/]/g, (s2) => _entityMap[s2]);
   }
   return data;
@@ -4196,7 +3927,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) {
@@ -4297,7 +4028,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);
@@ -4310,7 +4041,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) {
@@ -4334,7 +4065,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
       });
     }
@@ -4405,7 +4136,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] : {};
@@ -4442,7 +4173,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);
@@ -4451,7 +4182,7 @@ var Translator = class _Translator extends EventEmitter {
     }
     return {
       key,
-      namespaces: isString2(namespaces) ? [namespaces] : namespaces
+      namespaces: isString(namespaces) ? [namespaces] : namespaces
     };
   }
   translate(keys, options, lastKey) {
@@ -4507,7 +4238,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, {
@@ -4521,7 +4252,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!");
@@ -4567,7 +4298,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 {
@@ -4661,13 +4392,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
@@ -4692,7 +4423,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: {
@@ -4711,7 +4442,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);
@@ -4719,9 +4450,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;
@@ -4793,7 +4524,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;
@@ -4846,7 +4577,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];
@@ -4896,7 +4627,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];
@@ -4917,11 +4648,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) => {
@@ -5017,7 +4748,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);
   }
@@ -5127,7 +4858,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) {
@@ -5137,7 +4868,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);
@@ -5191,7 +4922,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;
@@ -5202,8 +4933,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 = "";
@@ -5513,8 +5244,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();
@@ -5618,8 +5349,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) => {
@@ -5643,9 +5374,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"]);
   }
@@ -5694,7 +5425,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];
@@ -5824,7 +5555,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();
@@ -5940,7 +5671,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);
@@ -5992,7 +5723,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;
@@ -6049,7 +5780,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);
     });
@@ -6061,7 +5792,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) {
@@ -6165,9 +5896,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());
@@ -10349,6 +10080,278 @@ var inflate_1 = inflate;
 // src/context/embed.tsx
 import { createContext as createContext2, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
+// node_modules/react-i18next/dist/es/Trans.js
+import { useContext } from "react";
+
+// node_modules/react-i18next/dist/es/TransWithoutContext.js
+import { Fragment, isValidElement, cloneElement, createElement, Children } from "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
+import { createContext } from "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 = 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
+import { useState, useEffect, useContext as useContext2, useRef, useCallback as useCallback2 } from "react";
+var usePrevious = (value, ignore) => {
+  const ref = useRef();
+  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) => useCallback2(alwaysNewT(i18n, language, namespace, keyPrefix), [i18n, language, namespace, keyPrefix]);
+var useTranslation = (ns, props = {}) => {
+  const {
+    i18n: i18nFromProps
+  } = props;
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = useContext2(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] = useState(getT);
+  let joinedNS = namespaces.join();
+  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
+  const previousJoinedNS = usePrevious(joinedNS);
+  const isMounted = useRef(true);
+  useEffect(() => {
+    const {
+      bindI18n,
+      bindI18nStore
+    } = i18nOptions;
+    isMounted.current = true;
+    if (!ready && !useSuspense) {
+      if (props.lng) {
+        loadLanguages2(i18n, props.lng, namespaces, () => {
+          if (isMounted.current) setT(getNewT);
+        });
+      } else {
+        loadNamespaces2(i18n, namespaces, () => {
+          if (isMounted.current) setT(getNewT);
+        });
+      }
+    }
+    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
+      setT(getNewT);
+    }
+    const boundReset = () => {
+      if (isMounted.current) setT(getNewT);
+    };
+    if (bindI18n) i18n?.on(bindI18n, boundReset);
+    if (bindI18nStore) i18n?.store.on(bindI18nStore, boundReset);
+    return () => {
+      isMounted.current = false;
+      if (i18n) bindI18n?.split(" ").forEach((e2) => i18n.off(e2, boundReset));
+      if (bindI18nStore && i18n) bindI18nStore.split(" ").forEach((e2) => i18n.store.off(e2, boundReset));
+    };
+  }, [i18n, joinedNS]);
+  useEffect(() => {
+    if (isMounted.current && ready) {
+      setT(getT);
+    }
+  }, [i18n, keyPrefix, ready]);
+  const ret = [t2, i18n, ready];
+  ret.t = t2;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready) return ret;
+  if (!ready && !useSuspense) return ret;
+  throw new Promise((resolve) => {
+    if (props.lng) {
+      loadLanguages2(i18n, props.lng, namespaces, () => resolve());
+    } else {
+      loadNamespaces2(i18n, namespaces, () => resolve());
+    }
+  });
+};
+
+// node_modules/react-i18next/dist/es/withTranslation.js
+import { createElement as createElement2, forwardRef as forwardRefReact } from "react";
+
+// node_modules/react-i18next/dist/es/I18nextProvider.js
+import { createElement as createElement3, useMemo as useMemo2 } from "react";
+
+// node_modules/react-i18next/dist/es/withSSR.js
+import { createElement as createElement4 } from "react";
+
+// node_modules/react-i18next/dist/es/useSSR.js
+import { useContext as useContext3 } from "react";
+
 // node_modules/uuid/dist/esm-browser/stringify.js
 var byteToHex = [];
 for (let i2 = 0; i2 < 256; ++i2) {
@@ -10672,7 +10675,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"]
   };
 }
 
@@ -10685,6 +10704,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    billingScheme: json["billing_scheme"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     id: json["id"],
@@ -10695,6 +10715,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"],
@@ -10739,6 +10762,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"],
@@ -10751,6 +10775,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"]),
@@ -10758,6 +10785,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);
@@ -11428,6 +11478,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"]),
@@ -11776,6 +11827,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);
@@ -11787,12 +11858,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
+    )
   };
 }
 
@@ -13061,7 +13136,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     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,
@@ -13400,16 +13475,10 @@ function useWrapChildren(elements) {
   return shouldWrap.some((wrap) => wrap);
 }
 
-// src/components/layout/card/Card.tsx
-import { forwardRef as forwardRef3 } from "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)
@@ -13532,6 +13601,7 @@ var Button2 = forwardRef(
     children,
     ...props
   }, ref) => {
+    const theme = nt();
     return /* @__PURE__ */ jsxs2(
       Button,
       {
@@ -13542,7 +13612,7 @@ var Button2 = forwardRef(
         disabled,
         ...props,
         children: [
-          /* @__PURE__ */ jsx2(Loader, { $size: "sm", $isLoading: isLoading }),
+          /* @__PURE__ */ jsx2(Loader, { $color: theme.primary, $size: "sm", $isLoading: isLoading }),
           children
         ]
       }
@@ -13619,6 +13689,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]);
@@ -13766,6 +13838,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) {
@@ -14050,7 +14140,7 @@ var Loader = dt.div`
   }
   return lt`
       border-color: ${color};
-      border-top-color: ${colorFn(color, 42.5)};
+      border-top-color: ${colorFn(color, 0.425)};
     `;
 }}
 
@@ -14230,8 +14320,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
@@ -14261,59 +14354,51 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ jsxs4(
-    Container3,
-    {
-      $alignItems: "center",
-      $gap: `${16 / TEXT_BASE_SIZE}rem`,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs4(Container3, { ...props, children: [
+    /* @__PURE__ */ jsx7(
+      Flex,
+      {
+        $position: "relative",
+        $alignItems: "center",
+        $width: `${barWidth}`,
+        $maxWidth: "100%",
+        children: /* @__PURE__ */ jsx7(
           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__ */ jsx7(
-              Flex,
+              Box,
               {
-                $position: "relative",
-                $overflow: "hidden",
-                $width: "100%",
-                $height: `${8 / TEXT_BASE_SIZE}rem`,
-                $backgroundColor: bgColor,
-                $borderRadius: "9999px",
-                children: /* @__PURE__ */ jsx7(
-                  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__ */ jsxs4(
-          Text,
-          {
-            $font: theme.typography.text.fontFamily,
-            $size: 14,
-            $weight: 500,
-            $color: theme.typography.text.color,
-            children: [
-              value,
-              "/",
-              total
-            ]
-          }
         )
-      ]
-    }
-  );
+      }
+    ),
+    total !== 0 && /* @__PURE__ */ jsxs4(
+      Text,
+      {
+        $font: theme.typography.text.fontFamily,
+        $size: 14,
+        $weight: 500,
+        $color: theme.typography.text.color,
+        children: [
+          value,
+          "/",
+          total
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/ui/text/styles.ts
@@ -14326,8 +14411,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`
@@ -14363,7 +14447,7 @@ import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useRe
 import { createPortal } from "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;
@@ -14430,7 +14514,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);
@@ -14547,6 +14631,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);
@@ -14574,6 +14659,11 @@ var StyledCard = dt.div(({ theme }) => {
             `}
       }
     }
+
+    ${Notice}:first-child {
+      border-top-left-radius: ${borderRadius};
+      border-top-right-radius: ${borderRadius};
+    }
   `;
 });
 
@@ -14628,11 +14718,12 @@ Column.displayName = "Column";
 import { forwardRef as forwardRef5 } from "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%;
 
@@ -14913,29 +15004,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 = useMemo4(() => {
+    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 } = useMemo4(() => {
+    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 = useMemo4(() => {
     let planPrice;
     let currency;
@@ -14952,15 +15050,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
@@ -15010,8 +15110,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,
@@ -15079,48 +15179,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
+  } = useMemo4(() => {
+    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)
   );
@@ -15324,13 +15438,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__ */ jsxs8(
@@ -15350,11 +15464,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__ */ jsxs8(Fragment3, { children: [
-                                    quantity,
+                                  children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                                    entitlement.quantity,
                                     " ",
-                                    getFeatureName(usage.feature, quantity)
-                                  ] }) : usage.feature.name
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      entitlement.quantity
+                                    )
+                                  ] }) : entitlement.feature.name
                                 }
                               ) }),
                               /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
@@ -15365,9 +15482,9 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    usage.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                                    entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                                       formatCurrency(
-                                        (entitlementPrice ?? 0) * quantity,
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
@@ -15375,14 +15492,14 @@ var Sidebar = ({
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    usage.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                                    entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                                       formatCurrency(
                                         entitlementPrice ?? 0,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
-                                        getFeatureName(usage.feature, 1)
+                                        getFeatureName(entitlement.feature, 1)
                                       ] })
                                     ] })
                                   ]
@@ -15399,13 +15516,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__ */ jsxs8(Box, { children: [
@@ -15429,7 +15546,7 @@ var Sidebar = ({
                                     children: [
                                       previous.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15472,7 +15589,7 @@ var Sidebar = ({
                                     children: [
                                       next2.quantity,
                                       " ",
-                                      getFeatureName(entitlement.feature)
+                                      getFeatureName(next2.feature)
                                     ]
                                   }
                                 ) }),
@@ -15506,7 +15623,7 @@ var Sidebar = ({
                   []
                 ),
                 addedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, quantity }, index) => {
+                  (acc, entitlement, index) => {
                     if (entitlement.feature?.name) {
                       const {
                         price: entitlementPrice,
@@ -15530,9 +15647,12 @@ var Sidebar = ({
                                   $weight: theme.typography.heading4.fontWeight,
                                   $color: theme.typography.heading4.color,
                                   children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
-                                    quantity,
+                                    entitlement.quantity,
                                     " ",
-                                    getFeatureName(entitlement.feature, quantity)
+                                    getFeatureName(
+                                      entitlement.feature,
+                                      entitlement.quantity
+                                    )
                                   ] }) : entitlement.feature.name
                                 }
                               ) }),
@@ -15546,7 +15666,7 @@ var Sidebar = ({
                                   children: [
                                     entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
                                       formatCurrency(
-                                        (entitlementPrice ?? 0) * quantity,
+                                        (entitlementPrice ?? 0) * entitlement.quantity,
                                         entitlementCurrency
                                       ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
@@ -16401,7 +16521,7 @@ var Checkout = ({
         $alignItems: "center",
         $flexGrow: 1,
         $marginTop: "-3.5rem",
-        children: /* @__PURE__ */ jsx15(Loader, { $size: "3xl" })
+        children: /* @__PURE__ */ jsx15(Loader, { $color: theme.primary, $size: "3xl" })
       }
     );
   }
@@ -17007,7 +17127,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__ */ jsx18(Fragment8, { children: /* @__PURE__ */ jsx18(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
@@ -17066,8 +17186,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) => {
@@ -17087,12 +17207,12 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $weight: theme.typography.text.fontWeight,
                           $color: unitPriceColor,
                           children: [
-                            quantity < usage && /* @__PURE__ */ jsxs13("span", { style: { color: "#DB6669" }, children: [
+                            entitlement.quantity < entitlement.usage && /* @__PURE__ */ jsxs13("span", { style: { color: "#DB6669" }, children: [
                               t2("Cannot downgrade entitlement"),
                               " "
                             ] }),
                             t2("Currently using", {
-                              quantity: usage,
+                              quantity: entitlement.usage,
                               unit: getFeatureName(entitlement.feature)
                             })
                           ]
@@ -17115,7 +17235,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__ */ jsxs13("sub", { children: [
                               "/",
                               shortenPeriod(period)
@@ -17158,6 +17281,22 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 import { jsx as jsx19, jsxs as jsxs14 } from "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();
@@ -17191,34 +17330,21 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }))
   );
-  const createActiveUsageBasedEntitlementsReducer = useCallback8(
-    (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 = useMemo5(() => {
+    return data.featureUsage?.features || [];
+  }, [data.featureUsage?.features]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = useState7(
     () => (selectedPlan?.entitlements || []).reduce(
-      createActiveUsageBasedEntitlementsReducer(),
+      createActiveUsageBasedEntitlementsReducer(
+        currentEntitlements,
+        planPeriod
+      ),
       []
     )
   );
   const payInAdvanceEntitlements = useMemo5(
     () => usageBasedEntitlements.filter(
-      ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+      (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
     [usageBasedEntitlements]
   );
@@ -17310,8 +17436,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,
@@ -17325,7 +17451,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();
@@ -17360,7 +17486,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       }
       const period = updates.period || planPeriod;
       const entitlements = plan.entitlements.reduce(
-        createActiveUsageBasedEntitlementsReducer(period),
+        createActiveUsageBasedEntitlementsReducer(currentEntitlements, period),
         []
       );
       if (updates.plan) {
@@ -17371,16 +17497,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 = useCallback8(
     (period) => {
@@ -17403,16 +17524,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;
@@ -17541,7 +17660,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
                                   }
                                 ),
@@ -17820,11 +17939,11 @@ var PeriodToggle = ({
             children: /* @__PURE__ */ jsx22(
               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) })
               }
             )
@@ -17884,23 +18003,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 = useMemo7(
@@ -18223,21 +18328,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
@@ -18278,9 +18380,72 @@ var Viewport = forwardRef6(
 );
 Viewport.displayName = "Viewport";
 
+// src/components/elements/button/Button.tsx
+import { jsx as jsx27 } from "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 = forwardRef7(({ 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__ */ jsx27(
+    Element,
+    {
+      as: Flex,
+      ref,
+      className,
+      $flexDirection: "column",
+      $gap: "2rem",
+      children: /* @__PURE__ */ jsx27(
+        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
+import { forwardRef as forwardRef8, useMemo as useMemo9, useRef as useRef7, useState as useState12 } from "react";
+
 // src/components/elements/included-features/Details.tsx
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var Details = ({
   shouldWrapChildren,
   featureUsage,
@@ -18379,7 +18544,7 @@ var Details = ({
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        props.entitlement.isVisible && /* @__PURE__ */ jsx27(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx27(
+        props.entitlement.isVisible && /* @__PURE__ */ jsx28(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx28(
           Text,
           {
             $font: theme.typography[props.entitlement.fontStyle].fontFamily,
@@ -18390,7 +18555,7 @@ var Details = ({
             children: text
           }
         ) }),
-        props.usage.isVisible && usageText && /* @__PURE__ */ jsx27(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx27(
+        props.usage.isVisible && usageText && /* @__PURE__ */ jsx28(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx28(
           Text,
           {
             $font: theme.typography[props.usage.fontStyle].fontFamily,
@@ -18407,8 +18572,8 @@ var Details = ({
 };
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
-function resolveDesignProps(props) {
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+function resolveDesignProps2(props) {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -18436,8 +18601,8 @@ function resolveDesignProps(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps(rest);
+var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
@@ -18481,7 +18646,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx28(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx28(
+        props.header.isVisible && /* @__PURE__ */ jsx29(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx29(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18515,7 +18680,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx28(
+                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx29(
                         IconRound,
                         {
                           name: feature.icon,
@@ -18526,7 +18691,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           ]
                         }
                       ),
-                      feature?.name && /* @__PURE__ */ jsx28(
+                      feature?.name && /* @__PURE__ */ jsx29(
                         Text,
                         {
                           $font: theme.typography[props.icons.fontStyle].fontFamily,
@@ -18556,7 +18721,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx28(
+                shouldShowDetails && /* @__PURE__ */ jsx29(
                   Details,
                   {
                     featureUsage: usage,
@@ -18570,7 +18735,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
           );
         }),
         shouldShowExpand && /* @__PURE__ */ jsxs22(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             Icon2,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
@@ -18582,7 +18747,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -18603,9 +18768,9 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect6, useState as useState13 } from "react";
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
-function resolveDesignProps2(props) {
+import { forwardRef as forwardRef9, useEffect as useEffect6, useState as useState13 } from "react";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+function resolveDesignProps3(props) {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -18638,7 +18803,7 @@ function formatInvoices(invoices = []) {
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
   const theme = nt();
-  const dateText = /* @__PURE__ */ jsx29(
+  const dateText = /* @__PURE__ */ jsx30(
     Text,
     {
       ...url && { onClick: () => {
@@ -18651,12 +18816,12 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
     }
   );
   if (url) {
-    return /* @__PURE__ */ jsx29("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
+    return /* @__PURE__ */ jsx30("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
   }
   return dateText;
 };
-var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
-  const props = resolveDesignProps2(rest);
+var Invoices = forwardRef9(({ className, data, ...rest }, ref) => {
+  const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
@@ -18675,8 +18840,8 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx29(Element, { ref, className, children: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ jsx29(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(Element, { ref, className, children: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ jsx30(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx30(
       Text,
       {
         $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18686,9 +18851,9 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ jsx29(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+    /* @__PURE__ */ jsx30(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
       return /* @__PURE__ */ jsxs23(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ jsx29(
+        props.date.isVisible && date && /* @__PURE__ */ jsx30(
           InvoiceDate,
           {
             date,
@@ -18696,7 +18861,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
             url
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ jsx29(
+        props.amount.isVisible && /* @__PURE__ */ jsx30(
           Text,
           {
             $font: theme.typography[props.amount.fontStyle].fontFamily,
@@ -18709,14 +18874,14 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
       ] }, index);
     }) }),
     props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         Icon2,
         {
           name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
           style: { color: "#D0D0D0" }
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         Text,
         {
           onClick: toggleListSize,
@@ -18733,10 +18898,11 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useMemo as useMemo10, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo10, useRef as useRef8 } from "react";
 
 // src/components/elements/metered-features/styles.ts
-var Container4 = dt(Flex)`
+var Container4 = dt.div`
+  display: flex;
   flex-direction: column;
   gap: 1rem;
 
@@ -18775,8 +18941,8 @@ var Container4 = dt(Flex)`
 `;
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
-function resolveDesignProps3(props) {
+import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+function resolveDesignProps4(props) {
   return {
     isVisible: props.isVisible ?? true,
     header: {
@@ -18801,8 +18967,8 @@ function resolveDesignProps3(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps3(rest);
+var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps4(rest);
   const elements = useRef8([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
@@ -18831,7 +18997,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx30(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ jsx31(Container4, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -18847,7 +19013,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       const { price, currency } = getBillingPrice(
         planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
       ) || {};
-      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx30(
+      const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx31(
         ProgressBar,
         {
           progress: (isOverage ? softLimit / usage : usage / limit) * 100,
@@ -18873,7 +19039,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               $borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
             },
             children: [
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx31(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -18921,7 +19087,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
           }
         ),
         /* @__PURE__ */ jsxs24(Element, { as: Flex, $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx30(
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx31(
             IconRound,
             {
               name: feature.icon,
@@ -18945,7 +19111,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                 $gap: "1rem",
                 children: [
                   feature?.name && /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
-                    /* @__PURE__ */ jsx30(
+                    /* @__PURE__ */ jsx31(
                       Text,
                       {
                         as: Box,
@@ -18961,7 +19127,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         ] }) : feature.name
                       }
                     ),
-                    props.description.isVisible && /* @__PURE__ */ jsx30(
+                    props.description.isVisible && /* @__PURE__ */ jsx31(
                       Text,
                       {
                         as: Box,
@@ -18980,7 +19146,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                       $flexGrow: 1,
                       $textAlign: shouldWrapChildren ? "left" : "right",
                       children: [
-                        props.usage.isVisible && /* @__PURE__ */ jsx30(
+                        props.usage.isVisible && /* @__PURE__ */ jsx31(
                           Text,
                           {
                             as: Box,
@@ -19004,7 +19170,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                             ] })
                           }
                         ),
-                        props.allocation.isVisible && priceBehavior !== "overage" && /* @__PURE__ */ jsx30(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx30(
+                        props.allocation.isVisible && priceBehavior !== "overage" && /* @__PURE__ */ jsx31(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx31(
                           Text,
                           {
                             $font: theme.typography[props.allocation.fontStyle].fontFamily,
@@ -19030,11 +19196,11 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               }
             ),
             props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsxs24(Flex, { $gap: "2rem", children: [
-              typeof allocation === "number" ? /* @__PURE__ */ jsx30(
+              typeof allocation === "number" ? /* @__PURE__ */ jsx31(
                 Tooltip,
                 {
                   trigger: progressBar,
-                  content: /* @__PURE__ */ jsx30(
+                  content: /* @__PURE__ */ jsx31(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
@@ -19051,7 +19217,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   $flexGrow: 1
                 }
               ) : progressBar,
-              priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx30(
+              priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx31(
                 EmbedButton,
                 {
                   onClick: () => {
@@ -19075,11 +19241,11 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef10, useMemo as useMemo12 } from "react";
+import { forwardRef as forwardRef11, useMemo as useMemo12 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
 import { useMemo as useMemo11 } from "react";
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
   iconTitle,
@@ -19088,17 +19254,17 @@ var PaymentElement2 = ({
   paymentLast4
 }) => {
   const theme = nt();
-  return /* @__PURE__ */ jsx31(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
-    iconName && /* @__PURE__ */ jsx31(Box, { children: /* @__PURE__ */ jsx31(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
+    iconName && /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
     /* @__PURE__ */ jsxs25(Flex, { $alignItems: "center", children: [
-      /* @__PURE__ */ jsx31(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
-      paymentLast4 && /* @__PURE__ */ jsx31(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
+      /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
+      paymentLast4 && /* @__PURE__ */ jsx32(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
     ] })
   ] }) });
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx31(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx31(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx31(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx31(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx32(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -19189,7 +19355,7 @@ var PaymentMethodElement = ({
   }
   return /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
     props.header.isVisible && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         Text,
         {
           $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19199,7 +19365,7 @@ var PaymentMethodElement = ({
           children: t2("Payment Method")
         }
       ),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx31(
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx32(
         Text,
         {
           $font: theme.typography.text.fontFamily,
@@ -19219,15 +19385,15 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2.2}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          paymentMethod && /* @__PURE__ */ jsx31(
+          paymentMethod && /* @__PURE__ */ jsx32(
             PaymentElement2,
             {
               ...getPaymentMethodData(paymentMethod),
               ...getIconStyles({ size, theme })
             }
           ),
-          !paymentMethod && /* @__PURE__ */ jsx31(EmptyPaymentElement, {}),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx31(
+          !paymentMethod && /* @__PURE__ */ jsx32(EmptyPaymentElement, {}),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx32(
             Text,
             {
               onClick: onEdit,
@@ -19281,8 +19447,8 @@ var PaymentListElement = ({
       $font: theme.typography.text.fontFamily,
       $color: theme.typography.text.color,
       children: [
-        /* @__PURE__ */ jsx31(Box, { $paddingLeft: "0.5rem", $paddingRight: "0.5rem", children: iconName && /* @__PURE__ */ jsx31(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
-        /* @__PURE__ */ jsx31(Box, { $flexGrow: "1", children: /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsx32(Box, { $paddingLeft: "0.5rem", $paddingRight: "0.5rem", children: iconName && /* @__PURE__ */ jsx32(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+        /* @__PURE__ */ jsx32(Box, { $flexGrow: "1", children: /* @__PURE__ */ jsxs25(
           Text,
           {
             $font: theme.typography.text.fontFamily,
@@ -19296,12 +19462,12 @@ var PaymentListElement = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           Box,
           {
             $flexGrow: "1",
             $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx32(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19313,7 +19479,7 @@ var PaymentListElement = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx31(Box, { children: /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
           Text,
           {
             onClick: () => {
@@ -19326,7 +19492,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           Box,
           {
             $cursor: "pointer",
@@ -19334,7 +19500,7 @@ var PaymentListElement = ({
             onClick: () => {
               handleDelete(paymentMethod.id);
             },
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx32(
               Icon2,
               {
                 name: "close",
@@ -19352,8 +19518,8 @@ var PaymentListElement = ({
 };
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-var resolveDesignProps4 = (props) => {
+import { jsx as jsx33 } from "react/jsx-runtime";
+var resolveDesignProps5 = (props) => {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -19365,8 +19531,8 @@ var resolveDesignProps4 = (props) => {
     }
   };
 };
-var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
-  const props = resolveDesignProps4(rest);
+var PaymentMethod = forwardRef11(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+  const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
   const paymentMethod = useMemo12(() => {
     return data.subscription?.paymentMethod;
@@ -19384,7 +19550,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  return /* @__PURE__ */ jsx32(Element, { ref, className, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(Element, { ref, className, children: /* @__PURE__ */ jsx33(
     PaymentMethodElement,
     {
       paymentMethod,
@@ -19399,8 +19565,8 @@ PaymentMethod.displayName = "PaymentMethod";
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 import { Elements } from "@stripe/react-stripe-js";
 import { useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo13, useState as useState14 } from "react";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
-var resolveDesignProps5 = () => {
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+var resolveDesignProps6 = () => {
   return {
     header: {
       isVisible: true,
@@ -19415,7 +19581,7 @@ var resolveDesignProps5 = () => {
 var PaymentMethodDetails = ({
   setPaymentMethodId
 }) => {
-  const props = resolveDesignProps5();
+  const props = resolveDesignProps6();
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, setData } = useEmbed();
@@ -19533,7 +19699,7 @@ var PaymentMethodDetails = ({
     [api, data, setData, t2]
   );
   return /* @__PURE__ */ jsxs26(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ jsx33(
+    isLoading && /* @__PURE__ */ jsx34(
       Flex,
       {
         $position: "absolute",
@@ -19545,7 +19711,7 @@ var PaymentMethodDetails = ({
         $zIndex: 1,
         $backgroundColor: "black",
         $opacity: 0.5,
-        children: /* @__PURE__ */ jsx33(Loader, { $size: "2xl" })
+        children: /* @__PURE__ */ jsx34(Loader, { $color: theme.primary, $size: "2xl" })
       }
     ),
     /* @__PURE__ */ jsxs26(
@@ -19558,7 +19724,7 @@ var PaymentMethodDetails = ({
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
         $overflow: "auto",
         children: [
-          showPaymentForm ? /* @__PURE__ */ jsx33(
+          showPaymentForm ? /* @__PURE__ */ jsx34(
             Elements,
             {
               stripe,
@@ -19587,7 +19753,7 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ jsx33(
+              children: /* @__PURE__ */ jsx34(
                 PaymentForm,
                 {
                   onConfirm: async (paymentMethodId) => {
@@ -19599,7 +19765,7 @@ var PaymentMethodDetails = ({
               )
             }
           ) : /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               PaymentMethodElement,
               {
                 size: "lg",
@@ -19608,7 +19774,7 @@ var PaymentMethodDetails = ({
                 ...props
               }
             ),
-            (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsxs26(
+            (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsxs26(
               Text,
               {
                 onClick: dropDownDifferentPaymentMethods,
@@ -19618,7 +19784,7 @@ var PaymentMethodDetails = ({
                 $color: theme.typography.link.color,
                 children: [
                   t2("Choose different payment method"),
-                  /* @__PURE__ */ jsx33(
+                  /* @__PURE__ */ jsx34(
                     Icon2,
                     {
                       name: "chevron-down",
@@ -19634,9 +19800,9 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ jsx33(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ jsx33(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+            showDifferentPaymentMethods && /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
               (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx33(
+            ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx34(
               PaymentListElement,
               {
                 paymentMethod: paymentMethod2,
@@ -19645,9 +19811,9 @@ var PaymentMethodDetails = ({
               },
               paymentMethod2.id
             )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx33(EmbedButton, { onClick: createSetupIntent, size: "lg", children: t2("Add new payment method") })
+            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(EmbedButton, { onClick: createSetupIntent, size: "lg", children: t2("Add new payment method") })
           ] }),
-          !isLoading && error && /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsx33(
+          !isLoading && error && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -19664,9 +19830,9 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef as forwardRef11, useMemo as useMemo14 } from "react";
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
-var resolveDesignProps6 = (props) => {
+import { forwardRef as forwardRef12, useMemo as useMemo14 } from "react";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+var resolveDesignProps7 = (props) => {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -19694,8 +19860,8 @@ var resolveDesignProps6 = (props) => {
     }
   };
 };
-var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) => {
-  const props = resolveDesignProps6(rest);
+var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps7(rest);
   const theme = nt();
   const { t: t2 } = useTranslation();
   const { data, setLayout, setSelected } = useEmbed();
@@ -19735,13 +19901,16 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
   return /* @__PURE__ */ jsxs27(Fragment11, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
-      Box,
+      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__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Text,
             {
               as: "h3",
@@ -19752,7 +19921,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               children: t2("Trial ends in", { days: trialEndDays.toString() })
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Text,
             {
               as: "p",
@@ -19770,13 +19939,16 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         ]
       }
     ) : willSubscriptionCancel && /* @__PURE__ */ jsxs27(
-      Box,
+      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__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Text,
             {
               as: "h3",
@@ -19787,7 +19959,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               children: t2("Subscription canceled")
             }
           ),
-          /* @__PURE__ */ jsx34(
+          billingSubscription?.cancelAt && /* @__PURE__ */ jsx35(
             Text,
             {
               as: "p",
@@ -19795,14 +19967,14 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               $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"
                   }
                 )
-              }) : ""
+              })
             }
           )
         ]
@@ -19826,7 +19998,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               $gap: "1rem",
               children: [
                 /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx34(
+                  /* @__PURE__ */ jsx35(
                     Text,
                     {
                       as: Box,
@@ -19838,7 +20010,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       children: currentPlan.name
                     }
                   ),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx34(
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx35(
                     Text,
                     {
                       as: Box,
@@ -19851,7 +20023,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                   )
                 ] }),
                 props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs27(Box, { children: [
-                  /* @__PURE__ */ jsx34(
+                  /* @__PURE__ */ jsx35(
                     Text,
                     {
                       $font: headerPriceFontStyle.fontFamily,
@@ -19864,7 +20036,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx34(
+                  !isUsageBasedPlan && /* @__PURE__ */ jsx35(
                     Text,
                     {
                       $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -19882,7 +20054,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             }
           ),
           props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx34(
+            props.addOns.showLabel && /* @__PURE__ */ jsx35(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19901,7 +20073,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ jsx34(
+                  /* @__PURE__ */ jsx35(
                     Text,
                     {
                       $font: theme.typography[props.addOns.fontStyle].fontFamily,
@@ -19933,7 +20105,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
             ))
           ] }),
           usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19980,7 +20152,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                             }
                           ),
                           /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                            entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ jsx34(
+                            entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ jsx35(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -20059,7 +20231,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               []
             )
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx34(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx35(
             EmbedButton,
             {
               type: "button",
@@ -20084,9 +20256,9 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-import { forwardRef as forwardRef12, useState as useState15 } from "react";
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
-var resolveDesignProps7 = (props) => {
+import { forwardRef as forwardRef13, useState as useState15 } from "react";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
     showDiscount: props.showDiscount ?? true,
@@ -20125,8 +20297,8 @@ var resolveDesignProps7 = (props) => {
     }
   };
 };
-var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
-  const props = resolveDesignProps7(rest);
+var PricingTable = forwardRef13(({ children, className, ...rest }, ref) => {
+  const props = resolveDesignProps8(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
@@ -20188,7 +20360,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                 }
               },
               children: [
-                /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36(
                   Text,
                   {
                     $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20198,7 +20370,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                   }
                 ),
-                props.showPeriodToggle && /* @__PURE__ */ jsx35(
+                props.showPeriodToggle && /* @__PURE__ */ jsx36(
                   PeriodToggle,
                   {
                     options: periods,
@@ -20209,7 +20381,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx35(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx36(
             Box,
             {
               $display: "grid",
@@ -20251,7 +20423,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $borderStyle: "solid",
                           $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                           children: [
-                            /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(
+                            /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(
                               Text,
                               {
                                 $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20261,7 +20433,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 children: plan.name
                               }
                             ) }),
-                            props.plans.description.isVisible && /* @__PURE__ */ jsx35(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx35(
+                            props.plans.description.isVisible && /* @__PURE__ */ jsx36(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx36(
                               Text,
                               {
                                 $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -20272,7 +20444,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                               }
                             ) }),
                             /* @__PURE__ */ jsxs28(Box, { children: [
-                              /* @__PURE__ */ jsx35(
+                              /* @__PURE__ */ jsx36(
                                 Text,
                                 {
                                   $font: headerPriceFontStyle.fontFamily,
@@ -20296,7 +20468,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ jsx35(
+                            isActivePlan && /* @__PURE__ */ jsx36(
                               Flex,
                               {
                                 $position: "absolute",
@@ -20305,7 +20477,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
                                 $padding: "0.125rem 0.85rem",
-                                children: /* @__PURE__ */ jsx35(
+                                children: /* @__PURE__ */ jsx36(
                                   Text,
                                   {
                                     $font: theme.typography.text.fontFamily,
@@ -20330,7 +20502,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
                             props.plans.showEntitlements && /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: [
-                              props.plans.showInclusionText && planIndex > 0 && /* @__PURE__ */ jsx35(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx35(
+                              props.plans.showInclusionText && planIndex > 0 && /* @__PURE__ */ jsx36(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx36(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -20356,7 +20528,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   }
                                   acc.push(
                                     /* @__PURE__ */ jsxs28(Flex, { $gap: "1rem", children: [
-                                      props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx35(
+                                      props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx36(
                                         IconRound,
                                         {
                                           name: entitlement.feature.icon,
@@ -20374,7 +20546,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                           $justifyContent: "center",
                                           $gap: "0.5rem",
                                           children: [
-                                            /* @__PURE__ */ jsx35(
+                                            /* @__PURE__ */ jsx36(
                                               Text,
                                               {
                                                 $font: theme.typography.text.fontFamily,
@@ -20483,7 +20655,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $justifyContent: "start",
                                   $marginTop: "1rem",
                                   children: [
-                                    /* @__PURE__ */ jsx35(
+                                    /* @__PURE__ */ jsx36(
                                       Icon2,
                                       {
                                         name: isExpanded ? "chevron-up" : "chevron-down",
@@ -20495,7 +20667,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                         }
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx35(
+                                    /* @__PURE__ */ jsx36(
                                       Text,
                                       {
                                         onClick: () => handleToggleShowAll(plan.id),
@@ -20520,7 +20692,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $gap: "0.25rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ jsx35(
+                                  /* @__PURE__ */ jsx36(
                                     Icon2,
                                     {
                                       name: "check-rounded",
@@ -20531,7 +20703,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx35(
+                                  /* @__PURE__ */ jsx36(
                                     Text,
                                     {
                                       $font: theme.typography.text.fontFamily,
@@ -20544,7 +20716,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   )
                                 ]
                               }
-                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ jsx35(
+                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ jsx36(
                               EmbedButton,
                               {
                                 type: "button",
@@ -20568,14 +20740,14 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: plan.custom ? /* @__PURE__ */ jsx35(
+                                children: plan.custom ? /* @__PURE__ */ jsx36(
                                   ButtonLink,
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
                                     children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
                                   }
-                                ) : !plan.valid ? /* @__PURE__ */ jsx35(
+                                ) : !plan.valid ? /* @__PURE__ */ jsx36(
                                   Tooltip,
                                   {
                                     trigger: t2("Over usage limit"),
@@ -20597,14 +20769,14 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx35(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment12, { children: [
-          props.header.isVisible && /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment12, { children: [
+          props.header.isVisible && /* @__PURE__ */ jsx36(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ jsx35(
+              children: /* @__PURE__ */ jsx36(
                 Text,
                 {
                   $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20616,7 +20788,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               )
             }
           ),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             Box,
             {
               $display: "grid",
@@ -20642,7 +20814,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
                       /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                        /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(
+                        /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(
                           Text,
                           {
                             $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20652,7 +20824,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             children: addOn.name
                           }
                         ) }),
-                        props.addOns.showDescription && /* @__PURE__ */ jsx35(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx35(
+                        props.addOns.showDescription && /* @__PURE__ */ jsx36(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx36(
                           Text,
                           {
                             $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -20663,7 +20835,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           }
                         ) }),
                         /* @__PURE__ */ jsxs28(Box, { children: [
-                          /* @__PURE__ */ jsx35(
+                          /* @__PURE__ */ jsx36(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -20687,7 +20859,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ jsx35(
+                        isActiveAddOn && /* @__PURE__ */ jsx36(
                           Flex,
                           {
                             $position: "absolute",
@@ -20696,7 +20868,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             $backgroundColor: theme.primary,
                             $borderRadius: "9999px",
                             $padding: "0.125rem 0.85rem",
-                            children: /* @__PURE__ */ jsx35(
+                            children: /* @__PURE__ */ jsx36(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -20717,7 +20889,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $gap: `${cardPadding}rem`,
                           $flexGrow: 1,
                           children: [
-                            props.addOns.showEntitlements && /* @__PURE__ */ jsx35(
+                            props.addOns.showEntitlements && /* @__PURE__ */ jsx36(
                               Flex,
                               {
                                 $flexDirection: "column",
@@ -20726,7 +20898,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $flexGrow: 1,
                                 children: addOn.entitlements.map(
                                   (entitlement, entitlementIndex) => {
-                                    return /* @__PURE__ */ jsx35(
+                                    return /* @__PURE__ */ jsx36(
                                       Flex,
                                       {
                                         $flexWrap: "wrap",
@@ -20734,7 +20906,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                         $alignItems: "center",
                                         $gap: "1rem",
                                         children: /* @__PURE__ */ jsxs28(Flex, { $gap: "1rem", children: [
-                                          props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx35(
+                                          props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx36(
                                             IconRound,
                                             {
                                               name: entitlement.feature.icon,
@@ -20745,7 +20917,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                               ]
                                             }
                                           ),
-                                          entitlement.feature?.name && /* @__PURE__ */ jsx35(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx35(
+                                          entitlement.feature?.name && /* @__PURE__ */ jsx36(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx36(
                                             Text,
                                             {
                                               $font: theme.typography.text.fontFamily,
@@ -20789,7 +20961,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 )
                               }
                             ),
-                            props.upgrade.isVisible && /* @__PURE__ */ jsx35(
+                            props.upgrade.isVisible && /* @__PURE__ */ jsx36(
                               EmbedButton,
                               {
                                 type: "button",
@@ -20825,10 +20997,39 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
 });
 PricingTable.displayName = "PricingTable";
 
+// src/components/elements/text/Text.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx37 } from "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 = forwardRef14(({ children, className, ...rest }, ref) => {
+  const props = resolveDesignProps9(rest);
+  const theme = nt();
+  return /* @__PURE__ */ jsx37(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx37(
+    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
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var resolveDesignProps8 = (props) => {
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var resolveDesignProps10 = (props) => {
   return {
     button: {
       text: props.button?.text ?? "Unsubscribe",
@@ -20839,8 +21040,8 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var UnsubscribeButton = forwardRef13(({ children, className, ...rest }, ref) => {
-  const props = resolveDesignProps8(rest);
+var UnsubscribeButton = forwardRef15(({ 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;
@@ -20858,7 +21059,7 @@ var UnsubscribeButton = forwardRef13(({ children, className, ...rest }, ref) =>
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     Element,
     {
       as: Flex,
@@ -20866,7 +21067,7 @@ var UnsubscribeButton = forwardRef13(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx38(
         EmbedButton,
         {
           $size: props.button.size,
@@ -20887,9 +21088,9 @@ var UnsubscribeButton = forwardRef13(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef14, useMemo as useMemo15 } from "react";
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
-function resolveDesignProps9(props) {
+import { forwardRef as forwardRef16, useMemo as useMemo15 } from "react";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+function resolveDesignProps11(props) {
   return {
     header: {
       isVisible: props.header?.isVisible ?? true,
@@ -20907,8 +21108,8 @@ function resolveDesignProps9(props) {
     }
   };
 }
-var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps9(rest);
+var UpcomingBill = forwardRef16(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
@@ -20949,7 +21150,7 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx37(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
+        props.header.isVisible && /* @__PURE__ */ jsx39(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20964,7 +21165,7 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
           }
         ) }),
         /* @__PURE__ */ jsxs29(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ jsx37(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx37(
+          props.price.isVisible && /* @__PURE__ */ jsx39(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx39(
             Text,
             {
               $font: theme.typography[props.price.fontStyle].fontFamily,
@@ -20978,7 +21179,7 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
               )
             }
           ) }),
-          /* @__PURE__ */ jsx37(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx39(
             Text,
             {
               $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -20991,7 +21192,7 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
           ) })
         ] }),
         discounts.length > 0 && /* @__PURE__ */ jsxs29(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -21001,8 +21202,8 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ jsx37(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+            /* @__PURE__ */ jsx39(
               Flex,
               {
                 $alignItems: "center",
@@ -21011,7 +21212,7 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
                 $borderStyle: "solid",
                 $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                 $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ jsx37(
+                children: /* @__PURE__ */ jsx39(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -21023,7 +21224,7 @@ var UpcomingBill = forwardRef14(({ className, ...rest }, ref) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -21058,7 +21259,8 @@ var components = {
   PaymentMethod,
   Invoices,
   PricingTable,
-  UnsubscribeButton
+  UnsubscribeButton,
+  ButtonElement
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};
@@ -21091,10 +21293,10 @@ function createRenderer(options) {
 }
 
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(
     Flex,
     {
       $width: "100%",
@@ -21102,7 +21304,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx38(Loader, { $size: "2xl", $color: "#194BFB" })
+      children: /* @__PURE__ */ jsx40(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
@@ -21119,7 +21321,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21130,7 +21332,7 @@ var Error2 = ({ message }) => {
             children: "Error"
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21147,23 +21349,23 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = useState16(/* @__PURE__ */ jsx38(Loading, {}));
+  const [children, setChildren] = useState16(/* @__PURE__ */ jsx40(Loading, {}));
   useEffect8(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     console.error(error);
-    return /* @__PURE__ */ jsx38(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx40(Error2, { message: error.message });
   }
   if (isPending) {
-    return /* @__PURE__ */ jsx38(Loading, {});
+    return /* @__PURE__ */ jsx40(Loading, {});
   }
-  return /* @__PURE__ */ jsx38(Fragment13, { children });
+  return /* @__PURE__ */ jsx40(Fragment13, { children });
 };
 
 // src/components/embed/Embed.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var SchematicEmbed = ({
   id,
   accessToken,
@@ -21171,25 +21373,26 @@ var SchematicEmbed = ({
   debug
 }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx39("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ jsx41("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx39("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ jsx41("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     EmbedProvider,
     {
       id,
       accessToken,
       apiConfig,
       debug,
-      children: /* @__PURE__ */ jsx39(ComponentTree, {})
+      children: /* @__PURE__ */ jsx41(ComponentTree, {})
     }
   );
 };
 export {
   Box,
   Button2 as Button,
+  ButtonElement,
   Card,
   Column,
   Container2 as Container,
@@ -21208,6 +21411,7 @@ export {
   MeteredFeatures,
   Modal,
   ModalHeader,
+  Notice,
   PaymentMethod,
   PaymentMethodDetails,
   PlanManager,
@@ -21217,6 +21421,7 @@ export {
   SchematicEmbed,
   StyledCard,
   Text,
+  TextElement,
   TextPropNames,
   Tooltip,
   UnsubscribeButton,