@schematichq/schematic-components 2.11.0 → 2.13.0

package/dist/schematic-components.esm.js

@@ -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.",
@@ -5006,6 +5007,7 @@ var en_default = {
     Loading: "Loading",
     "Manage plan": "Manage plan",
     "Monthly total": "Monthly total",
+    "Quarterly total": "Quarterly total",
     Next: "Next",
     "No invoices created yet": "No invoices created yet",
     "No limit": "No limit",
@@ -5038,6 +5040,8 @@ var en_default = {
     "Save payment method": "Save payment method",
     "Save with yearly billing": "Save up to {{percent}}% with yearly billing",
     "Saving with yearly billing": "You are saving {{percent}}% with yearly billing",
+    "Save with quarterly billing": "Save up to {{percent}}% with quarterly billing",
+    "Saving with quarterly billing": "You are saving {{percent}}% with quarterly billing",
     "See all": "See all",
     "See balance details": "See balance details",
     "See less": "See less",
@@ -5111,6 +5115,7 @@ var en_default = {
     "$X/Y units/period": "{{cost}}/{{size}} {{units}}/{{period}}",
     day: "day",
     month: "month",
+    quarter: "quarter",
     year: "year",
     "one time": "one time",
     "billing period": "billing period",
@@ -5119,6 +5124,7 @@ var en_default = {
     use: "use",
     used: "used",
     "month, billed yearly": "month, billed yearly",
+    "month, billed quarterly": "month, billed quarterly",
     purchased: "purchased {{date}}",
     usage: {
       limited: "{{amount}} of {{allocation}} used",
@@ -6759,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) {
@@ -6768,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) {
@@ -6890,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;
   }
@@ -6950,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;
@@ -7035,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) {
@@ -7053,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++) {
@@ -7079,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) {
@@ -7114,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++) {
@@ -7129,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) : "";
@@ -7181,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());
@@ -7201,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) {
@@ -7240,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];
@@ -7250,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 = "&") => {
@@ -7266,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++;
@@ -7285,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);
@@ -7314,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;
@@ -7335,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;
@@ -7347,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 {
@@ -7355,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) => {
@@ -7400,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 = [];
@@ -7849,6 +7856,7 @@ function BillingProductPriceResponseDataFromJSONTyped(json, ignoreDiscriminator)
     currency: json["currency"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON(json["interval"]),
+    intervalCount: json["interval_count"],
     isActive: json["is_active"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     nickname: json["nickname"] == null ? void 0 : json["nickname"],
@@ -7894,6 +7902,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON(json["interval"]),
+    intervalCount: json["interval_count"],
     isActive: json["is_active"],
     meterEventName: json["meter_event_name"] == null ? void 0 : json["meter_event_name"],
     meterEventPayloadKey: json["meter_event_payload_key"] == null ? void 0 : json["meter_event_payload_key"],
@@ -8017,6 +8026,7 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     externalPriceId: json["external_price_id"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON(json["interval"]),
+    intervalCount: json["interval_count"],
     nickname: json["nickname"] == null ? void 0 : json["nickname"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -8305,6 +8315,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     externalId: json["external_id"],
     id: json["id"],
     interval: json["interval"],
+    intervalCount: json["interval_count"] == null ? void 0 : json["interval_count"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     name: json["name"],
     packageSize: json["package_size"],
@@ -8324,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);
@@ -9114,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"],
@@ -9295,6 +9315,7 @@ function EntitlementCurrencyPricesResponseDataFromJSONTyped(json, ignoreDiscrimi
   return {
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["yearly_price"])
   };
 }
@@ -9375,6 +9396,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     featureId: json["feature_id"],
     id: json["id"],
     meteredMonthlyPrice: json["metered_monthly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_monthly_price"]),
+    meteredQuarterlyPrice: json["metered_quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_quarterly_price"]),
     meteredYearlyPrice: json["metered_yearly_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_yearly_price"]),
     metricPeriod: json["metric_period"] == null ? void 0 : MetricPeriodFromJSON(json["metric_period"]),
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : MetricPeriodMonthResetFromJSON(json["metric_period_month_reset"]),
@@ -9386,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"],
@@ -9577,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);
@@ -9649,6 +9680,7 @@ function PlanCurrencyPricesResponseDataFromJSONTyped(json, ignoreDiscriminator)
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["yearly_price"])
   };
 }
@@ -9766,6 +9798,7 @@ function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
     planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
     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"]),
     softLimit: json["soft_limit"] == null ? void 0 : json["soft_limit"],
     usage: json["usage"] == null ? void 0 : json["usage"],
     yearlyUsageBasedPrice: json["yearly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["yearly_usage_based_price"])
@@ -9783,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"],
@@ -9824,6 +9861,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     name: json["name"],
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
     planType: PlanTypeFromJSON(json["plan_type"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["quarterly_price"]),
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
     usageViolations: json["usage_violations"].map(
@@ -9953,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"],
@@ -9980,6 +10019,7 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     name: json["name"],
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["one_time_price"]),
     planType: PlanTypeFromJSON(json["plan_type"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["quarterly_price"]),
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
     versions: json["versions"].map(
@@ -10084,6 +10124,8 @@ function UsageBasedEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminato
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : MetricPeriodMonthResetFromJSON(json["metric_period_month_reset"]),
     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"]),
@@ -11233,6 +11275,7 @@ function BillingPriceResponseDataFromJSONTyped9(json, ignoreDiscriminator) {
     externalPriceId: json["external_price_id"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON2(json["interval"]),
+    intervalCount: json["interval_count"],
     nickname: json["nickname"] == null ? void 0 : json["nickname"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -11368,6 +11411,7 @@ function BillingPriceViewFromJSONTyped9(json, ignoreDiscriminator) {
     currency: json["currency"],
     id: json["id"],
     interval: BillingProductPriceIntervalFromJSON2(json["interval"]),
+    intervalCount: json["interval_count"],
     isActive: json["is_active"],
     meterEventName: json["meter_event_name"] == null ? void 0 : json["meter_event_name"],
     meterEventPayloadKey: json["meter_event_payload_key"] == null ? void 0 : json["meter_event_payload_key"],
@@ -11527,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);
@@ -11655,6 +11707,7 @@ function EntitlementCurrencyPricesResponseDataFromJSONTyped3(json, ignoreDiscrim
   return {
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["monthly_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["yearly_price"])
   };
 }
@@ -12002,6 +12055,7 @@ function PlanEntitlementResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
     featureId: json["feature_id"],
     id: json["id"],
     meteredMonthlyPrice: json["metered_monthly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["metered_monthly_price"]),
+    meteredQuarterlyPrice: json["metered_quarterly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["metered_quarterly_price"]),
     meteredYearlyPrice: json["metered_yearly_price"] == null ? void 0 : BillingPriceViewFromJSON2(json["metered_yearly_price"]),
     metricPeriod: json["metric_period"] == null ? void 0 : MetricPeriodFromJSON2(json["metric_period"]),
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : MetricPeriodMonthResetFromJSON2(json["metric_period_month_reset"]),
@@ -12013,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"],
@@ -12022,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);
@@ -12079,6 +12142,7 @@ function PlanCurrencyPricesResponseDataFromJSONTyped5(json, ignoreDiscriminator)
     currency: json["currency"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["monthly_price"]),
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["one_time_price"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["quarterly_price"]),
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["yearly_price"])
   };
 }
@@ -12125,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"],
@@ -12163,6 +12231,7 @@ function PlanViewPublicResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     name: json["name"],
     oneTimePrice: json["one_time_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["one_time_price"]),
     planType: PlanTypeFromJSON2(json["plan_type"]),
+    quarterlyPrice: json["quarterly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON2(json["quarterly_price"]),
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
     versions: json["versions"].map(
@@ -12250,6 +12319,24 @@ var ComponentspublicApi = class extends BaseAPI2 {
 };
 
 // src/utils/api/billing.ts
+function derivePeriod(interval, intervalCount) {
+  if (!interval) {
+    return void 0;
+  }
+  if (interval === "month" && intervalCount === 3) {
+    return "quarter";
+  }
+  return interval;
+}
+function getSubscriptionPeriod(billingSubscription) {
+  if (!billingSubscription) {
+    return void 0;
+  }
+  const product = billingSubscription.products?.find(
+    (p3) => p3.interval && p3.interval !== "one-time"
+  );
+  return derivePeriod(product?.interval, product?.intervalCount) ?? derivePeriod(billingSubscription.interval);
+}
 var ChargeType = {
   oneTime: "one_time",
   recurring: "recurring",
@@ -12259,19 +12346,32 @@ function getPriceValue(billingPrice) {
   const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return price;
 }
+function selectPriceForPeriod(source, period) {
+  switch (period) {
+    case "year":
+      return source.yearlyPrice;
+    case "quarter":
+      return source.quarterlyPrice;
+    default:
+      return source.monthlyPrice;
+  }
+}
+function selectAvailablePrice(source) {
+  return source.monthlyPrice ?? source.quarterlyPrice ?? source.yearlyPrice;
+}
 function getPlanPrice(plan, period = "month", options = { useSelectedPeriod: true }, currency) {
   if (currency && plan.currencyPrices?.length) {
     const currencyPrice = plan.currencyPrices.find(
       (cp) => cp.currency.toLowerCase() === currency.toLowerCase()
     );
     if (currencyPrice) {
-      const billingPrice2 = options.useSelectedPeriod ? period === "year" ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice : currencyPrice.yearlyPrice && !currencyPrice.monthlyPrice ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice;
+      const billingPrice2 = options.useSelectedPeriod ? selectPriceForPeriod(currencyPrice, period) : selectAvailablePrice(currencyPrice);
       if (billingPrice2) {
         return { ...billingPrice2, price: getPriceValue(billingPrice2) };
       }
     }
   }
-  const billingPrice = options.useSelectedPeriod ? period === "year" ? plan.yearlyPrice : plan.monthlyPrice : plan.yearlyPrice && !plan.monthlyPrice ? plan.yearlyPrice : plan.monthlyPrice;
+  const billingPrice = options.useSelectedPeriod ? selectPriceForPeriod(plan, period) : selectAvailablePrice(plan);
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -12282,13 +12382,13 @@ function getAddOnPrice(addOn, period = "month", currency) {
       (cp) => cp.currency.toLowerCase() === currency.toLowerCase()
     );
     if (currencyPrice) {
-      const billingPrice2 = addOn.chargeType === ChargeType.oneTime ? currencyPrice.oneTimePrice : period === "year" ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice;
+      const billingPrice2 = addOn.chargeType === ChargeType.oneTime ? currencyPrice.oneTimePrice : selectPriceForPeriod(currencyPrice, period);
       if (billingPrice2) {
         return { ...billingPrice2, price: getPriceValue(billingPrice2) };
       }
     }
   }
-  const billingPrice = addOn.chargeType === ChargeType.oneTime ? addOn.oneTimePrice : period === "year" ? addOn.yearlyPrice : addOn.monthlyPrice;
+  const billingPrice = addOn.chargeType === ChargeType.oneTime ? addOn.oneTimePrice : selectPriceForPeriod(addOn, period);
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -12312,14 +12412,28 @@ function getEntitlementPrice(entitlement, period = "month", currency) {
       (cp) => cp.currency.toLowerCase() === currency.toLowerCase()
     );
     if (currencyPrice) {
-      source = period === "year" ? currencyPrice.yearlyPrice : currencyPrice.monthlyPrice;
+      source = selectPriceForPeriod(currencyPrice, period);
     }
   }
   if (!source) {
     if ("valueType" in entitlement) {
-      source = period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice;
+      source = selectPriceForPeriod(
+        {
+          monthlyPrice: entitlement.meteredMonthlyPrice,
+          quarterlyPrice: entitlement.meteredQuarterlyPrice,
+          yearlyPrice: entitlement.meteredYearlyPrice
+        },
+        period
+      );
     } else if ("entitlementType" in entitlement) {
-      source = period === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice;
+      source = selectPriceForPeriod(
+        {
+          monthlyPrice: entitlement.monthlyUsageBasedPrice,
+          quarterlyPrice: entitlement.quarterlyUsageBasedPrice,
+          yearlyPrice: entitlement.yearlyUsageBasedPrice
+        },
+        period
+      );
     }
   }
   if (source) {
@@ -12371,7 +12485,15 @@ function calculateTieredCost(quantity, priceTiers, tiersMode) {
   return cost;
 }
 function getEntitlementCost(entitlement, period = "month", currency) {
-  const source = currency ? getEntitlementPrice(entitlement, period ?? "month", currency) : period === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice;
+  const resolvedPeriod = period ?? "month";
+  const source = currency ? getEntitlementPrice(entitlement, resolvedPeriod, currency) : selectPriceForPeriod(
+    {
+      monthlyPrice: entitlement.monthlyUsageBasedPrice,
+      quarterlyPrice: entitlement.quarterlyUsageBasedPrice,
+      yearlyPrice: entitlement.yearlyUsageBasedPrice
+    },
+    resolvedPeriod
+  );
   if (source) {
     const billingPrice = { ...source };
     if (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && typeof entitlement.allocation === "number" && entitlement.allocation > 0) {
@@ -12632,7 +12754,7 @@ function getMetricPeriodName(entitlement) {
   return name;
 }
 function getUsageDetails(entitlement, period, currency) {
-  const billingPrice = currency ? getEntitlementPrice(entitlement, period ?? "month", currency) : period === "year" ? entitlement.yearlyUsageBasedPrice : period === "month" ? entitlement.monthlyUsageBasedPrice : void 0;
+  const billingPrice = currency ? getEntitlementPrice(entitlement, period ?? "month", currency) : period === "year" ? entitlement.yearlyUsageBasedPrice : period === "quarter" ? entitlement.quarterlyUsageBasedPrice : period === "month" ? entitlement.monthlyUsageBasedPrice : void 0;
   let limit;
   if ((!entitlement.priceBehavior || entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance) && typeof entitlement.allocation === "number") {
     limit = entitlement.allocation;
@@ -12694,7 +12816,7 @@ function getCreditBasedEntitlementLimit(entitlement, credits) {
 }
 function extractCurrentUsageBasedEntitlements(features = [], planPeriod) {
   return features.reduce((acc, entitlement) => {
-    if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
+    if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "quarter" && entitlement.quarterlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
       const allocation = entitlement.allocation || 0;
       const usage = entitlement.usage || 0;
       const quantity = allocation ?? usage;
@@ -13216,6 +13338,8 @@ function shortenPeriod(period) {
   switch (period) {
     case "month":
       return "mo";
+    case "quarter":
+      return "qtr";
     case "year":
       return "yr";
   }
@@ -13389,7 +13513,7 @@ function getCurrencySymbol(currency) {
 // src/utils/style.ts
 function attr(key, value) {
   if (typeof value !== "undefined") {
-    return pt2`
+    return ft`
       ${key}: ${value};
     `;
   }
@@ -13581,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
         }
       };
     }
@@ -13603,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.11.0",
+  "X-Schematic-Components-Version": "2.13.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -14036,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
       ] })
@@ -14139,6 +14264,9 @@ function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true })
     if ((data?.activePlans || []).some((plan) => plan.monthlyPrice) || (data?.activeAddOns || []).some((addOn) => addOn.monthlyPrice)) {
       periods.push("month");
     }
+    if ((data?.activePlans || []).some((plan) => plan.quarterlyPrice) || (data?.activeAddOns || []).some((addOn) => addOn.quarterlyPrice)) {
+      periods.push("quarter");
+    }
     if ((data?.activePlans || []).some((plan) => plan.yearlyPrice) || (data?.activeAddOns || []).some((addOn) => addOn.yearlyPrice)) {
       periods.push("year");
     }
@@ -14148,9 +14276,9 @@ function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true })
     (plans) => {
       const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter((plan) => {
         if (options.useSelectedPeriod) {
-          return activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+          return activePeriod === "month" && plan.monthlyPrice || activePeriod === "quarter" && plan.quarterlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
         }
-        return plan.monthlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+        return plan.monthlyPrice || plan.quarterlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
       });
       return activePlans.map((plan) => ({ ...plan, isSelected: false }));
     },
@@ -14405,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(
@@ -14416,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)",
@@ -14438,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;
         `;
@@ -14459,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 }
 }))`
@@ -14469,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;
       }
@@ -14480,7 +14608,7 @@ var Icon2 = yt2(Icon).attrs(({ name, title, onClick }) => ({
     outline-offset: 2px;
   }
 
-  ${({ $rounded }) => $rounded && pt2`
+  ${({ $rounded }) => $rounded && ft`
       border-radius: 9999px;
     `}
 
@@ -14511,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;
       `}
@@ -14522,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};
         `;
@@ -14533,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);
   }
@@ -14546,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;
@@ -14582,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;
@@ -14600,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,
@@ -14617,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;
@@ -14625,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"};
@@ -14635,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;
@@ -14664,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} {
@@ -14681,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};
@@ -14692,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)};
@@ -14703,7 +14831,7 @@ var Button = yt2.button(
           `;
       }
       if ($variant === "text") {
-        return pt2`
+        return ft`
             color: ${color};
             background-color: transparent;
             border-color: transparent;
@@ -14713,7 +14841,7 @@ var Button = yt2.button(
             }
           `;
       }
-      return pt2`
+      return ft`
           background-color: ${color};
           border-color: ${color};
         `;
@@ -14731,7 +14859,7 @@ var Button = yt2.button(
       &::before {
         content: "";
         ${loaderStyles({ $color: theme[$color], $size, $isLoading })}
-        ${$isLoading && pt2`
+        ${$isLoading && ft`
           margin-right: 0.5rem;
         `}
       }
@@ -14749,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};
@@ -14767,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;
             `;
       }
@@ -14794,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}
 
@@ -14843,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);
           `}
         }
@@ -14980,7 +15108,7 @@ var DialogHeader = ({
 };
 
 // src/components/ui/flex/styles.ts
-var Flex = yt2(Box)`
+var Flex = gt2(Box)`
   display: flex;
 `;
 
@@ -15014,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%;
@@ -15036,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;
@@ -15051,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;
@@ -15059,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%;
@@ -15073,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};
@@ -15099,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;
@@ -15218,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 }
@@ -15241,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};
@@ -15249,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;
@@ -15277,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;
@@ -15398,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);
@@ -15410,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
@@ -15456,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%;
               `};
@@ -15548,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}))`} {
@@ -15571,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;
             `}
       }
@@ -15619,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;
 `;
 
@@ -15636,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;
@@ -15661,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}
 `;
@@ -16139,7 +16267,7 @@ var Plan = ({
       $gap: "1rem",
       $flexGrow: 1,
       children: plans.map((plan, planIndex) => {
-        const planPeriod = showPeriodToggle ? period : plan.yearlyPrice && !plan.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+        const planPeriod = showPeriodToggle ? period : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
         const { price: planPrice, currency: planCurrency } = getPlanPrice(
           plan,
           planPeriod,
@@ -16198,6 +16326,9 @@ var Plan = ({
                           children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t3("Custom price") : isUsageBasedPlan ? t3("Usage-based") : isFreePlan && showZeroPriceAsFree ? t3("Free") : showAsMonthlyPrices && planPeriod === BillingProductPriceInterval.Year ? formatCurrency((planPrice ?? 0) / 12, {
                             currency: planCurrency,
                             testSignificantDigits: false
+                          }) : showAsMonthlyPrices && planPeriod === "quarter" ? formatCurrency((planPrice ?? 0) / 3, {
+                            currency: planCurrency,
+                            testSignificantDigits: false
                           }) : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
@@ -16208,7 +16339,7 @@ var Plan = ({
                           $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
                           children: [
                             "/",
-                            showAsMonthlyPrices && planPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : t3(planPeriod)
+                            showAsMonthlyPrices && planPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : showAsMonthlyPrices && planPeriod === "quarter" ? t3("month, billed quarterly") : t3(planPeriod)
                           ]
                         }
                       )
@@ -16744,7 +16875,7 @@ var AddOns = ({
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
+  const periodKey = period === "year" ? "yearlyPrice" : period === "quarter" ? "quarterlyPrice" : "monthlyPrice";
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ jsx20(
     Box,
@@ -17224,9 +17355,9 @@ var Navigation = ({
 import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc, entitlement) => {
   const hasCurrencyPrice = entitlement.currencyPrices?.some(
-    (cp) => period === "month" && cp.monthlyPrice || period === "year" && cp.yearlyPrice
+    (cp) => period === "month" && cp.monthlyPrice || period === "quarter" && cp.quarterlyPrice || period === "year" && cp.yearlyPrice
   );
-  if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice || hasCurrencyPrice)) {
+  if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "quarter" && entitlement.meteredQuarterlyPrice || period === "year" && entitlement.meteredYearlyPrice || hasCurrencyPrice)) {
     const featureUsage = entitlements.find(
       (usage2) => usage2.feature?.id === entitlement.feature?.id
     );
@@ -17286,15 +17417,16 @@ var CheckoutDialog = ({ top }) => {
     [data?.featureUsage?.features]
   );
   const getValidatedPeriod = () => {
-    const requestedPeriod = checkoutState?.period || data?.company?.plan?.planPeriod || "month";
+    const requestedPeriod = checkoutState?.period || getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month";
     if (checkoutState?.planId) {
       const requestedPlan = data?.activePlans?.find(
         (plan) => plan.id === checkoutState.planId
       );
       if (requestedPlan) {
-        const planSupportsRequestedPeriod = requestedPeriod === "month" && requestedPlan.monthlyPrice || requestedPeriod === "year" && requestedPlan.yearlyPrice;
+        const planSupportsRequestedPeriod = requestedPeriod === "month" && requestedPlan.monthlyPrice || requestedPeriod === "quarter" && requestedPlan.quarterlyPrice || requestedPeriod === "year" && requestedPlan.yearlyPrice;
         if (!planSupportsRequestedPeriod) {
           if (requestedPlan.yearlyPrice) return "year";
+          if (requestedPlan.quarterlyPrice) return "quarter";
           if (requestedPlan.monthlyPrice) return "month";
         }
       }
@@ -17426,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),
@@ -17551,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"),
@@ -17569,7 +17743,9 @@ var CheckoutDialog = ({ top }) => {
     isSelectedPlanTrialable,
     shouldTrial,
     creditBundles,
-    isPaymentMethodRequired
+    isPaymentMethodRequired,
+    isCreditOnlyPurchase,
+    hasInitialPaymentMethod
   ]);
   const [isBypassLoading, setIsBypassLoading] = useState8(
     () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection
@@ -17611,10 +17787,15 @@ var CheckoutDialog = ({ top }) => {
         { useSelectedPeriod: true },
         resolvedCurrency
       ) : void 0;
-      const planPriceId = currencyPrice?.id ?? (period === "year" ? plan?.yearlyPrice?.id : plan?.monthlyPrice?.id);
+      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;
       }
@@ -17627,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({
@@ -17655,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 }
@@ -17719,6 +17897,7 @@ var CheckoutDialog = ({ top }) => {
     [
       t3,
       data?.company?.plan?.includedCreditGrants,
+      data?.company?.billingSubscription,
       previewCheckout,
       planPeriod,
       selectedPlan,
@@ -17737,7 +17916,7 @@ var CheckoutDialog = ({ top }) => {
   const selectPlan = useCallback7(
     (updates) => {
       const plan = updates.plan;
-      const period = showPeriodToggle ? updates.period || planPeriod : plan.yearlyPrice && !plan.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+      const period = showPeriodToggle ? updates.period || planPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
       const updatedUsageBasedEntitlements = plan.entitlements.reduce(
         createActiveUsageBasedEntitlementsReducer(featureUsage, period),
         []
@@ -17795,12 +17974,60 @@ var CheckoutDialog = ({ top }) => {
   );
   const changePlanPeriod = useCallback7(
     (period) => {
-      if (period !== planPeriod) {
-        setPlanPeriod(period);
-        handlePreviewCheckout({ period });
+      if (period === planPeriod) {
+        return;
       }
+      setPlanPeriod(period);
+      const updatedUsageBasedEntitlements = (selectedPlan?.entitlements || []).reduce(
+        createActiveUsageBasedEntitlementsReducer(featureUsage, period),
+        [...[]]
+      );
+      setUsageBasedEntitlements(
+        (prev2) => updatedUsageBasedEntitlements.map((updated) => {
+          const current = prev2.find(
+            ({ featureId }) => featureId === updated.featureId
+          );
+          if (typeof current?.quantity === "number") {
+            return { ...updated, quantity: current.quantity };
+          }
+          return updated;
+        })
+      );
+      const updatedAddOnUsageBasedEntitlements = addOns.filter((addOn) => addOn.isSelected).flatMap(
+        (addOn) => addOn.entitlements.reduce(
+          createActiveUsageBasedEntitlementsReducer(featureUsage, period),
+          []
+        )
+      );
+      setAddOnUsageBasedEntitlements(
+        (prev2) => updatedAddOnUsageBasedEntitlements.map((updated) => {
+          const current = prev2.find(
+            ({ featureId }) => featureId === updated.featureId
+          );
+          if (typeof current?.quantity === "number") {
+            return { ...updated, quantity: current.quantity };
+          }
+          return updated;
+        })
+      );
+      handlePreviewCheckout({
+        period,
+        payInAdvanceEntitlements: updatedUsageBasedEntitlements.filter(
+          ({ priceBehavior }) => priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        ),
+        addOnPayInAdvanceEntitlements: updatedAddOnUsageBasedEntitlements.filter(
+          ({ priceBehavior }) => priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        )
+      });
     },
-    [planPeriod, setPlanPeriod, handlePreviewCheckout]
+    [
+      planPeriod,
+      selectedPlan?.entitlements,
+      featureUsage,
+      addOns,
+      setPlanPeriod,
+      handlePreviewCheckout
+    ]
   );
   const toggleAddOn = useCallback7(
     (id) => {
@@ -17923,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(() => {
@@ -18234,6 +18462,7 @@ var CheckoutDialog = ({ top }) => {
               addOnUsageBasedEntitlements,
               addOnPayInAdvanceEntitlements,
               creditBundles,
+              isCreditOnlyPurchase,
               charges,
               checkoutStage: effectiveCheckoutStage,
               checkoutStages: navigableStages,
@@ -18487,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;
@@ -18499,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;
@@ -18705,6 +18934,10 @@ var PaymentForm = ({ onConfirm, financeData }) => {
 // src/components/shared/period-toggle/PeriodToggle.tsx
 import { useMemo as useMemo13 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
+var PERIOD_MONTH_COUNT = {
+  year: 12,
+  quarter: 3
+};
 var PeriodToggle = ({
   portal,
   options,
@@ -18715,14 +18948,23 @@ var PeriodToggle = ({
   const { t: t3 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const savingsPercentage = useMemo13(() => {
-    if (selectedPlan) {
-      const monthlyBillingPrice = getPlanPrice(selectedPlan, "month");
-      const yearlyBillingPrice = getPlanPrice(selectedPlan, "year");
-      const monthly = (monthlyBillingPrice?.price ?? 0) * 12;
-      const yearly = yearlyBillingPrice?.price ?? 0;
-      return Math.round((monthly - yearly) / monthly * 1e4) / 100;
+  const savingsByPeriod = useMemo13(() => {
+    const result = {};
+    if (!selectedPlan) {
+      return result;
+    }
+    const monthlyPrice = getPlanPrice(selectedPlan, "month")?.price ?? 0;
+    if (monthlyPrice <= 0) {
+      return result;
+    }
+    for (const [period, months] of Object.entries(PERIOD_MONTH_COUNT)) {
+      const periodPrice = getPlanPrice(selectedPlan, period)?.price ?? 0;
+      if (periodPrice > 0) {
+        const baseline = monthlyPrice * months;
+        result[period] = Math.round((baseline - periodPrice) / baseline * 1e4) / 100;
+      }
     }
+    return result;
   }, [selectedPlan]);
   return /* @__PURE__ */ jsx30(
     Flex,
@@ -18776,17 +19018,21 @@ var PeriodToggle = ({
           },
           option
         );
-        if (option === "year" && typeof savingsPercentage === "number") {
+        const savingsPercentage = savingsByPeriod[option];
+        if (typeof savingsPercentage === "number") {
+          const isOptionYear = option === "year";
           return /* @__PURE__ */ jsx30(
             Tooltip,
             {
               portal,
               trigger: element,
-              content: /* @__PURE__ */ jsx30(Text, { $size: 11, $leading: "none", children: selectedOption === "month" ? t3("Save with yearly billing", {
-                percent: savingsPercentage
-              }) : t3("Saving with yearly billing", {
-                percent: savingsPercentage
-              }) }),
+              content: /* @__PURE__ */ jsx30(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
+                isOptionYear ? "Saving with yearly billing" : "Saving with quarterly billing",
+                { percent: savingsPercentage }
+              ) : t3(
+                isOptionYear ? "Save with yearly billing" : "Save with quarterly billing",
+                { percent: savingsPercentage }
+              ) }),
               $flexGrow: 1,
               $flexBasis: "50%"
             },
@@ -18981,6 +19227,7 @@ var NoPaymentRequired = ({
   isLoading,
   isSticky = false,
   willScheduleDowngrade = false,
+  isCreditOnlyPurchase = false,
   onClick
 }) => {
   const { t: t3 } = useTranslation();
@@ -18993,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")
     }
   );
 };
@@ -19013,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(
@@ -19080,7 +19328,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19113,7 +19362,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19155,7 +19405,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19197,7 +19448,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19238,7 +19490,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19272,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
         }
       );
     }
@@ -19289,7 +19544,7 @@ var CheckoutStageButton = ({
         type: "button",
         disabled: isDisabled,
         onClick: async () => {
-          setCheckoutStage?.("checkout");
+          setCheckoutStage?.(nextStage);
         },
         $fullWidth: true,
         $isLoading: isLoading,
@@ -19303,7 +19558,7 @@ var CheckoutStageButton = ({
             children: [
               t3("Next"),
               ": ",
-              t3("Checkout"),
+              getStageDisplayName(nextStage),
               /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
             ]
           }
@@ -19319,7 +19574,8 @@ var CheckoutStageButton = ({
           isDisabled,
           isLoading,
           onClick: checkout,
-          isSticky
+          isSticky,
+          isCreditOnlyPurchase
         }
       );
     }
@@ -19331,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")
       }
     );
   }
@@ -19481,6 +19737,7 @@ var SubscriptionSidebar = forwardRef7(
     autoTopupConfigs,
     addOns,
     creditBundles = [],
+    isCreditOnlyPurchase = false,
     usageBasedEntitlements,
     addOnUsageBasedEntitlements = [],
     addOnPayInAdvanceEntitlements = [],
@@ -19739,9 +19996,9 @@ var SubscriptionSidebar = forwardRef7(
         { useSelectedPeriod: true },
         currency
       ) : void 0;
-      const planPriceId = currencyPrice?.id ?? (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
+      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);
@@ -19768,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 },
@@ -19848,6 +20102,7 @@ var SubscriptionSidebar = forwardRef7(
       autoTopupConfigs,
       addOns,
       creditBundles,
+      isCreditOnlyPurchase,
       setError,
       setIsLoading,
       setLayout,
@@ -19896,6 +20151,7 @@ var SubscriptionSidebar = forwardRef7(
               willTrialWithoutPaymentMethod,
               willScheduleDowngrade,
               shouldTrial,
+              isCreditOnlyPurchase,
               checkout: handleCheckout
             }
           );
@@ -19936,7 +20192,8 @@ var SubscriptionSidebar = forwardRef7(
       handleCheckout,
       handleUnsubscribe,
       payInAdvanceEntitlements,
-      addOnPayInAdvanceEntitlements
+      addOnPayInAdvanceEntitlements,
+      isCreditOnlyPurchase
     ]);
     useLayoutEffect6(() => {
       const element = buttonRef.current;
@@ -20033,7 +20290,9 @@ var SubscriptionSidebar = forwardRef7(
                           ),
                           /* @__PURE__ */ jsxs26("sub", { children: [
                             "/",
-                            shortenPeriod(currentPlan.planPeriod || planPeriod)
+                            shortenPeriod(
+                              getSubscriptionPeriod(billingSubscription) || currentPlan.planPeriod || planPeriod
+                            )
                           ] })
                         ] }) })
                       ]
@@ -20408,7 +20667,7 @@ var SubscriptionSidebar = forwardRef7(
                     ]
                   }
                 ),
-                subscriptionPrice && /* @__PURE__ */ jsxs26(
+                !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ jsxs26(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -20416,7 +20675,7 @@ var SubscriptionSidebar = forwardRef7(
                     $gap: "1rem",
                     children: [
                       /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs26(Text, { children: [
-                        planPeriod === "year" ? t3("Yearly total") : t3("Monthly total"),
+                        planPeriod === "year" ? t3("Yearly total") : planPeriod === "quarter" ? t3("Quarterly total") : t3("Monthly total"),
                         ":"
                       ] }) }),
                       /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
@@ -20500,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,
@@ -20600,7 +20859,7 @@ var UnsubscribeDialog = ({ top }) => {
   const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = useMemo18(() => {
     const cancelDate2 = data?.subscription?.cancelAt || data?.upcomingInvoice?.dueDate;
     return {
-      planPeriod: data?.company?.plan?.planPeriod || "month",
+      planPeriod: getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month",
       currentPlan: data?.company?.plan,
       currentAddOns: data?.company?.addOns || [],
       featureUsage: data?.featureUsage,
@@ -20608,6 +20867,7 @@ var UnsubscribeDialog = ({ top }) => {
     };
   }, [
     data?.company?.addOns,
+    data?.company?.billingSubscription,
     data?.company?.plan,
     data?.featureUsage,
     data?.subscription?.cancelAt,
@@ -20902,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;
@@ -20915,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))`};
   }
 `;
 
@@ -21033,7 +21293,7 @@ var UsageDetails = ({ entitlement, layout }) => {
   } = entitlement;
   const { t: t3 } = useTranslation();
   const { data } = useEmbed();
-  const period = data?.company?.plan?.planPeriod || void 0;
+  const period = getSubscriptionPeriod(data?.company?.billingSubscription) ?? data?.company?.plan?.planPeriod ?? void 0;
   const showCredits = data?.displaySettings?.showCredits ?? true;
   const {
     price,
@@ -21770,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};
@@ -21910,7 +22170,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  const period = typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
+  const period = getSubscriptionPeriod(data?.company?.billingSubscription) ?? (typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0);
   const canCheckout = data?.capabilities?.checkout ?? false;
   const showCredits = data?.displaySettings?.showCredits ?? true;
   return /* @__PURE__ */ jsxs35(Container2, { ref, className, children: [
@@ -22502,7 +22762,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.4.0",
+    version: "9.6.0",
     startTime
   });
 };
@@ -22580,7 +22840,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("9.4.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("9.6.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);
@@ -22963,7 +23223,8 @@ import { forwardRef as forwardRef14, useMemo as useMemo26 } from "react";
 
 // src/components/elements/plan-manager/AddOn.tsx
 import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
-var AddOn = ({ addOn, currency, layout }) => {
+var AddOn = ({ addOn, currency, period, layout }) => {
+  const resolvedPeriod = addOn.planPeriod === "one-time" ? addOn.planPeriod : period ?? addOn.planPeriod;
   return /* @__PURE__ */ jsxs38(
     Flex,
     {
@@ -22973,9 +23234,9 @@ var AddOn = ({ addOn, currency, layout }) => {
       $gap: "1rem",
       children: [
         /* @__PURE__ */ jsx52(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsxs38(Text, { children: [
+        typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ jsxs38(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
-          /* @__PURE__ */ jsx52("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
+          /* @__PURE__ */ jsx52("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
         ] })
       ]
     }
@@ -23227,7 +23488,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
     willSubscriptionCancel,
     isTrialSubscription
   } = useMemo26(() => {
-    const subscriptionInterval2 = billingSubscription?.interval;
+    const subscriptionInterval2 = getSubscriptionPeriod(billingSubscription) ?? billingSubscription?.interval;
     const subscriptionCurrency2 = billingSubscription?.currency;
     const isTrialSubscription2 = billingSubscription?.status === "trialing";
     const willSubscriptionCancel2 = typeof billingSubscription?.cancelAt === "number" && billingSubscription?.cancelAtPeriodEnd === true;
@@ -23238,6 +23499,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
       willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
+  const currentPlanPeriod = getSubscriptionPeriod(billingSubscription) ?? currentPlan?.planPeriod ?? void 0;
   const { isFreePlan, isUsageBasedPlan } = useMemo26(() => {
     const isFreePlan2 = currentPlan?.planPrice === 0;
     const isUsageBasedPlan2 = isFreePlan2 && usageBasedEntitlements.length > 0;
@@ -23406,9 +23668,9 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  !isFreePlan && currentPlan?.planPeriod && /* @__PURE__ */ jsx54(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs40("sub", { children: [
+                  !isFreePlan && currentPlanPeriod && /* @__PURE__ */ jsx54(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs40("sub", { children: [
                     "/",
-                    shortenPeriod(currentPlan.planPeriod)
+                    shortenPeriod(currentPlanPeriod)
                   ] }) })
                 ] })
               ]
@@ -23428,6 +23690,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
               {
                 addOn,
                 currency: subscriptionCurrency,
+                period: currentPlanPeriod,
                 layout: props
               },
               addOnIndex
@@ -23447,7 +23710,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                 UsageDetails2,
                 {
                   entitlement,
-                  period: currentPlan?.planPeriod || "month",
+                  period: currentPlanPeriod || "month",
                   currency: subscriptionCurrency,
                   showCredits,
                   layout: props
@@ -23778,7 +24041,8 @@ var AddOn2 = ({
     };
   }, [data?.capabilities?.checkout, data?.company?.addOns, data?.component]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  const isActiveAddOn = addOn.current && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
+  const currentAddOnPeriod = getSubscriptionPeriod(data?.company?.billingSubscription) ?? currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
+  const isActiveAddOn = addOn.current && selectedPeriod === currentAddOnPeriod;
   const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod, currency) || {};
   const displayableEntitlements = addOn.entitlements?.filter(
     (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && entitlement.priceBehavior !== EntitlementPriceBehavior.CreditBurndown
@@ -24238,7 +24502,7 @@ var Plan2 = ({
   };
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
   const isStandalone = typeof data?.component === "undefined";
-  const currentPeriod = data?.company?.plan?.planPeriod || "month";
+  const currentPeriod = getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month";
   const canCheckout = isStandalone || (data?.capabilities?.checkout ?? true);
   const isTrialSubscription = data?.company?.billingSubscription?.status === "trialing";
   const showCredits = data?.displaySettings?.showCredits ?? true;
@@ -24308,10 +24572,13 @@ var Plan2 = ({
                     plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t3("Custom price") : isUsageBasedPlan ? t3("Usage-based") : isFreePlan && showZeroPriceAsFree ? t3("Free") : showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? formatCurrency((planPrice ?? 0) / 12, {
                       currency: planCurrency,
                       testSignificantDigits: false
+                    }) : showAsMonthlyPrices && selectedPeriod === "quarter" ? formatCurrency((planPrice ?? 0) / 3, {
+                      currency: planCurrency,
+                      testSignificantDigits: false
                     }) : formatCurrency(planPrice ?? 0, planCurrency),
                     !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs43("sub", { children: [
                       "/",
-                      showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : t3(selectedPeriod)
+                      showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : showAsMonthlyPrices && selectedPeriod === "quarter" ? t3("month, billed quarterly") : t3(selectedPeriod)
                     ] })
                   ]
                 }
@@ -24614,17 +24881,15 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
     []
   );
   const [selectedPeriod, setSelectedPeriod] = useState20(
-    () => data?.company?.plan?.planPeriod || "month"
+    () => getSubscriptionPeriod(data?.company?.billingSubscription) || data?.company?.plan?.planPeriod || "month"
   );
   const { currencies, invalidFilterEntries } = useAvailableCurrenciesWithInvalid();
   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;
@@ -24750,7 +25015,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
               $margin: 0,
               $listStyle: "none",
               children: plans.map((plan, index, self2) => {
-                const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+                const planPeriod = showPeriodToggle ? selectedPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
                 return /* @__PURE__ */ jsx58(
                   Plan2,
                   {
@@ -24802,7 +25067,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
               $margin: 0,
               $listStyle: "none",
               children: addOns.map((addOn, index) => {
-                const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
+                const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.monthlyPrice ? BillingProductPriceInterval.Month : addOn.quarterlyPrice ? "quarter" : addOn.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
                 return /* @__PURE__ */ jsx58(
                   AddOn2,
                   {
@@ -29423,7 +29688,7 @@ var Error2 = ({ message }) => {
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const theme = useContext6(tt2);
+  const theme = useContext6(nt2);
   const {
     data,
     error,