fiboui 2.5.0 → 2.6.1

package/dist/server.js

@@ -1,27 +1,27 @@
-var ki = Object.defineProperty;
-var _i = (t, o, i) => o in t ? ki(t, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[o] = i;
-var c = (t, o, i) => _i(t, typeof o != "symbol" ? o + "" : o, i);
+var _i = Object.defineProperty;
+var zi = (t, o, i) => o in t ? _i(t, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[o] = i;
+var c = (t, o, i) => zi(t, typeof o != "symbol" ? o + "" : o, i);
 import p from "react";
-function zi(t) {
+function Si(t) {
   return !!t && typeof t == "object" && "build" in t && typeof t.build == "function";
 }
 function _o(t) {
-  return zi(t) ? t.build() : (p.isValidElement(t), t);
+  return Si(t) ? t.build() : (p.isValidElement(t), t);
 }
 function zo(t) {
   return typeof t == "string" || typeof t == "number";
 }
-function Si(t, o) {
+function Ci(t, o) {
   return p.isValidElement(t) && zo(t.key) && t.key !== "" ? t.key : `.$fibo-${o}`;
 }
-function Ci(t, o) {
-  return !p.isValidElement(t) || zo(t.key) && t.key !== "" ? t : p.cloneElement(t, { key: Si(t, o) });
+function Fi(t, o) {
+  return !p.isValidElement(t) || zo(t.key) && t.key !== "" ? t : p.cloneElement(t, { key: Ci(t, o) });
 }
 function Eo(t) {
   if (t == null)
     return [];
   const o = typeof t == "function" ? t() : t;
-  return (Array.isArray(o) ? o : [o]).map((e, r) => Ci(_o(e), r));
+  return (Array.isArray(o) ? o : [o]).map((e, r) => Fi(_o(e), r));
 }
 const Ao = [
   "fadeIn",
@@ -39,12 +39,12 @@ const Ao = [
   "blur",
   "pop",
   "bounce"
-], Fi = {
+], Ti = {
   fade: "fadeIn",
   scale: "scaleIn",
   blur: "blurIn"
 };
-function Ti(t) {
+function $i(t) {
   if (!t || typeof t != "object") return !1;
   const o = t;
   return typeof o.from == "object" && o.from !== null && typeof o.to == "object" && o.to !== null;
@@ -56,13 +56,13 @@ function Bo(t) {
     return `${r}: ${n}`;
   }).join("; ");
 }
-function $i(t) {
+function Ni(t) {
   let o = 5381;
   for (let i = 0; i < t.length; i += 1) o = (o << 5) + o ^ t.charCodeAt(i);
   return (o >>> 0).toString(36);
 }
-function Ni(t) {
-  const o = Fi[t] ?? t;
+function Ri(t) {
+  const o = Ti[t] ?? t;
   if (!Ao.includes(o))
     throw new Error(`Unknown motion preset "${t}". Use: ${Ao.join(", ")}`);
   return o;
@@ -321,77 +321,77 @@ const D = class D {
 };
 c(D, "instance");
 let H = D;
-const g = H.getInstance();
-function j() {
+const m = H.getInstance();
+function X() {
   H.getInstance().ensureDefaults();
 }
-function Zo() {
+function qo() {
   return H.getInstance().getCss();
 }
-function Me() {
-  const o = `<style id="fibo-dynamic-styles" data-fibo="1">${Zo().replace(/<\/style/gi, "<\\/style")}</style>`;
+function We() {
+  const o = `<style id="fibo-dynamic-styles" data-fibo="1">${qo().replace(/<\/style/gi, "<\\/style")}</style>`;
   return typeof document > "u" && H.resetForTests(), o;
 }
-function We() {
+function Pe() {
   H.resetForTests();
 }
-function qo() {
-  return j(), p.createElement("style", {
+function Jo() {
+  return X(), p.createElement("style", {
     id: "fibo-dynamic-styles",
     "data-fibo": "1",
     suppressHydrationWarning: !0,
-    dangerouslySetInnerHTML: { __html: Zo() }
+    dangerouslySetInnerHTML: { __html: qo() }
   });
 }
-function Ri() {
-  return j(), p.createElement("style", {
+function Ei() {
+  return X(), p.createElement("style", {
     id: "fibo-motion-presets",
     "data-fibo-motion": "1",
     dangerouslySetInnerHTML: { __html: yo }
   });
 }
-function Pe(t, o = {}) {
+function Le(t, o = {}) {
   const { styles: i = !0 } = o;
   function e() {
     const r = _o(t());
-    return i ? p.createElement(p.Fragment, null, r, p.createElement(qo)) : p.createElement(p.Fragment, null, r);
+    return i ? p.createElement(p.Fragment, null, r, p.createElement(Jo)) : p.createElement(p.Fragment, null, r);
   }
   return e.displayName = "FiboPage", e;
 }
-function Le(t) {
+function Xe(t) {
   return p.createElement(
     p.Fragment,
     null,
     _o(t),
-    p.createElement(qo)
+    p.createElement(Jo)
   );
 }
-const Jo = {
+const Qo = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280
 };
-function Ei(t) {
-  return t in Jo;
-}
 function Ai(t) {
-  if (Ei(t))
-    return `(min-width: ${Jo[t]}px)`;
+  return t in Qo;
+}
+function Bi(t) {
+  if (Ai(t))
+    return `(min-width: ${Qo[t]}px)`;
   const o = t.trim();
   return o.startsWith("@media") ? o.replace(/^@media\s+/, "") : o;
 }
-class Bi {
+class Ii {
   constructor() {
     c(this, "activeEffect", null);
   }
 }
-const Qo = new Bi(), Mo = [Qo];
-function Ii() {
-  return Mo[Mo.length - 1] ?? Qo;
-}
+const oi = new Ii(), Mo = [oi];
 function Mi() {
-  return Ii().activeEffect;
+  return Mo[Mo.length - 1] ?? oi;
+}
+function Wi() {
+  return Mi().activeEffect;
 }
 class bo {
   constructor(o) {
@@ -401,7 +401,7 @@ class bo {
     this._value = o;
   }
   get value() {
-    const o = Mi();
+    const o = Wi();
     return o && o.track(this), this._value;
   }
   set value(o) {
@@ -430,52 +430,52 @@ class bo {
     }
   }
 }
-function Wi({ children: t }) {
+function Pi({ children: t }) {
   return t();
 }
-function Pi({
+function Li({
   children: t
 }) {
   return t();
 }
-function Li({
+function Xi({
   children: t
 }) {
   return t();
 }
-function ji({ children: t }) {
+function Oi({ children: t }) {
   return t;
 }
-function Xi({
+function ji({
   children: t
 }) {
   return t;
 }
-function oi(t) {
+function ii(t) {
   var o, i, e = "";
   if (typeof t == "string" || typeof t == "number") e += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var r = t.length;
-    for (o = 0; o < r; o++) t[o] && (i = oi(t[o])) && (e && (e += " "), e += i);
+    for (o = 0; o < r; o++) t[o] && (i = ii(t[o])) && (e && (e += " "), e += i);
   } else for (i in t) t[i] && (e && (e += " "), e += i);
   return e;
 }
-function Oi() {
-  for (var t, o, i = 0, e = "", r = arguments.length; i < r; i++) (t = arguments[i]) && (o = oi(t)) && (e && (e += " "), e += o);
+function Yi() {
+  for (var t, o, i = 0, e = "", r = arguments.length; i < r; i++) (t = arguments[i]) && (o = ii(t)) && (e && (e += " "), e += o);
   return e;
 }
-function Yi(t) {
+function Vi(t) {
   const o = t.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/);
   if (!o)
     return t;
-  const [, i, e, r] = o, n = parseFloat(i), f = parseFloat(e), s = parseFloat(r), a = f * Math.cos(s * Math.PI / 180), b = f * Math.sin(s * Math.PI / 180), l = n + 0.3963377774 * a + 0.2158037573 * b, x = n - 0.1055613458 * a - 0.0638541728 * b, d = n - 0.0894841775 * a - 1.291485548 * b, v = l * l * l, z = x * x * x, k = d * d * d, _ = 4.0767416621 * v - 3.3077115913 * z + 0.2309699292 * k, R = -1.2684380046 * v + 2.6097574011 * z - 0.3413193965 * k, $ = -0.0041960863 * v - 0.7034186147 * z + 1.707614701 * k, S = (m) => m >= 31308e-7 ? 1.055 * m ** (1 / 2.4) - 0.055 : 12.92 * m, C = Math.max(0, Math.min(1, S(_))), F = Math.max(0, Math.min(1, S(R))), M = Math.max(0, Math.min(1, S($))), W = (m) => {
+  const [, i, e, r] = o, n = parseFloat(i), f = parseFloat(e), s = parseFloat(r), a = f * Math.cos(s * Math.PI / 180), b = f * Math.sin(s * Math.PI / 180), l = n + 0.3963377774 * a + 0.2158037573 * b, x = n - 0.1055613458 * a - 0.0638541728 * b, d = n - 0.0894841775 * a - 1.291485548 * b, v = l * l * l, z = x * x * x, k = d * d * d, _ = 4.0767416621 * v - 3.3077115913 * z + 0.2309699292 * k, R = -1.2684380046 * v + 2.6097574011 * z - 0.3413193965 * k, $ = -0.0041960863 * v - 0.7034186147 * z + 1.707614701 * k, S = (g) => g >= 31308e-7 ? 1.055 * g ** (1 / 2.4) - 0.055 : 12.92 * g, C = Math.max(0, Math.min(1, S(_))), F = Math.max(0, Math.min(1, S(R))), M = Math.max(0, Math.min(1, S($))), W = (g) => {
     var G;
-    const E = (G = Math.round(m * 255).toString(16)) == null ? void 0 : G.toUpperCase();
+    const E = (G = Math.round(g * 255).toString(16)) == null ? void 0 : G.toUpperCase();
     return E.length === 1 ? `0${E}` : E;
   };
   return `#${W(C)}${W(F)}${W(M)}`;
 }
-function Vi(t) {
+function Di(t) {
   const o = {}, i = {}, e = t.split(`
 `);
   for (const r of e) {
@@ -484,7 +484,7 @@ function Vi(t) {
       continue;
     const f = n.match(/^--color-([a-z0-9\-]+): (oklch\([^)]+\));?$/), s = n.match(/^--color-([a-z0-9\-]+): (#[a-fA-F0-9]{3,6});?$/);
     if (f) {
-      const [, a, b] = f, l = Yi(b);
+      const [, a, b] = f, l = Vi(b);
       o[l.toLowerCase()] = `bg-${a}`, i[l.toLowerCase()] = `text-${a}`;
     } else if (s) {
       const [, a, b] = s;
@@ -493,13 +493,13 @@ function Vi(t) {
   }
   return { background: o, text: i };
 }
-const Di = (t) => {
+const Hi = (t) => {
   if (t !== void 0)
     return typeof t == "number" ? `${t}px` : t.toString();
 }, J = (t, o) => {
-  const i = Di(o);
+  const i = Hi(o);
   return i === void 0 ? "" : `${t}-[${i}]`;
-}, Hi = `
+}, Gi = `
   --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);
@@ -744,7 +744,7 @@ const Di = (t) => {
   --color-stone-950: oklch(0.147 0.004 49.25);
   --color-black: #000;
   --color-white: #fff;
-`, Gi = Vi(Hi), ii = {
+`, Ui = Di(Gi), ti = {
   borderRadius: {
     0: "rounded-none",
     "0px": "rounded-none",
@@ -841,7 +841,7 @@ const Di = (t) => {
     fixed: "fixed",
     sticky: "sticky"
   }
-}, Ui = (t, o) => ({
+}, Ki = (t, o) => ({
   // 背景色
   backgroundColor: (i) => i.backgroundColor ? [t.background[i.backgroundColor.toLowerCase()] || `bg-[${i.backgroundColor}]`] : [],
   // 文字色
@@ -850,7 +850,7 @@ const Di = (t) => {
   borderRadius: (i) => {
     if (!i.borderRadius)
       return [];
-    const e = ii.borderRadius[i.borderRadius] || J("rounded", i.borderRadius);
+    const e = ti.borderRadius[i.borderRadius] || J("rounded", i.borderRadius);
     return e ? [e] : [];
   },
   // 外边距
@@ -997,7 +997,7 @@ const Di = (t) => {
   },
   // 自定义类名
   className: (i) => i.className ? [i.className] : []
-}), Ki = {
+}), Zi = {
   backgroundColor: "backgroundColor",
   color: "color",
   borderRadius: "borderRadius",
@@ -1031,10 +1031,10 @@ const Di = (t) => {
   position: "position",
   opacity: "opacity",
   className: "className"
-}, Zi = (t, o) => {
-  const i = (o == null ? void 0 : o.colorMaps) || Gi, e = (o == null ? void 0 : o.styleMaps) || ii, r = Ui(i, e), n = [], f = /* @__PURE__ */ new Set();
+}, qi = (t, o) => {
+  const i = (o == null ? void 0 : o.colorMaps) || Ui, e = (o == null ? void 0 : o.styleMaps) || ti, r = Ki(i, e), n = [], f = /* @__PURE__ */ new Set();
   return Object.keys(t).forEach((s) => {
-    const a = Ki[s];
+    const a = Zi[s];
     if (a && !f.has(a)) {
       const b = r[a];
       if (b) {
@@ -1044,23 +1044,23 @@ const Di = (t) => {
     }
   }), n.filter(Boolean).join(" ");
 };
-function qi({ children: t }) {
+function Ji({ children: t }) {
   return t;
 }
-function Ji({ children: t }) {
+function Qi({ children: t }) {
   return p.createElement(p.Fragment, null, t);
 }
-function Qi({ children: t }) {
+function ot({ children: t }) {
   return t;
 }
-const Wo = /* @__PURE__ */ new Map(), ot = {
+const Wo = /* @__PURE__ */ new Map(), it = {
   easeIn: "ease-in",
   easeOut: "ease-out",
   easeInOut: "ease-in-out",
   linear: "linear",
   ease: "ease"
 };
-function ti(t = {}) {
+function ei(t = {}) {
   const o = t.stiffness ?? 170, i = t.damping ?? 26, e = t.mass ?? 1, r = `${o}:${i}:${e}`, n = Wo.get(r);
   if (n) return n;
   const f = 1 / 60, s = 1;
@@ -1080,9 +1080,9 @@ function ti(t = {}) {
   return Wo.set(r, z), z;
 }
 function oo(t, o) {
-  return t === "spring" ? ti(o) : ot[t] ?? t;
+  return t === "spring" ? ei(o) : it[t] ?? t;
 }
-const ei = [
+const ri = [
   // —— 2D Transitions ——
   "grow",
   "shrink",
@@ -1299,29 +1299,29 @@ const ei = [
   "hvr-float": "float",
   "hvr-sweep-to-right": "sweepToRight"
 };
-function it(t) {
+function tt(t) {
   return t.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`);
 }
 function Lo(t) {
-  return ei.includes(t);
+  return ri.includes(t);
 }
-function tt(t) {
+function et(t) {
   const o = t.trim(), i = Po[o] ?? Po[o.toLowerCase()];
   if (i) return i;
   if (Lo(o)) return o;
   const e = o.replace(/-([a-z])/g, (r, n) => n.toUpperCase());
   if (Lo(e)) return e;
   throw new Error(
-    `Unknown interaction effect "${t}". Use one of ${ei.length} presets — see INTERACTION_EFFECTS.`
+    `Unknown interaction effect "${t}". Use one of ${ri.length} presets — see INTERACTION_EFFECTS.`
   );
 }
-function et(t, o = !1) {
+function rt(t, o = !1) {
   return o ? `fibo-fx-on-group-${t}` : `fibo-fx-on-${t}`;
 }
-function rt(t) {
-  return `fibo-fx-${it(t)}`;
+function nt(t) {
+  return `fibo-fx-${tt(t)}`;
 }
-const nt = `
+const ft = `
 @keyframes fibo-fx-pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); } }
 @keyframes fibo-fx-pulse-grow { to { transform: scale(1.1); } }
 @keyframes fibo-fx-pulse-shrink { to { transform: scale(0.9); } }
@@ -2614,12 +2614,12 @@ const nt = `
   }
 }
 `.trim();
-let jo = !1;
-function ft() {
-  if (jo) return;
-  jo = !0;
+let Xo = !1;
+function st() {
+  if (Xo) return;
+  Xo = !0;
   const t = H.getInstance();
-  t.ensureDefaults(), t.injectExtra(nt, "fibo-interaction-fx");
+  t.ensureDefaults(), t.injectExtra(ft, "fibo-interaction-fx");
 }
 function no(t, o, i, e = 0) {
   const r = (Array.isArray(t) ? t : [t]).flatMap((s) => String(s).split(",")).map((s) => s.trim()).filter(Boolean);
@@ -2631,27 +2631,27 @@ function mo(t) {
   const o = { ...t };
   let i = !1;
   const e = o.background;
-  typeof e == "string" && e.trim() && o.backgroundColor == null && at(e) && (o.backgroundColor = e, delete o.background, i = !0);
+  typeof e == "string" && e.trim() && o.backgroundColor == null && ct(e) && (o.backgroundColor = e, delete o.background, i = !0);
   const r = o.border;
   if (typeof r == "string" && r.trim()) {
-    const n = ct(r);
+    const n = lt(r);
     n && (o.borderWidth == null && n.width != null && (o.borderWidth = n.width), o.borderStyle == null && n.style != null && (o.borderStyle = n.style), o.borderColor == null && n.color != null && (o.borderColor = n.color), delete o.border, i = !0);
   }
   return i ? o : t;
 }
-const st = "translate3d(0, 0, 0)";
-function Xo(t) {
-  return t.transform != null && String(t.transform).trim() !== "" ? t : { ...t, transform: st };
+const at = "translate3d(0, 0, 0)";
+function Oo(t) {
+  return t.transform != null && String(t.transform).trim() !== "" ? t : { ...t, transform: at };
 }
-function Oo(t, o) {
+function jo(t, o) {
   const i = typeof o == "number" ? `${o}px` : o;
   return t === "x" ? `translate3d(${i}, 0, 0)` : `translate3d(0, ${i}, 0)`;
 }
-function at(t) {
+function ct(t) {
   const o = t.trim().toLowerCase();
   return !(!o || o.includes("gradient(") || o.includes("url(") || o.includes("image(") || o.includes("element(") || o.startsWith("repeat") || o.includes(" / "));
 }
-function ct(t) {
+function lt(t) {
   const o = t.trim();
   if (!o) return null;
   const i = o.match(/^(\S+)\s+(\S+)\s+(.+)$/);
@@ -2695,7 +2695,7 @@ const Yo = /* @__PURE__ */ new Set([
 function So(t) {
   return t.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 }
-const lt = {
+const bt = {
   paddingHorizontal: ["paddingLeft", "paddingRight"],
   paddingVertical: ["paddingTop", "paddingBottom"],
   paddingX: ["paddingLeft", "paddingRight"],
@@ -2727,11 +2727,11 @@ const lt = {
   gapX: ["columnGap"],
   gapY: ["rowGap"]
 };
-function ri(t) {
-  const o = lt[t];
+function ni(t) {
+  const o = bt[t];
   return o ? [...o] : null;
 }
-function ni(t, o) {
+function fi(t, o) {
   if (o == null) return "";
   if (typeof o == "boolean") return o ? "true" : "false";
   if (typeof o == "number")
@@ -2739,7 +2739,7 @@ function ni(t, o) {
   const i = String(o);
   return (i === "0" || i === "0px") && Vo.has(t) ? "none" : i;
 }
-const bt = {
+const ut = {
   "background-color": ["background-color"],
   "border-color": ["border-color"],
   color: ["color"],
@@ -2771,9 +2771,9 @@ class I {
           };
         }
         return (b) => {
-          const x = ri(s) ?? [s];
+          const x = ni(s) ?? [s];
           for (const d of x)
-            r.set(So(d), ni(d, b));
+            r.set(So(d), fi(d, b));
           return n;
         };
       }
@@ -2786,9 +2786,9 @@ class I {
    * Stamps CSS classes; sheet is fiboui-owned (not a Hover.css vendor).
    */
   effect(o) {
-    const i = tt(o);
-    return ft(), this.parentBuilder.addClassName("fibo-fx"), this.parentBuilder.addClassName(rt(i)), this.parentBuilder.addClassName(
-      et(this.pseudoState, this.isGroup)
+    const i = et(o);
+    return st(), this.parentBuilder.addClassName("fibo-fx"), this.parentBuilder.addClassName(nt(i)), this.parentBuilder.addClassName(
+      rt(this.pseudoState, this.isGroup)
     ), this.parentBuilder.prepareSmoothInteraction([
       "opacity",
       "box-shadow",
@@ -2820,10 +2820,10 @@ class I {
     return this.transforms.set("scale", `scale(${o})`), this.flushTransform();
   }
   translateX(o) {
-    return this.transforms.set("translateX", Oo("x", o)), this.flushTransform();
+    return this.transforms.set("translateX", jo("x", o)), this.flushTransform();
   }
   translateY(o) {
-    return this.transforms.set("translateY", Oo("y", o)), this.flushTransform();
+    return this.transforms.set("translateY", jo("y", o)), this.flushTransform();
   }
   rotate(o) {
     return this.transforms.set("rotate", `rotate(${o}deg)`), this.flushTransform();
@@ -2873,16 +2873,16 @@ class I {
     return this.set("transform", [...this.transforms.values()].join(" "));
   }
   set(o, i) {
-    const e = bt[o];
+    const e = ut[o];
     e && this.parentBuilder.prepareSmoothInteraction(e);
-    const r = g.registerPseudo(this.pseudoState, o, i, this.isGroup);
+    const r = m.registerPseudo(this.pseudoState, o, i, this.isGroup);
     return this.parentBuilder.addClassName(r), this;
   }
   end() {
     return this.parentBuilder;
   }
 }
-const ut = {
+const ht = {
   name: "material",
   colors: {
     primary: "#6750A4",
@@ -2965,7 +2965,7 @@ const ut = {
     lg: "0 8px 16px rgba(0,0,0,0.14)"
   },
   fontFamily: "Roboto, sans-serif"
-}, ht = {
+}, xt = {
   name: "cupertino",
   colors: {
     primary: "#007AFF",
@@ -3047,7 +3047,7 @@ const ut = {
     lg: "0 4px 16px rgba(0,0,0,0.12)"
   },
   fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif'
-}, xt = {
+}, pt = {
   name: "web",
   colors: {
     primary: "#3B82F6",
@@ -3126,7 +3126,7 @@ const ut = {
     lg: "0 10px 15px rgba(0,0,0,0.1)"
   },
   fontFamily: "Inter, system-ui, sans-serif"
-}, pt = {
+}, dt = {
   name: "noir",
   colors: {
     primary: "#F4F4F6",
@@ -3220,24 +3220,24 @@ const ut = {
     lg: "0 30px 80px rgba(0,0,0,0.75)"
   },
   fontFamily: 'var(--font-sans-loaded, "Plus Jakarta Sans"), system-ui, -apple-system, sans-serif'
-}, dt = {
-  material: ut,
-  cupertino: ht,
-  web: xt,
-  noir: pt
+}, gt = {
+  material: ht,
+  cupertino: xt,
+  web: pt,
+  noir: dt
 };
-function gt(t) {
+function mt(t) {
   if (typeof t == "string") {
-    const o = dt[t];
+    const o = gt[t];
     if (!o) throw new Error(`Unknown fiboui theme preset: ${t}`);
     return o;
   }
   return t;
 }
-function mt(t) {
+function vt(t) {
   return `--fibo-text-${t}`;
 }
-function vt(t) {
+function wt(t) {
   const o = t.colors, i = {
     "--fibo-primary": o.primary,
     "--fibo-on-primary": o.onPrimary,
@@ -3263,18 +3263,18 @@ function vt(t) {
     "--fibo-shadow-lg": t.shadows.lg
   };
   return o.primaryVariant && (i["--fibo-primary-variant"] = o.primaryVariant), o.secondaryVariant && (i["--fibo-secondary-variant"] = o.secondaryVariant), o.success && (i["--fibo-success"] = o.success), o.warning && (i["--fibo-warning"] = o.warning), o.info && (i["--fibo-info"] = o.info), o.onError && (i["--fibo-on-error"] = o.onError), o.outline && (i["--fibo-outline"] = o.outline), i["--fibo-primary-container"] = o.primaryVariant ?? o.primary, i["--fibo-on-primary-container"] = o.onPrimary, i["--fibo-secondary-container"] = o.secondaryVariant ?? o.secondary, i["--fibo-on-secondary-container"] = o.onSecondary, i["--fibo-tertiary"] = o.secondary, i["--fibo-on-tertiary"] = o.onSecondary, i["--fibo-tertiary-container"] = o.secondaryVariant ?? o.secondary, i["--fibo-on-tertiary-container"] = o.onSecondary, i["--fibo-surface-variant"] = o.surface, i["--fibo-on-surface-variant"] = o.onSurface, Object.keys(t.typography).forEach((e) => {
-    const r = t.typography[e], n = mt(e);
+    const r = t.typography[e], n = vt(e);
     r.fontSize != null && (i[`${n}-size`] = String(r.fontSize)), r.fontWeight != null && (i[`${n}-weight`] = String(r.fontWeight)), r.letterSpacing != null && (i[`${n}-tracking`] = String(r.letterSpacing)), r.lineHeight != null && (i[`${n}-height`] = String(r.lineHeight)), r.color != null && (i[`${n}-color`] = String(r.color));
   }), i;
 }
-function wt(t) {
-  return vt(t);
-}
 function yt(t) {
+  return wt(t);
+}
+function kt(t) {
   return `fibo-theme-${t.name || "custom"}`;
 }
-const fi = 64, kt = `${fi}px`;
-class X {
+const si = 64, _t = `${si}px`;
+class O {
   constructor() {
     /** @internal Extra DOM props forwarded to the host element. */
     c(this, "_props", {});
@@ -3337,7 +3337,7 @@ class X {
    */
   anchor(o) {
     return this.id(o), this._explicitScrollMargin || this._classNames.push(
-      g.register("scroll-margin-top", "var(--fibo-sticky-offset, 0px)")
+      m.register("scroll-margin-top", "var(--fibo-sticky-offset, 0px)")
     ), this;
   }
   /**
@@ -3347,7 +3347,7 @@ class X {
   scrollMargin(o) {
     this._explicitScrollMargin = !0;
     const i = typeof o == "number" ? `${o}px` : o;
-    return this._classNames.push(g.register("scroll-margin-top", i)), this;
+    return this._classNames.push(m.register("scroll-margin-top", i)), this;
   }
   /** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
   addClassName(o) {
@@ -3364,26 +3364,51 @@ class X {
     return i && typeof i == "object" && (this.__fiboElementProps = { ...i, key: String(o) }), this;
   }
   paddingHorizontal(o) {
-    const i = typeof o == "number" ? `${o}px` : o, e = g.register("padding-left", i), r = g.register("padding-right", i);
+    const i = typeof o == "number" ? `${o}px` : o, e = m.register("padding-left", i), r = m.register("padding-right", i);
     return this._classNames.push(e, r), this;
   }
   paddingVertical(o) {
-    const i = typeof o == "number" ? `${o}px` : o, e = g.register("padding-top", i), r = g.register("padding-bottom", i);
+    const i = typeof o == "number" ? `${o}px` : o, e = m.register("padding-top", i), r = m.register("padding-bottom", i);
     return this._classNames.push(e, r), this;
   }
   marginHorizontal(o) {
-    const i = typeof o == "number" ? `${o}px` : o, e = g.register("margin-left", i), r = g.register("margin-right", i);
+    const i = typeof o == "number" ? `${o}px` : o, e = m.register("margin-left", i), r = m.register("margin-right", i);
     return this._classNames.push(e, r), this;
   }
   marginVertical(o) {
-    const i = typeof o == "number" ? `${o}px` : o, e = g.register("margin-top", i), r = g.register("margin-bottom", i);
+    const i = typeof o == "number" ? `${o}px` : o, e = m.register("margin-top", i), r = m.register("margin-bottom", i);
     return this._classNames.push(e, r), this;
   }
+  /** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
+  layoutStyle(o) {
+    return this._style = { ...this._style, ...o }, this;
+  }
   flexDirection(o) {
-    return this._classNames.push(`flex-${o}`), this;
+    return this.layoutStyle({ flexDirection: o });
   }
   alignItems(o) {
-    return this._classNames.push(`items-${o}`), this;
+    const i = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+      baseline: "baseline"
+    };
+    return this.layoutStyle({ alignItems: i[o] });
+  }
+  alignSelf(o) {
+    const i = {
+      auto: "auto",
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+      baseline: "baseline"
+    };
+    return this.layoutStyle({ alignSelf: i[o] });
+  }
+  flexWrap(o) {
+    return this.layoutStyle({ flexWrap: o });
   }
   /**
    * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
@@ -3391,87 +3416,92 @@ class X {
    */
   justifyContent(o) {
     const i = {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between",
-      around: "justify-around",
-      evenly: "justify-evenly",
-      "space-between": "justify-between",
-      "space-around": "justify-around",
-      "space-evenly": "justify-evenly",
-      spaceBetween: "justify-between",
-      spaceAround: "justify-around",
-      spaceEvenly: "justify-evenly"
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+      "space-between": "space-between",
+      "space-around": "space-around",
+      "space-evenly": "space-evenly",
+      spaceBetween: "space-between",
+      spaceAround: "space-around",
+      spaceEvenly: "space-evenly"
     };
-    return this._classNames.push(i[o] ?? `justify-${o}`), this;
+    return this.layoutStyle({ justifyContent: i[o] ?? o });
   }
   flex(o) {
-    if (this._classNames.push("flex"), o !== void 0)
-      if (typeof o == "number") {
-        const i = g.register("flex", String(o));
-        this._classNames.push(i);
-      } else typeof o == "string" && this._classNames.push(`flex-${o}`);
-    return this;
+    const e = o === void 0 ? void 0 : typeof o == "number" ? String(o) : {
+      1: "1 1 0%",
+      auto: "1 1 auto",
+      initial: "0 1 auto",
+      none: "none"
+    }[o] ?? o;
+    return this.layoutStyle({ display: "flex", ...e !== void 0 ? { flex: e } : {} });
   }
   grid() {
-    return this._classNames.push("grid"), this;
+    return this.layoutStyle({ display: "grid" });
   }
   inlineFlex() {
-    return this._classNames.push("inline-flex"), this;
+    return this.layoutStyle({ display: "inline-flex" });
   }
   inlineGrid() {
-    return this._classNames.push("inline-grid"), this;
+    return this.layoutStyle({ display: "inline-grid" });
   }
   block() {
-    return this._classNames.push("block"), this;
+    return this.layoutStyle({ display: "block" });
   }
   inlineBlock() {
-    return this._classNames.push("inline-block"), this;
+    return this.layoutStyle({ display: "inline-block" });
   }
   hidden() {
-    return this._classNames.push("hidden"), this;
+    return this.layoutStyle({ display: "none" });
   }
   center() {
-    return this._classNames.push("flex", "items-center", "justify-center"), this;
+    return this.layoutStyle({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    });
   }
   centerX() {
-    return this._classNames.push("flex", "justify-center"), this;
+    return this.layoutStyle({ display: "flex", justifyContent: "center" });
   }
   centerY() {
-    return this._classNames.push("flex", "items-center"), this;
+    return this.layoutStyle({ display: "flex", alignItems: "center" });
   }
   spaceBetween() {
-    return this._classNames.push("justify-between"), this;
+    return this.layoutStyle({ justifyContent: "space-between" });
   }
   spaceAround() {
-    return this._classNames.push("justify-around"), this;
+    return this.layoutStyle({ justifyContent: "space-around" });
   }
   spaceEvenly() {
-    return this._classNames.push("justify-evenly"), this;
+    return this.layoutStyle({ justifyContent: "space-evenly" });
   }
   fill() {
-    return this._classNames.push("w-full", "h-full"), this;
+    return this.layoutStyle({ width: "100%", height: "100%" });
   }
   fillWidth() {
-    return this._classNames.push("w-full"), this;
+    return this.layoutStyle({ width: "100%" });
   }
   fillHeight() {
-    return this._classNames.push("h-full"), this;
+    return this.layoutStyle({ height: "100%" });
   }
   square(o) {
-    const i = typeof o == "number" ? `${o}px` : o, e = g.register("width", i), r = g.register("height", i);
+    const i = typeof o == "number" ? `${o}px` : o, e = m.register("width", i), r = m.register("height", i);
     return this._classNames.push(e, r), this;
   }
   circle() {
     return this._classNames.push("rounded-full"), this;
   }
   opacity(o) {
-    const i = g.register("opacity", String(o));
+    const i = m.register("opacity", String(o));
     return this._classNames.push(i), this;
   }
   p(o) {
-    const i = typeof o == "number" ? `${o}px` : o, e = g.register("padding", i);
+    const i = typeof o == "number" ? `${o}px` : o, e = m.register("padding", i);
     return this._classNames.push(e), this;
   }
   px(o) {
@@ -3487,7 +3517,7 @@ class X {
     return this.paddingVertical(o);
   }
   m(o) {
-    const i = typeof o == "number" ? `${o}px` : o, e = g.register("margin", i);
+    const i = typeof o == "number" ? `${o}px` : o, e = m.register("margin", i);
     return this._classNames.push(e), this;
   }
   mx(o) {
@@ -3503,15 +3533,15 @@ class X {
     return this.marginVertical(o);
   }
   bg(o) {
-    const i = typeof o == "string" && !o.startsWith("#") && !o.startsWith("rgb") ? this.resolveSemanticColor(o) : o, e = g.register("background-color", i);
+    const i = typeof o == "string" && !o.startsWith("#") && !o.startsWith("rgb") ? this.resolveSemanticColor(o) : o, e = m.register("background-color", i);
     return this._classNames.push(e), this;
   }
   text(o) {
-    const i = typeof o == "string" && !o.startsWith("#") && !o.startsWith("rgb") ? this.resolveSemanticColor(o) : o, e = g.register("color", i);
+    const i = typeof o == "string" && !o.startsWith("#") && !o.startsWith("rgb") ? this.resolveSemanticColor(o) : o, e = m.register("color", i);
     return this._classNames.push(e), this;
   }
   color(o) {
-    const i = typeof o == "string" && !o.startsWith("#") && !o.startsWith("rgb") ? this.resolveSemanticColor(o) : o, e = g.register("color", i);
+    const i = typeof o == "string" && !o.startsWith("#") && !o.startsWith("rgb") ? this.resolveSemanticColor(o) : o, e = m.register("color", i);
     return this._classNames.push(e), this;
   }
   resolveSemanticColor(o) {
@@ -3544,7 +3574,7 @@ class X {
   }
   shadow(o) {
     if (o === null || o === "none" || o === 0 || o === "0") {
-      const n = g.register("box-shadow", "none");
+      const n = m.register("box-shadow", "none");
       return this._classNames.push(n), this;
     }
     const i = {
@@ -3592,29 +3622,29 @@ class X {
       }
     };
     if (!o) {
-      const n = g.register("box-shadow", i.md);
+      const n = m.register("box-shadow", i.md);
       return this._classNames.push(n), this;
     }
     if (typeof o == "string") {
       if (e(o)) {
-        const s = r("all", "md", o), a = g.register("box-shadow", s);
+        const s = r("all", "md", o), a = m.register("box-shadow", s);
         return this._classNames.push(a), this;
       }
-      const n = i[o] || i.md, f = g.register("box-shadow", n);
+      const n = i[o] || i.md, f = m.register("box-shadow", n);
       return this._classNames.push(f), this;
     }
     if (Array.isArray(o)) {
       const [n, f, s, a] = o;
       if (typeof n == "string" && e(n)) {
-        const x = r("all", "md", n, f), d = g.register("box-shadow", x);
+        const x = r("all", "md", n, f), d = m.register("box-shadow", x);
         return this._classNames.push(d), this;
       }
       const b = n;
       if (typeof f == "string" && e(f)) {
-        const x = r(b, "md", f, s), d = g.register("box-shadow", x);
+        const x = r(b, "md", f, s), d = m.register("box-shadow", x);
         return this._classNames.push(d), this;
       } else {
-        const d = r(b, f, s, a), v = g.register("box-shadow", d);
+        const d = r(b, f, s, a), v = m.register("box-shadow", d);
         return this._classNames.push(v), this;
       }
     }
@@ -3634,7 +3664,7 @@ class X {
    * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
    */
   media(o, i) {
-    return this.registerMediaStyles(Ai(o), i), this;
+    return this.registerMediaStyles(Bi(o), i), this;
   }
   registerMediaStyles(o, i) {
     if (!i) return;
@@ -3652,7 +3682,7 @@ class X {
     for (const [r, n] of Object.entries(i)) {
       if (n == null) continue;
       const f = r.replace(/[A-Z]/g, (a) => `-${a.toLowerCase()}`), s = typeof n == "number" && !e.has(r) && !e.has(f) ? `${n}px` : String(n);
-      this._classNames.push(g.registerMedia(o, f, s));
+      this._classNames.push(m.registerMedia(o, f, s));
     }
   }
   sm(o) {
@@ -3669,23 +3699,23 @@ class X {
   }
   rounded(o) {
     if (typeof o == "number") {
-      const i = g.register("border-radius", `${o}px`);
+      const i = m.register("border-radius", `${o}px`);
       this._classNames.push(i);
     } else if (typeof o == "string" && (o.startsWith("rounded-") || ["sm", "md", "lg", "xl", "2xl", "3xl", "full", "none"].includes(o))) {
       const i = o.startsWith("rounded-") ? o : `rounded-${o}`;
       this._classNames.push(i);
     } else {
-      const i = g.register("border-radius", o);
+      const i = m.register("border-radius", o);
       this._classNames.push(i);
     }
     return this;
   }
   borderRadius(o) {
     if (typeof o == "number") {
-      const i = g.register("border-radius", `${o}px`);
+      const i = m.register("border-radius", `${o}px`);
       this._classNames.push(i);
     } else {
-      const i = g.register("border-radius", o);
+      const i = m.register("border-radius", o);
       this._classNames.push(i);
     }
     return this;
@@ -3696,48 +3726,42 @@ class X {
     else if (["red", "blue", "green", "gray", "white", "black", "transparent"].some((i) => o.includes(i)))
       this._classNames.push(`border-${o}`);
     else {
-      const i = g.register("border-color", o);
+      const i = m.register("border-color", o);
       this._classNames.push(i);
     }
     return this;
   }
   width(o) {
     if (typeof o == "number") {
-      const i = g.register("width", `${o}px`);
+      const i = m.register("width", `${o}px`);
       this._classNames.push(i);
     } else if (typeof o == "string" && (o.startsWith("w-") || o === "full" || o === "screen" || o === "min" || o === "max" || o === "fit")) {
       const i = o.startsWith("w-") ? o : `w-${o}`;
       this._classNames.push(i);
     } else {
-      const i = g.register("width", o);
+      const i = m.register("width", o);
       this._classNames.push(i);
     }
     return this;
   }
   height(o) {
     if (typeof o == "number") {
-      const i = g.register("height", `${o}px`);
+      const i = m.register("height", `${o}px`);
       this._classNames.push(i);
     } else if (typeof o == "string" && (o.startsWith("h-") || o === "full" || o === "screen" || o === "min" || o === "max" || o === "fit")) {
       const i = o.startsWith("h-") ? o : `h-${o}`;
       this._classNames.push(i);
     } else {
-      const i = g.register("height", o);
+      const i = m.register("height", o);
       this._classNames.push(i);
     }
     return this;
   }
   gap(o) {
-    if (typeof o == "number") {
-      const i = g.register("gap", `${o}px`);
-      this._classNames.push(i);
-    } else if (typeof o == "string" && o.startsWith("gap-"))
-      this._classNames.push(o);
-    else {
-      const i = g.register("gap", o);
-      this._classNames.push(i);
-    }
-    return this;
+    if (typeof o == "string" && o.startsWith("gap-"))
+      return this._classNames.push(o), this;
+    const i = typeof o == "number" ? `${o}px` : o;
+    return this.layoutStyle({ gap: i });
   }
   clean() {
     return this._classNames.push(
@@ -3796,7 +3820,7 @@ class X {
   }
   weight(o) {
     if (typeof o == "number") {
-      const i = g.register("font-weight", String(o));
+      const i = m.register("font-weight", String(o));
       this._classNames.push(i);
     } else {
       const i = {
@@ -3813,7 +3837,7 @@ class X {
       if (i[o])
         this._classNames.push(i[o]);
       else {
-        const e = g.register("font-weight", o);
+        const e = m.register("font-weight", o);
         this._classNames.push(e);
       }
     }
@@ -3884,10 +3908,10 @@ class X {
   }
   transition(o, i, e, r) {
     if (this._autoEffectTransition = !1, this._effectTransitionProps = [], typeof o == "string" && i === void 0)
-      return this.replaceTransitionClass(g.register("transition", o)), this;
+      return this.replaceTransitionClass(m.register("transition", o)), this;
     const n = Array.isArray(o) ? o : [o], f = oo(e || this._transitionEasing);
     return this.replaceTransitionClass(
-      g.register(
+      m.register(
         "transition",
         no(n, i || this._transitionDuration, f, r || 0)
       )
@@ -3930,7 +3954,7 @@ class X {
    */
   _applyTransition() {
     this._autoEffectTransition = !1, this._effectTransitionProps = [], this.replaceTransitionClass(
-      g.register(
+      m.register(
         "transition",
         no(
           this._transitionProperties,
@@ -3945,8 +3969,8 @@ class X {
     this._transitionClass && (this._classNames = this._classNames.filter((i) => i !== this._transitionClass)), this._transitionClass = o, this._classNames.push(o);
   }
   animate(o, i) {
-    j(), this._usesCssMotion = !0, this._motionClass && (this._classNames = this._classNames.filter((l) => l !== this._motionClass));
-    const e = Ti(o), r = (e ? o.duration : i == null ? void 0 : i.duration) ?? this._transitionDuration, n = (e ? o.delay : i == null ? void 0 : i.delay) ?? this._transitionDelay;
+    X(), this._usesCssMotion = !0, this._motionClass && (this._classNames = this._classNames.filter((l) => l !== this._motionClass));
+    const e = $i(o), r = (e ? o.duration : i == null ? void 0 : i.duration) ?? this._transitionDuration, n = (e ? o.delay : i == null ? void 0 : i.delay) ?? this._transitionDelay;
     let f = e ? o.ease : i == null ? void 0 : i.ease;
     const s = {
       stiffness: (e ? o.stiffness : i == null ? void 0 : i.stiffness) ?? void 0,
@@ -3954,10 +3978,10 @@ class X {
       mass: (e ? o.mass : i == null ? void 0 : i.mass) ?? void 0
     };
     if (e) {
-      const l = Bo(o.from), x = Bo(o.to), d = g.registerKeyframes($i(`${l}=>${x}`), l, x);
+      const l = Bo(o.from), x = Bo(o.to), d = m.registerKeyframes(Ni(`${l}=>${x}`), l, x);
       this._motionClass = `fibo-anim ${d}`, this._props["data-fibo-anim"] = "custom";
     } else {
-      const l = Ni(o);
+      const l = Ri(o);
       this._motionClass = `fibo-anim fibo-anim-${l}`, this._props["data-fibo-anim"] = l, (i == null ? void 0 : i.from) !== void 0 && (this._style["--fibo-from"] = typeof i.from == "number" ? `${i.from}px` : i.from), !f && l === "pop" && (f = "spring");
     }
     const a = oo(f ?? "ease", s);
@@ -3967,7 +3991,7 @@ class X {
   }
   /** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
   spring(o) {
-    const i = ti(o);
+    const i = ei(o);
     return this._transitionEasing = i, this._motionClass ? (this._style["--fibo-ease"] = i, this) : (this._applyTransition(), this);
   }
   reducedMotion(o = "reduce") {
@@ -4024,11 +4048,11 @@ class X {
     return o ? (o(i), this) : i;
   }
   stagger(o) {
-    return this._staggerMs = o, this._usesCssMotion = !0, this._style["--fibo-stagger"] = `${o}ms`, j(), this;
+    return this._staggerMs = o, this._usesCssMotion = !0, this._style["--fibo-stagger"] = `${o}ms`, X(), this;
   }
   /** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
   reveal(o = "fadeUp") {
-    return this._reveal = typeof o == "string" ? { preset: o, once: !0 } : { preset: "fadeUp", once: !0, ...o }, this._usesCssMotion = !0, j(), this;
+    return this._reveal = typeof o == "string" ? { preset: o, once: !0 } : { preset: "fadeUp", once: !0, ...o }, this._usesCssMotion = !0, X(), this;
   }
   /** Alias of `.reveal()` for scroll-triggered presets. */
   onScroll(o = "fadeIn") {
@@ -4036,26 +4060,26 @@ class X {
   }
   /** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
   scrollTimeline(o = "view") {
-    return j(), this._classNames.push(o === "scroll" ? "fibo-scroll-timeline" : "fibo-view-timeline"), this._usesCssMotion = !0, o === "view" && !this._reveal && (this._reveal = { preset: "fadeUp", once: !0 }), this;
+    return X(), this._classNames.push(o === "scroll" ? "fibo-scroll-timeline" : "fibo-view-timeline"), this._usesCssMotion = !0, o === "view" && !this._reveal && (this._reveal = { preset: "fadeUp", once: !0 }), this;
   }
   scrollProgress() {
-    return j(), this._scrollProgress = !0, this._classNames.push("fibo-scroll-progress"), this._usesCssMotion = !0, this;
+    return X(), this._scrollProgress = !0, this._classNames.push("fibo-scroll-progress"), this._usesCssMotion = !0, this;
   }
   smoothScroll() {
-    return this._classNames.push(g.register("scroll-behavior", "smooth")), this;
+    return this._classNames.push(m.register("scroll-behavior", "smooth")), this;
   }
   scrollSnap(o = "y") {
-    return j(), this._classNames.push(`fibo-snap-${o}`), this;
+    return X(), this._classNames.push(`fibo-snap-${o}`), this;
   }
   scrollSnapAlign(o = "start") {
-    return j(), this._classNames.push(`fibo-snap-${o}`), this;
+    return X(), this._classNames.push(`fibo-snap-${o}`), this;
   }
   sticky(o = 0) {
     if (o === !1) return this;
-    this._classNames.push(g.register("position", "sticky"));
+    this._classNames.push(m.register("position", "sticky"));
     const i = o === !0 ? "0px" : typeof o == "number" ? `${o}px` : o;
-    this._classNames.push(g.register("top", i));
-    const e = o === !0 || o === 0 ? kt : typeof o == "number" ? `${Math.max(o, fi)}px` : o;
+    this._classNames.push(m.register("top", i));
+    const e = o === !0 || o === 0 ? _t : typeof o == "number" ? `${Math.max(o, si)}px` : o;
     return this.publishStickyOffset(e), this;
   }
   /**
@@ -4064,7 +4088,7 @@ class X {
    */
   publishStickyOffset(o) {
     const i = typeof o == "number" ? `${o}px` : o;
-    g.registerRoot("--fibo-sticky-offset", i), g.ensureScrollPadding();
+    m.registerRoot("--fibo-sticky-offset", i), m.ensureScrollPadding();
   }
   viewTransition(o) {
     return this._viewTransition = o, this._style.viewTransitionName = o, this;
@@ -4098,7 +4122,7 @@ class X {
   }
   /** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
   ensureRestTransform() {
-    const o = Xo(this._style);
+    const o = Oo(this._style);
     o !== this._style && (this._style = o);
   }
   /**
@@ -4114,7 +4138,7 @@ class X {
     i.add("transform"), i.add("opacity"), this._effectTransitionProps = [...i], this._autoEffectTransition = !0;
     const e = this._transitionEasing === "ease-in-out" ? "ease-out" : this._transitionEasing, r = this._transitionDuration === 200 ? 240 : this._transitionDuration;
     this.replaceTransitionClass(
-      g.register(
+      m.register(
         "transition",
         no(this._effectTransitionProps, r, e)
       )
@@ -4126,8 +4150,8 @@ class X {
    * SSR-safe: class + inline vars on first paint (no useEffect).
    */
   theme(o) {
-    const i = gt(o);
-    return this._theme = i, this.addClassName(yt(i)), this;
+    const i = mt(o);
+    return this._theme = i, this.addClassName(kt(i)), this;
   }
   /** Prefer dark/light system chrome for native controls under this subtree. */
   colorScheme(o) {
@@ -4192,12 +4216,12 @@ class X {
   }
   getClassName() {
     let o;
-    return Object.keys(this._cssStyles).length > 0 && (o = Zi(this._cssStyles) || void 0), Oi(this._classNames, o);
+    return Object.keys(this._cssStyles).length > 0 && (o = qi(this._cssStyles) || void 0), Yi(this._classNames, o);
   }
   getStyle() {
     let o = { ...this._style, ...this._cssStyles };
-    if (this._smoothSurface && (o = mo(o), this._smoothNeedsRestTransform && (o = Xo(o))), this._theme && (o = {
-      ...wt(this._theme),
+    if (this._smoothSurface && (o = mo(o), this._smoothNeedsRestTransform && (o = Oo(o))), this._theme && (o = {
+      ...yt(this._theme),
       ...o,
       backgroundColor: o.backgroundColor ?? this._theme.colors.background,
       color: o.color ?? this._theme.colors.onBackground,
@@ -4230,7 +4254,7 @@ class X {
     return this._childFunction;
   }
 }
-const _t = /* @__PURE__ */ new Set([
+const zt = /* @__PURE__ */ new Set([
   "$$typeof",
   "type",
   "props",
@@ -4243,17 +4267,17 @@ const _t = /* @__PURE__ */ new Set([
   "_debugTask",
   "_debugInfo"
 ]);
-function zt(t) {
+function St(t) {
   var i;
   const o = (i = t._props) == null ? void 0 : i.key;
   if (!(o == null || o === ""))
     return o;
 }
-function St(t) {
-  const o = t._isObserver, i = t._signals, e = t._observers, r = t._state, n = t._providers, f = zt(t), s = () => {
+function Ct(t) {
+  const o = t._isObserver, i = t._signals, e = t._observers, r = t._state, n = t._providers, f = St(t), s = () => {
     let d = t.build();
     const v = t._animatedProps, z = t._animationConfig;
-    v && v.size > 0 && (d = p.createElement(qi, {
+    v && v.size > 0 && (d = p.createElement(Ji, {
       key: f,
       animatedProps: v,
       animationConfig: z,
@@ -4264,7 +4288,7 @@ function St(t) {
       const R = t._style || {}, $ = {};
       for (const S of ["--fibo-dur", "--fibo-ease", "--fibo-delay", "--fibo-stagger", "--fibo-from"])
         R[S] != null && ($[S] = R[S]);
-      d = p.createElement(Ji, {
+      d = p.createElement(Qi, {
         key: f,
         preset: k.preset,
         once: k.once,
@@ -4275,38 +4299,38 @@ function St(t) {
         children: d
       });
     }
-    t._scrollProgress && (d = p.createElement(Qi, { key: f, children: d })), t._usesCssMotion && (d = p.createElement(
+    t._scrollProgress && (d = p.createElement(ot, { key: f, children: d })), t._usesCssMotion && (d = p.createElement(
       p.Fragment,
       { key: f },
-      p.createElement(Ri),
+      p.createElement(Ei),
       d
     ));
     const _ = t._gesture;
     return _ && (d = _.wrap(d)), d;
-  }, a = typeof t.hasStateManagement == "function" ? t.hasStateManagement() : !!(o || i && i.size || e && e.size || r && r.size || n && n.size), b = o ? p.createElement(Wi, {
+  }, a = typeof t.hasStateManagement == "function" ? t.hasStateManagement() : !!(o || i && i.size || e && e.size || r && r.size || n && n.size), b = o ? p.createElement(Pi, {
     key: f,
     children: s
   }) : null, l = () => b ?? s();
   let x = l();
-  return a && i && i.size > 0 ? x = p.createElement(Pi, {
+  return a && i && i.size > 0 ? x = p.createElement(Li, {
     key: f,
     signals: i,
     children: l
-  }) : a && e && e.size > 0 && (x = p.createElement(Li, {
+  }) : a && e && e.size > 0 && (x = p.createElement(Xi, {
     key: f,
     observables: e,
     children: l
-  })), a && r && r.size > 0 && (x = p.createElement(ji, {
+  })), a && r && r.size > 0 && (x = p.createElement(Oi, {
     key: f,
     stateMap: r,
     children: x
-  })), a && n && n.size > 0 && (x = p.createElement(Xi, {
+  })), a && n && n.size > 0 && (x = p.createElement(ji, {
     key: f,
     providers: n,
     children: x
   })), x;
 }
-function Ct(t, o, i) {
+function Ft(t, o, i) {
   const e = function() {
     return o();
   };
@@ -4323,10 +4347,10 @@ function Ct(t, o, i) {
     writable: !0
   }), t.ref = r.ref ?? null, t.__fiboElementProps = r.props ?? {}, r._owner !== void 0 && (t._owner = r._owner), t._store = { validated: 1 };
 }
-function O(t) {
+function j(t) {
   return (...o) => {
-    const i = new t(...o), e = t.name.replace(/Builder$/, "") || "Fibo", r = () => St(i);
-    return Ct(i, r, e), new Proxy(i, {
+    const i = new t(...o), e = t.name.replace(/Builder$/, "") || "Fibo", r = () => Ct(i);
+    return Ft(i, r, e), new Proxy(i, {
       get(n, f, s) {
         var a, b;
         if (f === "build")
@@ -4352,11 +4376,11 @@ function O(t) {
           const l = Reflect.get(n, f), x = Object.getPrototypeOf(n), d = x != null ? x.type : void 0;
           return typeof d != "function" || typeof l != "function" ? l : (n.__fiboType || (n.__fiboType = (v, z) => typeof v == "string" || typeof v == "number" ? (d.call(n, v), s) : l(v, z)), n.__fiboType);
         }
-        return _t.has(f) || Reflect.has(n, f) ? Reflect.get(n, f, s) : (l) => {
-          const d = ri(f) ?? [f];
+        return zt.has(f) || Reflect.has(n, f) ? Reflect.get(n, f, s) : (l) => {
+          const d = ni(f) ?? [f];
           for (const v of d) {
-            const z = So(v), k = ni(v, l);
-            n.className(g.register(z, k));
+            const z = So(v), k = fi(v, l);
+            n.className(m.register(z, k));
           }
           return s;
         };
@@ -4364,7 +4388,7 @@ function O(t) {
     });
   };
 }
-class Ft extends X {
+class Tt extends O {
   build() {
     const i = [
       "fibo-center",
@@ -4384,8 +4408,8 @@ class Ft extends X {
     );
   }
 }
-const je = O(Ft);
-class Tt extends X {
+const Oe = j(Tt);
+class $t extends O {
   constructor() {
     super(...arguments);
     c(this, "_mainAxisAlignment", "start");
@@ -4447,8 +4471,8 @@ class Tt extends X {
     );
   }
 }
-const Xe = O(Tt);
-class $t extends X {
+const je = j($t);
+class Nt extends O {
   build() {
     const o = this.getClassName(), i = this.getStyle(), e = this.processChildren();
     return p.createElement(
@@ -4462,8 +4486,8 @@ class $t extends X {
     );
   }
 }
-const Oe = O($t);
-class Nt extends X {
+const Ye = j(Nt);
+class Rt extends O {
   constructor() {
     super(...arguments);
     c(this, "_mainAxisAlignment", "start");
@@ -4518,13 +4542,17 @@ class Nt extends X {
     );
   }
 }
-const Ye = O(Nt);
-class Rt extends X {
+const Ve = j(Rt);
+function Do(t) {
+  return typeof t == "number" ? `${t}px` : t;
+}
+class Et extends O {
   constructor() {
     super(...arguments);
     c(this, "_height");
     c(this, "_width");
-    c(this, "_direction");
+    c(this, "_grow");
+    c(this, "_expand");
   }
   height(i) {
     return this._height = i, this;
@@ -4533,23 +4561,28 @@ class Rt extends X {
     return this._width = i, this;
   }
   vertical() {
-    return this._direction = "vertical", this;
+    return this._expand = !0, this;
   }
   horizontal() {
-    return this._direction = "horizontal", this;
+    return this._expand = !0, this;
+  }
+  /** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
+  flex(i = 1) {
+    const e = typeof i == "number" ? i : Number(i);
+    return this._grow = Number.isFinite(e) ? e : 1, this._expand = !0, this;
   }
   build() {
-    const i = this.getStyle();
-    this._direction === "vertical" ? (i.flex = "1", i.height = this._height ? typeof this._height == "number" ? `${this._height}px` : this._height : "auto") : this._direction === "horizontal" ? (i.flex = "1", i.width = this._width ? typeof this._width == "number" ? `${this._width}px` : this._width : "auto") : (this._height && (i.height = typeof this._height == "number" ? `${this._height}px` : this._height), this._width && (i.width = typeof this._width == "number" ? `${this._width}px` : this._width));
-    const e = this.getClassName();
+    const i = this.getStyle(), e = this._height != null || this._width != null, r = this._expand ?? !e;
+    this._height != null && (i.height = Do(this._height)), this._width != null && (i.width = Do(this._width)), r ? (i.flex = `${this._grow ?? 1} 1 0%`, i.alignSelf = i.alignSelf ?? "stretch", i.minWidth = 0, i.minHeight = 0) : i.flex = "0 0 auto";
+    const n = this.getClassName();
     return p.createElement("div", {
-      className: `fibo-spacer ${e}`,
+      className: `fibo-spacer ${n}`,
       style: i,
       ...this._props
     });
   }
 }
-const Ve = O(Rt), Et = p.memo((t) => {
+const De = j(Et), At = p.memo((t) => {
   const { className: o, style: i, children: e, ...r } = t;
   return p.createElement(
     "div",
@@ -4561,7 +4594,7 @@ const Ve = O(Rt), Et = p.memo((t) => {
     ...e
   );
 });
-class At extends X {
+class Bt extends O {
   build() {
     const i = [
       "fibo-box",
@@ -4573,10 +4606,10 @@ class At extends X {
       children: r,
       ...this._props
     };
-    return p.createElement(Et, n);
+    return p.createElement(At, n);
   }
 }
-const De = O(At), Bt = p.memo((t) => {
+const He = j(Bt), It = p.memo((t) => {
   const { text: o, subtitle: i, number: e, color: r, className: n, style: f, children: s, ...a } = t;
   return p.createElement(
     "div",
@@ -4613,7 +4646,7 @@ const De = O(At), Bt = p.memo((t) => {
     )
   );
 });
-class It extends X {
+class Mt extends O {
   constructor() {
     super(...arguments);
     c(this, "_text", "");
@@ -4654,32 +4687,32 @@ class It extends X {
       children: this.processChildren(),
       ...this._props
     };
-    return p.createElement(Bt, r);
+    return p.createElement(It, r);
   }
 }
-const He = O(It);
-function Mt({ children: t }) {
+const Ge = j(Mt);
+function Wt({ children: t }) {
   return p.createElement(p.Fragment, null, t);
 }
-const Wt = "FIBO:", si = /\uE000FIBO:(\d+)\uE001/g, ai = [];
-function Pt(t) {
-  return t.includes(Wt);
-}
+const Pt = "FIBO:", ai = /\uE000FIBO:(\d+)\uE001/g, ci = [];
 function Lt(t) {
+  return t.includes(Pt);
+}
+function Xt(t) {
   const o = [];
-  for (const i of t.matchAll(si)) {
-    const e = ai[Number(i[1])];
+  for (const i of t.matchAll(ai)) {
+    const e = ci[Number(i[1])];
     e && o.push(e);
   }
   return o;
 }
-function jt(t) {
-  return t.replace(si, (o, i) => {
-    const e = ai[Number(i)];
+function Ot(t) {
+  return t.replace(ai, (o, i) => {
+    const e = ci[Number(i)];
     return e == null ? "" : String(e.value);
   });
 }
-const Xt = {
+const jt = {
   h1: {
     fontSize: "var(--fibo-text-h1-size, 2.25rem)",
     fontWeight: "var(--fibo-text-h1-weight, 700)",
@@ -4739,17 +4772,17 @@ const Xt = {
     color: "var(--fibo-text-label-color, inherit)"
   }
 };
-function ci(t, o) {
+function li(t, o) {
   return {
     margin: 0,
     overflowWrap: "anywhere",
     wordBreak: "break-word",
     maxWidth: "100%",
-    ...Xt[t],
+    ...jt[t],
     ...o
   };
 }
-const Ot = p.memo((t) => {
+const Yt = p.memo((t) => {
   const { text: o, type: i, className: e, style: r, ...n } = t, f = {
     h1: "h1",
     h2: "h2",
@@ -4765,13 +4798,13 @@ const Ot = p.memo((t) => {
     f[i],
     {
       className: `fibo-text fibo-text-${i} min-w-0 ${e}`,
-      style: ci(i, r),
+      style: li(i, r),
       ...n
     },
     o
   );
 });
-class Yt extends X {
+class Vt extends O {
   constructor(i = "") {
     super();
     c(this, "_text", "");
@@ -4779,9 +4812,9 @@ class Yt extends X {
     this.text(i);
   }
   text(i) {
-    if (typeof i == "string" && Pt(i)) {
-      this._text = () => jt(i);
-      for (const e of Lt(i))
+    if (typeof i == "string" && Lt(i)) {
+      this._text = () => Ot(i);
+      for (const e of Xt(i))
         super.bindSignal(e);
       return this;
     }
@@ -4828,11 +4861,11 @@ class Yt extends X {
     };
     if (typeof this._text == "function") {
       const r = this._text;
-      return p.createElement(Mt, {
+      return p.createElement(Wt, {
         compute: r,
         as: i[this._type],
         className: `fibo-text fibo-text-${this._type} min-w-0 ${this.getClassName()}`,
-        style: ci(this._type, this.getStyle()),
+        style: li(this._type, this.getStyle()),
         ...this._props
       });
     }
@@ -4843,49 +4876,49 @@ class Yt extends X {
       style: this.getStyle(),
       ...this._props
     };
-    return p.createElement(Ot, e);
+    return p.createElement(Yt, e);
   }
 }
-const Ge = O(Yt), Vt = (t, o) => {
+const Ue = j(Vt), Dt = (t, o) => {
   const i = new Array(t.length + o.length);
   for (let e = 0; e < t.length; e++)
     i[e] = t[e];
   for (let e = 0; e < o.length; e++)
     i[t.length + e] = o[e];
   return i;
-}, Dt = (t, o) => ({
+}, Ht = (t, o) => ({
   classGroupId: t,
   validator: o
-}), li = (t = /* @__PURE__ */ new Map(), o = null, i) => ({
+}), bi = (t = /* @__PURE__ */ new Map(), o = null, i) => ({
   nextPart: t,
   validators: o,
   classGroupId: i
-}), xo = "-", Do = [], Ht = "arbitrary..", Gt = (t) => {
-  const o = Kt(t), {
+}), xo = "-", Ho = [], Gt = "arbitrary..", Ut = (t) => {
+  const o = Zt(t), {
     conflictingClassGroups: i,
     conflictingClassGroupModifiers: e
   } = t;
   return {
     getClassGroupId: (f) => {
       if (f.startsWith("[") && f.endsWith("]"))
-        return Ut(f);
+        return Kt(f);
       const s = f.split(xo), a = s[0] === "" && s.length > 1 ? 1 : 0;
-      return bi(s, a, o);
+      return ui(s, a, o);
     },
     getConflictingClassGroupIds: (f, s) => {
       if (s) {
         const a = e[f], b = i[f];
-        return a ? b ? Vt(b, a) : a : b || Do;
+        return a ? b ? Dt(b, a) : a : b || Ho;
       }
-      return i[f] || Do;
+      return i[f] || Ho;
     }
   };
-}, bi = (t, o, i) => {
+}, ui = (t, o, i) => {
   if (t.length - o === 0)
     return i.classGroupId;
   const r = t[o], n = i.nextPart.get(r);
   if (n) {
-    const b = bi(t, o + 1, n);
+    const b = ui(t, o + 1, n);
     if (b) return b;
   }
   const f = i.validators;
@@ -4897,17 +4930,17 @@ const Ge = O(Yt), Vt = (t, o) => {
     if (l.validator(s))
       return l.classGroupId;
   }
-}, Ut = (t) => t.slice(1, -1).indexOf(":") === -1 ? void 0 : (() => {
+}, Kt = (t) => t.slice(1, -1).indexOf(":") === -1 ? void 0 : (() => {
   const o = t.slice(1, -1), i = o.indexOf(":"), e = o.slice(0, i);
-  return e ? Ht + e : void 0;
-})(), Kt = (t) => {
+  return e ? Gt + e : void 0;
+})(), Zt = (t) => {
   const {
     theme: o,
     classGroups: i
   } = t;
-  return Zt(i, o);
-}, Zt = (t, o) => {
-  const i = li();
+  return qt(i, o);
+}, qt = (t, o) => {
+  const i = bi();
   for (const e in t) {
     const r = t[e];
     Co(r, i, e, o);
@@ -4917,43 +4950,43 @@ const Ge = O(Yt), Vt = (t, o) => {
   const r = t.length;
   for (let n = 0; n < r; n++) {
     const f = t[n];
-    qt(f, o, i, e);
+    Jt(f, o, i, e);
   }
-}, qt = (t, o, i, e) => {
+}, Jt = (t, o, i, e) => {
   if (typeof t == "string") {
-    Jt(t, o, i);
+    Qt(t, o, i);
     return;
   }
   if (typeof t == "function") {
-    Qt(t, o, i, e);
+    oe(t, o, i, e);
     return;
   }
-  oe(t, o, i, e);
-}, Jt = (t, o, i) => {
-  const e = t === "" ? o : ui(o, t);
+  ie(t, o, i, e);
+}, Qt = (t, o, i) => {
+  const e = t === "" ? o : hi(o, t);
   e.classGroupId = i;
-}, Qt = (t, o, i, e) => {
-  if (ie(t)) {
+}, oe = (t, o, i, e) => {
+  if (te(t)) {
     Co(t(e), o, i, e);
     return;
   }
-  o.validators === null && (o.validators = []), o.validators.push(Dt(i, t));
-}, oe = (t, o, i, e) => {
+  o.validators === null && (o.validators = []), o.validators.push(Ht(i, t));
+}, ie = (t, o, i, e) => {
   const r = Object.entries(t), n = r.length;
   for (let f = 0; f < n; f++) {
     const [s, a] = r[f];
-    Co(a, ui(o, s), i, e);
+    Co(a, hi(o, s), i, e);
   }
-}, ui = (t, o) => {
+}, hi = (t, o) => {
   let i = t;
   const e = o.split(xo), r = e.length;
   for (let n = 0; n < r; n++) {
     const f = e[n];
     let s = i.nextPart.get(f);
-    s || (s = li(), i.nextPart.set(f, s)), i = s;
+    s || (s = bi(), i.nextPart.set(f, s)), i = s;
   }
   return i;
-}, ie = (t) => "isThemeGetter" in t && t.isThemeGetter === !0, te = (t) => {
+}, te = (t) => "isThemeGetter" in t && t.isThemeGetter === !0, ee = (t) => {
   if (t < 1)
     return {
       get: () => {
@@ -4977,13 +5010,13 @@ const Ge = O(Yt), Vt = (t, o) => {
       n in i ? i[n] = f : r(n, f);
     }
   };
-}, ko = "!", Ho = ":", ee = [], Go = (t, o, i, e, r) => ({
+}, ko = "!", Go = ":", re = [], Uo = (t, o, i, e, r) => ({
   modifiers: t,
   hasImportantModifier: o,
   baseClassName: i,
   maybePostfixModifierPosition: e,
   isExternal: r
-}), re = (t) => {
+}), ne = (t) => {
   const {
     prefix: o,
     experimentalParseClassName: i
@@ -4995,7 +5028,7 @@ const Ge = O(Yt), Vt = (t, o) => {
     for (let k = 0; k < l; k++) {
       const _ = r[k];
       if (f === 0 && s === 0) {
-        if (_ === Ho) {
+        if (_ === Go) {
           n.push(r.slice(a, k)), a = k + 1;
           continue;
         }
@@ -5016,11 +5049,11 @@ const Ge = O(Yt), Vt = (t, o) => {
       x.startsWith(ko) && (d = x.slice(1), v = !0)
     );
     const z = b && b > a ? b - a : void 0;
-    return Go(n, v, d, z);
+    return Uo(n, v, d, z);
   };
   if (o) {
-    const r = o + Ho, n = e;
-    e = (f) => f.startsWith(r) ? n(f.slice(r.length)) : Go(ee, !1, f, void 0, !0);
+    const r = o + Go, n = e;
+    e = (f) => f.startsWith(r) ? n(f.slice(r.length)) : Uo(re, !1, f, void 0, !0);
   }
   if (i) {
     const r = e;
@@ -5030,7 +5063,7 @@ const Ge = O(Yt), Vt = (t, o) => {
     });
   }
   return e;
-}, ne = (t) => {
+}, fe = (t) => {
   const o = /* @__PURE__ */ new Map();
   return t.orderSensitiveModifiers.forEach((i, e) => {
     o.set(i, 1e6 + e);
@@ -5043,18 +5076,18 @@ const Ge = O(Yt), Vt = (t, o) => {
     }
     return r.length > 0 && (r.sort(), e.push(...r)), e;
   };
-}, fe = (t) => ({
-  cache: te(t.cacheSize),
-  parseClassName: re(t),
-  sortModifiers: ne(t),
-  ...Gt(t)
-}), se = /\s+/, ae = (t, o) => {
+}, se = (t) => ({
+  cache: ee(t.cacheSize),
+  parseClassName: ne(t),
+  sortModifiers: fe(t),
+  ...Ut(t)
+}), ae = /\s+/, ce = (t, o) => {
   const {
     parseClassName: i,
     getClassGroupId: e,
     getConflictingClassGroupIds: r,
     sortModifiers: n
-  } = o, f = [], s = t.trim().split(se);
+  } = o, f = [], s = t.trim().split(ae);
   let a = "";
   for (let b = s.length - 1; b >= 0; b -= 1) {
     const l = s[b], {
@@ -5092,46 +5125,46 @@ const Ge = O(Yt), Vt = (t, o) => {
     a = l + (a.length > 0 ? " " + a : a);
   }
   return a;
-}, ce = (...t) => {
+}, le = (...t) => {
   let o = 0, i, e, r = "";
   for (; o < t.length; )
-    (i = t[o++]) && (e = hi(i)) && (r && (r += " "), r += e);
+    (i = t[o++]) && (e = xi(i)) && (r && (r += " "), r += e);
   return r;
-}, hi = (t) => {
+}, xi = (t) => {
   if (typeof t == "string")
     return t;
   let o, i = "";
   for (let e = 0; e < t.length; e++)
-    t[e] && (o = hi(t[e])) && (i && (i += " "), i += o);
+    t[e] && (o = xi(t[e])) && (i && (i += " "), i += o);
   return i;
-}, le = (t, ...o) => {
+}, be = (t, ...o) => {
   let i, e, r, n;
   const f = (a) => {
     const b = o.reduce((l, x) => x(l), t());
-    return i = fe(b), e = i.cache.get, r = i.cache.set, n = s, s(a);
+    return i = se(b), e = i.cache.get, r = i.cache.set, n = s, s(a);
   }, s = (a) => {
     const b = e(a);
     if (b)
       return b;
-    const l = ae(a, i);
+    const l = ce(a, i);
     return r(a, l), l;
   };
-  return n = f, (...a) => n(ce(...a));
-}, be = [], T = (t) => {
-  const o = (i) => i[t] || be;
+  return n = f, (...a) => n(le(...a));
+}, ue = [], T = (t) => {
+  const o = (i) => i[t] || ue;
   return o.isThemeGetter = !0, o;
-}, xi = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, pi = /^\((?:(\w[\w-]*):)?(.+)\)$/i, ue = /^\d+\/\d+$/, he = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, xe = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, pe = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, de = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ge = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Q = (t) => ue.test(t), y = (t) => !!t && !Number.isNaN(Number(t)), V = (t) => !!t && Number.isInteger(Number(t)), vo = (t) => t.endsWith("%") && y(t.slice(0, -1)), L = (t) => he.test(t), me = () => !0, ve = (t) => (
+}, pi = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, di = /^\((?:(\w[\w-]*):)?(.+)\)$/i, he = /^\d+\/\d+$/, xe = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, pe = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, de = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, ge = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, me = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Q = (t) => he.test(t), y = (t) => !!t && !Number.isNaN(Number(t)), V = (t) => !!t && Number.isInteger(Number(t)), vo = (t) => t.endsWith("%") && y(t.slice(0, -1)), L = (t) => xe.test(t), ve = () => !0, we = (t) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
-  xe.test(t) && !pe.test(t)
-), di = () => !1, we = (t) => de.test(t), ye = (t) => ge.test(t), ke = (t) => !u(t) && !h(t), _e = (t) => io(t, vi, di), u = (t) => xi.test(t), Z = (t) => io(t, wi, ve), wo = (t) => io(t, Te, y), Uo = (t) => io(t, gi, di), ze = (t) => io(t, mi, ye), uo = (t) => io(t, yi, we), h = (t) => pi.test(t), ro = (t) => to(t, wi), Se = (t) => to(t, $e), Ko = (t) => to(t, gi), Ce = (t) => to(t, vi), Fe = (t) => to(t, mi), ho = (t) => to(t, yi, !0), io = (t, o, i) => {
-  const e = xi.exec(t);
+  pe.test(t) && !de.test(t)
+), gi = () => !1, ye = (t) => ge.test(t), ke = (t) => me.test(t), _e = (t) => !u(t) && !h(t), ze = (t) => io(t, wi, gi), u = (t) => pi.test(t), Z = (t) => io(t, yi, we), wo = (t) => io(t, $e, y), Ko = (t) => io(t, mi, gi), Se = (t) => io(t, vi, ke), uo = (t) => io(t, ki, ye), h = (t) => di.test(t), ro = (t) => to(t, yi), Ce = (t) => to(t, Ne), Zo = (t) => to(t, mi), Fe = (t) => to(t, wi), Te = (t) => to(t, vi), ho = (t) => to(t, ki, !0), io = (t, o, i) => {
+  const e = pi.exec(t);
   return e ? e[1] ? o(e[1]) : i(e[2]) : !1;
 }, to = (t, o, i = !1) => {
-  const e = pi.exec(t);
+  const e = di.exec(t);
   return e ? e[1] ? o(e[1]) : i : !1;
-}, gi = (t) => t === "position" || t === "percentage", mi = (t) => t === "image" || t === "url", vi = (t) => t === "length" || t === "size" || t === "bg-size", wi = (t) => t === "length", Te = (t) => t === "number", $e = (t) => t === "family-name", yi = (t) => t === "shadow", Ne = () => {
+}, mi = (t) => t === "position" || t === "percentage", vi = (t) => t === "image" || t === "url", wi = (t) => t === "length" || t === "size" || t === "bg-size", yi = (t) => t === "length", $e = (t) => t === "number", Ne = (t) => t === "family-name", ki = (t) => t === "shadow", Re = () => {
   const t = T("color"), o = T("font"), i = T("text"), e = T("font-weight"), r = T("tracking"), n = T("leading"), f = T("breakpoint"), s = T("container"), a = T("spacing"), b = T("radius"), l = T("shadow"), x = T("inset-shadow"), d = T("text-shadow"), v = T("drop-shadow"), z = T("blur"), k = T("perspective"), _ = T("aspect"), R = T("ease"), $ = T("animate"), S = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], C = () => [
     "center",
     "top",
@@ -5150,13 +5183,13 @@ const Ge = O(Yt), Vt = (t, o) => {
     "bottom-left",
     // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
     "left-bottom"
-  ], F = () => [...C(), h, u], M = () => ["auto", "hidden", "clip", "visible", "scroll"], W = () => ["auto", "contain", "none"], m = () => [h, u, a], E = () => [Q, "full", "auto", ...m()], G = () => [V, "none", "subgrid", h, u], Y = () => ["auto", {
+  ], F = () => [...C(), h, u], M = () => ["auto", "hidden", "clip", "visible", "scroll"], W = () => ["auto", "contain", "none"], g = () => [h, u, a], E = () => [Q, "full", "auto", ...g()], G = () => [V, "none", "subgrid", h, u], Y = () => ["auto", {
     span: ["full", V, h, u]
-  }, V, h, u], U = () => [V, "auto", h, u], fo = () => ["auto", "min", "max", "fr", h, u], eo = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], q = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], P = () => ["auto", ...m()], K = () => [Q, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...m()], w = () => [t, h, u], Fo = () => [...C(), Ko, Uo, {
+  }, V, h, u], U = () => [V, "auto", h, u], fo = () => ["auto", "min", "max", "fr", h, u], eo = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], q = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], P = () => ["auto", ...g()], K = () => [Q, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...g()], w = () => [t, h, u], Fo = () => [...C(), Zo, Ko, {
     position: [h, u]
   }], To = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
-  }], $o = () => ["auto", "cover", "contain", Ce, _e, {
+  }], $o = () => ["auto", "cover", "contain", Fe, ze, {
     size: [h, u]
   }], po = () => [vo, ro, Z], A = () => [
     // Deprecated since Tailwind CSS v4.0.0
@@ -5166,14 +5199,14 @@ const Ge = O(Yt), Vt = (t, o) => {
     b,
     h,
     u
-  ], B = () => ["", y, ro, Z], so = () => ["solid", "dashed", "dotted", "double"], No = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], N = () => [y, vo, Ko, Uo], Ro = () => [
+  ], B = () => ["", y, ro, Z], so = () => ["solid", "dashed", "dotted", "double"], No = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], N = () => [y, vo, Zo, Ko], Ro = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
     z,
     h,
     u
-  ], ao = () => ["none", y, h, u], co = () => ["none", y, h, u], go = () => [y, h, u], lo = () => [Q, "full", ...m()];
+  ], ao = () => ["none", y, h, u], co = () => ["none", y, h, u], go = () => [y, h, u], lo = () => [Q, "full", ...g()];
   return {
     cacheSize: 500,
     theme: {
@@ -5181,11 +5214,11 @@ const Ge = O(Yt), Vt = (t, o) => {
       aspect: ["video"],
       blur: [L],
       breakpoint: [L],
-      color: [me],
+      color: [ve],
       container: [L],
       "drop-shadow": [L],
       ease: ["in", "out", "in-out"],
-      font: [ke],
+      font: [_e],
       "font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
       "inset-shadow": [L],
       leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
@@ -5429,7 +5462,7 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/flex-basis
        */
       basis: [{
-        basis: [Q, "full", "auto", s, ...m()]
+        basis: [Q, "full", "auto", s, ...g()]
       }],
       /**
        * Flex Direction
@@ -5555,21 +5588,21 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/gap
        */
       gap: [{
-        gap: m()
+        gap: g()
       }],
       /**
        * Gap X
        * @see https://tailwindcss.com/docs/gap
        */
       "gap-x": [{
-        "gap-x": m()
+        "gap-x": g()
       }],
       /**
        * Gap Y
        * @see https://tailwindcss.com/docs/gap
        */
       "gap-y": [{
-        "gap-y": m()
+        "gap-y": g()
       }],
       /**
        * Justify Content
@@ -5644,63 +5677,63 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/padding
        */
       p: [{
-        p: m()
+        p: g()
       }],
       /**
        * Padding X
        * @see https://tailwindcss.com/docs/padding
        */
       px: [{
-        px: m()
+        px: g()
       }],
       /**
        * Padding Y
        * @see https://tailwindcss.com/docs/padding
        */
       py: [{
-        py: m()
+        py: g()
       }],
       /**
        * Padding Start
        * @see https://tailwindcss.com/docs/padding
        */
       ps: [{
-        ps: m()
+        ps: g()
       }],
       /**
        * Padding End
        * @see https://tailwindcss.com/docs/padding
        */
       pe: [{
-        pe: m()
+        pe: g()
       }],
       /**
        * Padding Top
        * @see https://tailwindcss.com/docs/padding
        */
       pt: [{
-        pt: m()
+        pt: g()
       }],
       /**
        * Padding Right
        * @see https://tailwindcss.com/docs/padding
        */
       pr: [{
-        pr: m()
+        pr: g()
       }],
       /**
        * Padding Bottom
        * @see https://tailwindcss.com/docs/padding
        */
       pb: [{
-        pb: m()
+        pb: g()
       }],
       /**
        * Padding Left
        * @see https://tailwindcss.com/docs/padding
        */
       pl: [{
-        pl: m()
+        pl: g()
       }],
       /**
        * Margin
@@ -5770,7 +5803,7 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/margin#adding-space-between-children
        */
       "space-x": [{
-        "space-x": m()
+        "space-x": g()
       }],
       /**
        * Space Between X Reverse
@@ -5782,7 +5815,7 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/margin#adding-space-between-children
        */
       "space-y": [{
-        "space-y": m()
+        "space-y": g()
       }],
       /**
        * Space Between Y Reverse
@@ -5897,7 +5930,7 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [Se, u, o]
+        font: [Ce, u, o]
       }],
       /**
        * Font Variant Numeric
@@ -5951,7 +5984,7 @@ const Ge = O(Yt), Vt = (t, o) => {
         leading: [
           /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
           n,
-          ...m()
+          ...g()
         ]
       }],
       /**
@@ -6052,7 +6085,7 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/text-indent
        */
       indent: [{
-        indent: m()
+        indent: g()
       }],
       /**
        * Vertical Alignment
@@ -6152,7 +6185,7 @@ const Ge = O(Yt), Vt = (t, o) => {
           }, V, h, u],
           radial: ["", h, u],
           conic: [V, h, u]
-        }, Fe, ze]
+        }, Te, Se]
       }],
       /**
        * Background Color
@@ -7016,21 +7049,21 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing": [{
-        "border-spacing": m()
+        "border-spacing": g()
       }],
       /**
        * Border Spacing X
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing-x": [{
-        "border-spacing-x": m()
+        "border-spacing-x": g()
       }],
       /**
        * Border Spacing Y
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing-y": [{
-        "border-spacing-y": m()
+        "border-spacing-y": g()
       }],
       /**
        * Table Layout
@@ -7322,126 +7355,126 @@ const Ge = O(Yt), Vt = (t, o) => {
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-m": [{
-        "scroll-m": m()
+        "scroll-m": g()
       }],
       /**
        * Scroll Margin X
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mx": [{
-        "scroll-mx": m()
+        "scroll-mx": g()
       }],
       /**
        * Scroll Margin Y
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-my": [{
-        "scroll-my": m()
+        "scroll-my": g()
       }],
       /**
        * Scroll Margin Start
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ms": [{
-        "scroll-ms": m()
+        "scroll-ms": g()
       }],
       /**
        * Scroll Margin End
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-me": [{
-        "scroll-me": m()
+        "scroll-me": g()
       }],
       /**
        * Scroll Margin Top
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mt": [{
-        "scroll-mt": m()
+        "scroll-mt": g()
       }],
       /**
        * Scroll Margin Right
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mr": [{
-        "scroll-mr": m()
+        "scroll-mr": g()
       }],
       /**
        * Scroll Margin Bottom
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mb": [{
-        "scroll-mb": m()
+        "scroll-mb": g()
       }],
       /**
        * Scroll Margin Left
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ml": [{
-        "scroll-ml": m()
+        "scroll-ml": g()
       }],
       /**
        * Scroll Padding
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-p": [{
-        "scroll-p": m()
+        "scroll-p": g()
       }],
       /**
        * Scroll Padding X
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-px": [{
-        "scroll-px": m()
+        "scroll-px": g()
       }],
       /**
        * Scroll Padding Y
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-py": [{
-        "scroll-py": m()
+        "scroll-py": g()
       }],
       /**
        * Scroll Padding Start
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-ps": [{
-        "scroll-ps": m()
+        "scroll-ps": g()
       }],
       /**
        * Scroll Padding End
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pe": [{
-        "scroll-pe": m()
+        "scroll-pe": g()
       }],
       /**
        * Scroll Padding Top
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pt": [{
-        "scroll-pt": m()
+        "scroll-pt": g()
       }],
       /**
        * Scroll Padding Right
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pr": [{
-        "scroll-pr": m()
+        "scroll-pr": g()
       }],
       /**
        * Scroll Padding Bottom
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pb": [{
-        "scroll-pb": m()
+        "scroll-pb": g()
       }],
       /**
        * Scroll Padding Left
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pl": [{
-        "scroll-pl": m()
+        "scroll-pl": g()
       }],
       /**
        * Scroll Snap Align
@@ -7601,7 +7634,7 @@ const Ge = O(Yt), Vt = (t, o) => {
     },
     orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
   };
-}, Re = /* @__PURE__ */ le(Ne), Ee = p.memo((t) => {
+}, Ee = /* @__PURE__ */ be(Re), Ae = p.memo((t) => {
   const {
     text: o,
     variant: i,
@@ -7630,10 +7663,10 @@ const Ge = O(Yt), Vt = (t, o) => {
   const S = l === "inverse";
   let C = "";
   i === "ghost" ? C = S ? "bg-transparent text-white shadow-none border border-transparent" : "bg-transparent text-[var(--fibo-on-surface)] shadow-none border border-transparent hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_8%,transparent)]" : i === "text" ? C = S ? "bg-transparent text-white shadow-none border-none px-2" : "bg-transparent text-[var(--fibo-on-surface)] shadow-none border-none px-2 hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_8%,transparent)]" : i === "soft" ? C = "bg-[color-mix(in_srgb,var(--fibo-primary)_12%,transparent)] text-[var(--fibo-primary)] shadow-none border-none hover:bg-[color-mix(in_srgb,var(--fibo-primary)_18%,transparent)]" : i === "outline" || i === "outlined" ? C = S ? "bg-black text-white shadow-none border border-[#3b3b3b]" : "bg-transparent border-[1.5px] border-[var(--fibo-outline,rgba(0,0,0,0.12))] text-[var(--fibo-on-surface)] shadow-none hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_6%,transparent)]" : i === "solid" ? C = S ? "bg-[#f2f2f2] text-black shadow-none border border-[#f2f2f2]" : "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-none border-none hover:opacity-90" : i === "filled" || i === "primary" ? C = "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-sm border-none hover:opacity-90 active:opacity-100" : i === "elevated" ? C = "bg-[var(--fibo-surface)] text-[var(--fibo-primary)] shadow-md border-none hover:shadow-lg" : i === "tonal" ? C = "bg-[var(--fibo-secondary-container)] text-[var(--fibo-on-secondary-container)] shadow-sm border-none" : i === "raw" && (C = "bg-transparent border-none shadow-none p-0 h-auto gap-0 text-inherit font-inherit hover:bg-transparent", $ = ""), b === "soft" && i !== "raw" && (C += " shadow-[0_8px_20px_-6px_rgba(59,130,246,0.4)]");
-  const F = z || {}, M = F.padding !== void 0 || F.paddingTop !== void 0 || F.paddingBottom !== void 0 || F.paddingLeft !== void 0 || F.paddingRight !== void 0 || F.fontSize !== void 0 || F.height !== void 0, W = F.borderRadius !== void 0, m = F.fontWeight !== void 0 || e === "xs" || S, E = i === "raw" || x === "none" || S || e === "xs", G = Re(
+  const F = z || {}, M = F.padding !== void 0 || F.paddingTop !== void 0 || F.paddingBottom !== void 0 || F.paddingLeft !== void 0 || F.paddingRight !== void 0 || F.fontSize !== void 0 || F.height !== void 0, W = F.borderRadius !== void 0, g = F.fontWeight !== void 0 || e === "xs" || S, E = i === "raw" || x === "none" || S || e === "xs", G = Ee(
     "fibo-button",
     "inline-flex items-center justify-center whitespace-nowrap",
-    m ? "" : "font-semibold",
+    g ? "" : "font-semibold",
     // Resting scale(1) so active:scale eases instead of snapping from none.
     E ? "" : "scale-100 active:scale-[0.96] transform transition-transform duration-200 ease-out",
     f ? "cursor-not-allowed opacity-60" : "cursor-pointer",
@@ -7670,7 +7703,7 @@ const Ge = O(Yt), Vt = (t, o) => {
     ...Y
   );
 });
-class Ae extends X {
+class Be extends O {
   constructor(i = "") {
     super();
     c(this, "_text", "");
@@ -7728,9 +7761,13 @@ class Ae extends X {
     return this._expand = i, this;
   }
   /**
-   * HTML button type. Named `htmlType` because builders already expose React's
-   * element `.type` (stampRenderable) — that property must stay the component.
+   * HTML button type. `.type('submit')` is what people write inside a Form.
+   * React still reads `element.type` as the component: a string sets this,
+   * a props object renders the button.
    */
+  type(i) {
+    return this._htmlType = i, this;
+  }
   htmlType(i) {
     return this._htmlType = i, this;
   }
@@ -7762,25 +7799,25 @@ class Ae extends X {
       ...this._props,
       type: this._htmlType
     };
-    return p.createElement(Ee, r);
+    return p.createElement(Ae, r);
   }
 }
-const Ue = O(Ae);
+const Ke = j(Be);
 export {
-  De as Box,
-  Ue as Button,
-  He as Card,
-  je as Center,
-  Xe as Column,
-  Oe as Container,
-  qo as FiboStyles,
-  Ri as MotionStyles,
-  Ye as Row,
-  Ve as Spacer,
-  Ge as Text,
-  We as endSsrRequest,
-  Zo as getCss,
-  Me as getStyleTag,
-  Pe as page,
-  Le as withFiboStyles
+  He as Box,
+  Ke as Button,
+  Ge as Card,
+  Oe as Center,
+  je as Column,
+  Ye as Container,
+  Jo as FiboStyles,
+  Ei as MotionStyles,
+  Ve as Row,
+  De as Spacer,
+  Ue as Text,
+  Pe as endSsrRequest,
+  qo as getCss,
+  We as getStyleTag,
+  Le as page,
+  Xe as withFiboStyles
 };