fiboui 2.0.0 → 2.1.0

package/dist/{builder-DjLYXkXu.js → builder-6GkZlCaz.js}

@@ -1,48 +1,48 @@
 "use client";
-var it = Object.defineProperty;
-var nt = (o, t, e) => t in o ? it(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var a = (o, t, e) => nt(o, typeof t != "symbol" ? t + "" : t, e);
-import k, { useRef as N, createContext as V, useContext as D, useCallback as C, useSyncExternalStore as A, useEffect as Y, useState as O, memo as ct, cloneElement as H } from "react";
-import { jsx as w, Fragment as T } from "react/jsx-runtime";
-class U {
+var ct = Object.defineProperty;
+var lt = (o, t, e) => t in o ? ct(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var a = (o, t, e) => lt(o, typeof t != "symbol" ? t + "" : t, e);
+import g, { useRef as S, createContext as z, useContext as M, useCallback as $, useSyncExternalStore as R, useEffect as L, useState as I, memo as at, cloneElement as O } from "react";
+import { jsx as x, Fragment as B } from "react/jsx-runtime";
+class X {
   constructor() {
     a(this, "activeEffect", null);
   }
 }
-const q = new U(), v = [q];
-function Z() {
-  return new U();
+const Y = new X(), P = [Y];
+function H() {
+  return new X();
 }
 function K() {
-  return v[v.length - 1] ?? q;
+  return P[P.length - 1] ?? Y;
 }
-function W() {
+function j() {
   return K().activeEffect;
 }
-function lt(o, t) {
-  v.push(o);
+function ht(o, t) {
+  P.push(o);
   try {
     return t();
   } finally {
-    v.pop();
+    P.pop();
   }
 }
-function E(o) {
+function N(o) {
   const t = K(), e = t.activeEffect;
   return t.activeEffect = o, e;
 }
-class at {
+class ut {
   constructor(t) {
     a(this, "dependencies", /* @__PURE__ */ new Set());
     a(this, "_onDispose");
     this.fn = t, this.run();
   }
   run() {
-    const t = E(this);
+    const t = N(this);
     try {
       this.cleanup(), this.fn();
     } finally {
-      E(t);
+      N(t);
     }
   }
   track(t) {
@@ -59,17 +59,17 @@ class at {
     this.cleanup(), (t = this._onDispose) == null || t.call(this);
   }
 }
-class ht {
+class ft {
   constructor(t) {
     a(this, "dependencies", /* @__PURE__ */ new Set());
     this._onInvalidate = t;
   }
   execute(t) {
-    const e = E(this);
+    const e = N(this);
     try {
       return this.cleanup(), t();
     } finally {
-      E(e);
+      N(e);
     }
   }
   track(t) {
@@ -85,14 +85,14 @@ class ht {
     this.cleanup();
   }
 }
-class R {
+class E {
   constructor(t) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     this._value = t;
   }
   get value() {
-    const t = W();
+    const t = j();
     return t && t.track(this), this._value;
   }
   set value(t) {
@@ -112,28 +112,28 @@ class R {
     t.forEach((s) => s.trigger()), e.forEach((s) => s(this._value));
   }
 }
-function Ot(o) {
-  return new R(o);
+function Ut(o) {
+  return new E(o);
 }
-class ut {
+class dt {
   constructor(t) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     a(this, "_value");
     a(this, "_dirty", !0);
     a(this, "internalEffect");
-    this.fn = t, this.internalEffect = new at(() => {
+    this.fn = t, this.internalEffect = new ut(() => {
       this._dirty || (this._dirty = !0, this.notify());
     });
   }
   get value() {
-    const t = W();
+    const t = j();
     if (t && t.track(this), this._dirty) {
-      const e = E(this.internalEffect);
+      const e = N(this.internalEffect);
       try {
         this.internalEffect.cleanup(), this._value = this.fn(), this._dirty = !1;
       } finally {
-        E(e);
+        N(e);
       }
     }
     return this._value;
@@ -152,17 +152,17 @@ class ut {
     t.forEach((s) => s.trigger()), e.forEach((s) => s(this._value));
   }
 }
-function Ht(o) {
-  return new ut(o);
+function qt(o) {
+  return new dt(o);
 }
-class dt {
+class pt {
   constructor(t) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     this._value = t;
   }
   get() {
-    const t = W();
+    const t = j();
     return t && t.track(this), this._value;
   }
   set(t) {
@@ -181,17 +181,17 @@ class dt {
     Array.from(this.effects).forEach((t) => t.trigger()), Array.from(this.listeners).forEach((t) => t(this._value));
   }
 }
-function Ut(o) {
-  return new dt(o);
+function Zt(o) {
+  return new pt(o);
 }
-class ft {
+class mt {
   constructor(t) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     this.state = t;
   }
   getState() {
-    const t = W();
+    const t = j();
     return t && t.track(this), this.state;
   }
   setState(t) {
@@ -211,103 +211,103 @@ class ft {
     Array.from(this.effects).forEach((t) => t.trigger()), Array.from(this.listeners).forEach((t) => t(this.state));
   }
 }
-function qt(o) {
-  return new ft(o);
+function Jt(o) {
+  return new mt(o);
 }
-const pt = Z(), J = V(pt);
-function mt() {
-  return D(J);
+const gt = H(), U = z(gt);
+function bt() {
+  return M(U);
 }
-function Zt({ children: o, scope: t }) {
-  const e = N(t ?? Z()).current;
-  return /* @__PURE__ */ w(J.Provider, { value: e, children: o });
+function Qt({ children: o, scope: t }) {
+  const e = S(t ?? H()).current;
+  return /* @__PURE__ */ x(U.Provider, { value: e, children: o });
 }
-function gt({ children: o }) {
-  const t = N(0), e = N(/* @__PURE__ */ new Set()), s = N(null);
-  s.current || (s.current = new ht(() => {
+function kt({ children: o }) {
+  const t = S(0), e = S(/* @__PURE__ */ new Set()), s = S(null);
+  s.current || (s.current = new ft(() => {
     t.current += 1, e.current.forEach((h) => h());
   }));
-  const r = C((h) => (e.current.add(h), () => {
+  const r = $((h) => (e.current.add(h), () => {
     e.current.delete(h);
-  }), []), i = C(() => t.current, []);
-  A(r, i, i), Y(() => () => {
+  }), []), i = $(() => t.current, []);
+  R(r, i, i), L(() => () => {
     var h;
     (h = s.current) == null || h.dispose();
   }, []);
-  const l = mt();
+  const c = bt();
   let n = null;
   try {
-    n = lt(l, () => s.current.execute(o));
+    n = ht(c, () => s.current.execute(o));
   } catch {
     n = null;
   }
-  return /* @__PURE__ */ w(T, { children: n });
+  return /* @__PURE__ */ x(B, { children: n });
 }
-const bt = V(/* @__PURE__ */ new Map()), Q = V(null);
-function Kt(o) {
-  const t = D(Q);
+const yt = z(/* @__PURE__ */ new Map()), q = z(null);
+function te(o) {
+  const t = M(q);
   if (!t)
     throw new Error("useBuilderState must be used under a builder that called .state()");
   return [t.get(o), (e) => t.set(o, e)];
 }
-function kt({ stateMap: o = /* @__PURE__ */ new Map(), children: t }) {
-  const [e, s] = O(() => new Map(o)), r = {
+function _t({ stateMap: o = /* @__PURE__ */ new Map(), children: t }) {
+  const [e, s] = I(() => new Map(o)), r = {
     map: e,
     get: (i) => e.get(i),
-    set: (i, l) => {
+    set: (i, c) => {
       s((n) => {
-        if (Object.is(n.get(i), l))
+        if (Object.is(n.get(i), c))
           return n;
         const h = new Map(n);
-        return h.set(i, l), h;
+        return h.set(i, c), h;
       });
     }
   };
-  return /* @__PURE__ */ w(Q.Provider, { value: r, children: /* @__PURE__ */ w(bt.Provider, { value: e, children: t }) });
+  return /* @__PURE__ */ x(q.Provider, { value: r, children: /* @__PURE__ */ x(yt.Provider, { value: e, children: t }) });
 }
-function yt({ observables: o, children: t }) {
-  const e = N(0), s = C((i) => {
-    const l = Array.from(o).map(
+function xt({ observables: o, children: t }) {
+  const e = S(0), s = $((i) => {
+    const c = Array.from(o).map(
       (n) => n.subscribe(() => {
         e.current += 1, i();
       })
     );
-    return () => l.forEach((n) => n());
-  }, [o]), r = C(() => e.current, []);
-  return A(s, r, r), /* @__PURE__ */ w(T, { children: typeof t == "function" ? t() : t });
+    return () => c.forEach((n) => n());
+  }, [o]), r = $(() => e.current, []);
+  return R(s, r, r), /* @__PURE__ */ x(B, { children: typeof t == "function" ? t() : t });
 }
-function _t({ signals: o, children: t }) {
-  const e = N(0), s = C((i) => {
-    const l = Array.from(o).map(
+function wt({ signals: o, children: t }) {
+  const e = S(0), s = $((i) => {
+    const c = Array.from(o).map(
       (n) => n.subscribe(() => {
         e.current += 1, i();
       })
     );
-    return () => l.forEach((n) => n());
-  }, [o]), r = C(() => e.current, []);
-  return A(s, r, r), /* @__PURE__ */ w(T, { children: typeof t == "function" ? t() : t });
+    return () => c.forEach((n) => n());
+  }, [o]), r = $(() => e.current, []);
+  return R(s, r, r), /* @__PURE__ */ x(B, { children: typeof t == "function" ? t() : t });
 }
-const tt = V(/* @__PURE__ */ new Map());
-function Jt(o) {
-  const t = D(tt);
+const Z = z(/* @__PURE__ */ new Map());
+function ee(o) {
+  const t = M(Z);
   return t == null ? void 0 : t.get(o);
 }
-function xt({ providers: o = /* @__PURE__ */ new Map(), children: t }) {
-  return /* @__PURE__ */ w(tt.Provider, { value: o, children: t });
+function St({ providers: o = /* @__PURE__ */ new Map(), children: t }) {
+  return /* @__PURE__ */ x(Z.Provider, { value: o, children: t });
 }
-function wt(o) {
+function $t(o) {
   return !!o && typeof o == "object" && "build" in o && typeof o.build == "function";
 }
-function St(o) {
-  return wt(o) ? o.build() : o;
+function Nt(o) {
+  return g.isValidElement(o) ? o : $t(o) ? o.build() : o;
 }
-function I(o) {
+function D(o) {
   if (o == null)
     return [];
   const t = typeof o == "function" ? o() : o;
-  return (Array.isArray(t) ? t : [t]).map(St);
+  return (Array.isArray(t) ? t : [t]).map(Nt);
 }
-function $t(o, t, e) {
+function Ct(o, t, e) {
   if (!t) return o;
   const s = e ?? (typeof window < "u" ? window.innerWidth : void 0);
   if (s === void 0)
@@ -315,40 +315,40 @@ function $t(o, t, e) {
   let r = { ...o };
   return s < 768 && t.mobile ? r = { ...r, ...t.mobile } : s >= 768 && s < 1024 && t.tablet ? r = { ...r, ...t.tablet } : s >= 1024 && t.desktop && (r = { ...r, ...t.desktop }), r;
 }
-function Qt(o, t) {
-  const e = ct(o, t);
-  return (s) => k.createElement(e, s);
+function se(o, t) {
+  const e = at(o, t);
+  return (s) => g.createElement(e, s);
 }
-function et(o) {
+function J(o) {
   var t, e, s = "";
   if (typeof o == "string" || typeof o == "number") s += o;
   else if (typeof o == "object") if (Array.isArray(o)) {
     var r = o.length;
-    for (t = 0; t < r; t++) o[t] && (e = et(o[t])) && (s && (s += " "), s += e);
+    for (t = 0; t < r; t++) o[t] && (e = J(o[t])) && (s && (s += " "), s += e);
   } else for (e in o) o[e] && (s && (s += " "), s += e);
   return s;
 }
-function Nt() {
-  for (var o, t, e = 0, s = "", r = arguments.length; e < r; e++) (o = arguments[e]) && (t = et(o)) && (s && (s += " "), s += t);
+function Et() {
+  for (var o, t, e = 0, s = "", r = arguments.length; e < r; e++) (o = arguments[e]) && (t = J(o)) && (s && (s += " "), s += t);
   return s;
 }
-const x = class x {
+const _ = class _ {
   constructor() {
     a(this, "sheet", null);
     a(this, "cache", /* @__PURE__ */ new Map());
     typeof document < "u" && (this.sheet = document.createElement("style"), this.sheet.id = "fibo-dynamic-styles", document.head.appendChild(this.sheet));
   }
   static getInstance() {
-    return x.instance || (x.instance = new x()), x.instance;
+    return _.instance || (_.instance = new _()), _.instance;
   }
   register(t, e) {
     const s = `${t}:${e}`;
     if (this.cache.has(s))
       return this.cache.get(s);
-    const r = e.replace(/[^a-zA-Z0-9-]/g, "_"), i = `fibo-${t}-${r}`, l = `.${i} { ${t}: ${e} !important; }`;
+    const r = e.replace(/[^a-zA-Z0-9-]/g, "_"), i = `fibo-${t}-${r}`, c = `.${i} { ${t}: ${e} !important; }`;
     if (this.sheet && this.sheet.sheet)
       try {
-        this.sheet.sheet.insertRule(l, this.sheet.sheet.cssRules.length);
+        this.sheet.sheet.insertRule(c, this.sheet.sheet.cssRules.length);
       } catch (n) {
         console.error("FiboUI: Failed to inject dynamic style", n);
       }
@@ -358,10 +358,10 @@ const x = class x {
     const i = `${t}:${e}:${s}:${r}`;
     if (this.cache.has(i))
       return t;
-    const l = `.${t}:${e} { ${s}: ${r} !important; }`;
+    const c = `.${t}:${e} { ${s}: ${r} !important; }`;
     if (this.sheet && this.sheet.sheet)
       try {
-        this.sheet.sheet.insertRule(l, this.sheet.sheet.cssRules.length);
+        this.sheet.sheet.insertRule(c, this.sheet.sheet.cssRules.length);
       } catch (n) {
         console.error("FiboUI: Failed to inject pseudo-state style", n);
       }
@@ -371,41 +371,41 @@ const x = class x {
     const i = `group:${t}:${e}:${s}:${r}`;
     if (this.cache.has(i))
       return t;
-    const l = `.group:${e} .${t} { ${s}: ${r} !important; }`;
+    const c = `.group:${e} .${t} { ${s}: ${r} !important; }`;
     if (this.sheet && this.sheet.sheet)
       try {
-        this.sheet.sheet.insertRule(l, this.sheet.sheet.cssRules.length);
+        this.sheet.sheet.insertRule(c, this.sheet.sheet.cssRules.length);
       } catch (n) {
         console.error("FiboUI: Failed to inject group pseudo-state style", n);
       }
     return this.cache.set(i, t), t;
   }
 };
-a(x, "instance");
-let B = x;
-const c = B.getInstance();
-function Ct(o) {
+a(_, "instance");
+let W = _;
+const l = W.getInstance();
+function Pt(o) {
   const t = o.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/);
   if (!t)
     return o;
-  const [, e, s, r] = t, i = parseFloat(e), l = parseFloat(s), n = parseFloat(r), h = l * Math.cos(n * Math.PI / 180), u = l * Math.sin(n * Math.PI / 180), p = i + 0.3963377774 * h + 0.2158037573 * u, d = i - 0.1055613458 * h - 0.0638541728 * u, m = i - 0.0894841775 * h - 1.291485548 * u, f = p * p * p, _ = d * d * d, g = m * m * m, y = 4.0767416621 * f - 3.3077115913 * _ + 0.2309699292 * g, P = -1.2684380046 * f + 2.6097574011 * _ - 0.3413193965 * g, F = -0.0041960863 * f - 0.7034186147 * _ + 1.707614701 * g, S = (z) => z >= 31308e-7 ? 1.055 * z ** (1 / 2.4) - 0.055 : 12.92 * z, j = Math.max(0, Math.min(1, S(y))), ot = Math.max(0, Math.min(1, S(P))), rt = Math.max(0, Math.min(1, S(F))), M = (z) => {
-    var L;
-    const G = (L = Math.round(z * 255).toString(16)) == null ? void 0 : L.toUpperCase();
-    return G.length === 1 ? `0${G}` : G;
+  const [, e, s, r] = t, i = parseFloat(e), c = parseFloat(s), n = parseFloat(r), h = c * Math.cos(n * Math.PI / 180), u = c * Math.sin(n * Math.PI / 180), d = i + 0.3963377774 * h + 0.2158037573 * u, f = i - 0.1055613458 * h - 0.0638541728 * u, m = i - 0.0894841775 * h - 1.291485548 * u, p = d * d * d, k = f * f * f, y = m * m * m, v = 4.0767416621 * p - 3.3077115913 * k + 0.2309699292 * y, st = -1.2684380046 * p + 2.6097574011 * k - 0.3413193965 * y, ot = -0.0041960863 * p - 0.7034186147 * k + 1.707614701 * y, V = (C) => C >= 31308e-7 ? 1.055 * C ** (1 / 2.4) - 0.055 : 12.92 * C, rt = Math.max(0, Math.min(1, V(v))), it = Math.max(0, Math.min(1, V(st))), nt = Math.max(0, Math.min(1, V(ot))), F = (C) => {
+    var G;
+    const A = (G = Math.round(C * 255).toString(16)) == null ? void 0 : G.toUpperCase();
+    return A.length === 1 ? `0${A}` : A;
   };
-  return `#${M(j)}${M(ot)}${M(rt)}`;
+  return `#${F(rt)}${F(it)}${F(nt)}`;
 }
-function Et(o) {
+function zt(o) {
   const t = {}, e = {}, s = o.split(`
 `);
   for (const r of s) {
     const i = r.trim();
     if (!i || i.startsWith("//") || i.startsWith("*") || i === "@theme {" || i === "}")
       continue;
-    const l = i.match(/^--color-([a-z0-9\-]+): (oklch\([^)]+\));?$/), n = i.match(/^--color-([a-z0-9\-]+): (#[a-fA-F0-9]{3,6});?$/);
-    if (l) {
-      const [, h, u] = l, p = Ct(u);
-      t[p.toLowerCase()] = `bg-${h}`, e[p.toLowerCase()] = `text-${h}`;
+    const c = i.match(/^--color-([a-z0-9\-]+): (oklch\([^)]+\));?$/), n = i.match(/^--color-([a-z0-9\-]+): (#[a-fA-F0-9]{3,6});?$/);
+    if (c) {
+      const [, h, u] = c, d = Pt(u);
+      t[d.toLowerCase()] = `bg-${h}`, e[d.toLowerCase()] = `text-${h}`;
     } else if (n) {
       const [, h, u] = n;
       t[u.toLowerCase()] = `bg-${h}`, e[u.toLowerCase()] = `text-${h}`;
@@ -413,13 +413,13 @@ function Et(o) {
   }
   return { background: t, text: e };
 }
-const Pt = (o) => {
+const Rt = (o) => {
   if (o !== void 0)
     return typeof o == "number" ? `${o}px` : o.toString();
-}, $ = (o, t) => {
-  const e = Pt(t);
+}, w = (o, t) => {
+  const e = Rt(t);
   return e === void 0 ? "" : `${o}-[${e}]`;
-}, zt = `
+}, jt = `
   --color-red-50: oklch(0.971 0.013 17.38);
   --color-red-100: oklch(0.936 0.032 17.717);
   --color-red-200: oklch(0.885 0.062 18.334);
@@ -664,7 +664,7 @@ const Pt = (o) => {
   --color-stone-950: oklch(0.147 0.004 49.25);
   --color-black: #000;
   --color-white: #fff;
-`, Rt = Et(zt), st = {
+`, vt = zt(jt), Q = {
   borderRadius: {
     0: "rounded-none",
     "0px": "rounded-none",
@@ -761,7 +761,7 @@ const Pt = (o) => {
     fixed: "fixed",
     sticky: "sticky"
   }
-}, jt = (o, t) => ({
+}, Vt = (o, t) => ({
   // 背景色
   backgroundColor: (e) => e.backgroundColor ? [o.background[e.backgroundColor.toLowerCase()] || `bg-[${e.backgroundColor}]`] : [],
   // 文字色
@@ -770,14 +770,14 @@ const Pt = (o) => {
   borderRadius: (e) => {
     if (!e.borderRadius)
       return [];
-    const s = st.borderRadius[e.borderRadius] || $("rounded", e.borderRadius);
+    const s = Q.borderRadius[e.borderRadius] || w("rounded", e.borderRadius);
     return s ? [s] : [];
   },
   // 外边距
   margin: (e) => {
     const s = [];
     if (e.margin !== void 0) {
-      const i = $("m", e.margin);
+      const i = w("m", e.margin);
       return i ? [i] : [];
     }
     return [
@@ -787,9 +787,9 @@ const Pt = (o) => {
       { prop: e.marginLeft, dir: "ml" },
       { prop: e.marginX, dir: "mx" },
       { prop: e.marginY, dir: "my" }
-    ].forEach(({ prop: i, dir: l }) => {
+    ].forEach(({ prop: i, dir: c }) => {
       if (i !== void 0) {
-        const n = $(l, i);
+        const n = w(c, i);
         n && s.push(n);
       }
     }), s;
@@ -798,7 +798,7 @@ const Pt = (o) => {
   padding: (e) => {
     const s = [];
     if (e.padding !== void 0) {
-      const i = $("p", e.padding);
+      const i = w("p", e.padding);
       return i ? [i] : [];
     }
     return [
@@ -808,9 +808,9 @@ const Pt = (o) => {
       { prop: e.paddingLeft, dir: "pl" },
       { prop: e.paddingX, dir: "px" },
       { prop: e.paddingY, dir: "py" }
-    ].forEach(({ prop: i, dir: l }) => {
+    ].forEach(({ prop: i, dir: c }) => {
       if (i !== void 0) {
-        const n = $(l, i);
+        const n = w(c, i);
         n && s.push(n);
       }
     }), s;
@@ -895,7 +895,7 @@ const Pt = (o) => {
       i && s.push(i);
     }
     if (e.gap) {
-      const r = $("gap", e.gap);
+      const r = w("gap", e.gap);
       r && s.push(r);
     }
     return s;
@@ -917,7 +917,7 @@ const Pt = (o) => {
   },
   // 自定义类名
   className: (e) => e.className ? [e.className] : []
-}), vt = {
+}), Ft = {
   backgroundColor: "backgroundColor",
   color: "color",
   borderRadius: "borderRadius",
@@ -951,55 +951,55 @@ const Pt = (o) => {
   position: "position",
   opacity: "opacity",
   className: "className"
-}, Vt = (o, t) => {
-  const e = (t == null ? void 0 : t.colorMaps) || Rt, s = (t == null ? void 0 : t.styleMaps) || st, r = jt(e, s), i = [], l = /* @__PURE__ */ new Set();
+}, At = (o, t) => {
+  const e = (t == null ? void 0 : t.colorMaps) || vt, s = (t == null ? void 0 : t.styleMaps) || Q, r = Vt(e, s), i = [], c = /* @__PURE__ */ new Set();
   return Object.keys(o).forEach((n) => {
-    const h = vt[n];
-    if (h && !l.has(h)) {
+    const h = Ft[n];
+    if (h && !c.has(h)) {
       const u = r[h];
       if (u) {
-        const p = u(o);
-        i.push(...p), l.add(h);
+        const d = u(o);
+        i.push(...d), c.add(h);
       }
     }
   }), i.filter(Boolean).join(" ");
 };
-function At(o) {
+function Wt(o) {
   const t = {};
   return o.forEach((e, s) => {
     t[s] = e.value;
   }), t;
 }
-function Wt({ animatedProps: o, animationConfig: t, children: e }) {
-  const [s, r] = O(
-    () => At(o)
+function Mt({ animatedProps: o, animationConfig: t, children: e }) {
+  const [s, r] = I(
+    () => Wt(o)
   );
-  Y(() => {
+  L(() => {
     const h = [];
-    return o.forEach((u, p) => {
-      const d = (m) => {
-        r((f) => ({
-          ...f,
-          [p]: m
+    return o.forEach((u, d) => {
+      const f = (m) => {
+        r((p) => ({
+          ...p,
+          [d]: m
         }));
       };
-      h.push(u.subscribe(d)), d(u.value);
+      h.push(u.subscribe(f)), f(u.value);
     }), () => {
       h.forEach((u) => u());
     };
   }, [o]);
   const i = [];
   s.translateX !== void 0 && i.push(`translateX(${s.translateX}px)`), s.translateY !== void 0 && i.push(`translateY(${s.translateY}px)`), s.scale !== void 0 && i.push(`scale(${s.scale})`), s.rotate !== void 0 && i.push(`rotate(${s.rotate}deg)`);
-  const l = {};
-  if (i.length > 0 && (l.transform = i.join(" ")), t) {
-    const { duration: h = 300, curve: u = "easeOut" } = t, p = u === "spring" ? "cubic-bezier(0.68, -0.55, 0.265, 1.55)" : u;
-    l.transition = `transform ${h}ms ${p}`;
+  const c = {};
+  if (i.length > 0 && (c.transform = i.join(" ")), t) {
+    const { duration: h = 300, curve: u = "easeOut" } = t, d = u === "spring" ? "cubic-bezier(0.68, -0.55, 0.265, 1.55)" : u;
+    c.transition = `transform ${h}ms ${d}`;
   }
   const n = {
     ...e.props.style,
-    ...l
+    ...c
   };
-  return H(e, { style: n });
+  return O(e, { style: n });
 }
 class b {
   constructor(t, e, s, r = !1) {
@@ -1014,45 +1014,45 @@ class b {
     this.baseClassName = t, this.pseudoState = e, this.parentBuilder = s, this.isGroup = r;
   }
   bg(t) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "background-color", t) : c.registerPseudo(this.baseClassName, this.pseudoState, "background-color", t), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "background-color", t) : l.registerPseudo(this.baseClassName, this.pseudoState, "background-color", t), this;
   }
   color(t) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "color", t) : c.registerPseudo(this.baseClassName, this.pseudoState, "color", t), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "color", t) : l.registerPseudo(this.baseClassName, this.pseudoState, "color", t), this;
   }
   text(t) {
     return this.color(t);
   }
   opacity(t) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "opacity", String(t)) : c.registerPseudo(this.baseClassName, this.pseudoState, "opacity", String(t)), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "opacity", String(t)) : l.registerPseudo(this.baseClassName, this.pseudoState, "opacity", String(t)), this;
   }
   borderColor(t) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "border-color", t) : c.registerPseudo(this.baseClassName, this.pseudoState, "border-color", t), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "border-color", t) : l.registerPseudo(this.baseClassName, this.pseudoState, "border-color", t), this;
   }
   transform(t) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", t) : c.registerPseudo(this.baseClassName, this.pseudoState, "transform", t), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", t) : l.registerPseudo(this.baseClassName, this.pseudoState, "transform", t), this;
   }
   scale(t) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", `scale(${t})`) : c.registerPseudo(this.baseClassName, this.pseudoState, "transform", `scale(${t})`), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", `scale(${t})`) : l.registerPseudo(this.baseClassName, this.pseudoState, "transform", `scale(${t})`), this;
   }
   translateX(t) {
     const e = typeof t == "number" ? `${t}px` : t;
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", `translateX(${e})`) : c.registerPseudo(this.baseClassName, this.pseudoState, "transform", `translateX(${e})`), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", `translateX(${e})`) : l.registerPseudo(this.baseClassName, this.pseudoState, "transform", `translateX(${e})`), this;
   }
   translateY(t) {
     const e = typeof t == "number" ? `${t}px` : t;
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", `translateY(${e})`) : c.registerPseudo(this.baseClassName, this.pseudoState, "transform", `translateY(${e})`), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "transform", `translateY(${e})`) : l.registerPseudo(this.baseClassName, this.pseudoState, "transform", `translateY(${e})`), this;
   }
   shadow(t) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "box-shadow", t) : c.registerPseudo(this.baseClassName, this.pseudoState, "box-shadow", t), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "box-shadow", t) : l.registerPseudo(this.baseClassName, this.pseudoState, "box-shadow", t), this;
   }
   css(t, e) {
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, t, e) : c.registerPseudo(this.baseClassName, this.pseudoState, t, e), this;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, t, e) : l.registerPseudo(this.baseClassName, this.pseudoState, t, e), this;
   }
   transition(t, e, s, r) {
     if (typeof t == "string" && e === void 0)
-      return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "transition", t) : c.registerPseudo(this.baseClassName, this.pseudoState, "transition", t), this;
-    const i = Array.isArray(t) ? t.join(", ") : t, l = `${e || this.transitionDuration}ms`, n = s || this.transitionEasing, h = r ? `${r}ms` : "0ms", u = `${i} ${l} ${n} ${h}`;
-    return this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "transition", u) : c.registerPseudo(this.baseClassName, this.pseudoState, "transition", u), this;
+      return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "transition", t) : l.registerPseudo(this.baseClassName, this.pseudoState, "transition", t), this;
+    const i = Array.isArray(t) ? t.join(", ") : t, c = `${e || this.transitionDuration}ms`, n = s || this.transitionEasing, h = r ? `${r}ms` : "0ms", u = `${i} ${c} ${n} ${h}`;
+    return this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "transition", u) : l.registerPseudo(this.baseClassName, this.pseudoState, "transition", u), this;
   }
   duration(t) {
     return this.transitionDuration = t, this.applyTransition(), this;
@@ -1068,28 +1068,28 @@ class b {
   }
   applyTransition() {
     const t = this.transitionProperties.join(", "), e = `${this.transitionDuration}ms`, s = this.transitionEasing, r = this.transitionDelay > 0 ? `${this.transitionDelay}ms` : "0ms", i = `${t} ${e} ${s} ${r}`;
-    this.isGroup ? c.registerGroupPseudo(this.baseClassName, this.pseudoState, "transition", i) : c.registerPseudo(this.baseClassName, this.pseudoState, "transition", i);
+    this.isGroup ? l.registerGroupPseudo(this.baseClassName, this.pseudoState, "transition", i) : l.registerPseudo(this.baseClassName, this.pseudoState, "transition", i);
   }
   end() {
     return this.parentBuilder;
   }
 }
-function Ft(o) {
+function Bt(o) {
   return typeof window > "u" ? () => {
   } : (window.addEventListener("resize", o), () => window.removeEventListener("resize", o));
 }
-function Mt() {
+function Gt() {
   return typeof window > "u" ? 1024 : window.innerWidth;
 }
-function Gt({ responsive: o, children: t }) {
-  const e = A(Ft, Mt, () => 1024), s = $t(t.props.style ?? {}, o, e);
-  return H(t, { style: s });
+function Dt({ responsive: o, children: t }) {
+  const e = R(Bt, Gt, () => 1024), s = Ct(t.props.style ?? {}, o, e);
+  return O(t, { style: s });
 }
-let X = 0;
-function Bt(o) {
-  return X += 1, `${o}-${X}`;
+let T = 0;
+function tt(o) {
+  return T += 1, `${o}-${T}`;
 }
-class te {
+class oe {
   constructor() {
     /** @internal Extra DOM props forwarded to the host element. */
     a(this, "_props", {});
@@ -1129,23 +1129,27 @@ class te {
   id(t) {
     return this._props.id = t, this;
   }
+  /**
+   * React list key. After this is called, React reads the key as a string.
+   * Builders are valid elements — you do not need `.build()`.
+   */
   key(t) {
     return this._props.key = t, this;
   }
   paddingHorizontal(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = c.register("padding-left", e), r = c.register("padding-right", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = l.register("padding-left", e), r = l.register("padding-right", e);
     return this._classNames.push(s, r), this;
   }
   paddingVertical(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = c.register("padding-top", e), r = c.register("padding-bottom", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = l.register("padding-top", e), r = l.register("padding-bottom", e);
     return this._classNames.push(s, r), this;
   }
   marginHorizontal(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = c.register("margin-left", e), r = c.register("margin-right", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = l.register("margin-left", e), r = l.register("margin-right", e);
     return this._classNames.push(s, r), this;
   }
   marginVertical(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = c.register("margin-top", e), r = c.register("margin-bottom", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = l.register("margin-top", e), r = l.register("margin-bottom", e);
     return this._classNames.push(s, r), this;
   }
   flexDirection(t) {
@@ -1160,7 +1164,7 @@ class te {
   flex(t) {
     if (this._classNames.push("flex"), t !== void 0)
       if (typeof t == "number") {
-        const e = c.register("flex", String(t));
+        const e = l.register("flex", String(t));
         this._classNames.push(e);
       } else typeof t == "string" && this._classNames.push(`flex-${t}`);
     return this;
@@ -1211,18 +1215,18 @@ class te {
     return this._classNames.push("h-full"), this;
   }
   square(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = c.register("width", e), r = c.register("height", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = l.register("width", e), r = l.register("height", e);
     return this._classNames.push(s, r), this;
   }
   circle() {
     return this._classNames.push("rounded-full"), this;
   }
   opacity(t) {
-    const e = c.register("opacity", String(t));
+    const e = l.register("opacity", String(t));
     return this._classNames.push(e), this;
   }
   p(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = c.register("padding", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = l.register("padding", e);
     return this._classNames.push(s), this;
   }
   px(t) {
@@ -1238,7 +1242,7 @@ class te {
     return this.paddingVertical(t);
   }
   m(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = c.register("margin", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = l.register("margin", e);
     return this._classNames.push(s), this;
   }
   mx(t) {
@@ -1254,15 +1258,15 @@ class te {
     return this.marginVertical(t);
   }
   bg(t) {
-    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = c.register("background-color", e);
+    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = l.register("background-color", e);
     return this._classNames.push(s), this;
   }
   text(t) {
-    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = c.register("color", e);
+    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = l.register("color", e);
     return this._classNames.push(s), this;
   }
   color(t) {
-    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = c.register("color", e);
+    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = l.register("color", e);
     return this._classNames.push(s), this;
   }
   resolveSemanticColor(t) {
@@ -1292,7 +1296,7 @@ class te {
   }
   shadow(t) {
     if (t === null || t === "none") {
-      const i = c.register("box-shadow", "none");
+      const i = l.register("box-shadow", "none");
       return this._classNames.push(i), this;
     }
     const e = {
@@ -1306,64 +1310,64 @@ class te {
       modal: "0 10px 40px rgba(0, 0, 0, 0.2)",
       float: "0 8px 16px rgba(0, 0, 0, 0.15)",
       inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
-    }, s = (i) => i.startsWith("#") || i.startsWith("rgb") || i.startsWith("hsl") || ["red", "blue", "green", "yellow", "purple", "pink", "orange", "white", "black", "gray"].some((l) => i.includes(l)), r = (i, l, n, h) => {
-      let d = n || "rgba(0, 0, 0, " + (h ?? 0.1) + ")";
+    }, s = (i) => i.startsWith("#") || i.startsWith("rgb") || i.startsWith("hsl") || ["red", "blue", "green", "yellow", "purple", "pink", "orange", "white", "black", "gray"].some((c) => i.includes(c)), r = (i, c, n, h) => {
+      let f = n || "rgba(0, 0, 0, " + (h ?? 0.1) + ")";
       if (n && n.startsWith("#") && h !== void 0) {
-        const _ = parseInt(n.slice(1, 3), 16), g = parseInt(n.slice(3, 5), 16), y = parseInt(n.slice(5, 7), 16);
-        d = `rgba(${_}, ${g}, ${y}, ${h})`;
+        const k = parseInt(n.slice(1, 3), 16), y = parseInt(n.slice(3, 5), 16), v = parseInt(n.slice(5, 7), 16);
+        f = `rgba(${k}, ${y}, ${v}, ${h})`;
       }
-      const f = {
+      const p = {
         sm: "2px",
         md: "4px",
         lg: "8px",
         xl: "12px",
         "2xl": "16px"
-      }[l] || "4px";
+      }[c] || "4px";
       switch (i) {
         case "top":
-          return `0 -${f} ${f} -1px ${d}`;
+          return `0 -${p} ${p} -1px ${f}`;
         case "bottom":
-          return `0 ${f} ${f} -1px ${d}`;
+          return `0 ${p} ${p} -1px ${f}`;
         case "left":
-          return `-${f} 0 ${f} -1px ${d}`;
+          return `-${p} 0 ${p} -1px ${f}`;
         case "right":
-          return `${f} 0 ${f} -1px ${d}`;
+          return `${p} 0 ${p} -1px ${f}`;
         case "top-bottom":
         case "vertical":
-          return `0 -${f} ${f} -1px ${d}, 0 ${f} ${f} -1px ${d}`;
+          return `0 -${p} ${p} -1px ${f}, 0 ${p} ${p} -1px ${f}`;
         case "left-right":
         case "horizontal":
-          return `-${f} 0 ${f} -1px ${d}, ${f} 0 ${f} -1px ${d}`;
+          return `-${p} 0 ${p} -1px ${f}, ${p} 0 ${p} -1px ${f}`;
         case "all":
         default:
-          return e[l] || e.md;
+          return e[c] || e.md;
       }
     };
     if (!t) {
-      const i = c.register("box-shadow", e.md);
+      const i = l.register("box-shadow", e.md);
       return this._classNames.push(i), this;
     }
     if (typeof t == "string") {
       if (s(t)) {
-        const n = r("all", "md", t), h = c.register("box-shadow", n);
+        const n = r("all", "md", t), h = l.register("box-shadow", n);
         return this._classNames.push(h), this;
       }
-      const i = e[t] || e.md, l = c.register("box-shadow", i);
-      return this._classNames.push(l), this;
+      const i = e[t] || e.md, c = l.register("box-shadow", i);
+      return this._classNames.push(c), this;
     }
     if (Array.isArray(t)) {
-      const [i, l, n, h] = t;
+      const [i, c, n, h] = t;
       if (typeof i == "string" && s(i)) {
-        const d = r("all", "md", i, l), m = c.register("box-shadow", d);
+        const f = r("all", "md", i, c), m = l.register("box-shadow", f);
         return this._classNames.push(m), this;
       }
       const u = i;
-      if (typeof l == "string" && s(l)) {
-        const d = r(u, "md", l, n), m = c.register("box-shadow", d);
+      if (typeof c == "string" && s(c)) {
+        const f = r(u, "md", c, n), m = l.register("box-shadow", f);
         return this._classNames.push(m), this;
       } else {
-        const m = r(u, l, n, h), f = c.register("box-shadow", m);
-        return this._classNames.push(f), this;
+        const m = r(u, c, n, h), p = l.register("box-shadow", m);
+        return this._classNames.push(p), this;
       }
     }
     return this;
@@ -1373,23 +1377,23 @@ class te {
   }
   rounded(t) {
     if (typeof t == "number") {
-      const e = c.register("border-radius", `${t}px`);
+      const e = l.register("border-radius", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && (t.startsWith("rounded-") || ["sm", "md", "lg", "xl", "2xl", "3xl", "full", "none"].includes(t))) {
       const e = t.startsWith("rounded-") ? t : `rounded-${t}`;
       this._classNames.push(e);
     } else {
-      const e = c.register("border-radius", t);
+      const e = l.register("border-radius", t);
       this._classNames.push(e);
     }
     return this;
   }
   borderRadius(t) {
     if (typeof t == "number") {
-      const e = c.register("border-radius", `${t}px`);
+      const e = l.register("border-radius", `${t}px`);
       this._classNames.push(e);
     } else {
-      const e = c.register("border-radius", t);
+      const e = l.register("border-radius", t);
       this._classNames.push(e);
     }
     return this;
@@ -1400,45 +1404,45 @@ class te {
     else if (["red", "blue", "green", "gray", "white", "black", "transparent"].some((e) => t.includes(e)))
       this._classNames.push(`border-${t}`);
     else {
-      const e = c.register("border-color", t);
+      const e = l.register("border-color", t);
       this._classNames.push(e);
     }
     return this;
   }
   width(t) {
     if (typeof t == "number") {
-      const e = c.register("width", `${t}px`);
+      const e = l.register("width", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && (t.startsWith("w-") || t === "full" || t === "screen" || t === "min" || t === "max" || t === "fit")) {
       const e = t.startsWith("w-") ? t : `w-${t}`;
       this._classNames.push(e);
     } else {
-      const e = c.register("width", t);
+      const e = l.register("width", t);
       this._classNames.push(e);
     }
     return this;
   }
   height(t) {
     if (typeof t == "number") {
-      const e = c.register("height", `${t}px`);
+      const e = l.register("height", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && (t.startsWith("h-") || t === "full" || t === "screen" || t === "min" || t === "max" || t === "fit")) {
       const e = t.startsWith("h-") ? t : `h-${t}`;
       this._classNames.push(e);
     } else {
-      const e = c.register("height", t);
+      const e = l.register("height", t);
       this._classNames.push(e);
     }
     return this;
   }
   gap(t) {
     if (typeof t == "number") {
-      const e = c.register("gap", `${t}px`);
+      const e = l.register("gap", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && t.startsWith("gap-"))
       this._classNames.push(t);
     else {
-      const e = c.register("gap", t);
+      const e = l.register("gap", t);
       this._classNames.push(e);
     }
     return this;
@@ -1489,7 +1493,7 @@ class te {
     ), this;
   }
   borderInput(t = "gray-300", e = "blue-500") {
-    const s = (l) => ["red", "blue", "green", "yellow", "purple", "pink", "indigo", "gray", "orange", "teal", "cyan", "emerald", "lime", "amber", "fuchsia", "rose", "violet", "sky", "slate", "zinc", "neutral", "stone"].includes(l) ? `${l}-500` : l, r = s(t), i = s(e);
+    const s = (c) => ["red", "blue", "green", "yellow", "purple", "pink", "indigo", "gray", "orange", "teal", "cyan", "emerald", "lime", "amber", "fuchsia", "rose", "violet", "sky", "slate", "zinc", "neutral", "stone"].includes(c) ? `${c}-500` : c, r = s(t), i = s(e);
     return this._classNames.push(
       "border",
       `border-${r}`,
@@ -1500,7 +1504,7 @@ class te {
   }
   weight(t) {
     if (typeof t == "number") {
-      const e = c.register("font-weight", String(t));
+      const e = l.register("font-weight", String(t));
       this._classNames.push(e);
     } else {
       const e = {
@@ -1517,7 +1521,7 @@ class te {
       if (e[t])
         this._classNames.push(e[t]);
       else {
-        const s = c.register("font-weight", t);
+        const s = l.register("font-weight", t);
         this._classNames.push(s);
       }
     }
@@ -1551,16 +1555,16 @@ class te {
     return this._signals.add(t), this;
   }
   translateX(t) {
-    return t instanceof R ? this._animatedProps.set("translateX", t) : this._transforms.push(`translateX(${t}px)`), this;
+    return t instanceof E ? this._animatedProps.set("translateX", t) : this._transforms.push(`translateX(${t}px)`), this;
   }
   translateY(t) {
-    return t instanceof R ? this._animatedProps.set("translateY", t) : this._transforms.push(`translateY(${t}px)`), this;
+    return t instanceof E ? this._animatedProps.set("translateY", t) : this._transforms.push(`translateY(${t}px)`), this;
   }
   scale(t) {
-    return t instanceof R ? this._animatedProps.set("scale", t) : this._transforms.push(`scale(${t})`), this;
+    return t instanceof E ? this._animatedProps.set("scale", t) : this._transforms.push(`scale(${t})`), this;
   }
   rotate(t) {
-    return t instanceof R ? this._animatedProps.set("rotate", t) : this._transforms.push(`rotate(${t}deg)`), this;
+    return t instanceof E ? this._animatedProps.set("rotate", t) : this._transforms.push(`rotate(${t}deg)`), this;
   }
   gesture(t) {
     return this._gesture = t, this;
@@ -1588,11 +1592,11 @@ class te {
   }
   transition(t, e, s, r) {
     if (typeof t == "string" && e === void 0) {
-      const d = c.register("transition", t);
-      return this._classNames.push(d), this;
+      const f = l.register("transition", t);
+      return this._classNames.push(f), this;
     }
-    const i = Array.isArray(t) ? t.join(", ") : t, l = `${e || this._transitionDuration}ms`, n = s || this._transitionEasing, h = r ? `${r}ms` : "0ms", u = `${i} ${l} ${n} ${h}`, p = c.register("transition", u);
-    return this._classNames.push(p), this;
+    const i = Array.isArray(t) ? t.join(", ") : t, c = `${e || this._transitionDuration}ms`, n = s || this._transitionEasing, h = r ? `${r}ms` : "0ms", u = `${i} ${c} ${n} ${h}`, d = l.register("transition", u);
+    return this._classNames.push(d), this;
   }
   /**
    * Set transition duration in milliseconds
@@ -1626,14 +1630,14 @@ class te {
    * Apply the built transition to the element
    */
   _applyTransition() {
-    const t = this._transitionProperties.join(", "), e = `${this._transitionDuration}ms`, s = this._transitionEasing, r = this._transitionDelay > 0 ? `${this._transitionDelay}ms` : "0ms", i = `${t} ${e} ${s} ${r}`, l = c.register("transition", i);
-    this._classNames.push(l);
+    const t = this._transitionProperties.join(", "), e = `${this._transitionDuration}ms`, s = this._transitionEasing, r = this._transitionDelay > 0 ? `${this._transitionDelay}ms` : "0ms", i = `${t} ${e} ${s} ${r}`, c = l.register("transition", i);
+    this._classNames.push(c);
   }
   theme(t) {
     return this._theme = t, this;
   }
   getPseudoStateClassName() {
-    return this._pseudoStateClassName || (this._pseudoStateClassName = Bt("fibo-pseudo"), this._classNames.push(this._pseudoStateClassName)), this._pseudoStateClassName;
+    return this._pseudoStateClassName || (this._pseudoStateClassName = tt("fibo-pseudo"), this._classNames.push(this._pseudoStateClassName)), this._pseudoStateClassName;
   }
   hover(t) {
     const e = this.getPseudoStateClassName(), s = new b(e, "hover", this);
@@ -1687,11 +1691,11 @@ class te {
     return this._classNames.push("group"), this;
   }
   children(t) {
-    return typeof t == "function" ? (this._childFunction = t, this._children = []) : (this._children = I(t), this._childFunction = void 0), this;
+    return typeof t == "function" ? (this._childFunction = t, this._children = []) : (this._children = D(t), this._childFunction = void 0), this;
   }
   getClassName() {
     let t;
-    return Object.keys(this._cssStyles).length > 0 && (t = Vt(this._cssStyles) || void 0), Nt(this._classNames, t);
+    return Object.keys(this._cssStyles).length > 0 && (t = At(this._cssStyles) || void 0), Et(this._classNames, t);
   }
   getStyle() {
     let t = { ...this._style, ...this._cssStyles };
@@ -1713,79 +1717,127 @@ class te {
     return t;
   }
   processChildren() {
-    return this._childFunction ? I(this._childFunction) : this._children;
+    return this._childFunction ? D(this._childFunction) : this._children;
   }
   getChildFunction() {
     return this._childFunction;
   }
 }
-function ee(o) {
+const Tt = /* @__PURE__ */ new Set([
+  "$$typeof",
+  "type",
+  "props",
+  "ref",
+  "_owner",
+  "_store",
+  "_self",
+  "_source",
+  "_debugStack",
+  "_debugTask",
+  "_debugInfo"
+]);
+function Lt(o) {
+  const t = o._isObserver, e = o._signals, s = o._observers, r = o._state, i = o._providers, c = () => {
+    let f = o.build();
+    const m = o._animatedProps, p = o._animationConfig;
+    m && m.size > 0 && (f = g.createElement(Mt, {
+      animatedProps: m,
+      animationConfig: p,
+      children: f
+    }));
+    const k = o._gesture;
+    k && (f = k.wrap(f));
+    const y = o._responsive;
+    return y && (f = g.createElement(Dt, {
+      responsive: y,
+      children: f
+    })), f;
+  }, n = typeof o.hasStateManagement == "function" ? o.hasStateManagement() : !!(t || e && e.size || s && s.size || r && r.size || i && i.size), h = t ? g.createElement(kt, {
+    key: o._props.key,
+    children: c
+  }) : null, u = () => h ?? c();
+  let d = u();
+  return n && e && e.size > 0 ? d = g.createElement(wt, {
+    key: o._props.key,
+    signals: e,
+    children: u
+  }) : n && s && s.size > 0 && (d = g.createElement(xt, {
+    observables: s,
+    children: u
+  })), n && r && r.size > 0 && (d = g.createElement(_t, {
+    stateMap: r,
+    children: d
+  })), n && i && i.size > 0 && (d = g.createElement(St, {
+    providers: i,
+    children: d
+  })), d;
+}
+function et(o, t, e) {
+  const s = function() {
+    return t();
+  };
+  s.displayName = e;
+  const r = g.createElement(s);
+  Object.defineProperty(o, "$$typeof", {
+    value: r.$$typeof,
+    enumerable: !0,
+    configurable: !0
+  }), Object.defineProperty(o, "type", {
+    value: s,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }), o.ref = r.ref ?? null, o.__fiboElementProps = r.props ?? {}, r._owner !== void 0 && (o._owner = r._owner), o._store = { validated: 1 };
+}
+function re(o) {
   return (...t) => {
-    const e = new o(...t);
-    return new Proxy(e, {
-      get(s, r, i) {
-        return r === "build" ? () => {
-          const l = s._isObserver, n = s._signals, h = s._observers, u = s._state, p = s._providers, d = () => {
-            let y = s.build();
-            const P = s._animatedProps, F = s._animationConfig;
-            P && P.size > 0 && (y = k.createElement(Wt, {
-              animatedProps: P,
-              animationConfig: F,
-              children: y
-            }));
-            const S = s._gesture;
-            S && (y = S.wrap(y));
-            const j = s._responsive;
-            return j && (y = k.createElement(Gt, {
-              responsive: j,
-              children: y
-            })), y;
-          }, m = typeof s.hasStateManagement == "function" ? s.hasStateManagement() : !!(l || n && n.size || h && h.size || u && u.size || p && p.size), f = l ? k.createElement(gt, {
-            key: s._props.key,
-            children: d
-          }) : null, _ = () => f ?? d();
-          let g = _();
-          return m && n && n.size > 0 ? g = k.createElement(_t, {
-            key: s._props.key,
-            signals: n,
-            children: _
-          }) : m && h && h.size > 0 && (g = k.createElement(yt, {
-            observables: h,
-            children: _
-          })), m && u && u.size > 0 && (g = k.createElement(kt, {
-            stateMap: u,
-            children: g
-          })), m && p && p.size > 0 && (g = k.createElement(xt, {
-            providers: p,
-            children: g
-          })), g;
-        } : Reflect.has(s, r) ? Reflect.get(s, r, i) : (l) => {
-          const n = r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), u = ["opacity", "z-index", "flex", "flex-grow", "flex-shrink", "order", "font-weight", "line-height"].includes(n), p = typeof l == "number" && !u ? `${l}px` : String(l), d = c.register(n, p);
-          return s.className(d), i;
+    const e = new o(...t), s = o.name.replace(/Builder$/, "") || "Fibo", r = () => Lt(e);
+    return et(e, r, s), new Proxy(e, {
+      get(i, c, n) {
+        var h;
+        if (c === "build")
+          return r;
+        if (c === "key") {
+          const u = (h = i._props) == null ? void 0 : h.key;
+          if (u != null && u !== "")
+            return typeof u == "number" ? String(u) : u;
+          if (!i.__fiboKeyFn) {
+            const d = tt("fibo"), f = (m) => (i.key(m), n);
+            f.toString = () => d, f.valueOf = () => d, i.__fiboKeyFn = f, i.__fiboAutoKey = d;
+          }
+          return i.__fiboKeyFn;
+        }
+        if (c === "props") {
+          const u = Object.getPrototypeOf(i).props;
+          return typeof u == "function" ? Object.assign((f) => (u.call(i, f), n), i.__fiboElementProps ?? {}) : i.__fiboElementProps ?? {};
+        }
+        return Tt.has(c) || Reflect.has(i, c) ? Reflect.get(i, c, n) : (u) => {
+          const d = c.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), m = ["opacity", "z-index", "flex", "flex-grow", "flex-shrink", "order", "font-weight", "line-height"].includes(d), p = typeof u == "number" && !m ? `${u}px` : String(u), k = l.register(d, p);
+          return i.className(k), n;
         };
       }
     });
   };
 }
-const Dt = ({
+const It = ({
   signal: o,
   builder: t,
   loading: e,
   error: s
 }) => {
-  const r = k.useSyncExternalStore(
-    k.useCallback((n) => o.subscribe ? o.subscribe(n) : () => {
+  const r = g.useSyncExternalStore(
+    g.useCallback((n) => o.subscribe ? o.subscribe(n) : () => {
     }, [o]),
     () => o.value
   ), i = r == null ? void 0 : r.error;
   return i && s ? s(i) : ((r == null ? void 0 : r.isLoading) || (r == null ? void 0 : r.loading)) === !0 && e ? e() : t ? t(r) : null;
-}, Tt = k.memo(Dt);
-class Lt {
+}, Ot = g.memo(It);
+class Xt {
   constructor(t) {
     a(this, "_loading");
     a(this, "_error");
     a(this, "_builder");
-    this._signal = t;
+    this._signal = t, et(this, () => this.build(), "ValueBuilder");
   }
   loading(t) {
     return this._loading = typeof t == "function" ? t : () => t, this;
@@ -1800,7 +1852,7 @@ class Lt {
     return this._builder = t, this;
   }
   build() {
-    return k.createElement(Tt, {
+    return g.createElement(Ot, {
       signal: this._signal,
       builder: this._builder,
       loading: this._loading,
@@ -1808,35 +1860,35 @@ class Lt {
     });
   }
 }
-function se(o) {
-  return new Lt(o);
+function ie(o) {
+  return new Xt(o);
 }
 export {
-  ut as C,
-  at as E,
-  te as F,
-  dt as O,
-  xt as P,
-  Zt as R,
-  R as S,
-  se as V,
-  qt as a,
-  Z as b,
-  Ht as c,
-  gt as d,
-  Jt as e,
-  $t as f,
+  dt as C,
+  ut as E,
+  oe as F,
+  pt as O,
+  St as P,
+  Qt as R,
+  E as S,
+  ie as V,
+  Jt as a,
+  H as b,
+  qt as c,
+  kt as d,
+  ee as e,
+  Ct as f,
   K as g,
-  ee as h,
-  mt as i,
-  kt as j,
-  wt as k,
-  St as l,
-  Bt as m,
-  I as n,
-  Ut as o,
-  Qt as p,
-  lt as r,
-  Ot as s,
-  Kt as u
+  re as h,
+  bt as i,
+  _t as j,
+  $t as k,
+  Nt as l,
+  tt as m,
+  D as n,
+  Zt as o,
+  se as p,
+  ht as r,
+  Ut as s,
+  te as u
 };