@schematichq/schematic-components 2.23.0 → 2.24.0

package/dist/schematic-components.esm.js

@@ -5866,9 +5866,9 @@ function prefixer(element, index, children, callback) {
 var r;
 var i;
 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.5.0";
+var a = "active";
+var c = "data-styled-version";
+var u = "6.5.3";
 var d = "/*!sc*/\n";
 var h = "undefined" != typeof window && "undefined" != typeof document;
 var p = void 0 === t2.createContext;
@@ -6003,10 +6003,10 @@ function ie(e2) {
   return "function" == typeof e2;
 }
 var le = /* @__PURE__ */ Symbol.for("react.forward_ref");
-function ce(e2) {
+function ae(e2) {
   return null != e2 && ("object" == typeof e2 || "function" == typeof e2) && e2.$$typeof === le && "styledComponentId" in e2;
 }
-function ae(e2, t3) {
+function ce(e2, t3) {
   return e2 && t3 ? e2 + " " + t3 : e2 || t3 || "";
 }
 function ue(e2, t3) {
@@ -6076,7 +6076,7 @@ var ye = class {
     return t3;
   }
 };
-var ve = `style[${l}][${a}="${u}"]`;
+var ve = `style[${l}][${c}="${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) => {
@@ -6110,7 +6110,7 @@ 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(l) !== c && (Ce(e2, o2), o2.parentNode && o2.parentNode.removeChild(o2));
+    o2 && o2.getAttribute(l) !== a && (Ce(e2, o2), o2.parentNode && o2.parentNode.removeChild(o2));
   }
 };
 var Oe = false;
@@ -6129,7 +6129,7 @@ var Ie = (e2, t3) => {
     const t4 = Array.from(e3.querySelectorAll(`style[${l}]`));
     return t4[t4.length - 1];
   })(o), i2 = void 0 !== r2 ? r2.nextSibling : null;
-  s.setAttribute(l, c), s.setAttribute(a, u);
+  s.setAttribute(l, a), s.setAttribute(c, u);
   const d2 = t3 || Ee();
   return d2 && s.setAttribute("nonce", d2), o.insertBefore(s, i2), s;
 };
@@ -6210,10 +6210,10 @@ var je = class _je {
         if (void 0 === r2 || !r2.size) continue;
         const i2 = t4.getGroup(s);
         if (0 === i2.length) continue;
-        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;
+        const a2 = l + ".g" + s + '[id="' + n4 + '"]';
+        let c2 = "";
+        for (const e4 of r2) e4.length > 0 && (c2 += e4 + ",");
+        o += i2 + a2 + '{content:"' + c2 + '"}' + d;
       }
       return o;
     })(this));
@@ -6307,7 +6307,7 @@ function Ye(e2, 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) : 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);
+  return ae(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;
@@ -6364,7 +6364,7 @@ var Ze = class {
             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);
+        o = ce(o, r2);
       }
     }
     return o;
@@ -6379,27 +6379,27 @@ function Qe(e2, t3) {
 function et(e2) {
   const t3 = e2.length;
   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) {
+  for (let a2 = 0; a2 < t3; a2++) {
+    const c2 = e2.charCodeAt(a2);
+    if (0 !== r2 || i2 || c2 !== Me || 42 !== e2.charCodeAt(a2 + 1)) if (i2) 42 === c2 && e2.charCodeAt(a2 + 1) === Me && (i2 = false, a2++);
+    else if (34 !== c2 && 39 !== c2 || Qe(e2, a2)) {
+      if (0 === r2) if (123 === c2) s++;
+      else if (125 === c2) {
         if (s--, s < 0) {
           l2 = true;
-          let n3 = c2 + 1;
+          let n3 = a2 + 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, c2 = n3 - 1, o = n3;
+          n3 < t3 && 59 === e2.charCodeAt(n3) && n3++, s = 0, a2 = n3 - 1, o = n3;
           continue;
         }
-        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++;
+        0 === s && (n2 += e2.substring(o, a2 + 1), o = a2 + 1);
+      } else 59 === c2 && 0 === s && (n2 += e2.substring(o, a2 + 1), o = a2 + 1);
+    } else 0 === r2 ? r2 = c2 : r2 === c2 && (r2 = 0);
+    else i2 = true, a2++;
   }
   return l2 || 0 !== s || 0 !== r2 ? (o < t3 && 0 === s && 0 === r2 && (n2 += e2.substring(o)), n2) : e2;
 }
@@ -6423,35 +6423,35 @@ function nt({ options: e2 = $, plugins: t3 = x } = $) {
   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 = "&") => {
+  let a2 = [];
+  const c2 = middleware(l2.concat(rulesheet((e3) => a2.push(e3)))), u2 = (t4, i3 = "", l3 = "", u3 = "&") => {
     n2 = u3, s = i3, r2 = void 0;
     const d3 = (function(e3) {
       const t5 = -1 !== e3.indexOf("//"), n3 = -1 !== e3.indexOf("}");
       if (!t5 && !n3) return e3;
       if (!t5) return et(e3);
       const o = e3.length;
-      let s2 = "", r3 = 0, i4 = 0, l4 = 0, c3 = 0, a3 = 0, u4 = false;
+      let s2 = "", r3 = 0, i4 = 0, l4 = 0, a3 = 0, c3 = 0, u4 = false;
       for (; i4 < o; ) {
         const t6 = e3.charCodeAt(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 (c3 > 0) i4++;
+        } else if (40 !== t6) if (41 !== t6) if (a3 > 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 ? a3++ : 125 === t6 && a3--, i4++;
-        else c3 > 0 && c3--, i4++;
-        else c3++, i4++;
+        } else 123 === t6 ? c3++ : 125 === t6 && c3--, i4++;
+        else a3 > 0 && a3--, i4++;
+        else a3++, i4++;
         else i4++;
         else 0 === l4 ? l4 = t6 : l4 === t6 && (l4 = 0), i4++;
       }
-      return u4 ? (r3 < o && (s2 += e3.substring(r3)), 0 === a3 ? s2 : et(s2)) : 0 === a3 ? e3 : et(e3);
+      return u4 ? (r3 < o && (s2 += e3.substring(r3)), 0 === c3 ? s2 : et(s2)) : 0 === c3 ? e3 : et(e3);
     })(t4);
     let h3 = compile(l3 || i3 ? l3 + " " + i3 + " { " + d3 + " }" : d3);
-    return e2.namespace && (h3 = tt(h3, e2.namespace)), c2 = [], serialize(h3, a2), c2;
+    return e2.namespace && (h3 = tt(h3, e2.namespace)), a2 = [], serialize(h3, c2), a2;
   }, d2 = e2;
   let h2 = G;
   for (let e3 = 0; e3 < t3.length; e3++) t3[e3].name || S(15), h2 = F(h2, t3[e3].name);
@@ -6462,15 +6462,15 @@ var st;
 var rt;
 var it = new je();
 var lt = nt();
-var at = null;
+var ct = 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;
+  it.names.clear(), it.keyframeIds.clear(), it.clearTag(), ct = 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);
+  return p ? (dt && dt(), ct || 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;
@@ -6511,44 +6511,41 @@ function It(e2, t3, n2) {
   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;
+  const i2 = ae(o), a2 = o, c2 = !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 && a2.attrs ? a2.attrs.concat(u2).filter(Boolean) : u2;
   let { shouldForwardProp: y2 } = s;
-  if (i2 && c2.shouldForwardProp) {
-    const e2 = c2.shouldForwardProp;
+  if (i2 && a2.shouldForwardProp) {
+    const e2 = a2.shouldForwardProp;
     if (s.shouldForwardProp) {
       const t3 = s.shouldForwardProp;
       y2 = (n2, o2) => e2(n2, o2) && t3(n2, o2);
     } else y2 = e2;
   }
-  const v2 = new Ze(r2, m2, i2 ? c2.componentStyle : void 0);
+  const v2 = new Ze(r2, m2, i2 ? a2.componentStyle : void 0);
   function S2(o2, s2) {
     return (function(o3, s3, r3) {
-      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;
+      const { attrs: i3, componentStyle: a3, defaultProps: c3, 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 : $);
+      const v3 = R(s3, m3, c3) || (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]);
+          for (const e3 in i4) "className" === e3 ? o4.className = ce(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]);
         }
-        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);
+        return "className" in t3 && "string" == typeof t3.className && (o4.className = ce(o4.className, t3.className)), o4;
+      })(i3, s3, v3), b3 = a3.generateAndInjectStyles(S3, g3.styleSheet, g3.stylis), t2.useDebugValue && t2.useDebugValue(b3), 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) || (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;
       })(S3, w2, v3, y3);
-      let C2 = ae(u3, h3);
+      let C2 = ce(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;
+        let n2 = null, o4 = 0, s4 = "", r4 = true, i4 = a3;
         for (; i4; ) {
           const t3 = g3.styleSheet.names.get(i4.componentId);
           if (t3) {
@@ -6557,26 +6554,26 @@ function At(o, s, r2) {
           }
           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);
+            null === e3 ? r4 = false : (i4 !== a3 && (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;
+          let t3 = a3;
           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;
+            n3 && t3 !== a3 && (n3 = It(n3, t3.componentId, g3.styleSheet)), s4 = n3 + s4, t3 = t3.baseStyle;
           }
         }
-        let a4 = "";
+        let c4 = "";
         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));
+            o5 && (c4 += o5, e2 && e2.add(n3));
           }
         }
         if (s4 && e2 && n2 && n2.length < o4) {
@@ -6594,9 +6591,9 @@ function At(o, s, r2) {
           }
           s4 = t3;
         }
-        const u4 = he(a4 + s4);
+        const u4 = he(c4 + s4);
         if (u4) {
-          const e3 = t2.createElement("style", { [l]: "", key: "sc-" + c3.componentId, children: u4 });
+          const e3 = t2.createElement("style", { [l]: "", key: "sc-" + a3.componentId, children: u4 });
           return t2.createElement(t2.Fragment, null, e3, O2);
         }
       }
@@ -6605,13 +6602,13 @@ function At(o, s, r2) {
   }
   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 b2.attrs = g2, b2.componentStyle = v2, b2.displayName = f2, b2.shouldForwardProp = y2, b2.foldedComponentIds = i2 ? ce(a2.foldedComponentIds, a2.styledComponentId) : "", b2.styledComponentId = m2, b2.target = i2 ? a2.target : o, Object.defineProperty(b2, "defaultProps", { get() {
     return this._foldedDefaultProps;
   }, set(e2) {
     this._foldedDefaultProps = i2 ? (function(e3, ...t3) {
       for (const n2 of t3) fe(e3, n2, true);
       return e3;
-    })({}, c2.defaultProps, e2) : e2;
+    })({}, a2.defaultProps, e2) : e2;
   } }), _(f2, m2), b2.warnTooManyClasses = /* @__PURE__ */ ((e2, t3) => {
     let n2 = {}, o2 = false;
     return (s2) => {
@@ -6626,7 +6623,7 @@ Example:
 
   <Component />`), o2 = true, n2 = {});
     };
-  })(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;
+  })(f2, m2), ge(b2, () => `.${b2.styledComponentId}`), c2 && re(b2, o, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), b2;
 }
 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) {
@@ -6655,7 +6652,7 @@ var Dt = class {
     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 (ie(n2) && !ce(n2)) return false;
+        if (ie(n2) && !ae(n2)) return false;
       }
       return true;
     })(e2), je.registerId(this.componentId);
@@ -6703,27 +6700,27 @@ function Vt(e2, ...n2) {
   _(s);
   const i2 = (e3) => {
     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) {
+    let a2;
+    if (a2 = 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) : "";
+    })(a2, e3, n3.styleSheet, l2, n3.stylis), p) {
+      const e4 = "undefined" == typeof window ? r2.instanceRules.get(a2) : void 0, o2 = e4 ? de(e4.rules) : "";
       if (o2) {
-        r2.instanceRules.delete(c2);
+        r2.instanceRules.delete(a2);
         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) });
+        return t2.createElement("style", { key: s + "-" + a2, "data-styled-global": s, children: he(o2) });
       }
     }
-    return r2.instanceRules.delete(c2), null;
+    return r2.instanceRules.delete(a2), null;
   };
   return t2.memo(i2);
 }
@@ -13220,30 +13217,29 @@ function isAutoTopupOff(grant) {
 function isSelfServiceAutoTopupAvailable(grant) {
   return !!grant?.billingCreditAutoTopupSelfService && !isAutoTopupOff(grant);
 }
-function isBundlePurchaseOff(grant) {
-  return grant?.billingCreditCanBuyBundles === false;
-}
-function getBundleOffCreditIds(grants) {
-  const ids = /* @__PURE__ */ new Set();
-  (grants ?? []).forEach((grant) => {
-    if (isBundlePurchaseOff(grant)) {
-      ids.add(grant.creditId);
-    }
-  });
-  return ids;
+function isBundleCompatibleWithPlan(bundle, planId) {
+  const compatiblePlanIds = bundle.compatiblePlanIds ?? [];
+  if (compatiblePlanIds.length === 0) {
+    return true;
+  }
+  return !!planId && compatiblePlanIds.includes(planId);
 }
-function filterCreditBundles(grants, bundles) {
-  const bundleOffCreditIds = getBundleOffCreditIds(grants);
+function filterCreditBundles(bundles, planId) {
   return (bundles ?? []).filter(
-    (bundle) => !bundleOffCreditIds.has(bundle.creditId)
+    (bundle) => isBundleCompatibleWithPlan(bundle, planId)
   );
 }
-function deriveCreditBundles(grants, bundles, counts) {
-  return filterCreditBundles(grants, bundles).map((bundle) => ({
+function deriveCreditBundles(bundles, planId, counts) {
+  return filterCreditBundles(bundles, planId).map((bundle) => ({
     ...bundle,
     count: counts[bundle.id] ?? 0
   }));
 }
+function getPurchasableCreditIds(bundles, planId) {
+  return new Set(
+    filterCreditBundles(bundles, planId).map((bundle) => bundle.creditId)
+  );
+}
 function getAutoTopupThresholdCredits(grant) {
   return grant?.companyAutoTopupThresholdCredits ?? grant?.billingCreditAutoTopupThresholdCredits;
 }
@@ -14566,7 +14562,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.23.0",
+  "X-Schematic-Components-Version": "2.24.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -18956,14 +18952,14 @@ var CheckoutDialog = ({ top }) => {
   const isIndividualBundlePurchase = data?.checkoutSettings.bundlePurchaseBehavior === CheckoutBundlePurchaseBehavior.Individual;
   const [bundleCounts, setBundleCounts] = useState9({});
   const bundleCountsRef = useRef6(bundleCounts);
-  const bundleGatingGrants = selectedPlan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants;
+  const bundleGatingPlanId = selectedPlan?.id ?? data?.company?.plan?.id;
   const creditBundles = useMemo15(() => {
     return deriveCreditBundles(
-      bundleGatingGrants,
       data?.creditBundles,
+      bundleGatingPlanId,
       bundleCounts
     );
-  }, [bundleGatingGrants, data?.creditBundles, bundleCounts]);
+  }, [bundleGatingPlanId, data?.creditBundles, bundleCounts]);
   const selectedPlanPriceId = useMemo15(() => {
     if (!selectedPlan) {
       return void 0;
@@ -19294,8 +19290,8 @@ var CheckoutDialog = ({ top }) => {
       const code = typeof updates.promoCode !== "undefined" ? updates.promoCode : promoCode;
       const skipTrial = !(updates.shouldTrial ?? shouldTrial);
       const resolvedCreditBundles = filterCreditBundles(
-        plan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants,
-        updates.creditBundles || creditBundles
+        updates.creditBundles || creditBundles,
+        plan?.id ?? data?.company?.plan?.id
       );
       const isCreditOnly = !data?.company?.billingSubscription && !planPriceId && resolvedCreditBundles.some((bundle) => bundle.count > 0) && !(updates.addOns || addOns).some(
         (addOn) => addOn.isSelected && !!getAddOnPrice(addOn, period, resolvedCurrency)?.id
@@ -19437,6 +19433,7 @@ var CheckoutDialog = ({ top }) => {
     [
       t3,
       addOnCompatibilityLookup,
+      data?.company?.plan?.id,
       data?.company?.plan?.includedCreditGrants,
       data?.company?.billingSubscription,
       previewCheckout,
@@ -19720,13 +19717,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       debouncedPreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, debouncedPreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, debouncedPreviewCheckout]
   );
   const toggleCreditBundle = useCallback8(
     (id) => {
@@ -19740,13 +19737,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       handlePreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, handlePreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, handlePreviewCheckout]
   );
   const updateAddOnEntitlementQuantity = useCallback8(
     (id, updatedQuantity) => {
@@ -24286,9 +24283,9 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
     },
     [data?.featureUsage?.features]
   );
-  const bundleOffCreditIds = useMemo27(
-    () => getBundleOffCreditIds(data?.company?.plan?.includedCreditGrants),
-    [data?.company?.plan?.includedCreditGrants]
+  const purchasableCreditIds = useMemo27(
+    () => getPurchasableCreditIds(data?.creditBundles, data?.company?.plan?.id),
+    [data?.creditBundles, data?.company?.plan?.id]
   );
   const [expandedCreditIds, setExpandedCreditIds] = useState18(
     () => /* @__PURE__ */ new Set()
@@ -24466,7 +24463,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                   )]
                 }
               ),
-              canCheckout && !bundleOffCreditIds.has(credit.id) && /* @__PURE__ */ jsx55(
+              canCheckout && purchasableCreditIds.has(credit.id) && /* @__PURE__ */ jsx55(
                 Button,
                 {
                   type: "button",
@@ -25032,7 +25029,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.12.1",
+    version: "9.13.0",
     startTime
   });
 };
@@ -25110,7 +25107,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("9.12.1", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("9.13.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@schematichq/schematic-icons": "^0.8.0",
-    "@stripe/stripe-js": "^9.12.1",
+    "@stripe/stripe-js": "^9.13.0",
     "i18next": "^26.3.6",
     "lodash": "^4.18.1",
     "pako": "^3.0.1",
     "react-i18next": "16.1.6",
-    "styled-components": "^6.5.0",
+    "styled-components": "^6.5.3",
     "uuid": "^14.0.1"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
     "@stripe/react-stripe-js": "^6.8.1",
     "@swc/core": "^1.15.47",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@types/lodash": "^4.17.25",
     "@types/pako": "^3.0.0",
@@ -85,8 +85,8 @@
     "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.9.0",
-    "happy-dom": "^20.11.1",
+    "globals": "^17.11.0",
+    "happy-dom": "^20.11.2",
     "jsdom": "^30.0.1",
     "msw": "^2.15.0",
     "prettier": "^3.9.6",