fiboui 2.9.4 → 2.9.5

package/dist/content.d.ts

@@ -473,6 +473,30 @@ type EdgeInsetsValue = {
 	/** CSS right — alias of trailing in LTR */
 	right?: number | string;
 };
+declare const Material: {
+	readonly ultraThin: {
+		readonly blur: 20;
+		readonly background: "rgba(255, 255, 255, 0.35)";
+	};
+	readonly thin: {
+		readonly blur: 28;
+		readonly background: "rgba(255, 255, 255, 0.48)";
+	};
+	readonly regular: {
+		readonly blur: 36;
+		readonly background: "rgba(255, 255, 255, 0.62)";
+	};
+	readonly thick: {
+		readonly blur: 48;
+		readonly background: "rgba(255, 255, 255, 0.78)";
+	};
+	readonly ultraThick: {
+		readonly blur: 60;
+		readonly background: "rgba(255, 255, 255, 0.88)";
+	};
+};
+type MaterialKind = keyof typeof Material;
+type MaterialSpec = (typeof Material)[MaterialKind];
 type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
 type SafeAreaInsetSpec = {
 	edge: SafeAreaInsetEdge;
@@ -977,6 +1001,16 @@ declare abstract class FiboBuilder {
 	text(color: string | Colors): this;
 	color(value: string | Colors): this;
 	private resolveSemanticColor;
+	/**
+	 * Backdrop blur (glass). Prefer over raw `.backdropFilter('blur(…)')`.
+	 * `20` → `blur(20px)`; also accepts `'20px'` or a full `blur(…)` string.
+	 */
+	backdropBlur(radius?: number | string): this;
+	/**
+	 * SwiftUI `Material` glass fill — blur + translucent background.
+	 * `Box().material(Material.ultraThin)` or `.material('regular')`.
+	 */
+	material(kind: MaterialKind | MaterialSpec): this;
 	shadow(config?: ShadowConfig): this;
 	/**
 	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).

package/dist/content.js

@@ -1,6 +1,6 @@
-import { A as s, B as r, I as o } from "./icons-CirVDr1q.js";
-import { ak as n, aj as I } from "./client-lzMYg4vy.js";
-import { A as m, I as p, L as x, P as A, a as f, S as l } from "./index-D1oVA2Du.js";
+import { A as s, B as r, I as o } from "./icons-By9BFp7V.js";
+import { ak as n, aj as I } from "./client-Cc87LXic.js";
+import { A as m, I as p, L as x, P as A, a as f, S as l } from "./index-BxYsYMal.js";
 export {
   m as Alert,
   s as Avatar,

package/dist/core.d.ts

@@ -855,6 +855,30 @@ type EdgeInsetsValue = {
 	/** CSS right — alias of trailing in LTR */
 	right?: number | string;
 };
+declare const Material: {
+	readonly ultraThin: {
+		readonly blur: 20;
+		readonly background: "rgba(255, 255, 255, 0.35)";
+	};
+	readonly thin: {
+		readonly blur: 28;
+		readonly background: "rgba(255, 255, 255, 0.48)";
+	};
+	readonly regular: {
+		readonly blur: 36;
+		readonly background: "rgba(255, 255, 255, 0.62)";
+	};
+	readonly thick: {
+		readonly blur: 48;
+		readonly background: "rgba(255, 255, 255, 0.78)";
+	};
+	readonly ultraThick: {
+		readonly blur: 60;
+		readonly background: "rgba(255, 255, 255, 0.88)";
+	};
+};
+type MaterialKind = keyof typeof Material;
+type MaterialSpec = (typeof Material)[MaterialKind];
 type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
 type SafeAreaInsetSpec = {
 	edge: SafeAreaInsetEdge;
@@ -1341,6 +1365,16 @@ declare abstract class FiboBuilder {
 	text(color: string | Colors): this;
 	color(value: string | Colors): this;
 	private resolveSemanticColor;
+	/**
+	 * Backdrop blur (glass). Prefer over raw `.backdropFilter('blur(…)')`.
+	 * `20` → `blur(20px)`; also accepts `'20px'` or a full `blur(…)` string.
+	 */
+	backdropBlur(radius?: number | string): this;
+	/**
+	 * SwiftUI `Material` glass fill — blur + translucent background.
+	 * `Box().material(Material.ultraThin)` or `.material('regular')`.
+	 */
+	material(kind: MaterialKind | MaterialSpec): this;
 	shadow(config?: ShadowConfig): this;
 	/**
 	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).

package/dist/core.js

@@ -1,5 +1,5 @@
-import { C as e, E as t, X as r, a6 as i, a3 as o, a4 as n, _ as l, F as u, T as S, L as c, Q as p, Z as g, O as T, n as b, B as v, P as F, R as E, D as d, G as C, S as R, a8 as f, t as m, q as I, d as P, c as y, b as O, a as x, a2 as M, Y as N, e as _, f as w, a0 as A, g as B, $ as V, a1 as D, V as L, W as U, i as h, l as q, a5 as z, U as G, o as K, h as W, N as X, r as j, H as k, s as H, M as J, I as Q, K as Y, J as Z, a7 as $, m as ss, y as as, k as es, z as ts, p as rs, j as is, A as os, u as ns, w as ls, x as us, v as Ss } from "./client-lzMYg4vy.js";
-import { F as ps, P as gs, T as Ts, U as bs, a as vs, c as Fs, p as Es, w as ds } from "./page-fKXx7Y-J.js";
+import { C as e, E as t, X as r, a6 as i, a3 as o, a4 as n, _ as l, F as u, T as S, L as c, Q as p, Z as g, O as T, n as b, B as v, P as F, R as E, D as d, G as C, S as R, a8 as f, t as m, q as I, d as P, c as y, b as O, a as x, a2 as M, Y as N, e as _, f as w, a0 as A, g as B, $ as V, a1 as D, V as L, W as U, i as h, l as q, a5 as z, U as G, o as K, h as W, N as X, r as j, H as k, s as H, M as J, I as Q, K as Y, J as Z, a7 as $, m as ss, y as as, k as es, z as ts, p as rs, j as is, A as os, u as ns, w as ls, x as us, v as Ss } from "./client-Cc87LXic.js";
+import { F as ps, P as gs, T as Ts, U as bs, a as vs, c as Fs, p as Es, w as ds } from "./page-DbndR-7r.js";
 export {
   e as ComputedSignal,
   t as Easing,

package/dist/{icons-CirVDr1q.js → icons-By9BFp7V.js}

@@ -2,7 +2,7 @@ var L = Object.defineProperty;
 var j = (t, r, e) => r in t ? L(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
 var i = (t, r, e) => j(t, typeof r != "symbol" ? r + "" : r, e);
 import h from "react";
-import { b2 as w, b3 as E, aF as y, bc as I, a9 as R, aj as H, bd as M, b6 as N, b9 as D, b7 as $ } from "./client-lzMYg4vy.js";
+import { b2 as w, b3 as E, aF as y, bd as I, a9 as R, aj as H, be as M, b6 as N, b9 as D, b7 as $ } from "./client-Cc87LXic.js";
 import { jsx as s, jsxs as v } from "react/jsx-runtime";
 function V(t) {
   if (typeof t != "string") return "";

package/dist/{index-CtvQ20_N.js → index-BJnYb_kw.js}

@@ -2,7 +2,7 @@ var c = Object.defineProperty;
 var f = (s, e, t) => e in s ? c(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
 var i = (s, e, t) => f(s, typeof e != "symbol" ? e + "" : e, t);
 import m from "react";
-import { b2 as d, b3 as y, b4 as b, b5 as n, b6 as o, b7 as a, b8 as x, b9 as v } from "./client-lzMYg4vy.js";
+import { b2 as d, b3 as y, b4 as b, b5 as n, b6 as o, b7 as a, b8 as x, b9 as v } from "./client-Cc87LXic.js";
 function p(s, e) {
   if (!(typeof e != "string" || !o(e)))
     for (const t of v(e))

package/dist/{index-D1oVA2Du.js → index-BxYsYMal.js}

@@ -2,8 +2,8 @@ var ae = Object.defineProperty;
 var ie = (s, r, e) => r in s ? ae(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
 var i = (s, r, e) => ie(s, typeof r != "symbol" ? r + "" : r, e);
 import t from "react";
-import { b2 as I, b3 as $, b6 as z, b9 as R, b7 as q, z as le, bc as Z, bA as oe } from "./client-lzMYg4vy.js";
-import { a as F } from "./icons-CirVDr1q.js";
+import { b2 as I, b3 as $, b6 as z, b9 as R, b7 as q, z as le, bd as Z, bB as oe } from "./client-Cc87LXic.js";
+import { a as F } from "./icons-By9BFp7V.js";
 function ce(s, r) {
   if (!(typeof r != "string" || !z(r)))
     for (const e of R(r))

package/dist/{index-C_GtMcVT.js → index-C-hvMzQd.js}

@@ -1,49 +1,49 @@
 var w = Object.defineProperty;
 var S = (s, e, t) => e in s ? w(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var n = (s, e, t) => S(s, typeof e != "symbol" ? e + "" : e, t);
+var r = (s, e, t) => S(s, typeof e != "symbol" ? e + "" : e, t);
 import m from "react";
-import { b2 as g, b3 as d, ba as N, bb as C, b7 as j, b6 as _, b9 as z } from "./client-lzMYg4vy.js";
-function B(s, e) {
+import { b2 as g, b3 as d, ba as N, bb as C, bc as j, b7 as z, b6 as _, b9 as B } from "./client-Cc87LXic.js";
+function I(s, e) {
   if (!(typeof e != "string" || !_(e)))
-    for (const t of z(e))
+    for (const t of B(e))
       s.bindSignal(t);
 }
-function l(s, e) {
+function h(s, e) {
   if (typeof e == "function") {
     try {
-      l(s, e());
+      h(s, e());
     } catch {
     }
     return;
   }
   if (typeof e == "string") {
-    B(s, e);
+    I(s, e);
     return;
   }
   if (Array.isArray(e))
-    for (const t of e) l(s, t);
+    for (const t of e) h(s, t);
 }
-function I(s) {
-  return typeof s == "string" && _(s) ? j(s) : s;
+function E(s) {
+  return typeof s == "string" && _(s) ? z(s) : s;
 }
 function M(s, e) {
-  const { children: t, ...r } = e, o = t !== void 0 ? t : s;
-  return { nodes: o == null ? [] : Array.isArray(o) ? o : [o], rest: r };
+  const { children: t, ...n } = e, o = t !== void 0 ? t : s;
+  return { nodes: o == null ? [] : Array.isArray(o) ? o : [o], rest: n };
 }
 class $ extends d {
   constructor() {
     super(...arguments);
-    n(this, "_mainAxisAlignment", "start");
+    r(this, "_mainAxisAlignment", "start");
     // Flutter Column / SwiftUI VStack default: center. Stretch is opt-in.
-    n(this, "_crossAxisAlignment", "center");
-    n(this, "_spacing");
-    n(this, "_size");
+    r(this, "_crossAxisAlignment", "center");
+    r(this, "_spacing");
+    r(this, "_size");
   }
   children(t) {
-    return l(this, t), super.children(t);
+    return h(this, t), super.children(t);
   }
   props(t) {
-    return t && "children" in t && l(this, t.children), super.props(t);
+    return t && "children" in t && h(this, t.children), super.props(t);
   }
   mainAxisAlignment(t) {
     return this._mainAxisAlignment = t, this;
@@ -65,6 +65,13 @@ class $ extends d {
   size(t) {
     return this._size = t, this;
   }
+  /**
+   * Sugar for `.children(ForEach(data).renderItem(fn))`.
+   * Prefer `ForEach` when you need `.keyBy()`.
+   */
+  forEach(t, n) {
+    return this.children(j(t).renderItem(n));
+  }
   build() {
     const t = {
       start: "justify-start",
@@ -73,7 +80,7 @@ class $ extends d {
       spaceBetween: "justify-between",
       spaceAround: "justify-around",
       spaceEvenly: "justify-evenly"
-    }, r = {
+    }, n = {
       start: "items-start",
       center: "items-center",
       end: "items-end",
@@ -89,11 +96,11 @@ class $ extends d {
       // min-w-0 / min-h-0: shrink inside flex/grid so nested overflow can scroll
       this.isHug() ? "w-auto self-auto" : "w-full min-w-0 min-h-0",
       t[this._mainAxisAlignment],
-      r[this._crossAxisAlignment],
+      n[this._crossAxisAlignment],
       this._size ? o[this._size] : "",
       ...this._classNames
-    ], h = this.getStyle(), { nodes: c, rest: p } = M(this.processChildren(), this._props), { className: x, style: u, ...y } = p, A = [...i, x].filter(Boolean).join(" "), b = c.map(I), a = {
-      ...h,
+    ], l = this.getStyle(), { nodes: c, rest: p } = M(this.processChildren(), this._props), { className: x, style: u, ...y } = p, A = [...i, x].filter(Boolean).join(" "), b = c.map(E), a = {
+      ...l,
       ...u && typeof u == "object" ? u : {}
     };
     return this._spacing != null && this._spacing !== "" && (typeof this._spacing == "number" ? a.gap = `${this._spacing}px` : isNaN(Number(this._spacing)) ? a.gap = this._spacing : a.gap = `${Number(this._spacing) * 4}px`), m.createElement(
@@ -107,20 +114,20 @@ class $ extends d {
     );
   }
 }
-const R = g($);
+const T = g($);
 function f(s) {
   return typeof s == "number" ? `${s}px` : s;
 }
-function E(s) {
+function F(s) {
   return s && typeof s == "object" && !Array.isArray(s) ? s : {};
 }
 class H extends d {
   constructor() {
     super(...arguments);
-    n(this, "_height");
-    n(this, "_width");
-    n(this, "_grow");
-    n(this, "_expand");
+    r(this, "_height");
+    r(this, "_width");
+    r(this, "_grow");
+    r(this, "_expand");
   }
   height(t) {
     return this._height = t, this;
@@ -136,11 +143,11 @@ class H extends d {
   }
   /** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
   flex(t = 1) {
-    const r = typeof t == "number" ? t : Number(t);
-    return this._grow = Number.isFinite(r) ? r : 1, this._expand = !0, this;
+    const n = typeof t == "number" ? t : Number(t);
+    return this._grow = Number.isFinite(n) ? n : 1, this._expand = !0, this;
   }
   build() {
-    const { className: t, style: r, ...o } = this._props, i = { ...this.getStyle(), ...E(r) }, h = this._height != null || this._width != null, c = this._expand ?? !h;
+    const { className: t, style: n, ...o } = this._props, i = { ...this.getStyle(), ...F(n) }, l = this._height != null || this._width != null, c = this._expand ?? !l;
     this._height != null && (i.height = f(this._height)), this._width != null && (i.width = f(this._width)), c ? (i.flex = `${this._grow ?? 1} 1 0%`, i.alignSelf = i.alignSelf ?? "stretch", i.minWidth = i.minWidth ?? 0, i.minHeight = i.minHeight ?? 0) : i.flex = "0 0 auto";
     const p = ["fibo-spacer", this.getClassName(), t].filter(Boolean).join(" ");
     return m.createElement("div", {
@@ -151,8 +158,8 @@ class H extends d {
     });
   }
 }
-const T = g(H);
+const X = g(H);
 export {
-  R as C,
-  T as S
+  T as C,
+  X as S
 };

package/dist/{index-Dz8r4kWQ.js → index-D5c1VXlN.js}

@@ -2,10 +2,10 @@ var Bt = Object.defineProperty;
 var Tt = (e, r, t) => r in e ? Bt(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
 var n = (e, r, t) => Tt(e, typeof r != "symbol" ? r + "" : r, t);
 import s, { useSyncExternalStore as X } from "react";
-import { b2 as L, b3 as P, b6 as C, b9 as M, b7 as R, bq as ot, bc as _t, bg as At, bB as Lt, L as vt, aF as T, F as lt, bC as ut, bD as Pt, bE as Rt, a9 as W, aj as N } from "./client-lzMYg4vy.js";
-import { S as V, C as F } from "./index-C_GtMcVT.js";
-import { B as wt } from "./index-CtvQ20_N.js";
-import { B as et, I as at, a as G, A as $t } from "./icons-CirVDr1q.js";
+import { b2 as L, b3 as P, b6 as C, b9 as M, b7 as R, br as ot, bd as _t, bh as At, bC as Lt, L as vt, aF as T, F as lt, bD as ut, bE as Pt, bF as Rt, a9 as W, aj as N } from "./client-Cc87LXic.js";
+import { S as V, C as F } from "./index-C-hvMzQd.js";
+import { B as wt } from "./index-BJnYb_kw.js";
+import { B as et, I as at, a as G, A as $t } from "./icons-By9BFp7V.js";
 function $(e, r) {
   if (!(typeof r != "string" || !C(r)))
     for (const t of M(r))
@@ -59,10 +59,10 @@ const Wt = s.memo((e) => {
     header: u,
     footer: p,
     as: h,
-    ...g
+    ...b
   } = e;
-  delete g.color;
-  const _ = Array.isArray(a) ? a : a == null ? [] : [a], m = g.onClick, b = g.onKeyDown, y = typeof m == "function", I = [
+  delete b.color;
+  const _ = Array.isArray(a) ? a : a == null ? [] : [a], m = b.onClick, g = b.onKeyDown, y = typeof m == "function", I = [
     "fibo-card",
     "rounded-[24px]",
     "transition-shadow",
@@ -81,15 +81,15 @@ const Wt = s.memo((e) => {
   return s.createElement(
     Gt(h),
     {
-      ...g,
+      ...b,
       className: I,
       style: A,
       onClick: m,
       ...y ? {
         role: "button",
-        tabIndex: g.tabIndex ?? 0,
+        tabIndex: b.tabIndex ?? 0,
         onKeyDown: (f) => {
-          b == null || b(f), !f.defaultPrevented && f.target === f.currentTarget && (f.key === "Enter" || f.key === " ") && (f.preventDefault(), f.currentTarget.click());
+          g == null || g(f), !f.defaultPrevented && f.target === f.currentTarget && (f.key === "Enter" || f.key === " ") && (f.preventDefault(), f.currentTarget.click());
         }
       } : null
     },
@@ -175,7 +175,7 @@ class Dt extends P {
       header: u,
       footer: p,
       as: h,
-      ...g
+      ...b
     } = this._props, _ = [...this._classNames, i].filter(Boolean).join(" "), m = {
       text: J(o ?? l ?? this._text),
       subtitle: J(c ?? this._subtitle),
@@ -186,7 +186,7 @@ class Dt extends P {
       accentColor: t,
       style: this.getStyle(),
       children: this.processChildren().map(jt),
-      ...g,
+      ...b,
       className: _
     };
     return s.createElement(Wt, m);
@@ -236,12 +236,12 @@ const Ht = () => s.createElement(
     onPress: u,
     href: p,
     disabled: h,
-    dense: g,
+    dense: b,
     onTap: _,
     className: m,
-    style: b,
+    style: g,
     ...y
-  } = e, I = b || {}, A = I.padding ?? (g ? "8px 0" : "14px 0"), w = y.onClick, E = y.onKeyDown, f = typeof u == "function" ? u : typeof _ == "function" ? _ : void 0, x = !!h, d = typeof p == "string" ? p.trim() : "", S = d && !_t(d) ? d : void 0, v = !!S && !x, k = typeof f == "function" || typeof w == "function" || v, D = k && !x, xt = typeof t == "string" ? s.createElement(
+  } = e, I = g || {}, A = I.padding ?? (b ? "8px 0" : "14px 0"), w = y.onClick, E = y.onKeyDown, f = typeof u == "function" ? u : typeof _ == "function" ? _ : void 0, x = !!h, d = typeof p == "string" ? p.trim() : "", S = d && !_t(d) ? d : void 0, v = !!S && !x, k = typeof f == "function" || typeof w == "function" || v, D = k && !x, xt = typeof t == "string" ? s.createElement(
     "span",
     {
       className: "fibo-list-tile-title",
@@ -389,11 +389,11 @@ class Mt extends P {
       href: u,
       disabled: p,
       dense: h,
-      ...g
-    } = this._props, _ = this._title !== void 0 ? this._title : o, m = this._subtitle !== void 0 ? this._subtitle : l, b = this._leading !== void 0 ? this._leading : t, y = this._trailing !== void 0 ? this._trailing : i;
-    return typeof _ == "string" && H(this, _), typeof m == "string" && H(this, m), typeof b == "string" && H(this, b), typeof y == "string" && H(this, y), s.createElement(Kt, {
-      ...g,
-      leading: typeof b == "string" ? q(b) : b,
+      ...b
+    } = this._props, _ = this._title !== void 0 ? this._title : o, m = this._subtitle !== void 0 ? this._subtitle : l, g = this._leading !== void 0 ? this._leading : t, y = this._trailing !== void 0 ? this._trailing : i;
+    return typeof _ == "string" && H(this, _), typeof m == "string" && H(this, m), typeof g == "string" && H(this, g), typeof y == "string" && H(this, y), s.createElement(Kt, {
+      ...b,
+      leading: typeof g == "string" ? q(g) : g,
       title: typeof _ == "string" ? q(_) : _,
       subtitle: typeof m == "string" ? q(m) : m,
       trailing: typeof y == "string" ? q(y) : y,
@@ -512,9 +512,9 @@ const te = s.memo(function(r) {
     sortable: u,
     className: p,
     style: h,
-    children: g,
+    children: b,
     ..._
-  } = e, m = !!u, [b, y] = s.useState(null);
+  } = e, m = !!u, [g, y] = s.useState(null);
   X(
     (d) => t ? t.subscribeStructure(d) : () => {
     },
@@ -533,15 +533,15 @@ const te = s.memo(function(r) {
     standard: "16px 24px",
     relaxed: "24px 32px"
   }[l], f = t ? t.value : Array.isArray(r) ? r : [], x = s.useMemo(() => {
-    if (!b) return f;
-    const d = i == null ? void 0 : i[b.index];
+    if (!g) return f;
+    const d = i == null ? void 0 : i[g.index];
     if (!d || !ht(d, m)) return f;
-    const S = b.dir === "ascending" ? 1 : -1;
+    const S = g.dir === "ascending" ? 1 : -1;
     return f.map((v, k) => ({ row: v, index: k })).sort((v, k) => {
       const D = Xt(ft(v.row, d), ft(k.row, d));
       return D === 0 ? v.index - k.index : S * D;
     }).map((v) => v.row);
-  }, [f, i, b, m]);
+  }, [f, i, g, m]);
   return T().className(p).classNames(A).props(_).children(
     s.createElement("table", {
       style: I,
@@ -565,7 +565,7 @@ const te = s.memo(function(r) {
                 cursor: v ? "pointer" : void 0
               },
               className: "text-xs font-bold text-gray-400 uppercase tracking-widest",
-              "aria-sort": v ? (b == null ? void 0 : b.index) === S ? b.dir : "none" : void 0,
+              "aria-sort": v ? (g == null ? void 0 : g.index) === S ? g.dir : "none" : void 0,
               tabIndex: v ? 0 : void 0,
               onClick: v ? () => y((k) => mt(k, S)) : void 0,
               onKeyDown: v ? (k) => {
@@ -752,7 +752,7 @@ const ue = s.memo(function(r) {
     () => t ? t.structureVersion() : 0,
     () => t ? t.structureVersion() : 0
   );
-  const p = (t ? t.value : Array.isArray(r) ? r : []).flatMap((h, g) => {
+  const p = (t ? t.value : Array.isArray(r) ? r : []).flatMap((h, b) => {
     if (h == null || typeof h != "object") return [];
     if (t && typeof h._id == "string" && h._id.length > 0) {
       const m = h._id;
@@ -761,13 +761,13 @@ const ue = s.memo(function(r) {
           key: m,
           list: t,
           id: m,
-          index: g,
+          index: b,
           onRemove: l
         })
       ];
     }
-    const _ = le(h, g, a);
-    return [Nt(h, g, _, l)];
+    const _ = le(h, b, a);
+    return [Nt(h, b, _, l)];
   });
   return s.createElement(
     "div",
@@ -831,7 +831,7 @@ function it(e, r) {
     for (const t of M(r))
       e.bindSignal(t);
 }
-function gt(e) {
+function bt(e) {
   return typeof e != "string" ? e : C(e) ? R(e) : e;
 }
 function st(e, r) {
@@ -852,11 +852,11 @@ function st(e, r) {
 function fe(e) {
   return typeof e == "string" && C(e) ? R(e) : e;
 }
-function bt(e) {
+function gt(e) {
   return e === "success" || e === "warning" || e === "error" || e === "info";
 }
 function me(e, r) {
-  return bt(r) ? r : bt(e) ? e : "info";
+  return gt(r) ? r : gt(e) ? e : "info";
 }
 function yt(e) {
   return e == null || e === !1 ? [] : Array.isArray(e) ? e : [e];
@@ -873,7 +873,7 @@ const pe = s.memo((e) => {
     action: u,
     children: p,
     ...h
-  } = e, g = me(r, t), _ = g === "error" || g === "warning", m = typeof a == "function", b = [i, o].filter(Boolean).join(". "), y = ["fibo-banner", `fibo-banner-${g}`, l].filter(Boolean).join(" ").replace(/\s+/g, " ").trim(), I = s.createElement(
+  } = e, b = me(r, t), _ = b === "error" || b === "warning", m = typeof a == "function", g = [i, o].filter(Boolean).join(". "), y = ["fibo-banner", `fibo-banner-${b}`, l].filter(Boolean).join(" ").replace(/\s+/g, " ").trim(), I = s.createElement(
     "div",
     { key: "copy", className: "flex flex-col gap-1 min-w-0 flex-1" },
     i && s.createElement(
@@ -924,12 +924,12 @@ const pe = s.memo((e) => {
       role: _ ? "alert" : "status",
       "aria-live": _ ? "assertive" : "polite",
       "aria-atomic": !0,
-      "aria-label": h["aria-label"] || b || void 0
+      "aria-label": h["aria-label"] || g || void 0
     },
     E
   );
 });
-class ge extends P {
+class be extends P {
   constructor(t = "") {
     super();
     n(this, "_status", "info");
@@ -956,8 +956,8 @@ class ge extends P {
   build() {
     const t = {
       status: this._status,
-      title: gt(this._title),
-      subtitle: gt(this._subtitle),
+      title: bt(this._title),
+      subtitle: bt(this._subtitle),
       className: this.getClassName(),
       style: this.getStyle(),
       children: this.processChildren().map(fe),
@@ -966,7 +966,7 @@ class ge extends P {
     return s.createElement(pe, t);
   }
 }
-const Me = L(ge), be = {
+const Me = L(be), ge = {
   none: "0px",
   sm: "8px",
   md: "16px",
@@ -987,7 +987,7 @@ function ve(e, r) {
   if (typeof e == "number") return ye(e);
 }
 function K(e) {
-  return typeof e == "number" ? `${e}px` : be[e] ?? (e || "16px");
+  return typeof e == "number" ? `${e}px` : ge[e] ?? (e || "16px");
 }
 function we(e, r, t) {
   return r == null && t == null ? { gap: e } : {
@@ -1026,10 +1026,10 @@ const Ne = s.memo((e) => {
     autoFlow: u,
     rowGap: p,
     columnGap: h,
-    className: g,
+    className: b,
     style: _,
     ...m
-  } = e, b = Ct(r), y = K(o), I = we(y, p, h), A = _e(i, c), w = ve(l, a);
+  } = e, g = Ct(r), y = K(o), I = we(y, p, h), A = _e(i, c), w = ve(l, a);
   if (t === "bento") {
     const f = [
       { col: 2, row: 2 },
@@ -1046,10 +1046,10 @@ const Ne = s.memo((e) => {
       ..._
     };
     return s.createElement("div", {
-      className: ["fibo-grid", "grid", ...rt(i, "grid"), g].filter(Boolean).join(" "),
+      className: ["fibo-grid", "grid", ...rt(i, "grid"), b].filter(Boolean).join(" "),
       style: x,
       ...m
-    }, s.Children.map(b, (d, S) => {
+    }, s.Children.map(g, (d, S) => {
       if (Se(d))
         return d;
       const v = f[S % f.length];
@@ -1066,11 +1066,11 @@ const Ne = s.memo((e) => {
       ..._
     };
     return s.createElement("div", {
-      className: ["fibo-grid", ...rt(i, "masonry"), g].filter(Boolean).join(" "),
+      className: ["fibo-grid", ...rt(i, "masonry"), b].filter(Boolean).join(" "),
       style: d,
       ...m
     }, s.Children.map(
-      b,
+      g,
       (S, v) => s.createElement("div", {
         key: ut(S, v),
         style: { breakInside: "avoid", marginBottom: x }
@@ -1086,10 +1086,10 @@ const Ne = s.memo((e) => {
     ..._
   };
   return s.createElement("div", {
-    className: ["fibo-grid", "grid", ...rt(i, "grid"), g].filter(Boolean).join(" "),
+    className: ["fibo-grid", "grid", ...rt(i, "grid"), b].filter(Boolean).join(" "),
     style: E,
     ...m
-  }, ...b);
+  }, ...g);
 }), Ce = s.memo((e) => {
   const {
     children: r,
@@ -1102,7 +1102,7 @@ const Ne = s.memo((e) => {
     className: u,
     style: p,
     ...h
-  } = e, g = Ct(r), _ = [
+  } = e, b = Ct(r), _ = [
     t ? `col-span-${t}` : "",
     i ? `row-span-${i}` : ""
   ].filter(Boolean).join(" "), m = {
@@ -1118,7 +1118,7 @@ const Ne = s.memo((e) => {
     className: ["fibo-grid-item", _, u].filter(Boolean).join(" "),
     style: m,
     ...h
-  }, ...g);
+  }, ...b);
 });
 class xe extends P {
   constructor() {