npm - @schematichq/schematic-components - Versions diffs - 2.18.0 → 2.19.0 - Mend

@schematichq/schematic-components 2.18.0 → 2.19.0

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

Files changed (7) hide show

package/README.md +26 -0
package/dist/schematic-components.browser.cjs.js +28708 -0
package/dist/schematic-components.browser.esm.js +28736 -0
package/dist/schematic-components.cjs.js +3593 -3147
package/dist/schematic-components.d.ts +110 -1
package/dist/schematic-components.esm.js +632 -439
package/package.json +33 -12

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

@@ -1833,6 +1833,7 @@ var FETCH_DEBOUNCE_TIMEOUT = 300;
 // src/const/string.ts
 var DEFAULT_CURRENCY = "USD";
 var MAXIMUM_SIGNIFICANT_DIGITS = 6;
+var MAXIMUM_FRACTION_DIGITS = 10;
 // src/const/style.ts
 var TEXT_BASE_SIZE = 16;
@@ -1950,6 +1951,7 @@ var initialContext = {
   setCheckoutState: stub,
   clearCheckoutState: stub,
   initializeWithPlan: stub,
+  requestUnsubscribe: stub,
   setData: stub,
   updateSettings: stub,
   debug: stub,
@@ -5186,7 +5188,7 @@ var isPropValid = /* @__PURE__ */ memoize(
   /* Z+1 */
 );
-// node_modules/styled-components/dist/styled-components.browser.esm.js
+// node_modules/styled-components/dist/styled-components.esm.js
 import t2, { createElement as n } from "react";
 // node_modules/stylis/src/Enum.js
@@ -5808,26 +5810,27 @@ function prefixer(element, index, children, callback) {
   }
 }
-// node_modules/styled-components/dist/styled-components.browser.esm.js
+// node_modules/styled-components/dist/styled-components.esm.js
 var r;
 var i;
-var c = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
-var a = "active";
-var l = "data-styled-version";
+var l = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
+var c = "active";
+var a = "data-styled-version";
 var u = "6.4.3";
-var h = "/*!sc*/\n";
-var d = "undefined" != typeof window && "undefined" != typeof document;
-function p(e2) {
+var d = "/*!sc*/\n";
+var h = "undefined" != typeof window && "undefined" != typeof document;
+var p = void 0 === t2.createContext;
+function f(e2) {
   if ("undefined" != typeof process && void 0 !== process.env) {
     const t3 = process.env[e2];
     if (void 0 !== t3 && "" !== t3) return "false" !== t3;
   }
 }
-var f = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : null !== (i = null !== (r = p("REACT_APP_SC_DISABLE_SPEEDY")) && void 0 !== r ? r : p("SC_DISABLE_SPEEDY")) && void 0 !== i ? i : "undefined" != typeof process && void 0 !== process.env && true);
-var m = "sc-keyframes-";
+var m = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : null !== (i = null !== (r = f("REACT_APP_SC_DISABLE_SPEEDY")) && void 0 !== r ? r : f("SC_DISABLE_SPEEDY")) && void 0 !== i ? i : "undefined" != typeof process && void 0 !== process.env && true);
+var g = "sc-keyframes-";
 var y = {};
-var g = 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 v(e2, ...t3) {
+var v = 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 S(e2, ...t3) {
   return false ? new Error(`An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#${e2} for more information.${t3.length > 0 ? ` Args: ${t3.join(", ")}` : ""}`) : new Error((function(...e3) {
     let t4 = e3[0];
     const n2 = [];
@@ -5835,27 +5838,28 @@ function v(e2, ...t3) {
     return n2.forEach((e4) => {
       t4 = t4.replace(/%[a-z]/, e4);
     }), t4;
-  })(g[e2], ...t3).trim());
+  })(v[e2], ...t3).trim());
 }
-var S = 1 << 30;
-var b = /* @__PURE__ */ new Map();
+var b = 1 << 30;
 var w = /* @__PURE__ */ new Map();
-var N = 1;
-var C = (e2) => {
-  if (b.has(e2)) return b.get(e2);
-  for (; w.has(N); ) N++;
-  const t3 = N++;
-  if ((0 | t3) < 0 || t3 > S) throw v(16, `${t3}`);
-  return b.set(e2, t3), w.set(t3, e2), t3;
-};
-var O = (e2) => w.get(e2);
+var N = /* @__PURE__ */ new Map();
+var C = 1;
+var P = (e2) => {
+  if (w.has(e2)) return w.get(e2);
+  for (; N.has(C); ) C++;
+  const t3 = C++;
+  if ((0 | t3) < 0 || t3 > b) throw S(16, `${t3}`);
+  return w.set(e2, t3), N.set(t3, e2), t3;
+};
+var O = (e2) => N.get(e2);
 var E = (e2, t3) => {
-  N = t3 + 1, b.set(e2, t3), w.set(t3, e2);
+  C = t3 + 1, w.set(e2, t3), N.set(t3, e2);
 };
-var A = /invalid hook call/i;
-var P = /* @__PURE__ */ new Set();
+var I = /invalid hook call/i;
+var A = /* @__PURE__ */ new Set();
 var _ = (e2, n2) => {
   if (true) {
+    if (p) return;
     const o = `The component ${e2}${n2 ? ` with the id of "${n2}"` : ""} has been created dynamically.
 You may see this warning because you've called styled inside another component.
 To resolve this only create new StyledComponents outside of any render method and function component.
@@ -5864,78 +5868,78 @@ See https://styled-components.com/docs/basics#define-styled-components-outside-o
     try {
       let e3 = true;
       console.error = (t3, ...n3) => {
-        A.test(t3) ? (e3 = false, P.delete(o)) : s(t3, ...n3);
-      }, "function" == typeof t2.useState && t2.useState(null), e3 && !P.has(o) && (console.warn(o), P.add(o));
+        I.test(t3) ? (e3 = false, A.delete(o)) : s(t3, ...n3);
+      }, "function" == typeof t2.useState && t2.useState(null), e3 && !A.has(o) && (console.warn(o), A.add(o));
     } catch (e3) {
-      A.test(e3.message) && P.delete(o);
+      I.test(e3.message) && A.delete(o);
     } finally {
       console.error = s;
     }
   }
 };
-var I = Object.freeze([]);
+var x = Object.freeze([]);
 var $ = Object.freeze({});
 function R(e2, t3, n2 = $) {
   return e2.theme !== n2.theme && e2.theme || t3 || n2.theme;
 }
 var j = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
-var x = /(^-|-$)/g;
+var k = /(^-|-$)/g;
 function T(e2) {
-  return e2.replace(j, "-").replace(x, "");
+  return e2.replace(j, "-").replace(k, "");
 }
-var k = /(a)(d)/gi;
-var D = (e2) => String.fromCharCode(e2 + (e2 > 25 ? 39 : 97));
+var D = /(a)(d)/gi;
+var M = (e2) => String.fromCharCode(e2 + (e2 > 25 ? 39 : 97));
 function V(e2) {
   let t3, n2 = "";
-  for (t3 = Math.abs(e2); t3 > 52; t3 = t3 / 52 | 0) n2 = D(t3 % 52) + n2;
-  return (D(t3 % 52) + n2).replace(k, "$1-$2");
+  for (t3 = Math.abs(e2); t3 > 52; t3 = t3 / 52 | 0) n2 = M(t3 % 52) + n2;
+  return (M(t3 % 52) + n2).replace(D, "$1-$2");
 }
-var M = 5381;
-var G = (e2, t3) => {
+var G = 5381;
+var F = (e2, t3) => {
   let n2 = t3.length;
   for (; n2; ) e2 = 33 * e2 ^ t3.charCodeAt(--n2);
   return e2;
 };
-var F = (e2) => G(M, e2);
-function z(e2) {
-  return V(F(e2) >>> 0);
-}
+var z = (e2) => F(G, e2);
 function W(e2) {
+  return V(z(e2) >>> 0);
+}
+function B(e2) {
   return "string" == typeof e2 && e2 || e2.displayName || e2.name || "Component";
 }
 function L(e2) {
   return "string" == typeof e2 && e2.charAt(0) === e2.charAt(0).toLowerCase();
 }
-function B(e2) {
-  return L(e2) ? `styled.${e2}` : `Styled(${W(e2)})`;
-}
-var q = /* @__PURE__ */ Symbol.for("react.memo");
-var H = /* @__PURE__ */ Symbol.for("react.forward_ref");
-var Y = { contextType: true, defaultProps: true, displayName: true, getDerivedStateFromError: true, getDerivedStateFromProps: true, propTypes: true, type: true };
-var U = { name: true, length: true, prototype: true, caller: true, callee: true, arguments: true, arity: true };
-var J = { $$typeof: true, compare: true, defaultProps: true, displayName: true, propTypes: true, type: true };
-var X = { [H]: { $$typeof: true, render: true, defaultProps: true, displayName: true, propTypes: true }, [q]: J };
+function q(e2) {
+  return L(e2) ? `styled.${e2}` : `Styled(${B(e2)})`;
+}
+var H = /* @__PURE__ */ Symbol.for("react.memo");
+var Y = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var U = { contextType: true, defaultProps: true, displayName: true, getDerivedStateFromError: true, getDerivedStateFromProps: true, propTypes: true, type: true };
+var J = { name: true, length: true, prototype: true, caller: true, callee: true, arguments: true, arity: true };
+var X = { $$typeof: true, compare: true, defaultProps: true, displayName: true, propTypes: true, type: true };
+var Z = { [Y]: { $$typeof: true, render: true, defaultProps: true, displayName: true, propTypes: true }, [H]: X };
 function K(e2) {
-  return ("type" in (t3 = e2) && t3.type.$$typeof) === q ? J : "$$typeof" in e2 ? X[e2.$$typeof] : Y;
+  return ("type" in (t3 = e2) && t3.type.$$typeof) === H ? X : "$$typeof" in e2 ? Z[e2.$$typeof] : U;
   var t3;
 }
 var Q = Object.defineProperty;
-var Z = Object.getOwnPropertyNames;
-var ee = Object.getOwnPropertySymbols;
-var te = Object.getOwnPropertyDescriptor;
-var ne = Object.getPrototypeOf;
-var oe = Object.prototype;
-function se(e2, t3, n2) {
+var ee = Object.getOwnPropertyNames;
+var te = Object.getOwnPropertySymbols;
+var ne = Object.getOwnPropertyDescriptor;
+var oe = Object.getPrototypeOf;
+var se = Object.prototype;
+function re(e2, t3, n2) {
   if ("string" != typeof t3) {
-    const o = ne(t3);
-    o && o !== oe && se(e2, o, n2);
-    const s = Z(t3).concat(ee(t3)), r2 = K(e2), i2 = K(t3);
+    const o = oe(t3);
+    o && o !== se && re(e2, o, n2);
+    const s = ee(t3).concat(te(t3)), r2 = K(e2), i2 = K(t3);
     for (let o2 = 0; o2 < s.length; ++o2) {
-      const c2 = s[o2];
-      if (!(c2 in U || n2 && n2[c2] || i2 && c2 in i2 || r2 && c2 in r2)) {
-        const n3 = te(t3, c2);
+      const l2 = s[o2];
+      if (!(l2 in J || n2 && n2[l2] || i2 && l2 in i2 || r2 && l2 in r2)) {
+        const n3 = ne(t3, l2);
         try {
-          Q(e2, c2, n3);
+          Q(e2, l2, n3);
         } catch (e3) {
         }
       }
@@ -5943,32 +5947,45 @@ function se(e2, t3, n2) {
   }
   return e2;
 }
-function re(e2) {
+function ie(e2) {
   return "function" == typeof e2;
 }
-var ie = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var le = /* @__PURE__ */ Symbol.for("react.forward_ref");
 function ce(e2) {
-  return null != e2 && ("object" == typeof e2 || "function" == typeof e2) && e2.$$typeof === ie && "styledComponentId" in e2;
+  return null != e2 && ("object" == typeof e2 || "function" == typeof e2) && e2.$$typeof === le && "styledComponentId" in e2;
 }
 function ae(e2, t3) {
   return e2 && t3 ? e2 + " " + t3 : e2 || t3 || "";
 }
-function le(e2, t3) {
+function ue(e2, t3) {
   return e2.join(t3 || "");
 }
-function ue(e2) {
+function de(e2) {
+  let t3 = "";
+  for (let n2 = 0; n2 < e2.length; n2++) t3 += e2[n2] + d;
+  return t3;
+}
+function he(e2) {
+  return e2 ? e2.replaceAll(d, "") : e2;
+}
+function pe(e2) {
   return null !== e2 && "object" == typeof e2 && e2.constructor.name === Object.name && !("props" in e2 && e2.$$typeof);
 }
-function he(e2, t3, n2 = false) {
-  if (!n2 && !ue(e2) && !Array.isArray(e2)) return t3;
-  if (Array.isArray(t3)) for (let n3 = 0; n3 < t3.length; n3++) e2[n3] = he(e2[n3], t3[n3]);
-  else if (ue(t3)) for (const n3 in t3) e2[n3] = he(e2[n3], t3[n3]);
+function fe(e2, t3, n2 = false) {
+  if (!n2 && !pe(e2) && !Array.isArray(e2)) return t3;
+  if (Array.isArray(t3)) for (let n3 = 0; n3 < t3.length; n3++) e2[n3] = fe(e2[n3], t3[n3]);
+  else if (pe(t3)) for (const n3 in t3) e2[n3] = fe(e2[n3], t3[n3]);
   return e2;
 }
-function de(e2, t3) {
+function me(e2) {
+  if (!p) return null;
+  const n2 = t2.cache;
+  return n2 ? n2(e2) : null;
+}
+function ge(e2, t3) {
   Object.defineProperty(e2, "toString", { value: t3 });
 }
-var pe = class {
+var ye = class {
   constructor(e2) {
     this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2, this._cGroup = 0, this._cIndex = 0;
   }
@@ -5983,7 +6000,7 @@ var pe = class {
     if (e2 >= this.groupSizes.length) {
       const t4 = this.groupSizes, n3 = t4.length;
       let o2 = n3;
-      for (; e2 >= o2; ) if (o2 <<= 1, o2 < 0) throw v(16, `${e2}`);
+      for (; e2 >= o2; ) if (o2 <<= 1, o2 < 0) throw S(16, `${e2}`);
       this.groupSizes = new Uint32Array(o2), this.groupSizes.set(t4), this.length = o2;
       for (let e3 = n3; e3 < o2; e3++) this.groupSizes[e3] = 0;
     }
@@ -6003,70 +6020,70 @@ var pe = class {
     let t3 = "";
     if (e2 >= this.length || 0 === this.groupSizes[e2]) return t3;
     const n2 = this.groupSizes[e2], o = this.indexOfGroup(e2), s = o + n2;
-    for (let e3 = o; e3 < s; e3++) t3 += this.tag.getRule(e3) + h;
+    for (let e3 = o; e3 < s; e3++) t3 += this.tag.getRule(e3) + d;
     return t3;
   }
 };
-var fe = `style[${c}][${l}="${u}"]`;
-var me = new RegExp(`^${c}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`);
-var ye = (e2) => "undefined" != typeof ShadowRoot && e2 instanceof ShadowRoot || "host" in e2 && 11 === e2.nodeType;
-var ge = (e2) => {
+var ve = `style[${l}][${a}="${u}"]`;
+var Se = new RegExp(`^${l}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`);
+var be = (e2) => "undefined" != typeof ShadowRoot && e2 instanceof ShadowRoot || "host" in e2 && 11 === e2.nodeType;
+var we = (e2) => {
   if (!e2) return document;
-  if (ye(e2)) return e2;
+  if (be(e2)) return e2;
   if ("getRootNode" in e2) {
     const t3 = e2.getRootNode();
-    if (ye(t3)) return t3;
+    if (be(t3)) return t3;
   }
   return document;
 };
-var ve = (e2, t3, n2) => {
+var Ne = (e2, t3, n2) => {
   const o = n2.split(",");
   let s;
   for (let n3 = 0, r2 = o.length; n3 < r2; n3++) (s = o[n3]) && e2.registerName(t3, s);
 };
-var Se = (e2, t3) => {
+var Ce = (e2, t3) => {
   var n2;
-  const o = (null !== (n2 = t3.textContent) && void 0 !== n2 ? n2 : "").split(h), s = [];
+  const o = (null !== (n2 = t3.textContent) && void 0 !== n2 ? n2 : "").split(d), s = [];
   for (let t4 = 0, n3 = o.length; t4 < n3; t4++) {
     const n4 = o[t4].trim();
     if (!n4) continue;
-    const r2 = n4.match(me);
+    const r2 = n4.match(Se);
     if (r2) {
       const t5 = 0 | parseInt(r2[1], 10), n5 = r2[2];
-      0 !== t5 && (E(n5, t5), ve(e2, n5, r2[3]), e2.getTag().insertRules(t5, s)), s.length = 0;
+      0 !== t5 && (E(n5, t5), Ne(e2, n5, r2[3]), e2.getTag().insertRules(t5, s)), s.length = 0;
     } else s.push(n4);
   }
 };
-var be = (e2) => {
-  const t3 = ge(e2.options.target).querySelectorAll(fe);
+var Pe = (e2) => {
+  const t3 = we(e2.options.target).querySelectorAll(ve);
   for (let n2 = 0, o = t3.length; n2 < o; n2++) {
     const o2 = t3[n2];
-    o2 && o2.getAttribute(c) !== a && (Se(e2, o2), o2.parentNode && o2.parentNode.removeChild(o2));
+    o2 && o2.getAttribute(l) !== c && (Ce(e2, o2), o2.parentNode && o2.parentNode.removeChild(o2));
   }
 };
-var we = false;
-function Ne() {
-  if (false !== we) return we;
+var Oe = false;
+function Ee() {
+  if (false !== Oe) return Oe;
   if ("undefined" != typeof document) {
     const e2 = document.head.querySelector('meta[property="csp-nonce"]');
-    if (e2) return we = e2.nonce || e2.getAttribute("content") || void 0;
+    if (e2) return Oe = e2.nonce || e2.getAttribute("content") || void 0;
     const t3 = document.head.querySelector('meta[name="sc-nonce"]');
-    if (t3) return we = t3.getAttribute("content") || void 0;
+    if (t3) return Oe = t3.getAttribute("content") || void 0;
   }
-  return we = "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
+  return Oe = "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
 }
-var Ce = (e2, t3) => {
+var Ie = (e2, t3) => {
   const n2 = document.head, o = e2 || n2, s = document.createElement("style"), r2 = ((e3) => {
-    const t4 = Array.from(e3.querySelectorAll(`style[${c}]`));
+    const t4 = Array.from(e3.querySelectorAll(`style[${l}]`));
     return t4[t4.length - 1];
   })(o), i2 = void 0 !== r2 ? r2.nextSibling : null;
-  s.setAttribute(c, a), s.setAttribute(l, u);
-  const h2 = t3 || Ne();
-  return h2 && s.setAttribute("nonce", h2), o.insertBefore(s, i2), s;
+  s.setAttribute(l, c), s.setAttribute(a, u);
+  const d2 = t3 || Ee();
+  return d2 && s.setAttribute("nonce", d2), o.insertBefore(s, i2), s;
 };
-var Oe = class {
+var Ae = class {
   constructor(e2, t3) {
-    this.element = Ce(e2, t3), this.element.appendChild(document.createTextNode("")), this.sheet = ((e3) => {
+    this.element = Ie(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;
@@ -6074,7 +6091,7 @@ var Oe = class {
         const o2 = n2[t5];
         if (o2.ownerNode === e3) return o2;
       }
-      throw v(17);
+      throw S(17);
     })(this.element), this.length = 0;
   }
   insertRule(e2, t3) {
@@ -6092,9 +6109,9 @@ var Oe = class {
     return t3 && t3.cssText ? t3.cssText : "";
   }
 };
-var Ee = class {
+var _e = class {
   constructor(e2, t3) {
-    this.element = Ce(e2, t3), this.nodes = this.element.childNodes, this.length = 0;
+    this.element = Ie(e2, t3), this.nodes = this.element.childNodes, this.length = 0;
   }
   insertRule(e2, t3) {
     if (e2 <= this.length && e2 >= 0) {
@@ -6110,14 +6127,28 @@ var Ee = class {
     return e2 < this.length ? this.nodes[e2].textContent : "";
   }
 };
-var Ae = d;
-var Pe = { isServer: !d, useCSSOMInjection: !f };
-var _e = class __e {
+var xe = class {
+  constructor(e2) {
+    this.rules = [], this.length = 0;
+  }
+  insertRule(e2, t3) {
+    return e2 <= this.length && (e2 === this.length ? this.rules.push(t3) : this.rules.splice(e2, 0, t3), this.length++, true);
+  }
+  deleteRule(e2) {
+    this.rules.splice(e2, 1), this.length--;
+  }
+  getRule(e2) {
+    return e2 < this.length ? this.rules[e2] : "";
+  }
+};
+var $e = h;
+var Re = { isServer: !h, useCSSOMInjection: !m };
+var je = class _je {
   static registerId(e2) {
-    return C(e2);
+    return P(e2);
   }
   constructor(e2 = $, t3 = {}, n2) {
-    this.options = Object.assign(Object.assign({}, Pe), e2), this.gs = t3, this.keyframeIds = /* @__PURE__ */ new Set(), this.names = new Map(n2), this.server = !!e2.isServer, !this.server && d && Ae && (Ae = false, be(this)), de(this, () => ((e3) => {
+    this.options = Object.assign(Object.assign({}, Re), e2), this.gs = t3, this.keyframeIds = /* @__PURE__ */ new Set(), this.names = new Map(n2), this.server = !!e2.isServer, !this.server && h && $e && ($e = false, Pe(this)), ge(this, () => ((e3) => {
       const t4 = e3.getTag(), { length: n3 } = t4;
       let o = "";
       for (let s = 0; s < n3; s++) {
@@ -6127,26 +6158,26 @@ var _e = class __e {
         if (void 0 === r2 || !r2.size) continue;
         const i2 = t4.getGroup(s);
         if (0 === i2.length) continue;
-        const a2 = c + ".g" + s + '[id="' + n4 + '"]';
-        let l2 = "";
-        for (const e4 of r2) e4.length > 0 && (l2 += e4 + ",");
-        o += i2 + a2 + '{content:"' + l2 + '"}' + h;
+        const c2 = l + ".g" + s + '[id="' + n4 + '"]';
+        let a2 = "";
+        for (const e4 of r2) e4.length > 0 && (a2 += e4 + ",");
+        o += i2 + c2 + '{content:"' + a2 + '"}' + d;
       }
       return o;
     })(this));
   }
   rehydrate() {
-    !this.server && d && be(this);
+    !this.server && h && Pe(this);
   }
   reconstructWithOptions(e2, t3 = true) {
-    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 && d && e2.target !== this.options.target && ge(this.options.target) !== ge(e2.target) && be(n2), n2;
+    const n2 = new _je(Object.assign(Object.assign({}, this.options), e2), this.gs, t3 && this.names || void 0);
+    return n2.keyframeIds = new Set(this.keyframeIds), !this.server && h && e2.target !== this.options.target && we(this.options.target) !== we(e2.target) && Pe(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 Oe(t3, n2) : new Ee(t3, n2))(this.options), new pe(e2)));
+    return this.tag || (this.tag = (e2 = (({ isServer: e3, useCSSOMInjection: t3, target: n2, nonce: o }) => e3 ? new xe(n2) : t3 ? new Ae(n2, o) : new _e(n2, o))(this.options), new ye(e2)));
     var e2;
   }
   hasNameForId(e2, t3) {
@@ -6154,30 +6185,30 @@ var _e = class __e {
     return null !== (o = null === (n2 = this.names.get(e2)) || void 0 === n2 ? void 0 : n2.has(t3)) && void 0 !== o && o;
   }
   registerName(e2, t3) {
-    C(e2), e2.startsWith(m) && this.keyframeIds.add(e2);
+    P(e2), e2.startsWith(g) && this.keyframeIds.add(e2);
     const n2 = this.names.get(e2);
     n2 ? n2.add(t3) : this.names.set(e2, /* @__PURE__ */ new Set([t3]));
   }
   insertRules(e2, t3, n2) {
-    this.registerName(e2, t3), this.getTag().insertRules(C(e2), n2);
+    this.registerName(e2, t3), this.getTag().insertRules(P(e2), n2);
   }
   clearNames(e2) {
     this.names.has(e2) && this.names.get(e2).clear();
   }
   clearRules(e2) {
-    this.getTag().clearGroup(C(e2)), this.clearNames(e2);
+    this.getTag().clearGroup(P(e2)), this.clearNames(e2);
   }
   clearTag() {
     this.tag = void 0;
   }
 };
-var Ie = /* @__PURE__ */ new WeakSet();
-var $e = { 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 Re(e2, t3) {
-  return null == t3 || "boolean" == typeof t3 || "" === t3 ? "" : "number" != typeof t3 || 0 === t3 || e2 in $e || e2.startsWith("--") ? String(t3).trim() : t3 + "px";
+var ke = /* @__PURE__ */ new WeakSet();
+var Te = { 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 De(e2, t3) {
+  return null == t3 || "boolean" == typeof t3 || "" === t3 ? "" : "number" != typeof t3 || 0 === t3 || e2 in Te || e2.startsWith("--") ? String(t3).trim() : t3 + "px";
 }
-var je = 47;
-function xe(e2) {
+var Me = 47;
+function Ve(e2) {
   if (45 === e2.charCodeAt(0) && 45 === e2.charCodeAt(1)) return e2;
   let t3 = "";
   for (let n2 = 0; n2 < e2.length; n2++) {
@@ -6186,50 +6217,65 @@ function xe(e2) {
   }
   return t3.startsWith("ms-") ? "-" + t3 : t3;
 }
-var Te = /* @__PURE__ */ Symbol.for("sc-keyframes");
-function ke(e2) {
-  return "object" == typeof e2 && null !== e2 && Te in e2;
+var Ge = /* @__PURE__ */ Symbol.for("sc-keyframes");
+function Fe(e2) {
+  return "object" == typeof e2 && null !== e2 && Ge in e2;
 }
-function De(e2) {
-  return re(e2) && !(e2.prototype && e2.prototype.isReactComponent);
+function ze(e2) {
+  return ie(e2) && !(e2.prototype && e2.prototype.isReactComponent);
 }
-var Ve = (e2) => null == e2 || false === e2 || "" === e2;
-var Me = /* @__PURE__ */ Symbol.for("react.client.reference");
-function Ge(e2) {
-  return e2.$$typeof === Me;
+var We = (e2) => null == e2 || false === e2 || "" === e2;
+var Be = /* @__PURE__ */ Symbol.for("react.client.reference");
+function Le(e2) {
+  return e2.$$typeof === Be;
 }
-function Fe(e2) {
+function qe(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 ze(e2, t3) {
+function He(e2, t3) {
   for (const n2 in e2) {
     const o = e2[n2];
-    e2.hasOwnProperty(n2) && !Ve(o) && (Array.isArray(o) && Ie.has(o) || re(o) ? t3.push(xe(n2) + ":", o, ";") : ue(o) ? (t3.push(n2 + " {"), ze(o, t3), t3.push("}")) : t3.push(xe(n2) + ": " + Re(n2, o) + ";"));
+    e2.hasOwnProperty(n2) && !We(o) && (Array.isArray(o) && ke.has(o) || ie(o) ? t3.push(Ve(n2) + ":", o, ";") : pe(o) ? (t3.push(n2 + " {"), He(o, t3), t3.push("}")) : t3.push(Ve(n2) + ": " + De(n2, o) + ";"));
   }
 }
-function We(e2, t3, n2, o, s = []) {
-  if (Ve(e2)) return s;
+function Ye(e2, t3, n2, o, s = []) {
+  if (We(e2)) return s;
   const r2 = typeof e2;
   if ("string" === r2) return s.push(e2), s;
   if ("function" === r2) {
-    if (Ge(e2)) return Fe(e2), s;
-    if (De(e2) && t3) {
+    if (Le(e2)) return qe(e2), s;
+    if (ze(e2) && t3) {
       const r3 = e2(t3);
-      return "object" != typeof r3 || Array.isArray(r3) || ke(r3) || ue(r3) || null === r3 || console.error(`${W(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.`), We(r3, t3, n2, o, s);
+      return "object" != typeof r3 || Array.isArray(r3) || Fe(r3) || pe(r3) || null === r3 || console.error(`${B(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.`), Ye(r3, t3, n2, o, s);
     }
     return s.push(e2), s;
   }
   if (Array.isArray(e2)) {
-    for (let r3 = 0; r3 < e2.length; r3++) We(e2[r3], t3, n2, o, s);
+    for (let r3 = 0; r3 < e2.length; r3++) Ye(e2[r3], t3, n2, o, s);
     return s;
   }
-  return ce(e2) ? (s.push(`.${e2.styledComponentId}`), s) : ke(e2) ? (n2 ? (e2.inject(n2, o), s.push(e2.getName(o))) : s.push(e2), s) : Ge(e2) ? (Fe(e2), s) : ue(e2) ? e2.toString !== Object.prototype.toString ? (s.push(e2.toString()), s) : (ze(e2, s), s) : (s.push(e2.toString()), s);
-}
-var Le = F(u);
-var Be = class {
+  return ce(e2) ? (s.push(`.${e2.styledComponentId}`), s) : Fe(e2) ? (n2 ? (e2.inject(n2, o), s.push(e2.getName(o))) : s.push(e2), s) : Le(e2) ? (qe(e2), s) : pe(e2) ? e2.toString !== Object.prototype.toString ? (s.push(e2.toString()), s) : (He(e2, s), s) : (s.push(e2.toString()), s);
+}
+var Ue = z(u);
+var Je = p ? /* @__PURE__ */ new WeakMap() : null;
+function Xe(e2, t3) {
+  if (!Je) return null;
+  const n2 = Je.get(e2);
+  if (!n2) return null;
+  const o = t3.names.get(e2.componentId);
+  if (!o) return null;
+  let s = "";
+  for (const e3 of o) {
+    const t4 = n2.get(e3);
+    if (!t4) return null;
+    s += t4;
+  }
+  return s;
+}
+var Ze = class {
   constructor(e2, t3, n2) {
-    this.rules = e2, this.componentId = t3, this.baseHash = G(Le, t3), this.baseStyle = n2, _e.registerId(t3);
+    this.rules = e2, this.componentId = t3, this.baseHash = F(Ue, t3), this.baseStyle = n2, je.registerId(t3);
   }
   generateAndInjectStyles(e2, t3, n2) {
     let o = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e2, t3, n2) : "";
@@ -6238,25 +6284,33 @@ var Be = class {
       for (let o2 = 0; o2 < this.rules.length; o2++) {
         const r2 = this.rules[o2];
         if ("string" == typeof r2) s += r2;
-        else if (r2) if (De(r2)) {
+        else if (r2) if (ze(r2)) {
           const o3 = r2(e2);
-          "string" == typeof o3 ? s += o3 : null != o3 && false !== o3 && ("object" != typeof o3 || Array.isArray(o3) || ke(o3) || ue(o3) || console.error(`${W(r2)} 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 += le(We(o3, e2, t3, n2)));
-        } else s += le(We(r2, e2, t3, n2));
+          "string" == typeof o3 ? s += o3 : null != o3 && false !== o3 && ("object" != typeof o3 || Array.isArray(o3) || Fe(o3) || pe(o3) || console.error(`${B(r2)} 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 += ue(Ye(o3, e2, t3, n2)));
+        } else s += ue(Ye(r2, e2, t3, n2));
       }
       if (s) {
         this.dynamicNameCache || (this.dynamicNameCache = /* @__PURE__ */ new Map());
         const e3 = n2.hash ? n2.hash + s : s;
         let r2 = this.dynamicNameCache.get(e3);
         if (!r2) {
-          if (r2 = V(G(G(this.baseHash, n2.hash), s) >>> 0), this.dynamicNameCache.size >= 200) {
+          if (r2 = V(F(F(this.baseHash, n2.hash), s) >>> 0), this.dynamicNameCache.size >= 200) {
             const e4 = this.dynamicNameCache.keys().next().value;
             void 0 !== e4 && this.dynamicNameCache.delete(e4);
           }
           this.dynamicNameCache.set(e3, r2);
         }
-        if (!t3.hasNameForId(this.componentId, r2)) {
+        if (!t3.hasNameForId(this.componentId, r2)) if (p && (function(e4, t4) {
+          var n3, o2;
+          return null !== (o2 = null === (n3 = null == Je ? void 0 : Je.get(e4)) || void 0 === n3 ? void 0 : n3.has(t4)) && void 0 !== o2 && o2;
+        })(this, r2)) t3.registerName(this.componentId, r2);
+        else {
           const e4 = n2(s, "." + r2, void 0, this.componentId);
-          t3.insertRules(this.componentId, r2, e4);
+          p && (function(e5, t4, n3) {
+            if (!Je) return;
+            let o2 = Je.get(e5);
+            o2 || (o2 = /* @__PURE__ */ new Map(), Je.set(e5, o2)), o2.set(t4, de(n3));
+          })(this, r2, e4), t3.insertRules(this.componentId, r2, e4);
         }
         o = ae(o, r2);
       }
@@ -6264,40 +6318,40 @@ var Be = class {
     return o;
   }
 };
-var qe = /&/g;
-function He(e2, t3) {
+var Ke = /&/g;
+function Qe(e2, t3) {
   let n2 = 0;
   for (; --t3 >= 0 && 92 === e2.charCodeAt(t3); ) n2++;
   return !(1 & ~n2);
 }
-function Ye(e2) {
+function et(e2) {
   const t3 = e2.length;
-  let n2 = "", o = 0, s = 0, r2 = 0, i2 = false, c2 = false;
-  for (let a2 = 0; a2 < t3; a2++) {
-    const l2 = e2.charCodeAt(a2);
-    if (0 !== r2 || i2 || l2 !== je || 42 !== e2.charCodeAt(a2 + 1)) if (i2) 42 === l2 && e2.charCodeAt(a2 + 1) === je && (i2 = false, a2++);
-    else if (34 !== l2 && 39 !== l2 || He(e2, a2)) {
-      if (0 === r2) if (123 === l2) s++;
-      else if (125 === l2) {
+  let n2 = "", o = 0, s = 0, r2 = 0, i2 = false, l2 = false;
+  for (let c2 = 0; c2 < t3; c2++) {
+    const a2 = e2.charCodeAt(c2);
+    if (0 !== r2 || i2 || a2 !== Me || 42 !== e2.charCodeAt(c2 + 1)) if (i2) 42 === a2 && e2.charCodeAt(c2 + 1) === Me && (i2 = false, c2++);
+    else if (34 !== a2 && 39 !== a2 || Qe(e2, c2)) {
+      if (0 === r2) if (123 === a2) s++;
+      else if (125 === a2) {
         if (s--, s < 0) {
-          c2 = true;
-          let n3 = a2 + 1;
+          l2 = true;
+          let n3 = c2 + 1;
           for (; n3 < t3; ) {
             const t4 = e2.charCodeAt(n3);
             if (59 === t4 || 10 === t4) break;
             n3++;
           }
-          n3 < t3 && 59 === e2.charCodeAt(n3) && n3++, s = 0, a2 = n3 - 1, o = n3;
+          n3 < t3 && 59 === e2.charCodeAt(n3) && n3++, s = 0, c2 = n3 - 1, o = n3;
           continue;
         }
-        0 === s && (n2 += e2.substring(o, a2 + 1), o = a2 + 1);
-      } else 59 === l2 && 0 === s && (n2 += e2.substring(o, a2 + 1), o = a2 + 1);
-    } else 0 === r2 ? r2 = l2 : r2 === l2 && (r2 = 0);
-    else i2 = true, a2++;
+        0 === s && (n2 += e2.substring(o, c2 + 1), o = c2 + 1);
+      } else 59 === a2 && 0 === s && (n2 += e2.substring(o, c2 + 1), o = c2 + 1);
+    } else 0 === r2 ? r2 = a2 : r2 === a2 && (r2 = 0);
+    else i2 = true, c2++;
   }
-  return c2 || 0 !== s || 0 !== r2 ? (o < t3 && 0 === s && 0 === r2 && (n2 += e2.substring(o)), n2) : e2;
+  return l2 || 0 !== s || 0 !== r2 ? (o < t3 && 0 === s && 0 === r2 && (n2 += e2.substring(o)), n2) : e2;
 }
-function Ue(e2, t3) {
+function tt(e2, t3) {
   const n2 = t3 + " ", o = "," + n2;
   for (let s = 0; s < e2.length; s++) {
     const r2 = e2[s];
@@ -6307,143 +6361,206 @@ function Ue(e2, t3) {
       for (let o2 = 0; o2 < e3.length; o2++) t4[o2] = n2 + e3[o2];
       r2.props = t4;
     }
-    Array.isArray(r2.children) && "@keyframes" !== r2.type && Ue(r2.children, t3);
+    Array.isArray(r2.children) && "@keyframes" !== r2.type && tt(r2.children, t3);
   }
   return e2;
 }
-function Je({ options: e2 = $, plugins: t3 = I } = $) {
+function nt({ options: e2 = $, plugins: t3 = x } = $) {
   let n2, s, r2;
-  const i2 = (e3, t4, o) => o.startsWith(s) && o.endsWith(s) && o.replaceAll(s, "").length > 0 ? `.${n2}` : e3, c2 = t3.slice();
-  c2.push((e3) => {
-    e3.type === RULESET && e3.value.includes("&") && (r2 || (r2 = new RegExp(`\\${s}\\b`, "g")), e3.props[0] = e3.props[0].replace(qe, s).replace(r2, i2));
-  }), e2.prefix && c2.push(prefixer), c2.push(stringify);
-  let a2 = [];
-  const l2 = middleware(c2.concat(rulesheet((e3) => a2.push(e3)))), u2 = (t4, i3 = "", c3 = "", u3 = "&") => {
+  const i2 = (e3, t4, o) => o.startsWith(s) && o.endsWith(s) && o.replaceAll(s, "").length > 0 ? `.${n2}` : e3, l2 = t3.slice();
+  l2.push((e3) => {
+    e3.type === RULESET && e3.value.includes("&") && (r2 || (r2 = new RegExp(`\\${s}\\b`, "g")), e3.props[0] = e3.props[0].replace(Ke, s).replace(r2, i2));
+  }), e2.prefix && l2.push(prefixer), l2.push(stringify);
+  let c2 = [];
+  const a2 = middleware(l2.concat(rulesheet((e3) => c2.push(e3)))), u2 = (t4, i3 = "", l3 = "", u3 = "&") => {
     n2 = u3, s = i3, r2 = void 0;
-    const h3 = (function(e3) {
+    const d3 = (function(e3) {
       const t5 = -1 !== e3.indexOf("//"), n3 = -1 !== e3.indexOf("}");
       if (!t5 && !n3) return e3;
-      if (!t5) return Ye(e3);
+      if (!t5) return et(e3);
       const o = e3.length;
-      let s2 = "", r3 = 0, i4 = 0, c4 = 0, a3 = 0, l3 = 0, u4 = false;
+      let s2 = "", r3 = 0, i4 = 0, l4 = 0, c3 = 0, a3 = 0, u4 = false;
       for (; i4 < o; ) {
         const t6 = e3.charCodeAt(i4);
-        if (34 !== t6 && 39 !== t6 || He(e3, i4)) if (0 === c4) if (t6 === je && i4 + 1 < o && 42 === e3.charCodeAt(i4 + 1)) {
-          for (i4 += 2; i4 + 1 < o && (42 !== e3.charCodeAt(i4) || e3.charCodeAt(i4 + 1) !== je); ) i4++;
+        if (34 !== t6 && 39 !== t6 || Qe(e3, i4)) if (0 === l4) if (t6 === Me && i4 + 1 < o && 42 === e3.charCodeAt(i4 + 1)) {
+          for (i4 += 2; i4 + 1 < o && (42 !== e3.charCodeAt(i4) || e3.charCodeAt(i4 + 1) !== Me); ) i4++;
           i4 += 2;
-        } else if (40 !== t6) if (41 !== t6) if (a3 > 0) i4++;
-        else if (42 === t6 && i4 + 1 < o && e3.charCodeAt(i4 + 1) === je) s2 += e3.substring(r3, i4), i4 += 2, r3 = i4, u4 = true;
-        else if (t6 === je && i4 + 1 < o && e3.charCodeAt(i4 + 1) === je) {
+        } else if (40 !== t6) if (41 !== t6) if (c3 > 0) i4++;
+        else if (42 === t6 && i4 + 1 < o && e3.charCodeAt(i4 + 1) === Me) s2 += e3.substring(r3, i4), i4 += 2, r3 = i4, u4 = true;
+        else if (t6 === Me && i4 + 1 < o && e3.charCodeAt(i4 + 1) === Me) {
           for (s2 += e3.substring(r3, i4); i4 < o && 10 !== e3.charCodeAt(i4); ) i4++;
           r3 = i4, u4 = true;
-        } else 123 === t6 ? l3++ : 125 === t6 && l3--, i4++;
-        else a3 > 0 && a3--, i4++;
-        else a3++, i4++;
+        } else 123 === t6 ? a3++ : 125 === t6 && a3--, i4++;
+        else c3 > 0 && c3--, i4++;
+        else c3++, i4++;
         else i4++;
-        else 0 === c4 ? c4 = t6 : c4 === t6 && (c4 = 0), i4++;
+        else 0 === l4 ? l4 = t6 : l4 === t6 && (l4 = 0), i4++;
       }
-      return u4 ? (r3 < o && (s2 += e3.substring(r3)), 0 === l3 ? s2 : Ye(s2)) : 0 === l3 ? e3 : Ye(e3);
+      return u4 ? (r3 < o && (s2 += e3.substring(r3)), 0 === a3 ? s2 : et(s2)) : 0 === a3 ? e3 : et(e3);
     })(t4);
-    let d3 = compile(c3 || i3 ? c3 + " " + i3 + " { " + h3 + " }" : h3);
-    return e2.namespace && (d3 = Ue(d3, e2.namespace)), a2 = [], serialize(d3, l2), a2;
-  }, h2 = e2;
-  let d2 = M;
-  for (let e3 = 0; e3 < t3.length; e3++) t3[e3].name || v(15), d2 = G(d2, t3[e3].name);
-  return (null == h2 ? void 0 : h2.namespace) && (d2 = G(d2, h2.namespace)), (null == h2 ? void 0 : h2.prefix) && (d2 = G(d2, "p")), u2.hash = d2 !== M ? d2.toString() : "", u2;
-}
-var Xe = new _e();
-var Ke = Je();
-var Qe = t2.createContext({ shouldForwardProp: void 0, styleSheet: Xe, stylis: Ke, stylisPlugins: void 0 });
-var Ze = Qe.Consumer;
-function et() {
-  return t2.useContext(Qe);
-}
-var nt = t2.createContext(void 0);
-var ot = nt.Consumer;
-function rt(e2) {
-  const n2 = t2.useContext(nt), o = t2.useMemo(() => (function(e3, t3) {
-    if (!e3) throw v(14);
-    if (re(e3)) {
+    let h3 = compile(l3 || i3 ? l3 + " " + i3 + " { " + d3 + " }" : d3);
+    return e2.namespace && (h3 = tt(h3, e2.namespace)), c2 = [], serialize(h3, a2), c2;
+  }, d2 = e2;
+  let h2 = G;
+  for (let e3 = 0; e3 < t3.length; e3++) t3[e3].name || S(15), h2 = F(h2, t3[e3].name);
+  return (null == d2 ? void 0 : d2.namespace) && (h2 = F(h2, d2.namespace)), (null == d2 ? void 0 : d2.prefix) && (h2 = F(h2, "p")), u2.hash = h2 !== G ? h2.toString() : "", u2;
+}
+var ot;
+var st;
+var rt;
+var it = new je();
+var lt = nt();
+var at = null;
+var dt = p && null !== (rt = null === (st = (ot = t2).cache) || void 0 === st ? void 0 : st.call(ot, () => {
+  it.names.clear(), it.keyframeIds.clear(), it.clearTag(), at = null;
+})) && void 0 !== rt ? rt : null;
+var ht = { shouldForwardProp: void 0, styleSheet: it, stylis: lt, stylisPlugins: void 0 };
+var pt = p ? { Provider: ({ children: e2 }) => e2, Consumer: ({ children: e2 }) => e2(ht) } : t2.createContext(ht);
+var ft = pt.Consumer;
+function mt() {
+  return p ? (dt && dt(), at || ht) : t2.useContext(pt);
+}
+var yt = p ? { Provider: ({ children: e2 }) => e2, Consumer: ({ children: e2 }) => e2(void 0) } : t2.createContext(void 0);
+var vt = yt.Consumer;
+function bt(e2) {
+  if (p) return e2.children;
+  const n2 = t2.useContext(yt), o = t2.useMemo(() => (function(e3, t3) {
+    if (!e3) throw S(14);
+    if (ie(e3)) {
       const n3 = e3(t3);
-      if (null === n3 || Array.isArray(n3) || "object" != typeof n3) throw v(7);
+      if (null === n3 || Array.isArray(n3) || "object" != typeof n3) throw S(7);
       return n3;
     }
-    if (Array.isArray(e3) || "object" != typeof e3) throw v(8);
+    if (Array.isArray(e3) || "object" != typeof e3) throw S(8);
     return t3 ? Object.assign(Object.assign({}, t3), e3) : e3;
   })(e2.theme, n2), [e2.theme, n2]);
-  return e2.children ? t2.createElement(nt.Provider, { value: o }, e2.children) : null;
+  return e2.children ? t2.createElement(yt.Provider, { value: o }, e2.children) : null;
 }
-var it = Object.prototype.hasOwnProperty;
-var ct = {};
-function at(e2, t3) {
+var wt = {};
+function Nt(e2, t3) {
   const n2 = "string" != typeof e2 ? "sc" : T(e2);
-  ct[n2] = (ct[n2] || 0) + 1;
-  const o = n2 + "-" + z(u + n2 + ct[n2]);
+  wt[n2] = (wt[n2] || 0) + 1;
+  const o = n2 + "-" + W(u + n2 + wt[n2]);
   return t3 ? t3 + "-" + o : o;
 }
-var lt;
-function ut(o, s, r2) {
-  const i2 = ce(o), c2 = o, a2 = !L(o), { attrs: l2 = I, componentId: u2 = at(s.displayName, s.parentComponentId), displayName: h2 = B(o) } = s, d2 = s.displayName && s.componentId ? T(s.displayName) + "-" + s.componentId : s.componentId || u2, p2 = i2 && c2.attrs ? c2.attrs.concat(l2).filter(Boolean) : l2;
-  let { shouldForwardProp: f2 } = s;
+var Ct;
+var Pt = me(() => /* @__PURE__ */ new Set());
+var Ot = /* @__PURE__ */ new Map();
+function Et(e2) {
+  let t3 = Ot.get(e2);
+  return t3 || (t3 = new RegExp("\\." + e2 + "(?![a-zA-Z0-9_-])", "g"), Ot.set(e2, t3)), t3;
+}
+function It(e2, t3, n2) {
+  const o = n2.names.get(t3);
+  if (o) for (const t4 of o) {
+    const n3 = Et(t4);
+    n3.lastIndex = 0, e2 = e2.replace(n3, ":where(." + t4 + ")");
+  }
+  return e2;
+}
+function At(o, s, r2) {
+  const i2 = ce(o), c2 = o, a2 = !L(o), { attrs: u2 = x, componentId: h2 = Nt(s.displayName, s.parentComponentId), displayName: f2 = q(o) } = s, m2 = s.displayName && s.componentId ? T(s.displayName) + "-" + s.componentId : s.componentId || h2, g2 = i2 && c2.attrs ? c2.attrs.concat(u2).filter(Boolean) : u2;
+  let { shouldForwardProp: y2 } = s;
   if (i2 && c2.shouldForwardProp) {
     const e2 = c2.shouldForwardProp;
     if (s.shouldForwardProp) {
       const t3 = s.shouldForwardProp;
-      f2 = (n2, o2) => e2(n2, o2) && t3(n2, o2);
-    } else f2 = e2;
+      y2 = (n2, o2) => e2(n2, o2) && t3(n2, o2);
+    } else y2 = e2;
   }
-  const m2 = new Be(r2, d2, i2 ? c2.componentStyle : void 0);
-  function y2(o2, s2) {
+  const v2 = new Ze(r2, m2, i2 ? c2.componentStyle : void 0);
+  function S2(o2, s2) {
     return (function(o3, s3, r3) {
-      const { attrs: i3, componentStyle: c3, defaultProps: a3, foldedComponentIds: l3, styledComponentId: u3, target: h3 } = o3, d3 = t2.useContext(nt), p3 = et(), f3 = o3.shouldForwardProp || p3.shouldForwardProp;
-      t2.useDebugValue && t2.useDebugValue(u3);
-      const m3 = R(s3, d3, a3) || $;
-      let y3, g3;
-      {
-        const e2 = t2.useRef(null), n2 = e2.current;
-        if (null !== n2 && n2[1] === m3 && n2[2] === p3.styleSheet && n2[3] === p3.stylis && n2[7] === c3 && (function(e3, t3, n3) {
-          const o4 = e3, s4 = t3;
-          let r4 = 0;
-          for (const e4 in s4) if (it.call(s4, e4) && (r4++, o4[e4] !== s4[e4])) return false;
-          return r4 === n3;
-        })(n2[0], s3, n2[4])) y3 = n2[5], g3 = n2[6];
-        else {
-          y3 = (function(e3, t3, n4) {
-            const o4 = Object.assign(Object.assign({}, t3), { className: void 0, theme: n4 }), s4 = e3.length > 1;
-            for (let n5 = 0; n5 < e3.length; n5++) {
-              const r4 = e3[n5], i4 = re(r4) ? r4(s4 ? Object.assign({}, o4) : o4) : r4;
-              for (const e4 in i4) "className" === e4 ? o4.className = ae(o4.className, i4[e4]) : "style" === e4 ? o4.style = Object.assign(Object.assign({}, o4.style), i4[e4]) : e4 in t3 && void 0 === t3[e4] || (o4[e4] = i4[e4]);
-            }
-            return "className" in t3 && "string" == typeof t3.className && (o4.className = ae(o4.className, t3.className)), o4;
-          })(i3, s3, m3), g3 = (function(e3, n4, o4, s4) {
-            const r4 = e3.generateAndInjectStyles(n4, o4, s4);
-            return t2.useDebugValue && t2.useDebugValue(r4), r4;
-          })(c3, y3, p3.styleSheet, p3.stylis);
-          let n3 = 0;
-          for (const e3 in s3) it.call(s3, e3) && n3++;
-          e2.current = [s3, m3, p3.styleSheet, p3.stylis, n3, y3, g3, c3];
+      const { attrs: i3, componentStyle: c3, defaultProps: a3, foldedComponentIds: u3, styledComponentId: h3, target: f3 } = o3, m3 = p ? void 0 : t2.useContext(yt), g3 = mt(), y3 = o3.shouldForwardProp || g3.shouldForwardProp;
+      t2.useDebugValue && t2.useDebugValue(h3);
+      const v3 = R(s3, m3, a3) || (p ? void 0 : $);
+      let S3, b3;
+      S3 = (function(e2, t3, n2) {
+        const o4 = Object.assign(Object.assign({}, t3), { className: void 0, theme: n2 }), s4 = e2.length > 1;
+        for (let n3 = 0; n3 < e2.length; n3++) {
+          const r4 = e2[n3], i4 = ie(r4) ? r4(s4 ? Object.assign({}, o4) : o4) : r4;
+          for (const e3 in i4) "className" === e3 ? o4.className = ae(o4.className, i4[e3]) : "style" === e3 ? o4.style = Object.assign(Object.assign({}, o4.style), i4[e3]) : e3 in t3 && void 0 === t3[e3] || (o4[e3] = i4[e3]);
         }
-      }
-      o3.warnTooManyClasses && o3.warnTooManyClasses(g3);
-      const v2 = y3.as || h3, S2 = (function(t3, n2, o4, s4) {
+        return "className" in t3 && "string" == typeof t3.className && (o4.className = ae(o4.className, t3.className)), o4;
+      })(i3, s3, v3), b3 = (function(e2, n2, o4, s4) {
+        const r4 = e2.generateAndInjectStyles(n2, o4, s4);
+        return t2.useDebugValue && t2.useDebugValue(r4), r4;
+      })(c3, S3, g3.styleSheet, g3.stylis), o3.warnTooManyClasses && o3.warnTooManyClasses(b3);
+      const w2 = S3.as || f3, N2 = (function(t3, n2, o4, s4) {
         const r4 = {};
-        for (const i4 in t3) void 0 === t3[i4] || "$" === i4[0] || "as" === i4 || "theme" === i4 && t3.theme === o4 || ("forwardedAs" === i4 ? r4.as = t3.forwardedAs : s4 && !s4(i4, n2) || (r4[i4] = t3[i4], s4 || false || isPropValid(i4) || (lt || (lt = /* @__PURE__ */ new Set())).has(i4) || !L(n2) || n2.includes("-") || (lt.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 === o4 || ("forwardedAs" === i4 ? r4.as = t3.forwardedAs : s4 && !s4(i4, n2) || (r4[i4] = t3[i4], s4 || false || isPropValid(i4) || (Ct || (Ct = /* @__PURE__ */ new Set())).has(i4) || !L(n2) || n2.includes("-") || (Ct.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 r4;
-      })(y3, v2, m3, f3);
-      let b2 = ae(l3, u3);
-      return g3 && (b2 += " " + g3), y3.className && (b2 += " " + y3.className), S2[L(v2) && v2.includes("-") ? "class" : "className"] = b2, r3 && (S2.ref = r3), n(v2, S2);
-    })(g2, o2, s2);
-  }
-  y2.displayName = h2;
-  let g2 = t2.forwardRef(y2);
-  return g2.attrs = p2, g2.componentStyle = m2, g2.displayName = h2, g2.shouldForwardProp = f2, g2.foldedComponentIds = i2 ? ae(c2.foldedComponentIds, c2.styledComponentId) : "", g2.styledComponentId = d2, g2.target = i2 ? c2.target : o, Object.defineProperty(g2, "defaultProps", { get() {
+      })(S3, w2, v3, y3);
+      let C2 = ae(u3, h3);
+      b3 && (C2 += " " + b3), S3.className && (C2 += " " + S3.className), N2[L(w2) && w2.includes("-") ? "class" : "className"] = C2, r3 && (N2.ref = r3);
+      const O2 = n(w2, N2);
+      if (p) {
+        const e2 = Pt ? Pt() : null;
+        let n2 = null, o4 = 0, s4 = "", r4 = true, i4 = c3;
+        for (; i4; ) {
+          const t3 = g3.styleSheet.names.get(i4.componentId);
+          if (t3) {
+            o4 += t3.size;
+            for (const o5 of t3) e2 && e2.has(o5) || (n2 || (n2 = []), n2.push(o5), e2 && e2.add(o5));
+          }
+          if (n2 && r4) {
+            let e3 = Xe(i4, g3.styleSheet);
+            null === e3 ? r4 = false : (i4 !== c3 && (e3 = It(e3, i4.componentId, g3.styleSheet)), s4 = e3 + s4);
+          }
+          i4 = i4.baseStyle;
+        }
+        if (n2 && !r4) {
+          s4 = "";
+          const e3 = g3.styleSheet.getTag();
+          let t3 = c3;
+          for (; t3; ) {
+            let n3 = e3.getGroup(P(t3.componentId));
+            n3 && t3 !== c3 && (n3 = It(n3, t3.componentId, g3.styleSheet)), s4 = n3 + s4, t3 = t3.baseStyle;
+          }
+        }
+        let a4 = "";
+        if (g3.styleSheet.keyframeIds.size > 0) {
+          const t3 = g3.styleSheet.getTag();
+          for (const n3 of g3.styleSheet.keyframeIds) {
+            if (e2 && e2.has(n3)) continue;
+            const o5 = t3.getGroup(P(n3));
+            o5 && (a4 += o5, e2 && e2.add(n3));
+          }
+        }
+        if (s4 && e2 && n2 && n2.length < o4) {
+          const e3 = s4.split(d);
+          let t3 = "";
+          for (let o5 = 0; o5 < e3.length; o5++) {
+            const s5 = e3[o5];
+            if (s5) for (let e4 = 0; e4 < n2.length; e4++) {
+              const o6 = Et(n2[e4]);
+              if (o6.lastIndex = 0, o6.test(s5)) {
+                t3 += s5 + d;
+                break;
+              }
+            }
+          }
+          s4 = t3;
+        }
+        const u4 = he(a4 + s4);
+        if (u4) {
+          const e3 = t2.createElement("style", { [l]: "", key: "sc-" + c3.componentId, children: u4 });
+          return t2.createElement(t2.Fragment, null, e3, O2);
+        }
+      }
+      return O2;
+    })(b2, o2, s2);
+  }
+  S2.displayName = f2;
+  let b2 = t2.forwardRef(S2);
+  return b2.attrs = g2, b2.componentStyle = v2, b2.displayName = f2, b2.shouldForwardProp = y2, b2.foldedComponentIds = i2 ? ae(c2.foldedComponentIds, c2.styledComponentId) : "", b2.styledComponentId = m2, b2.target = i2 ? c2.target : o, Object.defineProperty(b2, "defaultProps", { get() {
     return this._foldedDefaultProps;
   }, set(e2) {
     this._foldedDefaultProps = i2 ? (function(e3, ...t3) {
-      for (const n2 of t3) he(e3, n2, true);
+      for (const n2 of t3) fe(e3, n2, true);
       return e3;
     })({}, c2.defaultProps, e2) : e2;
-  } }), _(h2, d2), g2.warnTooManyClasses = /* @__PURE__ */ ((e2, t3) => {
+  } }), _(f2, m2), b2.warnTooManyClasses = /* @__PURE__ */ ((e2, t3) => {
     let n2 = {}, o2 = false;
     return (s2) => {
       !o2 && (n2[s2] = true, Object.keys(n2).length >= 200) && (console.warn(`Over 200 classes were generated for component ${e2}${t3 ? ` with the id of "${t3}"` : ""}.
@@ -6457,39 +6574,39 @@ Example:
   <Component />`), o2 = true, n2 = {});
     };
-  })(h2, d2), de(g2, () => `.${g2.styledComponentId}`), a2 && se(g2, o, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), g2;
+  })(f2, m2), ge(b2, () => `.${b2.styledComponentId}`), a2 && re(b2, o, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), b2;
 }
-var ht = /* @__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 dt(e2, t3) {
+var _t = /* @__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 xt(e2, t3) {
   const n2 = [e2[0]];
   for (let o = 0, s = t3.length; o < s; o += 1) n2.push(t3[o], e2[o + 1]);
   return n2;
 }
-var pt = (e2) => (Ie.add(e2), e2);
-function ft(e2, ...t3) {
-  if (re(e2) || ue(e2)) return pt(We(dt(I, [e2, ...t3])));
+var $t = (e2) => (ke.add(e2), e2);
+function Rt(e2, ...t3) {
+  if (ie(e2) || pe(e2)) return $t(Ye(xt(x, [e2, ...t3])));
   const n2 = e2;
-  return 0 === t3.length && 1 === n2.length && "string" == typeof n2[0] ? We(n2) : pt(We(dt(n2, t3)));
+  return 0 === t3.length && 1 === n2.length && "string" == typeof n2[0] ? Ye(n2) : $t(Ye(xt(n2, t3)));
 }
-function mt(e2, t3, n2 = $) {
-  if (!t3) throw v(1, t3);
-  const o = (o2, ...s) => e2(t3, n2, ft(o2, ...s));
-  return o.attrs = (o2) => mt(e2, t3, Object.assign(Object.assign({}, n2), { attrs: Array.prototype.concat(n2.attrs, o2).filter(Boolean) })), o.withConfig = (o2) => mt(e2, t3, Object.assign(Object.assign({}, n2), o2)), o;
+function jt(e2, t3, n2 = $) {
+  if (!t3) throw S(1, t3);
+  const o = (o2, ...s) => e2(t3, n2, Rt(o2, ...s));
+  return o.attrs = (o2) => jt(e2, t3, Object.assign(Object.assign({}, n2), { attrs: Array.prototype.concat(n2.attrs, o2).filter(Boolean) })), o.withConfig = (o2) => jt(e2, t3, Object.assign(Object.assign({}, n2), o2)), o;
 }
-var yt = (e2) => mt(ut, e2);
-var gt = yt;
-ht.forEach((e2) => {
-  gt[e2] = yt(e2);
+var kt = (e2) => jt(At, e2);
+var Tt = kt;
+_t.forEach((e2) => {
+  Tt[e2] = kt(e2);
 });
-var vt = class {
+var Dt = class {
   constructor(e2, t3) {
     this.instanceRules = /* @__PURE__ */ new Map(), this.rules = e2, this.componentId = t3, this.isStatic = (function(e3) {
       for (let t4 = 0; t4 < e3.length; t4 += 1) {
         const n2 = e3[t4];
-        if (re(n2) && !ce(n2)) return false;
+        if (ie(n2) && !ce(n2)) return false;
       }
       return true;
-    })(e2), _e.registerId(this.componentId);
+    })(e2), je.registerId(this.componentId);
   }
   removeStyles(e2, t3) {
     this.instanceRules.delete(e2), this.rebuildGroup(t3);
@@ -6519,7 +6636,7 @@ var vt = class {
     this.rebuildGroup(n2);
   }
   computeRules(e2, t3, n2, o) {
-    const s = le(We(this.rules, t3, n2, o)), r2 = { name: this.componentId + e2, rules: o(s, "") };
+    const s = ue(Ye(this.rules, t3, n2, o)), r2 = { name: this.componentId + e2, rules: o(s, "") };
     return this.instanceRules.set(e2, r2), r2;
   }
   rebuildGroup(e2) {
@@ -6528,64 +6645,74 @@ var vt = class {
     for (const n2 of this.instanceRules.values()) e2.insertRules(t3, n2.name, n2.rules);
   }
 };
-function St(e2, ...n2) {
-  const o = ft(e2, ...n2), s = `sc-global-${z(JSON.stringify(o))}`, r2 = new vt(o, s);
+var Mt = me(() => /* @__PURE__ */ new Set());
+function Vt(e2, ...n2) {
+  const o = Rt(e2, ...n2), s = `sc-global-${W(JSON.stringify(o))}`, r2 = new Dt(o, s);
   _(s);
   const i2 = (e3) => {
-    const n3 = et(), i3 = t2.useContext(nt);
-    let a2;
-    {
-      const e4 = t2.useRef(null);
-      null === e4.current && (e4.current = n3.styleSheet.allocateGSInstance(s)), a2 = e4.current;
+    const n3 = mt(), l2 = p ? void 0 : t2.useContext(yt);
+    let c2;
+    if (c2 = n3.styleSheet.allocateGSInstance(s), t2.Children.count(e3.children) && console.warn(`The global style component ${s} was given child JSX. createGlobalStyle does not render children.`), o.some((e4) => "string" == typeof e4 && -1 !== e4.indexOf("@import")) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), (p || n3.styleSheet.server) && (function(e4, t3, n4, o2, s2) {
+      if (r2.isStatic) r2.renderStyles(e4, y, n4, s2);
+      else {
+        const l3 = Object.assign(Object.assign({}, t3), { theme: R(t3, o2, i2.defaultProps) });
+        r2.renderStyles(e4, l3, n4, s2);
+      }
+    })(c2, e3, n3.styleSheet, l2, n3.stylis), p) {
+      const e4 = "undefined" == typeof window ? r2.instanceRules.get(c2) : void 0, o2 = e4 ? de(e4.rules) : "";
+      if (o2) {
+        r2.instanceRules.delete(c2);
+        const e5 = Mt ? Mt() : null;
+        if (e5) {
+          const t3 = r2.isStatic ? s + n3.stylis.hash : o2;
+          if (e5.has(t3)) return null;
+          e5.add(t3);
+        }
+        return t2.createElement("style", { key: s + "-" + c2, "data-styled-global": s, children: he(o2) });
+      }
     }
-    t2.Children.count(e3.children) && console.warn(`The global style component ${s} was given child JSX. createGlobalStyle does not render children.`), o.some((e4) => "string" == typeof e4 && -1 !== e4.indexOf("@import")) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), n3.styleSheet.server && c2(a2, e3, n3.styleSheet, i3, n3.stylis);
-    {
-      const o2 = r2.isStatic ? [a2, n3.styleSheet, r2] : [a2, e3, n3.styleSheet, i3, n3.stylis, r2], l2 = t2.useRef(r2);
-      t2.useLayoutEffect(() => {
-        n3.styleSheet.server || (l2.current !== r2 && (n3.styleSheet.clearRules(s), l2.current = r2), c2(a2, e3, n3.styleSheet, i3, n3.stylis));
-      }, o2), t2.useLayoutEffect(() => () => {
-        n3.styleSheet.server || r2.removeStyles(a2, n3.styleSheet);
-      }, [a2, n3.styleSheet, r2]);
-    }
-    return n3.styleSheet.server && r2.instanceRules.delete(a2), null;
+    return r2.instanceRules.delete(c2), null;
   };
-  function c2(e3, t3, n3, o2, s2) {
-    if (r2.isStatic) r2.renderStyles(e3, y, n3, s2);
-    else {
-      const c3 = Object.assign(Object.assign({}, t3), { theme: R(t3, o2, i2.defaultProps) });
-      r2.renderStyles(e3, c3, n3, s2);
-    }
-  }
   return t2.memo(i2);
 }
-var Ct;
-var Ot = class {
+var Wt;
+var Bt = p ? /* @__PURE__ */ new WeakMap() : null;
+var Lt = class {
   constructor(e2, t3) {
-    this[Ct] = true, this.inject = (e3, t4 = Ke) => {
-      const n2 = this.getName(t4);
-      if (!e3.hasNameForId(this.id, n2)) {
-        const o = t4(this.rules, n2, "@keyframes");
-        e3.insertRules(this.id, n2, o);
-      }
-    }, this.name = e2, this.id = m + e2, this.rules = t3, C(this.id), de(this, () => {
-      throw v(12, String(this.name));
+    this[Wt] = true, this.inject = (e3, t4 = lt) => {
+      var n2;
+      const o = this.getName(t4);
+      if (!e3.hasNameForId(this.id, o)) {
+        const s = t4.hash || "", r2 = p ? null === (n2 = null == Bt ? void 0 : Bt.get(this)) || void 0 === n2 ? void 0 : n2.get(s) : void 0;
+        if (r2) e3.insertRules(this.id, o, r2);
+        else {
+          const n3 = t4(this.rules, o, "@keyframes");
+          if (p && Bt) {
+            let e4 = Bt.get(this);
+            e4 || (e4 = /* @__PURE__ */ new Map(), Bt.set(this, e4)), e4.set(s, n3);
+          }
+          e3.insertRules(this.id, o, n3);
+        }
+      }
+    }, this.name = e2, this.id = g + e2, this.rules = t3, P(this.id), ge(this, () => {
+      throw S(12, String(this.name));
     });
   }
-  getName(e2 = Ke) {
+  getName(e2 = lt) {
     return e2.hash ? this.name + V(+e2.hash >>> 0) : this.name;
   }
 };
-function Et(e2, ...t3) {
+function qt(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 = le(ft(e2, ...t3)), o = z(n2);
-  return new Ot(o, n2);
+  const n2 = ue(Rt(e2, ...t3)), o = W(n2);
+  return new Lt(o, n2);
 }
-Ct = Te;
+Wt = Ge;
 "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 It = `__sc-${c}__`;
-"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[${c}])`;
-var jt = `style[${c}]`;
+var Xt = `__sc-${l}__`;
+"undefined" != typeof window && (window[Xt] || (window[Xt] = 0), 1 === window[Xt] && 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[Xt] += 1);
+var Kt = `:not(style[${l}])`;
+var Qt = `style[${l}]`;
 // node_modules/@schematichq/schematic-icons/dist/types.js
 var iconsList = {
@@ -6725,7 +6852,7 @@ var FONT_FACE_RULE = `@font-face {
 }`;
 // node_modules/@schematichq/schematic-icons/dist/components/Icon/styles.js
-var IconStyles = St`
+var IconStyles = Vt`
   ${FONT_FACE_RULE};
   .icon {
@@ -6742,7 +6869,7 @@ var IconStyles = St`
     }
   }
 `;
-var StyledIcon = gt.i`
+var StyledIcon = Tt.i`
   &:before {
     content: "\\${(props) => iconsList[props.$name].toString(16).padStart(4, "0")}";
   }
@@ -7509,7 +7636,9 @@ function BillingLinkedResourceResponseDataFromJSONTyped(json, ignoreDiscriminato
 // src/api/checkoutexternal/models/BillingPlanCreditGrantResetCadence.ts
 var BillingPlanCreditGrantResetCadence = {
   Daily: "daily",
+  Every6Months: "every_6_months",
   Monthly: "monthly",
+  Quarterly: "quarterly",
   Weekly: "weekly",
   Yearly: "yearly"
 };
@@ -8710,6 +8839,21 @@ function EntitlementPriceBehaviorFromJSONTyped(json, ignoreDiscriminator) {
   return json;
 }
+// src/api/checkoutexternal/models/WarningTierResponseData.ts
+function WarningTierResponseDataFromJSON(json) {
+  return WarningTierResponseDataFromJSONTyped(json, false);
+}
+function WarningTierResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    id: json["id"],
+    key: json["key"],
+    value: json["value"]
+  };
+}
 // src/api/checkoutexternal/models/PlanIcon.ts
 function PlanIconFromJSON(json) {
   return PlanIconFromJSONTyped(json, false);
@@ -8789,7 +8933,10 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
     valueTrait: json["value_trait"] == null ? void 0 : EntityTraitDefinitionResponseDataFromJSON(json["value_trait"]),
     valueTraitId: json["value_trait_id"] == null ? void 0 : json["value_trait_id"],
-    valueType: EntitlementValueTypeFromJSON(json["value_type"])
+    valueType: EntitlementValueTypeFromJSON(json["value_type"]),
+    warningTiers: json["warning_tiers"].map(
+      WarningTierResponseDataFromJSON
+    )
   };
 }
@@ -11499,6 +11646,21 @@ function GenericPreviewObjectFromJSONTyped5(json, ignoreDiscriminator) {
   };
 }
+// src/api/componentspublic/models/WarningTierResponseData.ts
+function WarningTierResponseDataFromJSON2(json) {
+  return WarningTierResponseDataFromJSONTyped3(json, false);
+}
+function WarningTierResponseDataFromJSONTyped3(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    id: json["id"],
+    key: json["key"],
+    value: json["value"]
+  };
+}
 // src/api/componentspublic/models/PlanIcon.ts
 function PlanIconFromJSON2(json) {
   return PlanIconFromJSONTyped7(json, false);
@@ -11578,7 +11740,10 @@ function PlanEntitlementResponseDataFromJSONTyped6(json, ignoreDiscriminator) {
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
     valueTrait: json["value_trait"] == null ? void 0 : EntityTraitDefinitionResponseDataFromJSON2(json["value_trait"]),
     valueTraitId: json["value_trait_id"] == null ? void 0 : json["value_trait_id"],
-    valueType: EntitlementValueTypeFromJSON2(json["value_type"])
+    valueType: EntitlementValueTypeFromJSON2(json["value_type"]),
+    warningTiers: json["warning_tiers"].map(
+      WarningTierResponseDataFromJSON2
+    )
   };
 }
@@ -13022,8 +13187,13 @@ var ZERO_DECIMAL_CURRENCIES = /* @__PURE__ */ new Set([
 function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
-function formatNumber(num) {
-  return new Intl.NumberFormat("en-US").format(num);
+function formatNumber(num, options) {
+  return new Intl.NumberFormat("en-US", options).format(num);
+}
+function formatConsumptionRate(rate) {
+  return formatNumber(rate, {
+    maximumFractionDigits: MAXIMUM_FRACTION_DIGITS
+  });
 }
 function formatCurrency(amount, options) {
   let currency = DEFAULT_CURRENCY;
@@ -13146,7 +13316,7 @@ function getCurrencySymbol(currency) {
 // src/utils/style.ts
 function attr(key, value) {
   if (typeof value !== "undefined") {
-    return ft`
+    return Rt`
       ${key}: ${value};
     `;
   }
@@ -13362,6 +13532,7 @@ var reducer = (state, action) => {
           ...config.payInAdvanceQuantities && {
             payInAdvanceQuantities: config.payInAdvanceQuantities
           },
+          ...config.promoCode && { promoCode: config.promoCode },
           ...config.currency && {
             selectedCurrency: config.currency.toUpperCase()
           },
@@ -13397,7 +13568,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.18.0",
+  "X-Schematic-Components-Version": "2.19.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -13764,6 +13935,17 @@ var EmbedProvider = ({
   const initializeWithPlan = useCallback2((config) => {
     dispatch({ type: "SET_PLANID_BYPASS", config });
   }, []);
+  const requestUnsubscribe = useCallback2(() => {
+    const subscription = state.data?.subscription;
+    const hasActiveSubscription = subscription && subscription.status !== "cancelled" && !subscription.cancelAt;
+    if (!hasActiveSubscription) {
+      console.warn(
+        "[Schematic] `requestUnsubscribe` was called, but there is no active subscription to cancel; ignoring."
+      );
+      return;
+    }
+    dispatch({ type: "CHANGE_LAYOUT", layout: "unsubscribe" });
+  }, [state.data?.subscription]);
   useEffect2(() => {
     const element = document.getElementById(
       "schematic-fonts"
@@ -13875,11 +14057,12 @@ var EmbedProvider = ({
         setCheckoutState,
         clearCheckoutState,
         initializeWithPlan,
+        requestUnsubscribe,
         setData,
         updateSettings,
         debug
       },
-      children: /* @__PURE__ */ jsxs(rt, { theme: state.settings.theme, children: [
+      children: /* @__PURE__ */ jsxs(bt, { theme: state.settings.theme, children: [
         /* @__PURE__ */ jsx2(IconStyles, {}),
         children
       ] })
@@ -14254,7 +14437,7 @@ function useWrapChildren(ref) {
 }
 // src/components/ui/box/styles.ts
-var Box = gt("div")((props) => {
+var Box = Tt("div")((props) => {
   function reducer2(acc, [key, value]) {
     if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
@@ -14265,14 +14448,14 @@ var Box = gt("div")((props) => {
     return acc;
   }
   const styles = Object.entries(props).reduce(reducer2, [
-    ft`
+    Rt`
       &:focus-visible {
         outline: 2px solid ${({ theme }) => theme.primary};
       }
     `
   ]);
   for (const [key, value] of Object.entries(props.$viewport || {})) {
-    styles.push(ft`
+    styles.push(Rt`
       ${{
       "xs": "@container (min-width: 375px)",
       "sm": "@container (min-width: 640px)",
@@ -14287,11 +14470,11 @@ var Box = gt("div")((props) => {
   }
   return styles;
 });
-var TransitionBox = gt(Box)`
+var TransitionBox = Tt(Box)`
   ${({ $isExpanded = true }) => {
-  return $isExpanded ? ft`
+  return $isExpanded ? Rt`
           height: auto;
-        ` : ft`
+        ` : Rt`
           height: 0;
           overflow: hidden;
         `;
@@ -14308,7 +14491,7 @@ var TransitionBox = gt(Box)`
 `;
 // src/components/ui/icon/styles.ts
-var Icon2 = gt(Icon).attrs(({ name, title, onClick }) => ({
+var Icon2 = Tt(Icon).attrs(({ name, title, onClick }) => ({
   title: title || name,
   ...onClick && { tabIndex: 0 }
 }))`
@@ -14318,7 +14501,7 @@ var Icon2 = gt(Icon).attrs(({ name, title, onClick }) => ({
   flex-shrink: 0;
   transition: 0.1s;
-  ${({ onClick }) => onClick && ft`
+  ${({ onClick }) => onClick && Rt`
       &:hover {
         cursor: pointer;
       }
@@ -14329,7 +14512,7 @@ var Icon2 = gt(Icon).attrs(({ name, title, onClick }) => ({
     outline-offset: 2px;
   }
-  ${({ $rounded }) => $rounded && ft`
+  ${({ $rounded }) => $rounded && Rt`
       border-radius: 9999px;
     `}
@@ -14360,10 +14543,10 @@ var Icon2 = gt(Icon).attrs(({ name, title, onClick }) => ({
       scale *= 3;
       break;
   }
-  return ft`
+  return Rt`
       font-size: ${base * scale / TEXT_BASE_SIZE}rem;
-      ${$rounded && ft`
+      ${$rounded && Rt`
           width: ${base * (11 / 6) * scale / TEXT_BASE_SIZE}rem;
           height: ${base * (11 / 6) * scale / TEXT_BASE_SIZE}rem;
         `}
@@ -14371,10 +14554,10 @@ var Icon2 = gt(Icon).attrs(({ name, title, onClick }) => ({
 }}
   ${({ $variant, $color, $background }) => {
-  return $variant === "outline" ? ft`
+  return $variant === "outline" ? Rt`
           color: ${$color};
           background-color: transparent;
-        ` : ft`
+        ` : Rt`
           color: ${$color};
           background-color: ${$background};
         `;
@@ -14382,7 +14565,7 @@ var Icon2 = gt(Icon).attrs(({ name, title, onClick }) => ({
 `;
 // src/components/ui/loader/styles.ts
-var spin = Et`
+var spin = qt`
   0% {
     transform: rotate(0deg);
   }
@@ -14395,7 +14578,7 @@ var loaderStyles = ({
   $color,
   $size = "md",
   $isLoading = true
-}) => ft(({ theme }) => {
+}) => Rt(({ theme }) => {
   const { l: l2 } = hexToHSL(theme.card.background);
   let color = $color ?? theme.primary;
   let colorFn;
@@ -14431,14 +14614,14 @@ var loaderStyles = ({
       px = 64;
       break;
   }
-  return ft`
+  return Rt`
       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 ? ft`
+      ${$isLoading ? Rt`
               animation: 1.5s linear infinite ${spin};
-            ` : ft`
+            ` : Rt`
               transform: scale(0);
             `}
       border-style: solid;
@@ -14449,12 +14632,12 @@ var loaderStyles = ({
       animation: 1.5s linear infinite ${spin};
     `;
 });
-var Loader = gt.div((props) => {
+var Loader = Tt.div((props) => {
   return loaderStyles(props);
 });
 // src/components/ui/button/styles.ts
-var Button = gt.button(
+var Button = Tt.button(
   ({
     theme,
     disabled = false,
@@ -14466,7 +14649,7 @@ var Button = gt.button(
     $alignment = "center",
     $selfAlignment
   }) => {
-    return ft`
+    return Rt`
       appearance: none;
       font-family: "Public Sans", sans-serif;
       font-weight: 500;
@@ -14474,7 +14657,7 @@ var Button = gt.button(
       display: flex;
       justify-content: ${$alignment};
       align-items: center;
-      ${() => $selfAlignment && ft`
+      ${() => $selfAlignment && Rt`
           align-self: ${$selfAlignment};
         `}
       width: ${$fullWidth ? "100%" : "fit-content"};
@@ -14484,21 +14667,21 @@ var Button = gt.button(
       ${function sizeStyles() {
       switch ($size) {
         case "sm":
-          return ft`
+          return Rt`
               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 ft`
+          return Rt`
               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 ft`
+          return Rt`
               font-size: ${19 / TEXT_BASE_SIZE}rem;
               height: ${64 / TEXT_BASE_SIZE}rem;
               padding: ${9 / TEXT_BASE_SIZE}rem ${28 / TEXT_BASE_SIZE}rem;
@@ -14513,7 +14696,7 @@ var Button = gt.button(
       if (disabled) {
         color = l2 > 50 ? lighten(color, 0.625) : darken(color, 0.375);
       }
-      return ft`
+      return Rt`
           color: ${color};
           ${Text}, ${Icon2} {
@@ -14530,7 +14713,7 @@ var Button = gt.button(
         color = l2 > 50 ? darken(color, 0.075) : lighten(color, 0.15);
       }
       if ($variant === "outline") {
-        return ft`
+        return Rt`
             color: ${color};
             background-color: transparent;
             border-color: ${color};
@@ -14541,7 +14724,7 @@ var Button = gt.button(
           `;
       }
       if ($variant === "ghost") {
-        return ft`
+        return Rt`
             color: ${color};
             background-color: transparent;
             border-color: ${l2 > 50 ? darken(theme.card.background, 0.2) : lighten(theme.card.background, 0.2)};
@@ -14552,7 +14735,7 @@ var Button = gt.button(
           `;
       }
       if ($variant === "text") {
-        return ft`
+        return Rt`
             color: ${color};
             background-color: transparent;
             border-color: transparent;
@@ -14562,7 +14745,7 @@ var Button = gt.button(
             }
           `;
       }
-      return ft`
+      return Rt`
           background-color: ${color};
           border-color: ${color};
         `;
@@ -14580,7 +14763,7 @@ var Button = gt.button(
       &::before {
         content: "";
         ${loaderStyles({ $color: theme[$color], $size, $isLoading })}
-        ${$isLoading && ft`
+        ${$isLoading && Rt`
             margin-right: 0.5rem;
           `}
       }
@@ -14598,13 +14781,13 @@ var Button = gt.button(
       const lightened = lighten(specified, 0.15);
       const bgColor = specified === lightened ? darken(specified, 0.15) : lightened;
       if ($variant === "filled") {
-        return ft`
+        return Rt`
               background-color: ${bgColor};
               border-color: ${bgColor};
             `;
       }
       if ($variant === "outline") {
-        return ft`
+        return Rt`
               color: ${color};
               background-color: ${bgColor};
               border-color: ${bgColor};
@@ -14616,14 +14799,14 @@ var Button = gt.button(
       }
       if ($variant === "ghost") {
         const { l: l3 } = hexToHSL(theme.card.background);
-        return ft`
+        return Rt`
               border-color: ${l3 > 50 ? darken(theme.card.background, 0.125) : lighten(theme.card.background, 0.125)};
               box-shadow: 0 1px 2px
                 ${l3 > 50 ? darken(theme.card.background, 0.075) : lighten(theme.card.background, 0.075)};
             `;
       }
       if ($variant === "text") {
-        return ft`
+        return Rt`
               text-decoration: underline;
             `;
       }
@@ -14634,7 +14817,7 @@ var Button = gt.button(
 );
 // src/components/ui/checkbox/styles.ts
-var Checkbox = gt.input.attrs({ type: "checkbox" })`
+var Checkbox = Tt.input.attrs({ type: "checkbox" })`
   appearance: none;
   flex-shrink: 0;
   margin: 0;
@@ -14692,14 +14875,14 @@ import {
 } from "react";
 // src/components/ui/dialog/styles.ts
-var DialogContent = gt.div`
+var DialogContent = Tt.div`
   position: relative;
   display: flex;
   flex-direction: column;
 `;
-var Dialog = gt.dialog(
+var Dialog = Tt.dialog(
   ({ theme, $isModal, $size, $top }) => {
-    return ft`
+    return Rt`
       ${ResetStyle}
       ${$isModal && ContainerStyle}
@@ -14741,7 +14924,7 @@ var Dialog = gt.dialog(
           flex-direction: row;
           max-height: calc(100dvh - 5rem + 3px);
-          ${$size === "lg" && ft`
+          ${$size === "lg" && Rt`
               height: calc(100% - 5rem + 3px);
             `}
         }
@@ -14878,7 +15061,7 @@ var DialogHeader = ({
 };
 // src/components/ui/flex/styles.ts
-var Flex = gt(Box)`
+var Flex = Tt(Box)`
   display: flex;
 `;
@@ -14912,9 +15095,9 @@ var Icon3 = ({
 };
 // src/components/ui/input/styles.ts
-var Input = gt.input(({ theme, $size = "md", $variant = "filled" }) => {
+var Input = Tt.input(({ theme, $size = "md", $variant = "filled" }) => {
   const isLightBackground = isLightColor(theme.card.background);
-  return ft`
+  return Rt`
     font-family: "Inter", sans-serif;
     font-weight: 500;
     width: 100%;
@@ -14934,14 +15117,14 @@ var Input = gt.input(({ theme, $size = "md", $variant = "filled" }) => {
     ${() => {
     switch ($size) {
       case "sm": {
-        return ft`
+        return Rt`
             font-size: 0.875rem;
             line-height: 1.5rem;
             height: 1.5rem;
           `;
       }
       case "md": {
-        return ft`
+        return Rt`
             font-size: 1rem;
             line-height: 3rem;
             height: 3rem;
@@ -14949,7 +15132,7 @@ var Input = gt.input(({ theme, $size = "md", $variant = "filled" }) => {
           `;
       }
       case "lg": {
-        return ft`
+        return Rt`
             font-size: 1.25rem;
             line-height: 4rem;
             height: 4rem;
@@ -14957,7 +15140,7 @@ var Input = gt.input(({ theme, $size = "md", $variant = "filled" }) => {
           `;
       }
       case "full": {
-        return ft`
+        return Rt`
             font-size: 1rem;
             line-height: 1;
             height: 100%;
@@ -14971,7 +15154,7 @@ var Input = gt.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 ft`
+    return Rt`
         color: ${color};
         background-color: ${bgColor};
         border-color: ${borderColor};
@@ -14997,8 +15180,8 @@ var Input = gt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 // src/components/ui/overlay/styles.ts
-var Overlay = gt(Flex)(({ theme }) => {
-  return ft`
+var Overlay = Tt(Flex)(({ theme }) => {
+  return Rt`
     position: absolute;
     top: 0;
     right: 0;
@@ -15078,9 +15261,13 @@ var ProgressBar = forwardRef3(
             }
           ),
           total > 0 && /* @__PURE__ */ jsxs3(Text, { $size: 14, $weight: 500, children: [
-            formatNumber(value),
+            formatNumber(value, {
+              maximumFractionDigits: MAXIMUM_FRACTION_DIGITS
+            }),
             "/",
-            formatNumber(total)
+            formatNumber(total, {
+              maximumFractionDigits: MAXIMUM_FRACTION_DIGITS
+            })
           ] })
         ]
       }
@@ -15116,7 +15303,7 @@ var LeadingLineHeightMap = {
   relaxed: 1.625,
   loose: 2
 };
-var Text = gt.span.withConfig({
+var Text = Tt.span.withConfig({
   shouldForwardProp: (prop) => prop !== "display"
 }).attrs(({ onClick }) => ({
   ...onClick && { tabIndex: 0 }
@@ -15140,7 +15327,7 @@ var Text = gt.span.withConfig({
     const fontWeight = $weight || fontStyle.fontWeight;
     const lineHeight = $leading && LeadingLineHeightMap[$leading];
     const color = $color || fontStyle.color;
-    return ft`
+    return Rt`
       font-family: ${fontFamily}, sans-serif;
       font-size: ${typeof fontSize === "number" ? `${fontSize / TEXT_BASE_SIZE}rem` : fontSize};
       font-weight: ${fontWeight};
@@ -15148,19 +15335,19 @@ var Text = gt.span.withConfig({
       color: ${color};
       text-wrap: pretty;
-      ${lineHeight && ft`
+      ${lineHeight && Rt`
           line-height: ${lineHeight};
         `}
-      ${$align && ft`
+      ${$align && Rt`
           text-align: ${$align};
         `};
-      ${$width && ft`
+      ${$width && Rt`
           width: ${$width};
         `};
-      ${(onClick || as === "a" || display === "link") && ft`
+      ${(onClick || as === "a" || display === "link") && Rt`
           &:hover {
             cursor: pointer;
             text-decoration: underline;
@@ -15176,7 +15363,7 @@ var Text = gt.span.withConfig({
 );
 // src/components/ui/toggle/styles.ts
-var Toggle = gt.input.attrs({ type: "checkbox" })`
+var Toggle = Tt.input.attrs({ type: "checkbox" })`
   appearance: none;
   font: inherit;
   font-size: inherit;
@@ -15297,7 +15484,7 @@ var origin = (position2) => {
   return o;
 };
 var grow = (translate) => {
-  return Et`
+  return qt`
     0% {
       opacity: 0;
       transform: translate(${translate.x}%, ${translate.y}%) scale(0);
@@ -15309,13 +15496,13 @@ var grow = (translate) => {
     }
   `;
 };
-var Content = gt.div.withConfig({
+var Content = Tt.div.withConfig({
   shouldForwardProp: (prop) => !["x", "y", "position", "zIndex"].includes(prop)
 })(({ x: x2, y: y2, position: position2, theme }) => {
   const translate = coords(position2);
   const arrowTranslate = arrowCoords(position2);
   const transformOrigin = origin(position2);
-  return ft`
+  return Rt`
     position: absolute;
     top: calc(
       ${y2}px - ${position2 === "top" ? 0.5 : position2 === "bottom" ? -0.5 : 0}rem
@@ -15355,16 +15542,16 @@ var Content = gt.div.withConfig({
     &::after {
       position: absolute;
       z-index: 0;
-      ${position2 === "top" ? ft`
+      ${position2 === "top" ? Rt`
               top: 100%;
               left: 50%;
-            ` : position2 === "right" ? ft`
+            ` : position2 === "right" ? Rt`
                 top: 50%;
                 right: 100%;
-              ` : position2 === "bottom" ? ft`
+              ` : position2 === "bottom" ? Rt`
                   bottom: 100%;
                   left: 50%;
-                ` : ft`
+                ` : Rt`
                   top: 50%;
                   left: 100%;
                 `};
@@ -15447,15 +15634,15 @@ var Tooltip = ({
 };
 // src/components/layout/card/styles.ts
-var Element = gt(Box)``;
-var FussyChild = gt(Element)``;
-var Notice = gt(Box)``;
+var Element = Tt(Box)``;
+var FussyChild = Tt(Element)``;
+var Notice = Tt(Box)``;
 var cardBoxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-var StyledCard = gt.div(({ theme }) => {
+var StyledCard = Tt.div(({ theme }) => {
   const { l: l2 } = hexToHSL(theme.card.background);
   const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
-  return ft`
+  return Rt`
     position: relative;
     ${theme.sectionLayout === "merged" ? `&:not(:has(${FussyChild}))` : `${Element}:not(:is(${FussyChild}))`} {
@@ -15470,9 +15657,9 @@ var StyledCard = gt.div(({ theme }) => {
         ${theme.card.padding / TEXT_BASE_SIZE}rem;
       &:not(:last-child) {
-        ${theme.sectionLayout === "merged" ? ft`
+        ${theme.sectionLayout === "merged" ? Rt`
                 border-bottom: 1px solid ${borderColor};
-              ` : ft`
+              ` : Rt`
                 margin-bottom: 1rem;
               `}
       }
@@ -15518,7 +15705,7 @@ Card.displayName = "Card";
 import { Children as Children2, forwardRef as forwardRef5 } from "react";
 // src/components/layout/column/styles.ts
-var StyledColumn = gt.div`
+var StyledColumn = Tt.div`
   height: min-content;
 `;
@@ -15535,7 +15722,7 @@ Column.displayName = "Column";
 import { forwardRef as forwardRef6 } from "react";
 // src/components/layout/root/styles.ts
-var ResetStyle = ft`
+var ResetStyle = Rt`
   box-sizing: border-box;
   font-size: 1rem;
   line-height: 1.375;
@@ -15560,11 +15747,11 @@ var ResetStyle = ft`
     vertical-align: top;
   }
 `;
-var ContainerStyle = ft`
+var ContainerStyle = Rt`
   container-type: inline-size;
   interpolate-size: allow-keywords;
 `;
-var Container = gt.div`
+var Container = Tt.div`
   ${ResetStyle}
   ${ContainerStyle}
 `;
@@ -15857,7 +16044,7 @@ var Entitlement = ({
     }
     if (showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit) {
       return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-        entitlement.consumptionRate,
+        typeof entitlement.consumptionRate === "number" ? formatConsumptionRate(entitlement.consumptionRate) : entitlement.consumptionRate,
         " ",
         getFeatureName(
           entitlement.valueCredit,
@@ -16957,7 +17144,7 @@ var Credits = ({ bundles, updateCount, currency }) => {
 import { useState as useState7 } from "react";
 // src/components/shared/payment-form/styles.ts
-var Label = gt.label`
+var Label = Tt.label`
   display: flex;
   margin-bottom: 0.75rem;
   font-family: "Public Sans", system-ui, sans-serif;
@@ -16969,7 +17156,7 @@ var Label = gt.label`
   color: ${({ theme }) => isLightColor(theme.card.background) ? "#000000" : "#cdd6f4"};
   touch-action: manipulation;
 `;
-var Input2 = gt.input`
+var Input2 = Tt.input`
   padding: 0.75rem;
   background-color: white;
   border-radius: 0.5rem;
@@ -17059,6 +17246,7 @@ var Checkout = ({
   optInAccepted,
   setOptInAccepted,
   setPaymentMethodId,
+  promoCode,
   updatePromoCode,
   confirmPaymentIntentProps,
   financeData,
@@ -17066,7 +17254,7 @@ var Checkout = ({
 }) => {
   const { t: t3 } = useTranslation();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = useState7("");
+  const [discount, setDiscount] = useState7(promoCode ?? "");
   const hasCustomFields = !!customCheckoutFields && customCheckoutFields.length > 0;
   if (!isPaymentMethodRequired && !hasCustomFields && !optInRequired) {
     return null;
@@ -17604,7 +17792,9 @@ var CheckoutDialog = ({ top }) => {
     ),
     [addOnUsageBasedEntitlements]
   );
-  const [promoCode, setPromoCode] = useState8(null);
+  const [promoCode, setPromoCode] = useState8(
+    () => checkoutState?.promoCode ?? null
+  );
   const [customFieldValues, setCustomFieldValues] = useState8(() => {
     const values = {};
     for (const field of data?.customCheckoutFields ?? []) {
@@ -18571,6 +18761,7 @@ var CheckoutDialog = ({ top }) => {
                     optInAccepted,
                     setOptInAccepted,
                     setPaymentMethodId: (id) => setPaymentMethodId(id),
+                    promoCode,
                     updatePromoCode,
                     confirmPaymentIntentProps,
                     financeData: charges,
@@ -21474,7 +21665,7 @@ var RenderLayout = ({ children }) => {
 };
 // src/components/layout/viewport/styles.ts
-var StyledViewport = gt.div.withConfig({
+var StyledViewport = Tt.div.withConfig({
   shouldForwardProp: (prop) => !["$numberOfColumns", "numberOfColumns"].includes(prop)
 })`
   display: grid;
@@ -21487,7 +21678,7 @@ var StyledViewport = gt.div.withConfig({
   }
   @container (min-width: 768px) {
-    grid-template-columns: ${({ theme }) => ft`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
+    grid-template-columns: ${({ theme }) => Rt`repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`};
   }
 `;
@@ -21677,7 +21868,7 @@ var UsageDetails = ({ entitlement, layout }) => {
     }
     if (showCredits && priceBehavior === EntitlementPriceBehavior.CreditBurndown && planEntitlement?.valueCredit && typeof planEntitlement?.consumptionRate === "number") {
       return t3("X units per use", {
-        amount: planEntitlement.consumptionRate,
+        amount: formatConsumptionRate(planEntitlement.consumptionRate),
         units: getFeatureName(
           planEntitlement.valueCredit,
           planEntitlement.consumptionRate
@@ -22342,14 +22533,14 @@ var PriceDetails = ({
 };
 // src/components/elements/metered-features/styles.ts
-var Container2 = gt.div`
+var Container2 = Tt.div`
   display: flex;
   flex-direction: column;
   &:last-child {
     ${({ theme }) => {
   const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
-  return theme.sectionLayout === "merged" && ft`
+  return theme.sectionLayout === "merged" && Rt`
           overflow: hidden;
           border-bottom-left-radius: ${borderRadius};
           border-bottom-right-radius: ${borderRadius};
@@ -22382,7 +22573,9 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
     }) : priceBehavior === EntitlementPriceBehavior.Overage && typeof limit === "number" ? t3("X included", {
       amount: formatNumber(limit)
     }) : priceBehavior === EntitlementPriceBehavior.PayInAdvance && typeof usage === "number" ? `${formatNumber(usage)} ${t3("used")}` : priceBehavior === EntitlementPriceBehavior.PayAsYouGo && typeof cost === "number" ? formatCurrency(cost, billingPrice?.currency) : data?.displaySettings?.showCredits && priceBehavior === EntitlementPriceBehavior.CreditBurndown && typeof planEntitlement?.valueCredit !== "undefined" && typeof planEntitlement?.consumptionRate === "number" ? t3("X units per use", {
-      amount: planEntitlement.consumptionRate,
+      amount: formatConsumptionRate(
+        planEntitlement.consumptionRate
+      ),
       units: getFeatureName(
         planEntitlement.valueCredit,
         planEntitlement.consumptionRate
@@ -23658,7 +23851,7 @@ var UsageDetails2 = ({
     if (showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
       acc.push(
         /* @__PURE__ */ jsxs42(Fragment23, { children: [
-          entitlement.planEntitlement.consumptionRate,
+          formatConsumptionRate(entitlement.planEntitlement.consumptionRate),
           " ",
           getFeatureName(
             entitlement.planEntitlement.valueCredit,
@@ -24718,7 +24911,7 @@ var Entitlement2 = ({
             period: selectedPeriod
           }
         ) : showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs45(Fragment27, { children: [
-          formatNumber(entitlement.consumptionRate),
+          formatConsumptionRate(entitlement.consumptionRate),
           " ",
           getFeatureName(
             entitlement.valueCredit,
@@ -28500,7 +28693,7 @@ var Error2 = ({ message }) => {
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const theme = useContext6(nt);
+  const theme = useContext6(yt);
   const {
     data,
     error,