@schematichq/schematic-components 0.7.1 → 0.7.4

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-";
@@ -3233,7 +2964,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.16";
+var v = "6.1.17";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
@@ -3242,7 +2973,7 @@ var E = /invalid hook call/i;
 var N = /* @__PURE__ */ new Set();
 var P = function(t2, n) {
   if (true) {
-    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.", i2 = console.error;
+    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n", i2 = console.error;
     try {
       var a2 = true;
       console.error = function(t3) {
@@ -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());
@@ -10312,42 +10043,314 @@ Inflate$1.prototype.onEnd = function(status) {
     if (this.options.to === "string") {
       this.result = this.chunks.join("");
     } else {
-      this.result = common.flattenChunks(this.chunks);
+      this.result = common.flattenChunks(this.chunks);
+    }
+  }
+  this.chunks = [];
+  this.err = status;
+  this.msg = this.strm.msg;
+};
+function inflate$1(input, options) {
+  const inflator = new Inflate$1(options);
+  inflator.push(input);
+  if (inflator.err) throw inflator.msg || messages[inflator.err];
+  return inflator.result;
+}
+function inflateRaw$1(input, options) {
+  options = options || {};
+  options.raw = true;
+  return inflate$1(input, options);
+}
+var Inflate_1$1 = Inflate$1;
+var inflate_2 = inflate$1;
+var inflateRaw_1$1 = inflateRaw$1;
+var ungzip$1 = inflate$1;
+var constants = constants$2;
+var inflate_1$1 = {
+  Inflate: Inflate_1$1,
+  inflate: inflate_2,
+  inflateRaw: inflateRaw_1$1,
+  ungzip: ungzip$1,
+  constants
+};
+var { Deflate, deflate, deflateRaw, gzip } = deflate_1$1;
+var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
+var inflate_1 = inflate;
+
+// src/context/embed.tsx
+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());
     }
-  }
-  this.chunks = [];
-  this.err = status;
-  this.msg = this.strm.msg;
-};
-function inflate$1(input, options) {
-  const inflator = new Inflate$1(options);
-  inflator.push(input);
-  if (inflator.err) throw inflator.msg || messages[inflator.err];
-  return inflator.result;
-}
-function inflateRaw$1(input, options) {
-  options = options || {};
-  options.raw = true;
-  return inflate$1(input, options);
-}
-var Inflate_1$1 = Inflate$1;
-var inflate_2 = inflate$1;
-var inflateRaw_1$1 = inflateRaw$1;
-var ungzip$1 = inflate$1;
-var constants = constants$2;
-var inflate_1$1 = {
-  Inflate: Inflate_1$1,
-  inflate: inflate_2,
-  inflateRaw: inflateRaw_1$1,
-  ungzip: ungzip$1,
-  constants
+  });
 };
-var { Deflate, deflate, deflateRaw, gzip } = deflate_1$1;
-var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
-var inflate_1 = inflate;
 
-// src/context/embed.tsx
-import { createContext as createContext2, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+// 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 = [];
@@ -10672,7 +10675,24 @@ 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"] == null ? void 0 : json["per_unit_price"],
+    perUnitPriceDecimal: json["per_unit_price_decimal"] == null ? void 0 : json["per_unit_price_decimal"],
+    upTo: json["up_to"] == null ? void 0 : json["up_to"]
   };
 }
 
@@ -10685,6 +10705,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 +10716,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 +10763,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 +10776,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 +10786,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 +11479,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 +11828,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 +11859,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 +13137,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.1";
+      headers["X-Schematic-Components-Version"] = "0.7.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13400,9 +13476,6 @@ 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]) {
@@ -13617,6 +13690,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]);
@@ -13764,6 +13839,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) {
@@ -14227,14 +14320,6 @@ var ModalHeader = ({
   );
 };
 
-// src/components/ui/progress-bar/styles.ts
-var Container3 = dt.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-`;
-
 // src/components/ui/progress-bar/ProgressBar.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var progressColorMap = [
@@ -14251,7 +14336,6 @@ var ProgressBar = ({
   total = 0,
   color = "gray",
   bgColor = "#F2F4F7",
-  barWidth = "100%",
   ...props
 }) => {
   const theme = nt();
@@ -14262,18 +14346,18 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ jsxs4(Container3, { ...props, children: [
-    /* @__PURE__ */ jsx7(
-      Flex,
-      {
-        $position: "relative",
-        $alignItems: "center",
-        $width: `${barWidth}`,
-        $maxWidth: "100%",
-        children: /* @__PURE__ */ jsx7(
-          Flex,
+  return /* @__PURE__ */ jsxs4(
+    Flex,
+    {
+      $position: "relative",
+      $alignItems: "center",
+      $gap: "1rem",
+      $width: "100%",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx7(
+          Box,
           {
-            $position: "relative",
             $overflow: "hidden",
             $width: "100%",
             $height: `${8 / TEXT_BASE_SIZE}rem`,
@@ -14284,29 +14368,28 @@ var ProgressBar = ({
               {
                 $width: `${Math.min(progress, 100)}%`,
                 $height: "100%",
-                $backgroundColor: barColorMap[color],
-                $borderRadius: "9999px"
+                $backgroundColor: barColorMap[color]
               }
             )
           }
+        ),
+        total && /* @__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
@@ -14355,7 +14438,9 @@ import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useRe
 import { createPortal } from "react-dom";
 
 // src/components/ui/tooltip/styles.ts
-var Trigger = dt.div``;
+var Trigger = dt.div`
+  width: 100%;
+`;
 var coords = (position2) => {
   let x2 = 0;
   let y2 = 0;
@@ -14511,13 +14596,15 @@ var Tooltip = ({
     }
   }, [position2]);
   useLayoutEffect3(() => {
-    updateCoords();
     const handleResize = (0, import_debounce.default)(updateCoords, DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
+  useLayoutEffect3(() => {
+    updateCoords();
+  }, [updateCoords, show]);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx8(
       Trigger,
@@ -16242,7 +16329,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "acacia";
+var RELEASE_TRAIN = "basil";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
@@ -16282,7 +16369,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "6.1.0",
+    version: "7.0.0",
     startTime
   });
 };
@@ -16357,7 +16444,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("6.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -17359,7 +17446,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();
@@ -18288,9 +18375,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,
@@ -18389,7 +18539,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,
@@ -18400,7 +18550,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,
@@ -18417,8 +18567,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,
@@ -18446,8 +18596,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();
@@ -18491,7 +18641,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,
@@ -18525,7 +18675,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,
@@ -18536,7 +18686,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           ]
                         }
                       ),
-                      feature?.name && /* @__PURE__ */ jsx28(
+                      feature?.name && /* @__PURE__ */ jsx29(
                         Text,
                         {
                           $font: theme.typography[props.icons.fontStyle].fontFamily,
@@ -18566,7 +18716,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx28(
+                shouldShowDetails && /* @__PURE__ */ jsx29(
                   Details,
                   {
                     featureUsage: usage,
@@ -18580,7 +18730,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",
@@ -18592,7 +18742,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -18613,9 +18763,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,
@@ -18648,7 +18798,7 @@ function formatInvoices(invoices = []) {
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
   const theme = nt();
-  const dateText = /* @__PURE__ */ jsx29(
+  const dateText = /* @__PURE__ */ jsx30(
     Text,
     {
       ...url && { onClick: () => {
@@ -18661,12 +18811,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();
@@ -18685,8 +18835,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,
@@ -18696,9 +18846,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,
@@ -18706,7 +18856,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,
@@ -18719,14 +18869,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,
@@ -18743,10 +18893,10 @@ 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.div`
+var Container3 = dt.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -18786,8 +18936,8 @@ var Container4 = dt.div`
 `;
 
 // 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: {
@@ -18812,8 +18962,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();
@@ -18842,7 +18992,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx30(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ jsx31(Container3, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -18858,7 +19008,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,
@@ -18867,8 +19017,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
           color: isOverage ? "blue" : progressColorMap[Math.floor(
             Math.min(usage, limit) / limit * (progressColorMap.length - 1)
           )],
-          ...isOverage && { bgColor: "#EF4444" },
-          $flexGrow: 1
+          ...isOverage && { bgColor: "#EF4444" }
         }
       );
       return /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column-reverse", children: [
@@ -18884,7 +19033,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,
@@ -18932,7 +19081,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,
@@ -18956,7 +19105,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,
@@ -18972,7 +19121,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         ] }) : feature.name
                       }
                     ),
-                    props.description.isVisible && /* @__PURE__ */ jsx30(
+                    props.description.isVisible && /* @__PURE__ */ jsx31(
                       Text,
                       {
                         as: Box,
@@ -18991,7 +19140,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,
@@ -19015,7 +19164,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,
@@ -19041,11 +19190,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,
@@ -19062,7 +19211,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   $flexGrow: 1
                 }
               ) : progressBar,
-              priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx30(
+              priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx31(
                 EmbedButton,
                 {
                   onClick: () => {
@@ -19086,11 +19235,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,
@@ -19099,17 +19248,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,
@@ -19200,7 +19349,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,
@@ -19210,7 +19359,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,
@@ -19230,15 +19379,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,
@@ -19292,8 +19441,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,
@@ -19307,12 +19456,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,
@@ -19324,7 +19473,7 @@ var PaymentListElement = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx31(Box, { children: /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
           Text,
           {
             onClick: () => {
@@ -19337,7 +19486,7 @@ var PaymentListElement = ({
             children: t("Set default")
           }
         ) }),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           Box,
           {
             $cursor: "pointer",
@@ -19345,7 +19494,7 @@ var PaymentListElement = ({
             onClick: () => {
               handleDelete(paymentMethod.id);
             },
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx32(
               Icon2,
               {
                 name: "close",
@@ -19363,8 +19512,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,
@@ -19376,8 +19525,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;
@@ -19395,7 +19544,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,
@@ -19410,8 +19559,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,
@@ -19426,7 +19575,7 @@ var resolveDesignProps5 = () => {
 var PaymentMethodDetails = ({
   setPaymentMethodId
 }) => {
-  const props = resolveDesignProps5();
+  const props = resolveDesignProps6();
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, setData } = useEmbed();
@@ -19544,7 +19693,7 @@ var PaymentMethodDetails = ({
     [api, data, setData, t2]
   );
   return /* @__PURE__ */ jsxs26(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ jsx33(
+    isLoading && /* @__PURE__ */ jsx34(
       Flex,
       {
         $position: "absolute",
@@ -19556,7 +19705,7 @@ var PaymentMethodDetails = ({
         $zIndex: 1,
         $backgroundColor: "black",
         $opacity: 0.5,
-        children: /* @__PURE__ */ jsx33(Loader, { $color: theme.primary, $size: "2xl" })
+        children: /* @__PURE__ */ jsx34(Loader, { $color: theme.primary, $size: "2xl" })
       }
     ),
     /* @__PURE__ */ jsxs26(
@@ -19569,7 +19718,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,
@@ -19598,7 +19747,7 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ jsx33(
+              children: /* @__PURE__ */ jsx34(
                 PaymentForm,
                 {
                   onConfirm: async (paymentMethodId) => {
@@ -19610,7 +19759,7 @@ var PaymentMethodDetails = ({
               )
             }
           ) : /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               PaymentMethodElement,
               {
                 size: "lg",
@@ -19619,7 +19768,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,
@@ -19629,7 +19778,7 @@ var PaymentMethodDetails = ({
                 $color: theme.typography.link.color,
                 children: [
                   t2("Choose different payment method"),
-                  /* @__PURE__ */ jsx33(
+                  /* @__PURE__ */ jsx34(
                     Icon2,
                     {
                       name: "chevron-down",
@@ -19645,9 +19794,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,
@@ -19656,9 +19805,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,
@@ -19675,9 +19824,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,
@@ -19705,8 +19854,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();
@@ -19755,7 +19904,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Text,
             {
               as: "h3",
@@ -19766,7 +19915,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               children: t2("Trial ends in", { days: trialEndDays.toString() })
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Text,
             {
               as: "p",
@@ -19793,7 +19942,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Text,
             {
               as: "h3",
@@ -19804,7 +19953,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               children: t2("Subscription canceled")
             }
           ),
-          billingSubscription?.cancelAt && /* @__PURE__ */ jsx34(
+          billingSubscription?.cancelAt && /* @__PURE__ */ jsx35(
             Text,
             {
               as: "p",
@@ -19843,7 +19992,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,
@@ -19855,7 +20004,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,
@@ -19868,7 +20017,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,
@@ -19881,7 +20030,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx34(
+                  !isUsageBasedPlan && /* @__PURE__ */ jsx35(
                     Text,
                     {
                       $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -19899,7 +20048,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,
@@ -19918,7 +20067,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,
@@ -19950,7 +20099,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,
@@ -19997,7 +20146,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,
@@ -20076,7 +20225,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               []
             )
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx34(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx35(
             EmbedButton,
             {
               type: "button",
@@ -20101,9 +20250,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,
@@ -20142,8 +20291,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();
@@ -20205,7 +20354,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                 }
               },
               children: [
-                /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36(
                   Text,
                   {
                     $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -20215,7 +20364,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,
@@ -20226,7 +20375,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",
@@ -20268,7 +20417,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,
@@ -20278,7 +20427,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,
@@ -20289,7 +20438,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                               }
                             ) }),
                             /* @__PURE__ */ jsxs28(Box, { children: [
-                              /* @__PURE__ */ jsx35(
+                              /* @__PURE__ */ jsx36(
                                 Text,
                                 {
                                   $font: headerPriceFontStyle.fontFamily,
@@ -20313,7 +20462,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ jsx35(
+                            isActivePlan && /* @__PURE__ */ jsx36(
                               Flex,
                               {
                                 $position: "absolute",
@@ -20322,7 +20471,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,
@@ -20347,7 +20496,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,
@@ -20373,7 +20522,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,
@@ -20391,7 +20540,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                           $justifyContent: "center",
                                           $gap: "0.5rem",
                                           children: [
-                                            /* @__PURE__ */ jsx35(
+                                            /* @__PURE__ */ jsx36(
                                               Text,
                                               {
                                                 $font: theme.typography.text.fontFamily,
@@ -20500,7 +20649,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $justifyContent: "start",
                                   $marginTop: "1rem",
                                   children: [
-                                    /* @__PURE__ */ jsx35(
+                                    /* @__PURE__ */ jsx36(
                                       Icon2,
                                       {
                                         name: isExpanded ? "chevron-up" : "chevron-down",
@@ -20512,7 +20661,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                         }
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx35(
+                                    /* @__PURE__ */ jsx36(
                                       Text,
                                       {
                                         onClick: () => handleToggleShowAll(plan.id),
@@ -20537,7 +20686,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $gap: "0.25rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ jsx35(
+                                  /* @__PURE__ */ jsx36(
                                     Icon2,
                                     {
                                       name: "check-rounded",
@@ -20548,7 +20697,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx35(
+                                  /* @__PURE__ */ jsx36(
                                     Text,
                                     {
                                       $font: theme.typography.text.fontFamily,
@@ -20561,7 +20710,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",
@@ -20585,14 +20734,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"),
@@ -20614,14 +20763,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,
@@ -20633,7 +20782,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               )
             }
           ),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             Box,
             {
               $display: "grid",
@@ -20659,7 +20808,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,
@@ -20669,7 +20818,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,
@@ -20680,7 +20829,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,
@@ -20704,7 +20853,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ jsx35(
+                        isActiveAddOn && /* @__PURE__ */ jsx36(
                           Flex,
                           {
                             $position: "absolute",
@@ -20713,7 +20862,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,
@@ -20734,7 +20883,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",
@@ -20743,7 +20892,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",
@@ -20751,7 +20900,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,
@@ -20762,7 +20911,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,
@@ -20806,7 +20955,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 )
                               }
                             ),
-                            props.upgrade.isVisible && /* @__PURE__ */ jsx35(
+                            props.upgrade.isVisible && /* @__PURE__ */ jsx36(
                               EmbedButton,
                               {
                                 type: "button",
@@ -20842,10 +20991,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",
@@ -20856,8 +21034,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;
@@ -20875,7 +21053,7 @@ var UnsubscribeButton = forwardRef13(({ children, className, ...rest }, ref) =>
       variant: "text"
     }
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     Element,
     {
       as: Flex,
@@ -20883,7 +21061,7 @@ var UnsubscribeButton = forwardRef13(({ children, className, ...rest }, ref) =>
       className,
       $flexDirection: "column",
       $gap: "2rem",
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx38(
         EmbedButton,
         {
           $size: props.button.size,
@@ -20904,9 +21082,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,
@@ -20924,8 +21102,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();
@@ -20966,7 +21144,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,
@@ -20981,7 +21159,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,
@@ -20995,7 +21173,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,
@@ -21008,7 +21186,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,
@@ -21018,8 +21196,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",
@@ -21028,7 +21206,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,
@@ -21040,7 +21218,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,
@@ -21075,7 +21253,8 @@ var components = {
   PaymentMethod,
   Invoices,
   PricingTable,
-  UnsubscribeButton
+  UnsubscribeButton,
+  ButtonElement
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};
@@ -21108,10 +21287,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%",
@@ -21119,7 +21298,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx38(Loader, { $color: "#194BFB", $size: "2xl" })
+      children: /* @__PURE__ */ jsx40(Loader, { $color: "#194BFB", $size: "2xl" })
     }
   );
 };
@@ -21136,7 +21315,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21147,7 +21326,7 @@ var Error2 = ({ message }) => {
             children: "Error"
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -21164,23 +21343,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,
@@ -21188,25 +21367,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,
@@ -21235,6 +21415,7 @@ export {
   SchematicEmbed,
   StyledCard,
   Text,
+  TextElement,
   TextPropNames,
   Tooltip,
   UnsubscribeButton,