npm - @schematichq/schematic-components - Versions diffs - 2.12.0 → 2.13.1-rc.1 - Mend

@schematichq/schematic-components 2.12.0 → 2.13.1-rc.1

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

Files changed (4) hide show

package/dist/schematic-components.cjs.js +385 -279
package/dist/schematic-components.d.ts +169 -39
package/dist/schematic-components.esm.js +385 -279
package/package.json +8 -8

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

@@ -4952,6 +4952,7 @@ var en_default = {
     "An invoice is created when charges reach $X; the rest is billed monthly.": "An invoice is created when charges reach {{amount}}; the rest is billed monthly.",
     "An unknown error occurred.": "An unknown error occurred.",
     Billed: "Billed {{period}}",
+    "Buy credits": "Buy credits",
     "Cancel subscription": "Cancel subscription",
     "Cannot change to this plan.": "{{reason, list(type: 'conjunction')}} usage is over the limit.",
     "Cannot downgrade entitlement": "Cannot downgrade to a quantity lower than current usage.",
@@ -6764,7 +6765,7 @@ var i;
 var c2 = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var a2 = "active";
 var l2 = "data-styled-version";
-var u2 = "6.4.1";
+var u2 = "6.4.2";
 var h2 = "/*!sc*/\n";
 var d2 = "undefined" != typeof window && "undefined" != typeof document;
 function p2(e2) {
@@ -6773,7 +6774,7 @@ function p2(e2) {
     if (void 0 !== t3 && "" !== t3) return "false" !== t3;
   }
 }
-var f2 = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : null !== (i = null !== (r2 = p2("REACT_APP_SC_DISABLE_SPEEDY")) && void 0 !== r2 ? r2 : p2("SC_DISABLE_SPEEDY")) && void 0 !== i ? i : "undefined" == typeof process || void 0 === process.env || true);
+var f2 = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : null !== (i = null !== (r2 = p2("REACT_APP_SC_DISABLE_SPEEDY")) && void 0 !== r2 ? r2 : p2("SC_DISABLE_SPEEDY")) && void 0 !== i ? i : "undefined" != typeof process && void 0 !== process.env && true);
 var m2 = "sc-keyframes-";
 var g2 = true ? { 1: "Cannot create styled-component for component: %s.\n\n", 2: "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n", 3: "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n", 4: "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n", 5: "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n", 6: "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n", 7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n', 8: 'ThemeProvider: Please make your "theme" prop an object.\n\n', 9: "Missing document `<head>`\n\n", 10: "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n", 11: "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n", 12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://styled-components.com/docs/api#css\n\n", 13: "%s is not a styled component and cannot be referred to via component selector. See https://styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n", 14: 'ThemeProvider: "theme" prop is required.\n\n', 15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n", 16: "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n", 17: "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n\n", 18: "Accessing `useTheme` hook outside of a `<ThemeProvider>` element.\n\n```jsx\nimport { useTheme } from 'styled-components';\nexport function StyledCompoent({ children }) {\n  const theme = useTheme();\n  return <div style={{ width: theme.sizes.full }}>{children}</div>;\n}\n\nimport { StyledComponent } from './StyledComponent';\nimport { theme } from './theme';\nexport function App() {\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledComponent />\n    </ThemeProvider>\n  );\n}\n```\n\nIf you need access to the theme in an uncertain composition scenario, `React.useContext(ThemeContext)` will not emit an error if there is no `ThemeProvider` ancestor.\n" } : {};
 function v2(e2, ...t3) {
@@ -6895,28 +6896,29 @@ function se2(e2, t3, n2) {
 function re2(e2) {
   return "function" == typeof e2;
 }
-function ie2(e2) {
-  return "object" == typeof e2 && "styledComponentId" in e2;
+var ie2 = /* @__PURE__ */ Symbol.for("react.forward_ref");
+function ce2(e2) {
+  return null != e2 && ("object" == typeof e2 || "function" == typeof e2) && e2.$$typeof === ie2 && "styledComponentId" in e2;
 }
-function ce2(e2, t3) {
+function ae2(e2, t3) {
   return e2 && t3 ? e2 + " " + t3 : e2 || t3 || "";
 }
-function ae2(e2, t3) {
+function le2(e2, t3) {
   return e2.join(t3 || "");
 }
-function le2(e2) {
+function ue2(e2) {
   return null !== e2 && "object" == typeof e2 && e2.constructor.name === Object.name && !("props" in e2 && e2.$$typeof);
 }
-function ue2(e2, t3, n2 = false) {
-  if (!n2 && !le2(e2) && !Array.isArray(e2)) return t3;
-  if (Array.isArray(t3)) for (let n3 = 0; n3 < t3.length; n3++) e2[n3] = ue2(e2[n3], t3[n3]);
-  else if (le2(t3)) for (const n3 in t3) e2[n3] = ue2(e2[n3], t3[n3]);
+function he2(e2, t3, n2 = false) {
+  if (!n2 && !ue2(e2) && !Array.isArray(e2)) return t3;
+  if (Array.isArray(t3)) for (let n3 = 0; n3 < t3.length; n3++) e2[n3] = he2(e2[n3], t3[n3]);
+  else if (ue2(t3)) for (const n3 in t3) e2[n3] = he2(e2[n3], t3[n3]);
   return e2;
 }
-function he2(e2, t3) {
+function de2(e2, t3) {
   Object.defineProperty(e2, "toString", { value: t3 });
 }
-var de2 = class {
+var pe2 = class {
   constructor(e2) {
     this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2, this._cGroup = 0, this._cIndex = 0;
   }
@@ -6955,66 +6957,66 @@ var de2 = class {
     return t3;
   }
 };
-var pe2 = `style[${c2}][${l2}="${u2}"]`;
-var fe2 = new RegExp(`^${c2}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`);
-var me2 = (e2) => "undefined" != typeof ShadowRoot && e2 instanceof ShadowRoot || "host" in e2 && 11 === e2.nodeType;
-var ye2 = (e2) => {
+var fe2 = `style[${c2}][${l2}="${u2}"]`;
+var me2 = new RegExp(`^${c2}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`);
+var ye2 = (e2) => "undefined" != typeof ShadowRoot && e2 instanceof ShadowRoot || "host" in e2 && 11 === e2.nodeType;
+var ge2 = (e2) => {
   if (!e2) return document;
-  if (me2(e2)) return e2;
+  if (ye2(e2)) return e2;
   if ("getRootNode" in e2) {
     const t3 = e2.getRootNode();
-    if (me2(t3)) return t3;
+    if (ye2(t3)) return t3;
   }
   return document;
 };
-var ge2 = (e2, t3, n2) => {
+var ve2 = (e2, t3, n2) => {
   const o2 = n2.split(",");
   let s;
   for (let n3 = 0, r3 = o2.length; n3 < r3; n3++) (s = o2[n3]) && e2.registerName(t3, s);
 };
-var ve2 = (e2, t3) => {
+var Se2 = (e2, t3) => {
   var n2;
   const o2 = (null !== (n2 = t3.textContent) && void 0 !== n2 ? n2 : "").split(h2), s = [];
   for (let t4 = 0, n3 = o2.length; t4 < n3; t4++) {
     const n4 = o2[t4].trim();
     if (!n4) continue;
-    const r3 = n4.match(fe2);
+    const r3 = n4.match(me2);
     if (r3) {
       const t5 = 0 | parseInt(r3[1], 10), n5 = r3[2];
-      0 !== t5 && (E2(n5, t5), ge2(e2, n5, r3[3]), e2.getTag().insertRules(t5, s)), s.length = 0;
+      0 !== t5 && (E2(n5, t5), ve2(e2, n5, r3[3]), e2.getTag().insertRules(t5, s)), s.length = 0;
     } else s.push(n4);
   }
 };
-var Se2 = (e2) => {
-  const t3 = ye2(e2.options.target).querySelectorAll(pe2);
+var be2 = (e2) => {
+  const t3 = ge2(e2.options.target).querySelectorAll(fe2);
   for (let n2 = 0, o2 = t3.length; n2 < o2; n2++) {
     const o3 = t3[n2];
-    o3 && o3.getAttribute(c2) !== a2 && (ve2(e2, o3), o3.parentNode && o3.parentNode.removeChild(o3));
+    o3 && o3.getAttribute(c2) !== a2 && (Se2(e2, o3), o3.parentNode && o3.parentNode.removeChild(o3));
   }
 };
-var be2 = false;
-function we2() {
-  if (false !== be2) return be2;
+var we2 = false;
+function Ne2() {
+  if (false !== we2) return we2;
   if ("undefined" != typeof document) {
     const e2 = document.head.querySelector('meta[property="csp-nonce"]');
-    if (e2) return be2 = e2.nonce || e2.getAttribute("content") || void 0;
+    if (e2) return we2 = e2.nonce || e2.getAttribute("content") || void 0;
     const t3 = document.head.querySelector('meta[name="sc-nonce"]');
-    if (t3) return be2 = t3.getAttribute("content") || void 0;
+    if (t3) return we2 = t3.getAttribute("content") || void 0;
   }
-  return be2 = "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
+  return we2 = "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
 }
-var Ne2 = (e2, t3) => {
+var Ce2 = (e2, t3) => {
   const n2 = document.head, o2 = e2 || n2, s = document.createElement("style"), r3 = ((e3) => {
     const t4 = Array.from(e3.querySelectorAll(`style[${c2}]`));
     return t4[t4.length - 1];
   })(o2), i2 = void 0 !== r3 ? r3.nextSibling : null;
   s.setAttribute(c2, a2), s.setAttribute(l2, u2);
-  const h3 = t3 || we2();
+  const h3 = t3 || Ne2();
   return h3 && s.setAttribute("nonce", h3), o2.insertBefore(s, i2), s;
 };
-var Ce2 = class {
+var Oe2 = class {
   constructor(e2, t3) {
-    this.element = Ne2(e2, t3), this.element.appendChild(document.createTextNode("")), this.sheet = ((e3) => {
+    this.element = Ce2(e2, t3), this.element.appendChild(document.createTextNode("")), this.sheet = ((e3) => {
       var t4;
       if (e3.sheet) return e3.sheet;
       const n2 = null !== (t4 = e3.getRootNode().styleSheets) && void 0 !== t4 ? t4 : document.styleSheets;
@@ -7040,9 +7042,9 @@ var Ce2 = class {
     return t3 && t3.cssText ? t3.cssText : "";
   }
 };
-var Oe2 = class {
+var Ee2 = class {
   constructor(e2, t3) {
-    this.element = Ne2(e2, t3), this.nodes = this.element.childNodes, this.length = 0;
+    this.element = Ce2(e2, t3), this.nodes = this.element.childNodes, this.length = 0;
   }
   insertRule(e2, t3) {
     if (e2 <= this.length && e2 >= 0) {
@@ -7058,14 +7060,14 @@ var Oe2 = class {
     return e2 < this.length ? this.nodes[e2].textContent : "";
   }
 };
-var Ee2 = d2;
-var Ae2 = { isServer: !d2, useCSSOMInjection: !f2 };
-var Pe2 = class _Pe {
+var Ae2 = d2;
+var Pe2 = { isServer: !d2, useCSSOMInjection: !f2 };
+var _e2 = class __e {
   static registerId(e2) {
     return C2(e2);
   }
   constructor(e2 = $2, t3 = {}, n2) {
-    this.options = Object.assign(Object.assign({}, Ae2), e2), this.gs = t3, this.keyframeIds = /* @__PURE__ */ new Set(), this.names = new Map(n2), this.server = !!e2.isServer, !this.server && d2 && Ee2 && (Ee2 = false, Se2(this)), he2(this, () => ((e3) => {
+    this.options = Object.assign(Object.assign({}, Pe2), e2), this.gs = t3, this.keyframeIds = /* @__PURE__ */ new Set(), this.names = new Map(n2), this.server = !!e2.isServer, !this.server && d2 && Ae2 && (Ae2 = false, be2(this)), de2(this, () => ((e3) => {
       const t4 = e3.getTag(), { length: n3 } = t4;
       let o2 = "";
       for (let s = 0; s < n3; s++) {
@@ -7084,17 +7086,17 @@ var Pe2 = class _Pe {
     })(this));
   }
   rehydrate() {
-    !this.server && d2 && Se2(this);
+    !this.server && d2 && be2(this);
   }
   reconstructWithOptions(e2, t3 = true) {
-    const n2 = new _Pe(Object.assign(Object.assign({}, this.options), e2), this.gs, t3 && this.names || void 0);
-    return n2.keyframeIds = new Set(this.keyframeIds), !this.server && d2 && e2.target !== this.options.target && ye2(this.options.target) !== ye2(e2.target) && Se2(n2), n2;
+    const n2 = new __e(Object.assign(Object.assign({}, this.options), e2), this.gs, t3 && this.names || void 0);
+    return n2.keyframeIds = new Set(this.keyframeIds), !this.server && d2 && e2.target !== this.options.target && ge2(this.options.target) !== ge2(e2.target) && be2(n2), n2;
   }
   allocateGSInstance(e2) {
     return this.gs[e2] = (this.gs[e2] || 0) + 1;
   }
   getTag() {
-    return this.tag || (this.tag = (e2 = (({ useCSSOMInjection: e3, target: t3, nonce: n2 }) => e3 ? new Ce2(t3, n2) : new Oe2(t3, n2))(this.options), new de2(e2)));
+    return this.tag || (this.tag = (e2 = (({ useCSSOMInjection: e3, target: t3, nonce: n2 }) => e3 ? new Oe2(t3, n2) : new Ee2(t3, n2))(this.options), new pe2(e2)));
     var e2;
   }
   hasNameForId(e2, t3) {
@@ -7119,13 +7121,13 @@ var Pe2 = class _Pe {
     this.tag = void 0;
   }
 };
-var _e2 = /* @__PURE__ */ new WeakSet();
-var Ie2 = { animationIterationCount: 1, aspectRatio: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, columnCount: 1, columns: 1, flex: 1, flexGrow: 1, flexShrink: 1, gridRow: 1, gridRowEnd: 1, gridRowSpan: 1, gridRowStart: 1, gridColumn: 1, gridColumnEnd: 1, gridColumnSpan: 1, gridColumnStart: 1, fontWeight: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, scale: 1, tabSize: 1, widows: 1, zIndex: 1, zoom: 1, WebkitLineClamp: 1, fillOpacity: 1, floodOpacity: 1, stopOpacity: 1, strokeDasharray: 1, strokeDashoffset: 1, strokeMiterlimit: 1, strokeOpacity: 1, strokeWidth: 1 };
-function $e2(e2, t3) {
-  return null == t3 || "boolean" == typeof t3 || "" === t3 ? "" : "number" != typeof t3 || 0 === t3 || e2 in Ie2 || e2.startsWith("--") ? String(t3).trim() : t3 + "px";
+var Ie2 = /* @__PURE__ */ new WeakSet();
+var $e2 = { animationIterationCount: 1, aspectRatio: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, columnCount: 1, columns: 1, flex: 1, flexGrow: 1, flexShrink: 1, gridRow: 1, gridRowEnd: 1, gridRowSpan: 1, gridRowStart: 1, gridColumn: 1, gridColumnEnd: 1, gridColumnSpan: 1, gridColumnStart: 1, fontWeight: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, scale: 1, tabSize: 1, widows: 1, zIndex: 1, zoom: 1, WebkitLineClamp: 1, fillOpacity: 1, floodOpacity: 1, stopOpacity: 1, strokeDasharray: 1, strokeDashoffset: 1, strokeMiterlimit: 1, strokeOpacity: 1, strokeWidth: 1 };
+function Re2(e2, t3) {
+  return null == t3 || "boolean" == typeof t3 || "" === t3 ? "" : "number" != typeof t3 || 0 === t3 || e2 in $e2 || e2.startsWith("--") ? String(t3).trim() : t3 + "px";
 }
-var Re2 = 47;
-function je2(e2) {
+var je2 = 47;
+function xe2(e2) {
   if (45 === e2.charCodeAt(0) && 45 === e2.charCodeAt(1)) return e2;
   let t3 = "";
   for (let n2 = 0; n2 < e2.length; n2++) {
@@ -7134,50 +7136,50 @@ function je2(e2) {
   }
   return t3.startsWith("ms-") ? "-" + t3 : t3;
 }
-var xe2 = /* @__PURE__ */ Symbol.for("sc-keyframes");
-function Te2(e2) {
-  return "object" == typeof e2 && null !== e2 && xe2 in e2;
-}
+var Te2 = /* @__PURE__ */ Symbol.for("sc-keyframes");
 function ke2(e2) {
-  return re2(e2) && !(e2.prototype && e2.prototype.isReactComponent);
+  return "object" == typeof e2 && null !== e2 && Te2 in e2;
 }
-var De2 = (e2) => null == e2 || false === e2 || "" === e2;
-var Ve2 = /* @__PURE__ */ Symbol.for("react.client.reference");
-function Me2(e2) {
-  return e2.$$typeof === Ve2;
+function De2(e2) {
+  return re2(e2) && !(e2.prototype && e2.prototype.isReactComponent);
 }
+var Ve2 = (e2) => null == e2 || false === e2 || "" === e2;
+var Me2 = /* @__PURE__ */ Symbol.for("react.client.reference");
 function Ge2(e2) {
+  return e2.$$typeof === Me2;
+}
+function Fe2(e2) {
   const t3 = e2.$$id, n2 = (t3 && t3.includes("#") ? t3.split("#").pop() : t3) || e2.name || "unknown";
   console.warn(`Interpolating a client component (${n2}) as a selector is not supported in server components. The component selector pattern requires access to the component's internal class name, which is not available across the server/client boundary. Use a plain CSS class selector instead.`);
 }
-function Fe2(e2, t3) {
+function ze2(e2, t3) {
   for (const n2 in e2) {
     const o2 = e2[n2];
-    e2.hasOwnProperty(n2) && !De2(o2) && (Array.isArray(o2) && _e2.has(o2) || re2(o2) ? t3.push(je2(n2) + ":", o2, ";") : le2(o2) ? (t3.push(n2 + " {"), Fe2(o2, t3), t3.push("}")) : t3.push(je2(n2) + ": " + $e2(n2, o2) + ";"));
+    e2.hasOwnProperty(n2) && !Ve2(o2) && (Array.isArray(o2) && Ie2.has(o2) || re2(o2) ? t3.push(xe2(n2) + ":", o2, ";") : ue2(o2) ? (t3.push(n2 + " {"), ze2(o2, t3), t3.push("}")) : t3.push(xe2(n2) + ": " + Re2(n2, o2) + ";"));
   }
 }
-function ze2(e2, t3, n2, o2, s = []) {
-  if (De2(e2)) return s;
+function We2(e2, t3, n2, o2, s = []) {
+  if (Ve2(e2)) return s;
   const r3 = typeof e2;
   if ("string" === r3) return s.push(e2), s;
   if ("function" === r3) {
-    if (Me2(e2)) return Ge2(e2), s;
-    if (ke2(e2) && t3) {
+    if (Ge2(e2)) return Fe2(e2), s;
+    if (De2(e2) && t3) {
       const r4 = e2(t3);
-      return "object" != typeof r4 || Array.isArray(r4) || Te2(r4) || le2(r4) || null === r4 || console.error(`${W2(e2)} is not a styled component and cannot be referred to via component selector. See https://styled-components.com/docs/advanced#referring-to-other-components for more details.`), ze2(r4, t3, n2, o2, s);
+      return "object" != typeof r4 || Array.isArray(r4) || ke2(r4) || ue2(r4) || null === r4 || console.error(`${W2(e2)} is not a styled component and cannot be referred to via component selector. See https://styled-components.com/docs/advanced#referring-to-other-components for more details.`), We2(r4, t3, n2, o2, s);
     }
     return s.push(e2), s;
   }
   if (Array.isArray(e2)) {
-    for (let r4 = 0; r4 < e2.length; r4++) ze2(e2[r4], t3, n2, o2, s);
+    for (let r4 = 0; r4 < e2.length; r4++) We2(e2[r4], t3, n2, o2, s);
     return s;
   }
-  return ie2(e2) ? (s.push(`.${e2.styledComponentId}`), s) : Te2(e2) ? (n2 ? (e2.inject(n2, o2), s.push(e2.getName(o2))) : s.push(e2), s) : Me2(e2) ? (Ge2(e2), s) : le2(e2) ? (Fe2(e2, s), s) : (s.push(e2.toString()), s);
+  return ce2(e2) ? (s.push(`.${e2.styledComponentId}`), s) : ke2(e2) ? (n2 ? (e2.inject(n2, o2), s.push(e2.getName(o2))) : s.push(e2), s) : Ge2(e2) ? (Fe2(e2), s) : ue2(e2) ? e2.toString !== Object.prototype.toString ? (s.push(e2.toString()), s) : (ze2(e2, s), s) : (s.push(e2.toString()), s);
 }
-var We2 = F2(u2);
-var Le2 = class {
+var Le2 = F2(u2);
+var Be2 = class {
   constructor(e2, t3, n2) {
-    this.rules = e2, this.componentId = t3, this.baseHash = G2(We2, t3), this.baseStyle = n2, Pe2.registerId(t3);
+    this.rules = e2, this.componentId = t3, this.baseHash = G2(Le2, t3), this.baseStyle = n2, _e2.registerId(t3);
   }
   generateAndInjectStyles(e2, t3, n2) {
     let o2 = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e2, t3, n2) : "";
@@ -7186,10 +7188,10 @@ var Le2 = class {
       for (let o3 = 0; o3 < this.rules.length; o3++) {
         const r3 = this.rules[o3];
         if ("string" == typeof r3) s += r3;
-        else if (r3) if (ke2(r3)) {
+        else if (r3) if (De2(r3)) {
           const o4 = r3(e2);
-          "string" == typeof o4 ? s += o4 : null != o4 && false !== o4 && ("object" != typeof o4 || Array.isArray(o4) || Te2(o4) || le2(o4) || console.error(`${W2(r3)} is not a styled component and cannot be referred to via component selector. See https://styled-components.com/docs/advanced#referring-to-other-components for more details.`), s += ae2(ze2(o4, e2, t3, n2)));
-        } else s += ae2(ze2(r3, e2, t3, n2));
+          "string" == typeof o4 ? s += o4 : null != o4 && false !== o4 && ("object" != typeof o4 || Array.isArray(o4) || ke2(o4) || ue2(o4) || console.error(`${W2(r3)} is not a styled component and cannot be referred to via component selector. See https://styled-components.com/docs/advanced#referring-to-other-components for more details.`), s += le2(We2(o4, e2, t3, n2)));
+        } else s += le2(We2(r3, e2, t3, n2));
       }
       if (s) {
         this.dynamicNameCache || (this.dynamicNameCache = /* @__PURE__ */ new Map());
@@ -7206,25 +7208,25 @@ var Le2 = class {
           const e4 = n2(s, "." + r3, void 0, this.componentId);
           t3.insertRules(this.componentId, r3, e4);
         }
-        o2 = ce2(o2, r3);
+        o2 = ae2(o2, r3);
       }
     }
     return o2;
   }
 };
-var Be2 = /&/g;
-function qe2(e2, t3) {
+var qe2 = /&/g;
+function He2(e2, t3) {
   let n2 = 0;
   for (; --t3 >= 0 && 92 === e2.charCodeAt(t3); ) n2++;
   return !(1 & ~n2);
 }
-function He2(e2) {
+function Ye2(e2) {
   const t3 = e2.length;
   let n2 = "", o2 = 0, s = 0, r3 = 0, i2 = false, c3 = false;
   for (let a3 = 0; a3 < t3; a3++) {
     const l3 = e2.charCodeAt(a3);
-    if (0 !== r3 || i2 || l3 !== Re2 || 42 !== e2.charCodeAt(a3 + 1)) if (i2) 42 === l3 && e2.charCodeAt(a3 + 1) === Re2 && (i2 = false, a3++);
-    else if (34 !== l3 && 39 !== l3 || qe2(e2, a3)) {
+    if (0 !== r3 || i2 || l3 !== je2 || 42 !== e2.charCodeAt(a3 + 1)) if (i2) 42 === l3 && e2.charCodeAt(a3 + 1) === je2 && (i2 = false, a3++);
+    else if (34 !== l3 && 39 !== l3 || He2(e2, a3)) {
       if (0 === r3) if (123 === l3) s++;
       else if (125 === l3) {
         if (s--, s < 0) {
@@ -7245,7 +7247,7 @@ function He2(e2) {
   }
   return c3 || 0 !== s || 0 !== r3 ? (o2 < t3 && 0 === s && 0 === r3 && (n2 += e2.substring(o2)), n2) : e2;
 }
-function Ye2(e2, t3) {
+function Ue2(e2, t3) {
   const n2 = t3 + " ", o2 = "," + n2;
   for (let s = 0; s < e2.length; s++) {
     const r3 = e2[s];
@@ -7255,15 +7257,15 @@ function Ye2(e2, t3) {
       for (let o3 = 0; o3 < e3.length; o3++) t4[o3] = n2 + e3[o3];
       r3.props = t4;
     }
-    Array.isArray(r3.children) && "@keyframes" !== r3.type && Ye2(r3.children, t3);
+    Array.isArray(r3.children) && "@keyframes" !== r3.type && Ue2(r3.children, t3);
   }
   return e2;
 }
-function Ue2({ options: e2 = $2, plugins: t3 = I2 } = $2) {
+function Je2({ options: e2 = $2, plugins: t3 = I2 } = $2) {
   let n2, s, r3;
   const i2 = (e3, t4, o2) => o2.startsWith(s) && o2.endsWith(s) && o2.replaceAll(s, "").length > 0 ? `.${n2}` : e3, c3 = t3.slice();
   c3.push((e3) => {
-    e3.type === RULESET && e3.value.includes("&") && (r3 || (r3 = new RegExp(`\\${s}\\b`, "g")), e3.props[0] = e3.props[0].replace(Be2, s).replace(r3, i2));
+    e3.type === RULESET && e3.value.includes("&") && (r3 || (r3 = new RegExp(`\\${s}\\b`, "g")), e3.props[0] = e3.props[0].replace(qe2, s).replace(r3, i2));
   }), e2.prefix && c3.push(prefixer), c3.push(stringify);
   let a3 = [];
   const l3 = middleware(c3.concat(rulesheet((e3) => a3.push(e3)))), u3 = (t4, i3 = "", c4 = "", u4 = "&") => {
@@ -7271,17 +7273,17 @@ function Ue2({ options: e2 = $2, plugins: t3 = I2 } = $2) {
     const h4 = (function(e3) {
       const t5 = -1 !== e3.indexOf("//"), n3 = -1 !== e3.indexOf("}");
       if (!t5 && !n3) return e3;
-      if (!t5) return He2(e3);
+      if (!t5) return Ye2(e3);
       const o2 = e3.length;
       let s2 = "", r4 = 0, i4 = 0, c5 = 0, a4 = 0, l4 = 0, u5 = false;
       for (; i4 < o2; ) {
         const t6 = e3.charCodeAt(i4);
-        if (34 !== t6 && 39 !== t6 || qe2(e3, i4)) if (0 === c5) if (t6 === Re2 && i4 + 1 < o2 && 42 === e3.charCodeAt(i4 + 1)) {
-          for (i4 += 2; i4 + 1 < o2 && (42 !== e3.charCodeAt(i4) || e3.charCodeAt(i4 + 1) !== Re2); ) i4++;
+        if (34 !== t6 && 39 !== t6 || He2(e3, i4)) if (0 === c5) if (t6 === je2 && i4 + 1 < o2 && 42 === e3.charCodeAt(i4 + 1)) {
+          for (i4 += 2; i4 + 1 < o2 && (42 !== e3.charCodeAt(i4) || e3.charCodeAt(i4 + 1) !== je2); ) i4++;
           i4 += 2;
         } else if (40 !== t6) if (41 !== t6) if (a4 > 0) i4++;
-        else if (42 === t6 && i4 + 1 < o2 && e3.charCodeAt(i4 + 1) === Re2) s2 += e3.substring(r4, i4), i4 += 2, r4 = i4, u5 = true;
-        else if (t6 === Re2 && i4 + 1 < o2 && e3.charCodeAt(i4 + 1) === Re2) {
+        else if (42 === t6 && i4 + 1 < o2 && e3.charCodeAt(i4 + 1) === je2) s2 += e3.substring(r4, i4), i4 += 2, r4 = i4, u5 = true;
+        else if (t6 === je2 && i4 + 1 < o2 && e3.charCodeAt(i4 + 1) === je2) {
           for (s2 += e3.substring(r4, i4); i4 < o2 && 10 !== e3.charCodeAt(i4); ) i4++;
           r4 = i4, u5 = true;
         } else 123 === t6 ? l4++ : 125 === t6 && l4--, i4++;
@@ -7290,26 +7292,26 @@ function Ue2({ options: e2 = $2, plugins: t3 = I2 } = $2) {
         else i4++;
         else 0 === c5 ? c5 = t6 : c5 === t6 && (c5 = 0), i4++;
       }
-      return u5 ? (r4 < o2 && (s2 += e3.substring(r4)), 0 === l4 ? s2 : He2(s2)) : 0 === l4 ? e3 : He2(e3);
+      return u5 ? (r4 < o2 && (s2 += e3.substring(r4)), 0 === l4 ? s2 : Ye2(s2)) : 0 === l4 ? e3 : Ye2(e3);
     })(t4);
     let d4 = compile(c4 || i3 ? c4 + " " + i3 + " { " + h4 + " }" : h4);
-    return e2.namespace && (d4 = Ye2(d4, e2.namespace)), a3 = [], serialize(d4, l3), a3;
+    return e2.namespace && (d4 = Ue2(d4, e2.namespace)), a3 = [], serialize(d4, l3), a3;
   }, h3 = e2;
   let d3 = M2;
   for (let e3 = 0; e3 < t3.length; e3++) t3[e3].name || v2(15), d3 = G2(d3, t3[e3].name);
   return (null == h3 ? void 0 : h3.namespace) && (d3 = G2(d3, h3.namespace)), (null == h3 ? void 0 : h3.prefix) && (d3 = G2(d3, "p")), u3.hash = d3 !== M2 ? d3.toString() : "", u3;
 }
-var Je2 = new Pe2();
-var Xe2 = Ue2();
-var Ke2 = t2.createContext({ shouldForwardProp: void 0, styleSheet: Je2, stylis: Xe2, stylisPlugins: void 0 });
-var Qe = Ke2.Consumer;
-function Ze2() {
-  return t2.useContext(Ke2);
-}
-var tt2 = t2.createContext(void 0);
-var nt2 = tt2.Consumer;
-function st2(e2) {
-  const n2 = t2.useContext(tt2), o2 = t2.useMemo(() => (function(e3, t3) {
+var Xe2 = new _e2();
+var Ke2 = Je2();
+var Qe = t2.createContext({ shouldForwardProp: void 0, styleSheet: Xe2, stylis: Ke2, stylisPlugins: void 0 });
+var Ze2 = Qe.Consumer;
+function et() {
+  return t2.useContext(Qe);
+}
+var nt2 = t2.createContext(void 0);
+var ot2 = nt2.Consumer;
+function rt2(e2) {
+  const n2 = t2.useContext(nt2), o2 = t2.useMemo(() => (function(e3, t3) {
     if (!e3) throw v2(14);
     if (re2(e3)) {
       const n3 = e3(t3);
@@ -7319,19 +7321,19 @@ function st2(e2) {
     if (Array.isArray(e3) || "object" != typeof e3) throw v2(8);
     return t3 ? Object.assign(Object.assign({}, t3), e3) : e3;
   })(e2.theme, n2), [e2.theme, n2]);
-  return e2.children ? t2.createElement(tt2.Provider, { value: o2 }, e2.children) : null;
+  return e2.children ? t2.createElement(nt2.Provider, { value: o2 }, e2.children) : null;
 }
-var rt2 = Object.prototype.hasOwnProperty;
-var it2 = {};
-function ct2(e2, t3) {
+var it2 = Object.prototype.hasOwnProperty;
+var ct2 = {};
+function at2(e2, t3) {
   const n2 = "string" != typeof e2 ? "sc" : T2(e2);
-  it2[n2] = (it2[n2] || 0) + 1;
-  const o2 = n2 + "-" + z2(u2 + n2 + it2[n2]);
+  ct2[n2] = (ct2[n2] || 0) + 1;
+  const o2 = n2 + "-" + z2(u2 + n2 + ct2[n2]);
   return t3 ? t3 + "-" + o2 : o2;
 }
-var at2;
-function lt2(o2, s, r3) {
-  const i2 = ie2(o2), c3 = o2, a3 = !L2(o2), { attrs: l3 = I2, componentId: u3 = ct2(s.displayName, s.parentComponentId), displayName: h3 = B2(o2) } = s, d3 = s.displayName && s.componentId ? T2(s.displayName) + "-" + s.componentId : s.componentId || u3, p3 = i2 && c3.attrs ? c3.attrs.concat(l3).filter(Boolean) : l3;
+var lt2;
+function ut2(o2, s, r3) {
+  const i2 = ce2(o2), c3 = o2, a3 = !L2(o2), { attrs: l3 = I2, componentId: u3 = at2(s.displayName, s.parentComponentId), displayName: h3 = B2(o2) } = s, d3 = s.displayName && s.componentId ? T2(s.displayName) + "-" + s.componentId : s.componentId || u3, p3 = i2 && c3.attrs ? c3.attrs.concat(l3).filter(Boolean) : l3;
   let { shouldForwardProp: f3 } = s;
   if (i2 && c3.shouldForwardProp) {
     const e2 = c3.shouldForwardProp;
@@ -7340,10 +7342,10 @@ function lt2(o2, s, r3) {
       f3 = (n2, o3) => e2(n2, o3) && t3(n2, o3);
     } else f3 = e2;
   }
-  const m3 = new Le2(r3, d3, i2 ? c3.componentStyle : void 0);
+  const m3 = new Be2(r3, d3, i2 ? c3.componentStyle : void 0);
   function y2(o3, s2) {
     return (function(o4, s3, r4) {
-      const { attrs: i3, componentStyle: c4, defaultProps: a4, foldedComponentIds: l4, styledComponentId: u4, target: h4 } = o4, d4 = t2.useContext(tt2), p4 = Ze2(), f4 = o4.shouldForwardProp || p4.shouldForwardProp;
+      const { attrs: i3, componentStyle: c4, defaultProps: a4, foldedComponentIds: l4, styledComponentId: u4, target: h4 } = o4, d4 = t2.useContext(nt2), p4 = et(), f4 = o4.shouldForwardProp || p4.shouldForwardProp;
       t2.useDebugValue && t2.useDebugValue(u4);
       const m4 = R2(s3, d4, a4) || $2;
       let y3, g4;
@@ -7352,7 +7354,7 @@ function lt2(o2, s, r3) {
         if (null !== n2 && n2[1] === m4 && n2[2] === p4.styleSheet && n2[3] === p4.stylis && n2[7] === c4 && (function(e3, t3, n3) {
           const o5 = e3, s4 = t3;
           let r5 = 0;
-          for (const e4 in s4) if (rt2.call(s4, e4) && (r5++, o5[e4] !== s4[e4])) return false;
+          for (const e4 in s4) if (it2.call(s4, e4) && (r5++, o5[e4] !== s4[e4])) return false;
           return r5 === n3;
         })(n2[0], s3, n2[4])) y3 = n2[5], g4 = n2[6];
         else {
@@ -7360,35 +7362,35 @@ function lt2(o2, s, r3) {
             const o5 = Object.assign(Object.assign({}, t3), { className: void 0, theme: n4 }), s4 = e3.length > 1;
             for (let n5 = 0; n5 < e3.length; n5++) {
               const r5 = e3[n5], i4 = re2(r5) ? r5(s4 ? Object.assign({}, o5) : o5) : r5;
-              for (const e4 in i4) "className" === e4 ? o5.className = ce2(o5.className, i4[e4]) : "style" === e4 ? o5.style = Object.assign(Object.assign({}, o5.style), i4[e4]) : e4 in t3 && void 0 === t3[e4] || (o5[e4] = i4[e4]);
+              for (const e4 in i4) "className" === e4 ? o5.className = ae2(o5.className, i4[e4]) : "style" === e4 ? o5.style = Object.assign(Object.assign({}, o5.style), i4[e4]) : e4 in t3 && void 0 === t3[e4] || (o5[e4] = i4[e4]);
             }
-            return "className" in t3 && "string" == typeof t3.className && (o5.className = ce2(o5.className, t3.className)), o5;
+            return "className" in t3 && "string" == typeof t3.className && (o5.className = ae2(o5.className, t3.className)), o5;
           })(i3, s3, m4), g4 = (function(e3, n4, o5, s4) {
             const r5 = e3.generateAndInjectStyles(n4, o5, s4);
             return t2.useDebugValue && t2.useDebugValue(r5), r5;
           })(c4, y3, p4.styleSheet, p4.stylis);
           let n3 = 0;
-          for (const e3 in s3) rt2.call(s3, e3) && n3++;
+          for (const e3 in s3) it2.call(s3, e3) && n3++;
           e2.current = [s3, m4, p4.styleSheet, p4.stylis, n3, y3, g4, c4];
         }
       }
       o4.warnTooManyClasses && o4.warnTooManyClasses(g4);
       const v3 = y3.as || h4, S3 = (function(t3, n2, o5, s4) {
         const r5 = {};
-        for (const i4 in t3) void 0 === t3[i4] || "$" === i4[0] || "as" === i4 || "theme" === i4 && t3.theme === o5 || ("forwardedAs" === i4 ? r5.as = t3.forwardedAs : s4 && !s4(i4, n2) || (r5[i4] = t3[i4], s4 || false || isPropValid(i4) || (at2 || (at2 = /* @__PURE__ */ new Set())).has(i4) || !L2(n2) || n2.includes("-") || (at2.add(i4), console.warn(`styled-components: it looks like an unknown prop "${i4}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`))));
+        for (const i4 in t3) void 0 === t3[i4] || "$" === i4[0] || "as" === i4 || "theme" === i4 && t3.theme === o5 || ("forwardedAs" === i4 ? r5.as = t3.forwardedAs : s4 && !s4(i4, n2) || (r5[i4] = t3[i4], s4 || false || isPropValid(i4) || (lt2 || (lt2 = /* @__PURE__ */ new Set())).has(i4) || !L2(n2) || n2.includes("-") || (lt2.add(i4), console.warn(`styled-components: it looks like an unknown prop "${i4}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`))));
         return r5;
       })(y3, v3, m4, f4);
-      let b3 = ce2(l4, u4);
+      let b3 = ae2(l4, u4);
       return g4 && (b3 += " " + g4), y3.className && (b3 += " " + y3.className), S3[L2(v3) && v3.includes("-") ? "class" : "className"] = b3, r4 && (S3.ref = r4), n(v3, S3);
     })(g3, o3, s2);
   }
   y2.displayName = h3;
   let g3 = t2.forwardRef(y2);
-  return g3.attrs = p3, g3.componentStyle = m3, g3.displayName = h3, g3.shouldForwardProp = f3, g3.foldedComponentIds = i2 ? ce2(c3.foldedComponentIds, c3.styledComponentId) : "", g3.styledComponentId = d3, g3.target = i2 ? c3.target : o2, Object.defineProperty(g3, "defaultProps", { get() {
+  return g3.attrs = p3, g3.componentStyle = m3, g3.displayName = h3, g3.shouldForwardProp = f3, g3.foldedComponentIds = i2 ? ae2(c3.foldedComponentIds, c3.styledComponentId) : "", g3.styledComponentId = d3, g3.target = i2 ? c3.target : o2, Object.defineProperty(g3, "defaultProps", { get() {
     return this._foldedDefaultProps;
   }, set(e2) {
     this._foldedDefaultProps = i2 ? (function(e3, ...t3) {
-      for (const n2 of t3) ue2(e3, n2, true);
+      for (const n2 of t3) he2(e3, n2, true);
       return e3;
     })({}, c3.defaultProps, e2) : e2;
   } }), _2(h3, d3), g3.warnTooManyClasses = /* @__PURE__ */ ((e2, t3) => {
@@ -7405,58 +7407,58 @@ Example:
   <Component />`), o3 = true, n2 = {});
     };
-  })(h3, d3), he2(g3, () => `.${g3.styledComponentId}`), a3 && se2(g3, o2, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), g3;
+  })(h3, d3), de2(g3, () => `.${g3.styledComponentId}`), a3 && se2(g3, o2, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), g3;
 }
-var ut2 = /* @__PURE__ */ new Set(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "blockquote", "body", "button", "br", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "menu", "meter", "nav", "object", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "search", "section", "select", "slot", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use"]);
-function ht2(e2, t3) {
+var ht2 = /* @__PURE__ */ new Set(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "blockquote", "body", "button", "br", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "menu", "meter", "nav", "object", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "search", "section", "select", "slot", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use"]);
+function dt2(e2, t3) {
   const n2 = [e2[0]];
   for (let o2 = 0, s = t3.length; o2 < s; o2 += 1) n2.push(t3[o2], e2[o2 + 1]);
   return n2;
 }
-var dt2 = (e2) => (_e2.add(e2), e2);
-function pt2(e2, ...t3) {
-  if (re2(e2) || le2(e2)) return dt2(ze2(ht2(I2, [e2, ...t3])));
+var pt2 = (e2) => (Ie2.add(e2), e2);
+function ft(e2, ...t3) {
+  if (re2(e2) || ue2(e2)) return pt2(We2(dt2(I2, [e2, ...t3])));
   const n2 = e2;
-  return 0 === t3.length && 1 === n2.length && "string" == typeof n2[0] ? ze2(n2) : dt2(ze2(ht2(n2, t3)));
+  return 0 === t3.length && 1 === n2.length && "string" == typeof n2[0] ? We2(n2) : pt2(We2(dt2(n2, t3)));
 }
-function ft(e2, t3, n2 = $2) {
+function mt(e2, t3, n2 = $2) {
   if (!t3) throw v2(1, t3);
-  const o2 = (o3, ...s) => e2(t3, n2, pt2(o3, ...s));
-  return o2.attrs = (o3) => ft(e2, t3, Object.assign(Object.assign({}, n2), { attrs: Array.prototype.concat(n2.attrs, o3).filter(Boolean) })), o2.withConfig = (o3) => ft(e2, t3, Object.assign(Object.assign({}, n2), o3)), o2;
+  const o2 = (o3, ...s) => e2(t3, n2, ft(o3, ...s));
+  return o2.attrs = (o3) => mt(e2, t3, Object.assign(Object.assign({}, n2), { attrs: Array.prototype.concat(n2.attrs, o3).filter(Boolean) })), o2.withConfig = (o3) => mt(e2, t3, Object.assign(Object.assign({}, n2), o3)), o2;
 }
-var mt = (e2) => ft(lt2, e2);
-var yt2 = mt;
-ut2.forEach((e2) => {
-  yt2[e2] = mt(e2);
+var yt2 = (e2) => mt(ut2, e2);
+var gt2 = yt2;
+ht2.forEach((e2) => {
+  gt2[e2] = yt2(e2);
 });
-var Nt;
-var Ct = class {
+var Ct;
+var Ot = class {
   constructor(e2, t3) {
-    this[Nt] = true, this.inject = (e3, t4 = Xe2) => {
+    this[Ct] = true, this.inject = (e3, t4 = Ke2) => {
       const n2 = this.getName(t4);
       if (!e3.hasNameForId(this.id, n2)) {
         const o2 = t4(this.rules, n2, "@keyframes");
         e3.insertRules(this.id, n2, o2);
       }
-    }, this.name = e2, this.id = m2 + e2, this.rules = t3, C2(this.id), he2(this, () => {
+    }, this.name = e2, this.id = m2 + e2, this.rules = t3, C2(this.id), de2(this, () => {
       throw v2(12, String(this.name));
     });
   }
-  getName(e2 = Xe2) {
+  getName(e2 = Ke2) {
     return e2.hash ? this.name + V2(+e2.hash >>> 0) : this.name;
   }
 };
-function Ot(e2, ...t3) {
+function Et(e2, ...t3) {
   "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
-  const n2 = ae2(pt2(e2, ...t3)), o2 = z2(n2);
-  return new Ct(o2, n2);
+  const n2 = le2(ft(e2, ...t3)), o2 = z2(n2);
+  return new Ot(o2, n2);
 }
-Nt = xe2;
+Ct = Te2;
 "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://styled-components.com/docs/basics#react-native");
-var _t = `__sc-${c2}__`;
-"undefined" != typeof window && (window[_t] || (window[_t] = 0), 1 === window[_t] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."), window[_t] += 1);
-var $t = `:not(style[${c2}])`;
-var Rt = `style[${c2}]`;
+var It = `__sc-${c2}__`;
+"undefined" != typeof window && (window[It] || (window[It] = 0), 1 === window[It] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."), window[It] += 1);
+var Rt = `:not(style[${c2}])`;
+var jt = `style[${c2}]`;
 // node_modules/uuid/dist/stringify.js
 var byteToHex = [];
@@ -8333,6 +8335,14 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
   };
 }
+// src/api/checkoutexternal/models/BillingStrategy.ts
+function BillingStrategyFromJSON(json) {
+  return BillingStrategyFromJSONTyped(json, false);
+}
+function BillingStrategyFromJSONTyped(json, ignoreDiscriminator) {
+  return json;
+}
 // src/api/checkoutexternal/models/BillingSubscriptionDiscountView.ts
 function BillingSubscriptionDiscountViewFromJSON(json) {
   return BillingSubscriptionDiscountViewFromJSONTyped(json, false);
@@ -9123,6 +9133,7 @@ function CustomPlanBillingResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     companyId: json["company_id"],
     createdAt: new Date(json["created_at"]),
     daysUntilDue: json["days_until_due"],
+    externalInvoiceId: json["external_invoice_id"] == null ? void 0 : json["external_invoice_id"],
     id: json["id"],
     paidAt: json["paid_at"] == null ? void 0 : new Date(json["paid_at"]),
     planId: json["plan_id"],
@@ -9397,6 +9408,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     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"]),
+    usageQuantity: json["usage_quantity"] == null ? void 0 : json["usage_quantity"],
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
     valueCredit: json["value_credit"] == null ? void 0 : BillingCreditResponseDataFromJSON(json["value_credit"]),
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
@@ -9588,6 +9600,14 @@ function FeatureInPlanResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
+// src/api/checkoutexternal/models/PlanPriceCadence.ts
+function PlanPriceCadenceFromJSON(json) {
+  return PlanPriceCadenceFromJSONTyped(json, false);
+}
+function PlanPriceCadenceFromJSONTyped(json, ignoreDiscriminator) {
+  return json;
+}
 // src/api/checkoutexternal/models/CustomPlanConfig.ts
 function CustomPlanConfigFromJSON(json) {
   return CustomPlanConfigFromJSONTyped(json, false);
@@ -9796,10 +9816,14 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   return {
     activeVersion: json["active_version"] == null ? void 0 : PlanVersionResponseDataFromJSON(json["active_version"]),
     audienceType: json["audience_type"] == null ? void 0 : json["audience_type"],
+    availablePeriods: json["available_periods"].map(
+      PlanPriceCadenceFromJSON
+    ),
     billingLinkedResource: json["billing_linked_resource"] == null ? void 0 : BillingLinkedResourceResponseDataFromJSON(
       json["billing_linked_resource"]
     ),
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
+    billingStrategy: BillingStrategyFromJSON(json["billing_strategy"]),
     chargeType: ChargeTypeFromJSON(json["charge_type"]),
     companyCanTrial: json["company_can_trial"],
     companyCount: json["company_count"],
@@ -9967,6 +9991,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       json["billing_linked_resource"]
     ),
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
+    billingStrategy: BillingStrategyFromJSON(json["billing_strategy"]),
     chargeType: ChargeTypeFromJSON(json["charge_type"]),
     companyCount: json["company_count"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
@@ -10100,6 +10125,7 @@ function UsageBasedEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminato
     monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
     priceBehavior: json["price_behavior"] == null ? void 0 : EntitlementPriceBehaviorFromJSON(json["price_behavior"]),
     quarterlyUsageBasedPrice: json["quarterly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["quarterly_usage_based_price"]),
+    usageQuantity: json["usage_quantity"] == null ? void 0 : json["usage_quantity"],
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
     valueType: EntitlementValueTypeFromJSON(json["value_type"]),
@@ -11545,6 +11571,14 @@ function BillingProductDetailResponseDataFromJSONTyped5(json, ignoreDiscriminato
   };
 }
+// src/api/componentspublic/models/BillingStrategy.ts
+function BillingStrategyFromJSON2(json) {
+  return BillingStrategyFromJSONTyped5(json, false);
+}
+function BillingStrategyFromJSONTyped5(json, ignoreDiscriminator) {
+  return json;
+}
 // src/api/componentspublic/models/ChargeType.ts
 function ChargeTypeFromJSON2(json) {
   return ChargeTypeFromJSONTyped5(json, false);
@@ -12033,6 +12067,7 @@ function PlanEntitlementResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
     softLimit: json["soft_limit"] == null ? void 0 : json["soft_limit"],
     updatedAt: new Date(json["updated_at"]),
     usageBasedProduct: json["usage_based_product"] == null ? void 0 : BillingProductResponseDataFromJSON2(json["usage_based_product"]),
+    usageQuantity: json["usage_quantity"] == null ? void 0 : json["usage_quantity"],
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
     valueCredit: json["value_credit"] == null ? void 0 : BillingCreditResponseDataFromJSON2(json["value_credit"]),
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
@@ -12042,6 +12077,14 @@ function PlanEntitlementResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
   };
 }
+// src/api/componentspublic/models/PlanPriceCadence.ts
+function PlanPriceCadenceFromJSON2(json) {
+  return PlanPriceCadenceFromJSONTyped4(json, false);
+}
+function PlanPriceCadenceFromJSONTyped4(json, ignoreDiscriminator) {
+  return json;
+}
 // src/api/componentspublic/models/PlanCreditGrantView.ts
 function PlanCreditGrantViewFromJSON2(json) {
   return PlanCreditGrantViewFromJSONTyped3(json, false);
@@ -12146,10 +12189,14 @@ function PlanViewPublicResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   return {
     activeVersion: json["active_version"] == null ? void 0 : PlanVersionResponseDataFromJSON2(json["active_version"]),
     audienceType: json["audience_type"] == null ? void 0 : json["audience_type"],
+    availablePeriods: json["available_periods"].map(
+      PlanPriceCadenceFromJSON2
+    ),
     billingLinkedResource: json["billing_linked_resource"] == null ? void 0 : BillingLinkedResourceResponseDataFromJSON2(
       json["billing_linked_resource"]
     ),
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON2(json["billing_product"]),
+    billingStrategy: BillingStrategyFromJSON2(json["billing_strategy"]),
     chargeType: ChargeTypeFromJSON2(json["charge_type"]),
     companyCount: json["company_count"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
@@ -13466,7 +13513,7 @@ function getCurrencySymbol(currency) {
 // src/utils/style.ts
 function attr(key, value) {
   if (typeof value !== "undefined") {
-    return pt2`
+    return ft`
       ${key}: ${value};
     `;
   }
@@ -13658,7 +13705,8 @@ var reducer = (state, action) => {
           bypassAddOnSelection,
           bypassCreditsSelection,
           ...config.addOnIds && { addOnIds: config.addOnIds },
-          hideSkippedStages: config.hideSkipped ?? false
+          hideSkippedStages: config.hideSkipped ?? false,
+          startTrialIfAvailable: isStringFormat || config.startTrialIfAvailable === void 0 ? true : config.startTrialIfAvailable
         }
       };
     }
@@ -13680,7 +13728,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.12.0",
+  "X-Schematic-Components-Version": "2.13.1-rc.1",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -14113,7 +14161,7 @@ var EmbedProvider = ({
         updateSettings,
         debug
       },
-      children: /* @__PURE__ */ jsxs(st2, { theme: state.settings.theme, children: [
+      children: /* @__PURE__ */ jsxs(rt2, { theme: state.settings.theme, children: [
         /* @__PURE__ */ jsx(IconStyles, {}),
         children
       ] })
@@ -14485,7 +14533,7 @@ function useWrapChildren(ref) {
 }
 // src/components/ui/box/styles.ts
-var Box = yt2("div")((props) => {
+var Box = gt2("div")((props) => {
   function reducer2(acc, [key, value]) {
     if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
@@ -14496,14 +14544,14 @@ var Box = yt2("div")((props) => {
     return acc;
   }
   const styles = Object.entries(props).reduce(reducer2, [
-    pt2`
+    ft`
       &:focus-visible {
         outline: 2px solid ${({ theme }) => theme.primary};
       }
     `
   ]);
   for (const [key, value] of Object.entries(props.$viewport || {})) {
-    styles.push(pt2`
+    styles.push(ft`
       ${{
       "xs": "@container (min-width: 375px)",
       "sm": "@container (min-width: 640px)",
@@ -14518,11 +14566,11 @@ var Box = yt2("div")((props) => {
   }
   return styles;
 });
-var TransitionBox = yt2(Box)`
+var TransitionBox = gt2(Box)`
   ${({ $isExpanded = true }) => {
-  return $isExpanded ? pt2`
+  return $isExpanded ? ft`
           height: auto;
-        ` : pt2`
+        ` : ft`
           height: 0;
           overflow: hidden;
         `;
@@ -14539,7 +14587,7 @@ var TransitionBox = yt2(Box)`
 `;
 // src/components/ui/icon/styles.ts
-var Icon2 = yt2(Icon).attrs(({ name, title, onClick }) => ({
+var Icon2 = gt2(Icon).attrs(({ name, title, onClick }) => ({
   title: title || name,
   ...onClick && { tabIndex: 0 }
 }))`
@@ -14549,7 +14597,7 @@ var Icon2 = yt2(Icon).attrs(({ name, title, onClick }) => ({
   flex-shrink: 0;
   transition: 0.1s;
-  ${({ onClick }) => onClick && pt2`
+  ${({ onClick }) => onClick && ft`
       &:hover {
         cursor: pointer;
       }
@@ -14560,7 +14608,7 @@ var Icon2 = yt2(Icon).attrs(({ name, title, onClick }) => ({
     outline-offset: 2px;
   }
-  ${({ $rounded }) => $rounded && pt2`
+  ${({ $rounded }) => $rounded && ft`
       border-radius: 9999px;
     `}
@@ -14591,10 +14639,10 @@ var Icon2 = yt2(Icon).attrs(({ name, title, onClick }) => ({
       scale *= 3;
       break;
   }
-  return pt2`
+  return ft`
       font-size: ${base * scale / TEXT_BASE_SIZE}rem;
-      ${$rounded && pt2`
+      ${$rounded && ft`
         width: ${base * (11 / 6) * scale / TEXT_BASE_SIZE}rem;
         height: ${base * (11 / 6) * scale / TEXT_BASE_SIZE}rem;
       `}
@@ -14602,10 +14650,10 @@ var Icon2 = yt2(Icon).attrs(({ name, title, onClick }) => ({
 }}
   ${({ $variant, $color, $background }) => {
-  return $variant === "outline" ? pt2`
+  return $variant === "outline" ? ft`
           color: ${$color};
           background-color: transparent;
-        ` : pt2`
+        ` : ft`
           color: ${$color};
           background-color: ${$background};
         `;
@@ -14613,7 +14661,7 @@ var Icon2 = yt2(Icon).attrs(({ name, title, onClick }) => ({
 `;
 // src/components/ui/loader/styles.ts
-var spin = Ot`
+var spin = Et`
   0% {
     transform: rotate(0deg);
   }
@@ -14626,7 +14674,7 @@ var loaderStyles = ({
   $color,
   $size = "md",
   $isLoading = true
-}) => pt2(({ theme }) => {
+}) => ft(({ theme }) => {
   const { l: l3 } = hexToHSL(theme.card.background);
   let color = $color ?? theme.primary;
   let colorFn;
@@ -14662,14 +14710,14 @@ var loaderStyles = ({
       px = 64;
       break;
   }
-  return pt2`
+  return ft`
       display: inline-block;
       width: ${($isLoading ? px : 0) / TEXT_BASE_SIZE}rem;
       height: ${($isLoading ? px : 0) / TEXT_BASE_SIZE}rem;
       border-width: ${($isLoading ? px : 0) / 16 / TEXT_BASE_SIZE}rem;
-      ${$isLoading ? pt2`
+      ${$isLoading ? ft`
             animation: 1.5s linear infinite ${spin};
-          ` : pt2`
+          ` : ft`
             transform: scale(0);
           `}
       border-style: solid;
@@ -14680,12 +14728,12 @@ var loaderStyles = ({
       animation: 1.5s linear infinite ${spin};
     `;
 });
-var Loader = yt2.div((props) => {
+var Loader = gt2.div((props) => {
   return loaderStyles(props);
 });
 // src/components/ui/button/styles.ts
-var Button = yt2.button(
+var Button = gt2.button(
   ({
     theme,
     disabled = false,
@@ -14697,7 +14745,7 @@ var Button = yt2.button(
     $alignment = "center",
     $selfAlignment
   }) => {
-    return pt2`
+    return ft`
       appearance: none;
       font-family: "Public Sans", sans-serif;
       font-weight: 500;
@@ -14705,7 +14753,7 @@ var Button = yt2.button(
       display: flex;
       justify-content: ${$alignment};
       align-items: center;
-      ${() => $selfAlignment && pt2`
+      ${() => $selfAlignment && ft`
           align-self: ${$selfAlignment};
         `}
       width: ${$fullWidth ? "100%" : "fit-content"};
@@ -14715,21 +14763,21 @@ var Button = yt2.button(
       ${function sizeStyles() {
       switch ($size) {
         case "sm":
-          return pt2`
+          return ft`
               font-size: ${15 / TEXT_BASE_SIZE}rem;
               height: ${40 / TEXT_BASE_SIZE}rem;
               padding: ${7 / TEXT_BASE_SIZE}rem ${20 / TEXT_BASE_SIZE}rem;
               border-radius: ${6 / TEXT_BASE_SIZE}rem;
             `;
         case "md":
-          return pt2`
+          return ft`
               font-size: ${17 / TEXT_BASE_SIZE}rem;
               height: ${52 / TEXT_BASE_SIZE}rem;
               padding: ${8 / TEXT_BASE_SIZE}rem ${24 / TEXT_BASE_SIZE}rem;
               border-radius: ${8 / TEXT_BASE_SIZE}rem;
             `;
         case "lg":
-          return pt2`
+          return ft`
               font-size: ${19 / TEXT_BASE_SIZE}rem;
               height: ${64 / TEXT_BASE_SIZE}rem;
               padding: ${9 / TEXT_BASE_SIZE}rem ${28 / TEXT_BASE_SIZE}rem;
@@ -14744,7 +14792,7 @@ var Button = yt2.button(
       if (disabled) {
         color = l3 > 50 ? lighten(color, 0.625) : darken(color, 0.375);
       }
-      return pt2`
+      return ft`
           color: ${color};
           ${Text}, ${Icon2} {
@@ -14761,7 +14809,7 @@ var Button = yt2.button(
         color = l3 > 50 ? darken(color, 0.075) : lighten(color, 0.15);
       }
       if ($variant === "outline") {
-        return pt2`
+        return ft`
             color: ${color};
             background-color: transparent;
             border-color: ${color};
@@ -14772,7 +14820,7 @@ var Button = yt2.button(
           `;
       }
       if ($variant === "ghost") {
-        return pt2`
+        return ft`
             color: ${color};
             background-color: transparent;
             border-color: ${l3 > 50 ? darken(theme.card.background, 0.2) : lighten(theme.card.background, 0.2)};
@@ -14783,7 +14831,7 @@ var Button = yt2.button(
           `;
       }
       if ($variant === "text") {
-        return pt2`
+        return ft`
             color: ${color};
             background-color: transparent;
             border-color: transparent;
@@ -14793,7 +14841,7 @@ var Button = yt2.button(
             }
           `;
       }
-      return pt2`
+      return ft`
           background-color: ${color};
           border-color: ${color};
         `;
@@ -14811,7 +14859,7 @@ var Button = yt2.button(
       &::before {
         content: "";
         ${loaderStyles({ $color: theme[$color], $size, $isLoading })}
-        ${$isLoading && pt2`
+        ${$isLoading && ft`
           margin-right: 0.5rem;
         `}
       }
@@ -14829,13 +14877,13 @@ var Button = yt2.button(
       const lightened = lighten(specified, 0.15);
       const bgColor = specified === lightened ? darken(specified, 0.15) : lightened;
       if ($variant === "filled") {
-        return pt2`
+        return ft`
               background-color: ${bgColor};
               border-color: ${bgColor};
             `;
       }
       if ($variant === "outline") {
-        return pt2`
+        return ft`
               color: ${color};
               background-color: ${bgColor};
               border-color: ${bgColor};
@@ -14847,14 +14895,14 @@ var Button = yt2.button(
       }
       if ($variant === "ghost") {
         const { l: l4 } = hexToHSL(theme.card.background);
-        return pt2`
+        return ft`
               border-color: ${l4 > 50 ? darken(theme.card.background, 0.125) : lighten(theme.card.background, 0.125)};
               box-shadow: 0 1px 2px
                 ${l4 > 50 ? darken(theme.card.background, 0.075) : lighten(theme.card.background, 0.075)};
             `;
       }
       if ($variant === "text") {
-        return pt2`
+        return ft`
               text-decoration: underline;
             `;
       }
@@ -14874,14 +14922,14 @@ import {
 } from "react";
 // src/components/ui/dialog/styles.ts
-var DialogContent = yt2.div`
+var DialogContent = gt2.div`
   position: relative;
   display: flex;
   flex-direction: column;
 `;
-var Dialog = yt2.dialog(
+var Dialog = gt2.dialog(
   ({ theme, $isModal, $size, $top }) => {
-    return pt2`
+    return ft`
       ${ResetStyle}
       ${$isModal && ContainerStyle}
@@ -14923,7 +14971,7 @@ var Dialog = yt2.dialog(
           flex-direction: row;
           max-height: calc(100dvh - 5rem + 3px);
-          ${$size === "lg" && pt2`
+          ${$size === "lg" && ft`
             height: calc(100% - 5rem + 3px);
           `}
         }
@@ -15060,7 +15108,7 @@ var DialogHeader = ({
 };
 // src/components/ui/flex/styles.ts
-var Flex = yt2(Box)`
+var Flex = gt2(Box)`
   display: flex;
 `;
@@ -15094,9 +15142,9 @@ var Icon3 = ({
 };
 // src/components/ui/input/styles.ts
-var Input = yt2.input(({ theme, $size = "md", $variant = "filled" }) => {
+var Input = gt2.input(({ theme, $size = "md", $variant = "filled" }) => {
   const isLightBackground = isLightColor(theme.card.background);
-  return pt2`
+  return ft`
     font-family: "Inter", sans-serif;
     font-weight: 500;
     width: 100%;
@@ -15116,14 +15164,14 @@ var Input = yt2.input(({ theme, $size = "md", $variant = "filled" }) => {
     ${() => {
     switch ($size) {
       case "sm": {
-        return pt2`
+        return ft`
             font-size: 0.875rem;
             line-height: 1.5rem;
             height: 1.5rem;
           `;
       }
       case "md": {
-        return pt2`
+        return ft`
             font-size: 1rem;
             line-height: 3rem;
             height: 3rem;
@@ -15131,7 +15179,7 @@ var Input = yt2.input(({ theme, $size = "md", $variant = "filled" }) => {
           `;
       }
       case "lg": {
-        return pt2`
+        return ft`
             font-size: 1.25rem;
             line-height: 4rem;
             height: 4rem;
@@ -15139,7 +15187,7 @@ var Input = yt2.input(({ theme, $size = "md", $variant = "filled" }) => {
           `;
       }
       case "full": {
-        return pt2`
+        return ft`
             font-size: 1rem;
             line-height: 1;
             height: 100%;
@@ -15153,7 +15201,7 @@ var Input = yt2.input(({ theme, $size = "md", $variant = "filled" }) => {
     const color = $variant !== "filled" && !isLightBackground ? theme.typography.text.color : "#000000";
     const bgColor = $variant === "filled" ? "#F1F1F1" : "transparent";
     const borderColor = $variant === "text" ? "transparent" : "#CBCBCB";
-    return pt2`
+    return ft`
         color: ${color};
         background-color: ${bgColor};
         border-color: ${borderColor};
@@ -15179,8 +15227,8 @@ var Input = yt2.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 // src/components/ui/overlay/styles.ts
-var Overlay = yt2(Flex)(({ theme }) => {
-  return pt2`
+var Overlay = gt2(Flex)(({ theme }) => {
+  return ft`
     position: absolute;
     top: 0;
     right: 0;
@@ -15298,7 +15346,7 @@ var LeadingLineHeightMap = {
   relaxed: 1.625,
   loose: 2
 };
-var Text = yt2.span.withConfig({
+var Text = gt2.span.withConfig({
   shouldForwardProp: (prop) => prop !== "display"
 }).attrs(({ onClick }) => ({
   ...onClick && { tabIndex: 0 }
@@ -15321,7 +15369,7 @@ var Text = yt2.span.withConfig({
     const fontWeight = $weight || fontStyle.fontWeight;
     const lineHeight = $leading && LeadingLineHeightMap[$leading];
     const color = $color || fontStyle.color;
-    return pt2`
+    return ft`
       font-family: ${fontFamily}, sans-serif;
       font-size: ${typeof fontSize === "number" ? `${fontSize / TEXT_BASE_SIZE}rem` : fontSize};
       font-weight: ${fontWeight};
@@ -15329,19 +15377,19 @@ var Text = yt2.span.withConfig({
       color: ${color};
       text-wrap: pretty;
-      ${lineHeight && pt2`
+      ${lineHeight && ft`
         line-height: ${lineHeight};
       `}
-      ${$align && pt2`
+      ${$align && ft`
         text-align: ${$align};
       `};
-      ${$width && pt2`
+      ${$width && ft`
         width: ${$width};
       `};
-      ${onClick && pt2`
+      ${onClick && ft`
         &:hover {
           cursor: pointer;
           text-decoration: underline;
@@ -15357,7 +15405,7 @@ var Text = yt2.span.withConfig({
 );
 // src/components/ui/toggle/styles.ts
-var Toggle = yt2.input.attrs({ type: "checkbox" })`
+var Toggle = gt2.input.attrs({ type: "checkbox" })`
   appearance: none;
   font: inherit;
   font-size: inherit;
@@ -15478,7 +15526,7 @@ var origin = (position2) => {
   return o2;
 };
 var grow = (translate) => {
-  return Ot`
+  return Et`
     0% {
       opacity: 0;
       transform: translate(${translate.x}%, ${translate.y}%) scale(0);
@@ -15490,13 +15538,13 @@ var grow = (translate) => {
     }
   `;
 };
-var Content = yt2.div.withConfig({
+var Content = gt2.div.withConfig({
   shouldForwardProp: (prop) => !["x", "y", "position", "zIndex"].includes(prop)
 })(({ x: x3, y: y2, position: position2, theme }) => {
   const translate = coords(position2);
   const arrowTranslate = arrowCoords(position2);
   const transformOrigin = origin(position2);
-  return pt2`
+  return ft`
     position: absolute;
     top: calc(
       ${y2}px - ${position2 === "top" ? 0.5 : position2 === "bottom" ? -0.5 : 0}rem
@@ -15536,16 +15584,16 @@ var Content = yt2.div.withConfig({
     &::after {
       position: absolute;
       z-index: 0;
-      ${position2 === "top" ? pt2`
+      ${position2 === "top" ? ft`
             top: 100%;
             left: 50%;
-          ` : position2 === "right" ? pt2`
+          ` : position2 === "right" ? ft`
               top: 50%;
               right: 100%;
-            ` : position2 === "bottom" ? pt2`
+            ` : position2 === "bottom" ? ft`
                 bottom: 100%;
                 left: 50%;
-              ` : pt2`
+              ` : ft`
                 top: 50%;
                 left: 100%;
               `};
@@ -15628,15 +15676,15 @@ var Tooltip = ({
 };
 // src/components/layout/card/styles.ts
-var Element = yt2(Box)``;
-var FussyChild = yt2(Element)``;
-var Notice = yt2(Box)``;
+var Element = gt2(Box)``;
+var FussyChild = gt2(Element)``;
+var Notice = gt2(Box)``;
 var cardBoxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-var StyledCard = yt2.div(({ theme }) => {
+var StyledCard = gt2.div(({ theme }) => {
   const { l: l3 } = hexToHSL(theme.card.background);
   const borderColor = l3 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
-  return pt2`
+  return ft`
     position: relative;
     ${theme.sectionLayout === "merged" ? `&:not(:has(${FussyChild}))` : `${Element}:not(:is(${FussyChild}))`} {
@@ -15651,9 +15699,9 @@ var StyledCard = yt2.div(({ theme }) => {
         ${theme.card.padding / TEXT_BASE_SIZE}rem;
       &:not(:last-child) {
-        ${theme.sectionLayout === "merged" ? pt2`
+        ${theme.sectionLayout === "merged" ? ft`
               border-bottom: 1px solid ${borderColor};
-            ` : pt2`
+            ` : ft`
               margin-bottom: 1rem;
             `}
       }
@@ -15699,7 +15747,7 @@ Card.displayName = "Card";
 import { Children as Children2, forwardRef as forwardRef5 } from "react";
 // src/components/layout/column/styles.ts
-var StyledColumn = yt2.div`
+var StyledColumn = gt2.div`
   height: min-content;
 `;
@@ -15716,7 +15764,7 @@ Column.displayName = "Column";
 import { forwardRef as forwardRef6 } from "react";
 // src/components/layout/root/styles.ts
-var ResetStyle = pt2`
+var ResetStyle = ft`
   box-sizing: border-box;
   font-size: 1rem;
   line-height: 1.375;
@@ -15741,11 +15789,11 @@ var ResetStyle = pt2`
     vertical-align: top;
   }
 `;
-var ContainerStyle = pt2`
+var ContainerStyle = ft`
   container-type: inline-size;
   interpolate-size: allow-keywords;
 `;
-var Container = yt2.div`
+var Container = gt2.div`
   ${ResetStyle}
   ${ContainerStyle}
 `;
@@ -17510,6 +17558,48 @@ var CheckoutDialog = ({ top }) => {
       count: 0
     }));
   });
+  const selectedPlanPriceId = useMemo12(() => {
+    if (!selectedPlan) {
+      return void 0;
+    }
+    const currencyPrice = getPlanPrice(
+      selectedPlan,
+      planPeriod,
+      { useSelectedPeriod: true },
+      hasCurrency ? effectiveCurrency : void 0
+    );
+    return currencyPrice?.id ?? (planPeriod === "year" ? selectedPlan.yearlyPrice?.id : planPeriod === "quarter" ? selectedPlan.quarterlyPrice?.id : selectedPlan.monthlyPrice?.id);
+  }, [selectedPlan, planPeriod, hasCurrency, effectiveCurrency]);
+  const [hasInitialPaymentMethod] = useState8(
+    () => !!(data?.subscription?.paymentMethod?.externalId || data?.company?.defaultPaymentMethod?.externalId)
+  );
+  const isCreditOnlyPurchase = useMemo12(() => {
+    if (data?.company?.billingSubscription) {
+      return false;
+    }
+    if (selectedPlanPriceId) {
+      return false;
+    }
+    if (!creditBundles.some((bundle) => bundle.count > 0)) {
+      return false;
+    }
+    const hasPaidAddOn = addOns.some(
+      (addOn) => addOn.isSelected && !!getAddOnPrice(
+        addOn,
+        planPeriod,
+        hasCurrency ? effectiveCurrency : void 0
+      )?.id
+    );
+    return !hasPaidAddOn;
+  }, [
+    data?.company?.billingSubscription,
+    selectedPlanPriceId,
+    creditBundles,
+    addOns,
+    planPeriod,
+    hasCurrency,
+    effectiveCurrency
+  ]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = useState8(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
@@ -17635,7 +17725,7 @@ var CheckoutDialog = ({ top }) => {
         description: t3("Optionally add credit bundles to your subscription")
       });
     }
-    if (isPaymentMethodRequired) {
+    if (isPaymentMethodRequired && !(isCreditOnlyPurchase && hasInitialPaymentMethod)) {
       stages.push({
         id: "checkout",
         name: t3("Checkout"),
@@ -17653,7 +17743,9 @@ var CheckoutDialog = ({ top }) => {
     isSelectedPlanTrialable,
     shouldTrial,
     creditBundles,
-    isPaymentMethodRequired
+    isPaymentMethodRequired,
+    isCreditOnlyPurchase,
+    hasInitialPaymentMethod
   ]);
   const [isBypassLoading, setIsBypassLoading] = useState8(
     () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection
@@ -17698,7 +17790,12 @@ var CheckoutDialog = ({ top }) => {
       const planPriceId = currencyPrice?.id ?? (period === "year" ? plan?.yearlyPrice?.id : period === "quarter" ? plan?.quarterlyPrice?.id : plan?.monthlyPrice?.id);
       const code = typeof updates.promoCode !== "undefined" ? updates.promoCode : promoCode;
       const skipTrial = !(updates.shouldTrial ?? shouldTrial);
-      if (!plan || !planPriceId) {
+      const isCreditOnly = !data?.company?.billingSubscription && !planPriceId && (updates.creditBundles || creditBundles).some(
+        (bundle) => bundle.count > 0
+      ) && !(updates.addOns || addOns).some(
+        (addOn) => addOn.isSelected && !!getAddOnPrice(addOn, period, resolvedCurrency)?.id
+      );
+      if ((!plan || !planPriceId) && !isCreditOnly) {
         setSelectedPlanId(null);
         return;
       }
@@ -17711,7 +17808,7 @@ var CheckoutDialog = ({ top }) => {
       const resolvedAddOns = updates.addOns || addOns;
       const resolvedCreditBundles = updates.creditBundles || creditBundles;
       const resolvedPlanCreditGrants = mergeCompanyGrants(
-        plan.includedCreditGrants,
+        plan?.includedCreditGrants,
         data?.company?.plan?.includedCreditGrants
       );
       const autoTopupRequestBody = buildAutoTopupRequestBody({
@@ -17739,14 +17836,11 @@ var CheckoutDialog = ({ top }) => {
       );
       try {
         const response = await previewCheckout({
-          newPlanId: plan.id,
-          newPriceId: planPriceId,
-          addOnIds: addOnRequestBody,
-          autoTopupOverrides: autoTopupRequestBody,
-          payInAdvance: [
-            ...planPayInAdvanceRequestBody,
-            ...addOnPayInAdvanceRequestBody
-          ],
+          newPlanId: isCreditOnly ? "" : plan?.id ?? "",
+          newPriceId: isCreditOnly ? "" : planPriceId ?? "",
+          addOnIds: isCreditOnly ? [] : addOnRequestBody,
+          autoTopupOverrides: isCreditOnly ? [] : autoTopupRequestBody,
+          payInAdvance: isCreditOnly ? [] : [...planPayInAdvanceRequestBody, ...addOnPayInAdvanceRequestBody],
           creditBundles: creditBundlesRequestBody,
           skipTrial,
           ...code && { promoCode: code }
@@ -17803,6 +17897,7 @@ var CheckoutDialog = ({ top }) => {
     [
       t3,
       data?.company?.plan?.includedCreditGrants,
+      data?.company?.billingSubscription,
       previewCheckout,
       planPeriod,
       selectedPlan,
@@ -18055,7 +18150,8 @@ var CheckoutDialog = ({ top }) => {
   useEffect4(() => {
     if (!hasInitializedPlan.current && selectedPlan) {
       hasInitializedPlan.current = true;
-      selectPlan({ plan: selectedPlan, period: planPeriod });
+      const shouldTrial2 = checkoutState?.startTrialIfAvailable && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
+      selectPlan({ plan: selectedPlan, period: planPeriod, shouldTrial: shouldTrial2 });
     }
   }, [selectedPlan, planPeriod, selectPlan]);
   useLayoutEffect4(() => {
@@ -18366,6 +18462,7 @@ var CheckoutDialog = ({ top }) => {
               addOnUsageBasedEntitlements,
               addOnPayInAdvanceEntitlements,
               creditBundles,
+              isCreditOnlyPurchase,
               charges,
               checkoutStage: effectiveCheckoutStage,
               checkoutStages: navigableStages,
@@ -18619,7 +18716,7 @@ import {
 import { useEffect as useEffect5, useRef as useRef8, useState as useState10 } from "react";
 // src/components/shared/payment-form/styles.ts
-var Label = yt2.label`
+var Label = gt2.label`
   display: flex;
   margin-bottom: 0.75rem;
   font-family: "Public Sans", system-ui, sans-serif;
@@ -18631,7 +18728,7 @@ var Label = yt2.label`
   color: ${({ theme }) => isLightColor(theme.card.background) ? "#000000" : "#cdd6f4"};
   touch-action: manipulation;
 `;
-var Input2 = yt2.input`
+var Input2 = gt2.input`
   padding: 0.75rem;
   background-color: white;
   border-radius: 0.5rem;
@@ -19130,6 +19227,7 @@ var NoPaymentRequired = ({
   isLoading,
   isSticky = false,
   willScheduleDowngrade = false,
+  isCreditOnlyPurchase = false,
   onClick
 }) => {
   const { t: t3 } = useTranslation();
@@ -19142,7 +19240,7 @@ var NoPaymentRequired = ({
       $size: isSticky ? "sm" : "md",
       $fullWidth: true,
       $isLoading: isLoading,
-      children: willScheduleDowngrade ? t3("Schedule downgrade") : t3("Subscribe and close")
+      children: isCreditOnlyPurchase ? t3("Buy credits") : willScheduleDowngrade ? t3("Schedule downgrade") : t3("Subscribe and close")
     }
   );
 };
@@ -19162,10 +19260,11 @@ var CheckoutStageButton = ({
   trialPaymentMethodRequired,
   shouldTrial,
   willTrialWithoutPaymentMethod,
-  willScheduleDowngrade
+  willScheduleDowngrade,
+  isCreditOnlyPurchase = false
 }) => {
   const { t: t3 } = useTranslation();
-  const isDisabled = isLoading || !hasPlan || inEditMode || !canCheckout;
+  const isDisabled = isLoading || !hasPlan && !isCreditOnlyPurchase || inEditMode || !canCheckout;
   const getNextStageId = (currentStageId) => {
     if (!checkoutStages) return void 0;
     const currentIndex = checkoutStages.findIndex(
@@ -19229,7 +19328,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19262,7 +19362,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19304,7 +19405,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19346,7 +19448,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19387,7 +19490,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19421,14 +19525,16 @@ var CheckoutStageButton = ({
     );
   }
   if (checkoutStage === "credits") {
-    if (!isPaymentMethodRequired) {
+    const nextStage = getNextStageId("credits");
+    if (!nextStage) {
       return /* @__PURE__ */ jsx33(
         NoPaymentRequired,
         {
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19438,7 +19544,7 @@ var CheckoutStageButton = ({
         type: "button",
         disabled: isDisabled,
         onClick: async () => {
-          setCheckoutStage?.("checkout");
+          setCheckoutStage?.(nextStage);
         },
         $fullWidth: true,
         $isLoading: isLoading,
@@ -19452,7 +19558,7 @@ var CheckoutStageButton = ({
             children: [
               t3("Next"),
               ": ",
-              t3("Checkout"),
+              getStageDisplayName(nextStage),
               /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
             ]
           }
@@ -19468,7 +19574,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19480,7 +19587,7 @@ var CheckoutStageButton = ({
         onClick: checkout,
         $fullWidth: true,
         $isLoading: isLoading,
-        children: willScheduleDowngrade ? t3("Schedule downgrade") : willTrialWithoutPaymentMethod ? t3("Start trial") : t3("Pay now")
+        children: willScheduleDowngrade ? t3("Schedule downgrade") : willTrialWithoutPaymentMethod ? t3("Start trial") : isCreditOnlyPurchase ? t3("Buy credits") : t3("Pay now")
       }
     );
   }
@@ -19630,6 +19737,7 @@ var SubscriptionSidebar = forwardRef7(
     autoTopupConfigs,
     addOns,
     creditBundles = [],
+    isCreditOnlyPurchase = false,
     usageBasedEntitlements,
     addOnUsageBasedEntitlements = [],
     addOnPayInAdvanceEntitlements = [],
@@ -19890,7 +19998,7 @@ var SubscriptionSidebar = forwardRef7(
       ) : void 0;
       const planPriceId = currencyPrice?.id ?? (planPeriod === "year" ? selectedPlan?.yearlyPrice : planPeriod === "quarter" ? selectedPlan?.quarterlyPrice : selectedPlan?.monthlyPrice)?.id;
       try {
-        if (!planId || !planPriceId) {
+        if ((!planId || !planPriceId) && !isCreditOnlyPurchase) {
           throw new Error(t3("Selected plan or associated price is missing."));
         }
         setError(void 0);
@@ -19917,14 +20025,11 @@ var SubscriptionSidebar = forwardRef7(
         });
         const creditBundlesRequestBody = buildCreditBundlesRequestBody(creditBundles);
         const checkoutResponseFromBackend = await checkout({
-          newPlanId: planId,
-          newPriceId: planPriceId,
-          addOnIds: addOnRequestBody,
-          autoTopupOverrides: autoTopupRequestBody,
-          payInAdvance: [
-            ...planPayInAdvanceRequestBody,
-            ...addOnPayInAdvanceRequestBody
-          ],
+          newPlanId: isCreditOnlyPurchase ? "" : planId ?? "",
+          newPriceId: isCreditOnlyPurchase ? "" : planPriceId ?? "",
+          addOnIds: isCreditOnlyPurchase ? [] : addOnRequestBody,
+          autoTopupOverrides: isCreditOnlyPurchase ? [] : autoTopupRequestBody,
+          payInAdvance: isCreditOnlyPurchase ? [] : [...planPayInAdvanceRequestBody, ...addOnPayInAdvanceRequestBody],
           creditBundles: creditBundlesRequestBody,
           skipTrial: !shouldTrial,
           ...paymentMethodId && { paymentMethodId },
@@ -19997,6 +20102,7 @@ var SubscriptionSidebar = forwardRef7(
       autoTopupConfigs,
       addOns,
       creditBundles,
+      isCreditOnlyPurchase,
       setError,
       setIsLoading,
       setLayout,
@@ -20045,6 +20151,7 @@ var SubscriptionSidebar = forwardRef7(
               willTrialWithoutPaymentMethod,
               willScheduleDowngrade,
               shouldTrial,
+              isCreditOnlyPurchase,
               checkout: handleCheckout
             }
           );
@@ -20085,7 +20192,8 @@ var SubscriptionSidebar = forwardRef7(
       handleCheckout,
       handleUnsubscribe,
       payInAdvanceEntitlements,
-      addOnPayInAdvanceEntitlements
+      addOnPayInAdvanceEntitlements,
+      isCreditOnlyPurchase
     ]);
     useLayoutEffect6(() => {
       const element = buttonRef.current;
@@ -20559,7 +20667,7 @@ var SubscriptionSidebar = forwardRef7(
                     ]
                   }
                 ),
-                subscriptionPrice && /* @__PURE__ */ jsxs26(
+                !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ jsxs26(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -20651,7 +20759,7 @@ var SubscriptionSidebar = forwardRef7(
                     }
                   )
                 ] }),
-                layout !== "unsubscribe" && /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
+                layout !== "unsubscribe" && !isCreditOnlyPurchase && /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
                   "You will be downgraded at the end of your billing period.",
                   {
                     plan: selectedPlan.name,
@@ -21054,7 +21162,7 @@ var RenderLayout = ({ children }) => {
 };
 // src/components/layout/viewport/styles.ts
-var StyledViewport = yt2.div.withConfig({
+var StyledViewport = gt2.div.withConfig({
   shouldForwardProp: (prop) => !["$numberOfColumns", "numberOfColumns"].includes(prop)
 })`
   display: grid;
@@ -21067,7 +21175,7 @@ var StyledViewport = yt2.div.withConfig({
   }
   @container (min-width: 768px) {
-    grid-template-columns: ${({ theme }) => pt2`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
+    grid-template-columns: ${({ theme }) => ft`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
   }
 `;
@@ -21922,14 +22030,14 @@ var PriceDetails = ({
 };
 // src/components/elements/metered-features/styles.ts
-var Container2 = yt2.div`
+var Container2 = gt2.div`
   display: flex;
   flex-direction: column;
   &:last-child {
     ${({ theme }) => {
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
-  return theme.sectionLayout === "merged" && pt2`
+  return theme.sectionLayout === "merged" && ft`
           overflow: hidden;
           border-bottom-left-radius: ${borderRadius};
           border-bottom-right-radius: ${borderRadius};
@@ -24779,11 +24887,9 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
   const [selectedCurrency, setSelectedCurrency] = useState20(
     () => currencies[0] ?? DEFAULT_CURRENCY
   );
-  useEffect8(() => {
-    if (currencies.length > 0 && !currencies.includes(selectedCurrency)) {
-      setSelectedCurrency(currencies[0]);
-    }
-  }, [currencies, selectedCurrency]);
+  if (currencies.length > 0 && !currencies.includes(selectedCurrency)) {
+    setSelectedCurrency(currencies[0]);
+  }
   const showPeriodToggle = rest.showPeriodToggle ?? data?.displaySettings?.showPeriodToggle ?? true;
   const hasCurrencyFilter = !!currencyFilter && currencyFilter.length > 0;
   const showCurrencySelector = currencies.length > 1;
@@ -29582,7 +29688,7 @@ var Error2 = ({ message }) => {
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const theme = useContext6(tt2);
+  const theme = useContext6(nt2);
   const {
     data,
     error,