@homlista-devs/ui 1.0.1 → 1.1.0

package/dist/design-system.es.js

@@ -1,8 +1,8 @@
 import { jsx as s, jsxs as x, Fragment as de } from "react/jsx-runtime";
 import * as C from "react";
-import ke, { useEffect as fe, useState as oe, useMemo as ge, useCallback as Pe, forwardRef as Be, createElement as xe, useContext as fr } from "react";
-import { useUnit as gr } from "effector-react";
-import { createEvent as Ce, createStore as pr } from "effector";
+import ke, { useEffect as fe, useState as oe, useMemo as pe, useCallback as Pe, forwardRef as Be, createElement as xe, useContext as fr } from "react";
+import { useUnit as pr } from "effector-react";
+import { createEvent as Ce, createStore as gr } from "effector";
 function Ie(e, r) {
   if (typeof e == "function")
     return e(r);
@@ -27,10 +27,10 @@ function hr(...e) {
 // @__NO_SIDE_EFFECTS__
 function br(e) {
   const r = /* @__PURE__ */ yr(e), t = C.forwardRef((o, n) => {
-    const { children: a, ...i } = o, c = C.Children.toArray(a), l = c.find(wr);
-    if (l) {
-      const d = l.props.children, g = c.map((m) => m === l ? C.Children.count(d) > 1 ? C.Children.only(null) : C.isValidElement(d) ? d.props.children : null : m);
-      return /* @__PURE__ */ s(r, { ...i, ref: n, children: C.isValidElement(d) ? C.cloneElement(d, void 0, g) : null });
+    const { children: a, ...i } = o, l = C.Children.toArray(a), c = l.find(wr);
+    if (c) {
+      const d = c.props.children, p = l.map((m) => m === c ? C.Children.count(d) > 1 ? C.Children.only(null) : C.isValidElement(d) ? d.props.children : null : m);
+      return /* @__PURE__ */ s(r, { ...i, ref: n, children: C.isValidElement(d) ? C.cloneElement(d, void 0, p) : null });
     }
     return /* @__PURE__ */ s(r, { ...i, ref: n, children: a });
   });
@@ -42,8 +42,8 @@ function yr(e) {
   const r = C.forwardRef((t, o) => {
     const { children: n, ...a } = t;
     if (C.isValidElement(n)) {
-      const i = Cr(n), c = kr(a, n.props);
-      return n.type !== C.Fragment && (c.ref = o ? hr(o, i) : i), C.cloneElement(n, c);
+      const i = Cr(n), l = kr(a, n.props);
+      return n.type !== C.Fragment && (l.ref = o ? hr(o, i) : i), C.cloneElement(n, l);
     }
     return C.Children.count(n) > 1 ? C.Children.only(null) : null;
   });
@@ -57,9 +57,9 @@ function kr(e, r) {
   const t = { ...r };
   for (const o in r) {
     const n = e[o], a = r[o];
-    /^on[A-Z]/.test(o) ? n && a ? t[o] = (...c) => {
-      const l = a(...c);
-      return n(...c), l;
+    /^on[A-Z]/.test(o) ? n && a ? t[o] = (...l) => {
+      const c = a(...l);
+      return n(...l), c;
     } : n && (t[o] = n) : o === "style" ? t[o] = { ...n, ...a } : o === "className" && (t[o] = [n, a].filter(Boolean).join(" "));
   }
   return { ...e, ...t };
@@ -82,18 +82,18 @@ function He() {
   return o;
 }
 const Ne = "-", Nr = (e) => {
-  const r = Sr(e), {
+  const r = zr(e), {
     conflictingClassGroups: t,
     conflictingClassGroupModifiers: o
   } = e;
   return {
     getClassGroupId: (i) => {
-      const c = i.split(Ne);
-      return c[0] === "" && c.length !== 1 && c.shift(), Ue(c, r) || zr(i);
+      const l = i.split(Ne);
+      return l[0] === "" && l.length !== 1 && l.shift(), Ue(l, r) || Sr(i);
     },
-    getConflictingClassGroupIds: (i, c) => {
-      const l = t[i] || [];
-      return c && o[i] ? [...l, ...o[i]] : l;
+    getConflictingClassGroupIds: (i, l) => {
+      const c = t[i] || [];
+      return l && o[i] ? [...c, ...o[i]] : c;
     }
   };
 }, Ue = (e, r) => {
@@ -108,13 +108,13 @@ const Ne = "-", Nr = (e) => {
   return r.validators.find(({
     validator: i
   }) => i(a))?.classGroupId;
-}, je = /^\[(.+)\]$/, zr = (e) => {
+}, je = /^\[(.+)\]$/, Sr = (e) => {
   if (je.test(e)) {
     const r = je.exec(e)[1], t = r?.substring(0, r.indexOf(":"));
     if (t)
       return "arbitrary.." + t;
   }
-}, Sr = (e) => {
+}, zr = (e) => {
   const {
     theme: r,
     classGroups: t
@@ -186,27 +186,27 @@ const Ne = "-", Nr = (e) => {
   } = e;
   let o = (n) => {
     const a = [];
-    let i = 0, c = 0, l = 0, d;
+    let i = 0, l = 0, c = 0, d;
     for (let k = 0; k < n.length; k++) {
-      let S = n[k];
-      if (i === 0 && c === 0) {
-        if (S === we) {
-          a.push(n.slice(l, k)), l = k + Rr;
+      let z = n[k];
+      if (i === 0 && l === 0) {
+        if (z === we) {
+          a.push(n.slice(c, k)), c = k + Rr;
           continue;
         }
-        if (S === "/") {
+        if (z === "/") {
           d = k;
           continue;
         }
       }
-      S === "[" ? i++ : S === "]" ? i-- : S === "(" ? c++ : S === ")" && c--;
+      z === "[" ? i++ : z === "]" ? i-- : z === "(" ? l++ : z === ")" && l--;
     }
-    const g = a.length === 0 ? n : n.substring(l), m = Lr(g), y = m !== g, z = d && d > l ? d - l : void 0;
+    const p = a.length === 0 ? n : n.substring(c), m = Lr(p), y = m !== p, S = d && d > c ? d - c : void 0;
     return {
       modifiers: a,
       hasImportantModifier: y,
       baseClassName: m,
-      maybePostfixModifierPosition: z
+      maybePostfixModifierPosition: S
     };
   };
   if (r) {
@@ -249,33 +249,33 @@ const Ne = "-", Nr = (e) => {
     getClassGroupId: o,
     getConflictingClassGroupIds: n,
     sortModifiers: a
-  } = r, i = [], c = e.trim().split(jr);
-  let l = "";
-  for (let d = c.length - 1; d >= 0; d -= 1) {
-    const g = c[d], {
+  } = r, i = [], l = e.trim().split(jr);
+  let c = "";
+  for (let d = l.length - 1; d >= 0; d -= 1) {
+    const p = l[d], {
       isExternal: m,
       modifiers: y,
-      hasImportantModifier: z,
+      hasImportantModifier: S,
       baseClassName: k,
-      maybePostfixModifierPosition: S
-    } = t(g);
+      maybePostfixModifierPosition: z
+    } = t(p);
     if (m) {
-      l = g + (l.length > 0 ? " " + l : l);
+      c = p + (c.length > 0 ? " " + c : c);
       continue;
     }
-    let R = !!S, A = o(R ? k.substring(0, S) : k);
+    let R = !!z, A = o(R ? k.substring(0, z) : k);
     if (!A) {
       if (!R) {
-        l = g + (l.length > 0 ? " " + l : l);
+        c = p + (c.length > 0 ? " " + c : c);
         continue;
       }
       if (A = o(k), !A) {
-        l = g + (l.length > 0 ? " " + l : l);
+        c = p + (c.length > 0 ? " " + c : c);
         continue;
       }
       R = !1;
     }
-    const _ = a(y).join(":"), F = z ? _ + ve : _, I = F + A;
+    const _ = a(y).join(":"), F = S ? _ + ve : _, I = F + A;
     if (i.includes(I))
       continue;
     i.push(I);
@@ -284,9 +284,9 @@ const Ne = "-", Nr = (e) => {
       const G = j[D];
       i.push(F + G);
     }
-    l = g + (l.length > 0 ? " " + l : l);
+    c = p + (c.length > 0 ? " " + c : c);
   }
-  return l;
+  return c;
 };
 function Vr() {
   let e = 0, r, t, o = "";
@@ -304,16 +304,16 @@ const Oe = (e) => {
 };
 function _r(e, ...r) {
   let t, o, n, a = i;
-  function i(l) {
-    const d = r.reduce((g, m) => m(g), e());
-    return t = Ir(d), o = t.cache.get, n = t.cache.set, a = c, c(l);
+  function i(c) {
+    const d = r.reduce((p, m) => m(p), e());
+    return t = Ir(d), o = t.cache.get, n = t.cache.set, a = l, l(c);
   }
-  function c(l) {
-    const d = o(l);
+  function l(c) {
+    const d = o(c);
     if (d)
       return d;
-    const g = Tr(l, t);
-    return n(l, g), g;
+    const p = Tr(c, t);
+    return n(c, p), p;
   }
   return function() {
     return a(Vr.apply(null, arguments));
@@ -322,7 +322,7 @@ function _r(e, ...r) {
 const E = (e) => {
   const r = (t) => t[e] || [];
   return r.isThemeGetter = !0, r;
-}, qe = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Ze = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Dr = /^\d+\/\d+$/, $r = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Fr = /\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$/, Gr = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Br = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Wr = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Y = (e) => Dr.test(e), v = (e) => !!e && !Number.isNaN(Number(e)), U = (e) => !!e && Number.isInteger(Number(e)), pe = (e) => e.endsWith("%") && v(e.slice(0, -1)), W = (e) => $r.test(e), Hr = () => !0, Ur = (e) => (
+}, qe = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Ze = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Dr = /^\d+\/\d+$/, $r = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Fr = /\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$/, Gr = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Br = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Wr = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Y = (e) => Dr.test(e), v = (e) => !!e && !Number.isNaN(Number(e)), U = (e) => !!e && Number.isInteger(Number(e)), ge = (e) => e.endsWith("%") && v(e.slice(0, -1)), W = (e) => $r.test(e), Hr = () => !0, Ur = (e) => (
   // `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.
@@ -334,7 +334,7 @@ const E = (e) => {
   const o = Ze.exec(e);
   return o ? o[1] ? r(o[1]) : t : !1;
 }, Qe = (e) => e === "position" || e === "percentage", Je = (e) => e === "image" || e === "url", Xe = (e) => e === "length" || e === "size" || e === "bg-size", Ye = (e) => e === "length", et = (e) => e === "number", rt = (e) => e === "family-name", er = (e) => e === "shadow", tt = () => {
-  const e = E("color"), r = E("font"), t = E("text"), o = E("font-weight"), n = E("tracking"), a = E("leading"), i = E("breakpoint"), c = E("container"), l = E("spacing"), d = E("radius"), g = E("shadow"), m = E("inset-shadow"), y = E("text-shadow"), z = E("drop-shadow"), k = E("blur"), S = E("perspective"), R = E("aspect"), A = E("ease"), _ = E("animate"), F = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [
+  const e = E("color"), r = E("font"), t = E("text"), o = E("font-weight"), n = E("tracking"), a = E("leading"), i = E("breakpoint"), l = E("container"), c = E("spacing"), d = E("radius"), p = E("shadow"), m = E("inset-shadow"), y = E("text-shadow"), S = E("drop-shadow"), k = E("blur"), z = E("perspective"), R = E("aspect"), A = E("ease"), _ = E("animate"), F = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [
     "center",
     "top",
     "bottom",
@@ -352,15 +352,15 @@ const E = (e) => {
     "bottom-left",
     // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
     "left-bottom"
-  ], j = () => [...I(), f, u], D = () => ["auto", "hidden", "clip", "visible", "scroll"], G = () => ["auto", "contain", "none"], b = () => [f, u, l], T = () => [Y, "full", "auto", ...b()], J = () => [U, "none", "subgrid", f, u], X = () => ["auto", {
+  ], j = () => [...I(), f, u], D = () => ["auto", "hidden", "clip", "visible", "scroll"], G = () => ["auto", "contain", "none"], b = () => [f, u, c], T = () => [Y, "full", "auto", ...b()], J = () => [U, "none", "subgrid", f, u], X = () => ["auto", {
     span: ["full", U, f, u]
-  }, U, f, u], H = () => [U, "auto", f, u], B = () => ["auto", "min", "max", "fr", f, u], q = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], $ = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], w = () => ["auto", ...b()], N = () => [Y, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...b()], p = () => [e, f, u], Ee = () => [...I(), _e, Ve, {
+  }, U, f, u], H = () => [U, "auto", f, u], B = () => ["auto", "min", "max", "fr", f, u], q = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], $ = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], w = () => ["auto", ...b()], N = () => [Y, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...b()], g = () => [e, f, u], Ee = () => [...I(), _e, Ve, {
     position: [f, u]
   }], Me = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
   }], Re = () => ["auto", "cover", "contain", Xr, Kr, {
     size: [f, u]
-  }], me = () => [pe, te, Z], L = () => [
+  }], me = () => [ge, te, Z], L = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -368,7 +368,7 @@ const E = (e) => {
     d,
     f,
     u
-  ], V = () => ["", v, te, Z], ne = () => ["solid", "dashed", "dotted", "double"], Ae = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], M = () => [v, pe, _e, Ve], Le = () => [
+  ], V = () => ["", v, te, Z], ne = () => ["solid", "dashed", "dotted", "double"], Ae = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], M = () => [v, ge, _e, Ve], Le = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -421,7 +421,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/columns
        */
       columns: [{
-        columns: [v, u, f, c]
+        columns: [v, u, f, l]
       }],
       /**
        * Break After
@@ -631,7 +631,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/flex-basis
        */
       basis: [{
-        basis: [Y, "full", "auto", c, ...b()]
+        basis: [Y, "full", "auto", l, ...b()]
       }],
       /**
        * Flex Direction
@@ -1006,7 +1006,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/width
        */
       w: [{
-        w: [c, "screen", ...N()]
+        w: [l, "screen", ...N()]
       }],
       /**
        * Min-Width
@@ -1014,7 +1014,7 @@ const E = (e) => {
        */
       "min-w": [{
         "min-w": [
-          c,
+          l,
           "screen",
           /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
           "none",
@@ -1027,7 +1027,7 @@ const E = (e) => {
        */
       "max-w": [{
         "max-w": [
-          c,
+          l,
           "screen",
           "none",
           /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
@@ -1092,7 +1092,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/font-stretch
        */
       "font-stretch": [{
-        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", pe, u]
+        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", ge, u]
       }],
       /**
        * Font Family
@@ -1190,14 +1190,14 @@ const E = (e) => {
        * @see https://v3.tailwindcss.com/docs/placeholder-color
        */
       "placeholder-color": [{
-        placeholder: p()
+        placeholder: g()
       }],
       /**
        * Text Color
        * @see https://tailwindcss.com/docs/text-color
        */
       "text-color": [{
-        text: p()
+        text: g()
       }],
       /**
        * Text Decoration
@@ -1223,7 +1223,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/text-decoration-color
        */
       "text-decoration-color": [{
-        decoration: p()
+        decoration: g()
       }],
       /**
        * Text Underline Offset
@@ -1361,7 +1361,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/background-color
        */
       "bg-color": [{
-        bg: p()
+        bg: g()
       }],
       /**
        * Gradient Color Stops From Position
@@ -1389,21 +1389,21 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from": [{
-        from: p()
+        from: g()
       }],
       /**
        * Gradient Color Stops Via
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via": [{
-        via: p()
+        via: g()
       }],
       /**
        * Gradient Color Stops To
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to": [{
-        to: p()
+        to: g()
       }],
       // ---------------
       // --- Borders ---
@@ -1619,70 +1619,70 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color": [{
-        border: p()
+        border: g()
       }],
       /**
        * Border Color X
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-x": [{
-        "border-x": p()
+        "border-x": g()
       }],
       /**
        * Border Color Y
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-y": [{
-        "border-y": p()
+        "border-y": g()
       }],
       /**
        * Border Color S
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-s": [{
-        "border-s": p()
+        "border-s": g()
       }],
       /**
        * Border Color E
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-e": [{
-        "border-e": p()
+        "border-e": g()
       }],
       /**
        * Border Color Top
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-t": [{
-        "border-t": p()
+        "border-t": g()
       }],
       /**
        * Border Color Right
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-r": [{
-        "border-r": p()
+        "border-r": g()
       }],
       /**
        * Border Color Bottom
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-b": [{
-        "border-b": p()
+        "border-b": g()
       }],
       /**
        * Border Color Left
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-l": [{
-        "border-l": p()
+        "border-l": g()
       }],
       /**
        * Divide Color
        * @see https://tailwindcss.com/docs/divide-color
        */
       "divide-color": [{
-        divide: p()
+        divide: g()
       }],
       /**
        * Outline Style
@@ -1710,7 +1710,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/outline-color
        */
       "outline-color": [{
-        outline: p()
+        outline: g()
       }],
       // ---------------
       // --- Effects ---
@@ -1724,7 +1724,7 @@ const E = (e) => {
           // Deprecated since Tailwind CSS v4.0.0
           "",
           "none",
-          g,
+          p,
           ce,
           le
         ]
@@ -1734,7 +1734,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
        */
       "shadow-color": [{
-        shadow: p()
+        shadow: g()
       }],
       /**
        * Inset Box Shadow
@@ -1748,7 +1748,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
        */
       "inset-shadow-color": [{
-        "inset-shadow": p()
+        "inset-shadow": g()
       }],
       /**
        * Ring Width
@@ -1769,7 +1769,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
        */
       "ring-color": [{
-        ring: p()
+        ring: g()
       }],
       /**
        * Ring Offset Width
@@ -1787,7 +1787,7 @@ const E = (e) => {
        * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
        */
       "ring-offset-color": [{
-        "ring-offset": p()
+        "ring-offset": g()
       }],
       /**
        * Inset Ring Width
@@ -1801,7 +1801,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
        */
       "inset-ring-color": [{
-        "inset-ring": p()
+        "inset-ring": g()
       }],
       /**
        * Text Shadow
@@ -1815,7 +1815,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
        */
       "text-shadow-color": [{
-        "text-shadow": p()
+        "text-shadow": g()
       }],
       /**
        * Opacity
@@ -1866,10 +1866,10 @@ const E = (e) => {
         "mask-linear-to": M()
       }],
       "mask-image-linear-from-color": [{
-        "mask-linear-from": p()
+        "mask-linear-from": g()
       }],
       "mask-image-linear-to-color": [{
-        "mask-linear-to": p()
+        "mask-linear-to": g()
       }],
       "mask-image-t-from-pos": [{
         "mask-t-from": M()
@@ -1878,10 +1878,10 @@ const E = (e) => {
         "mask-t-to": M()
       }],
       "mask-image-t-from-color": [{
-        "mask-t-from": p()
+        "mask-t-from": g()
       }],
       "mask-image-t-to-color": [{
-        "mask-t-to": p()
+        "mask-t-to": g()
       }],
       "mask-image-r-from-pos": [{
         "mask-r-from": M()
@@ -1890,10 +1890,10 @@ const E = (e) => {
         "mask-r-to": M()
       }],
       "mask-image-r-from-color": [{
-        "mask-r-from": p()
+        "mask-r-from": g()
       }],
       "mask-image-r-to-color": [{
-        "mask-r-to": p()
+        "mask-r-to": g()
       }],
       "mask-image-b-from-pos": [{
         "mask-b-from": M()
@@ -1902,10 +1902,10 @@ const E = (e) => {
         "mask-b-to": M()
       }],
       "mask-image-b-from-color": [{
-        "mask-b-from": p()
+        "mask-b-from": g()
       }],
       "mask-image-b-to-color": [{
-        "mask-b-to": p()
+        "mask-b-to": g()
       }],
       "mask-image-l-from-pos": [{
         "mask-l-from": M()
@@ -1914,10 +1914,10 @@ const E = (e) => {
         "mask-l-to": M()
       }],
       "mask-image-l-from-color": [{
-        "mask-l-from": p()
+        "mask-l-from": g()
       }],
       "mask-image-l-to-color": [{
-        "mask-l-to": p()
+        "mask-l-to": g()
       }],
       "mask-image-x-from-pos": [{
         "mask-x-from": M()
@@ -1926,10 +1926,10 @@ const E = (e) => {
         "mask-x-to": M()
       }],
       "mask-image-x-from-color": [{
-        "mask-x-from": p()
+        "mask-x-from": g()
       }],
       "mask-image-x-to-color": [{
-        "mask-x-to": p()
+        "mask-x-to": g()
       }],
       "mask-image-y-from-pos": [{
         "mask-y-from": M()
@@ -1938,10 +1938,10 @@ const E = (e) => {
         "mask-y-to": M()
       }],
       "mask-image-y-from-color": [{
-        "mask-y-from": p()
+        "mask-y-from": g()
       }],
       "mask-image-y-to-color": [{
-        "mask-y-to": p()
+        "mask-y-to": g()
       }],
       "mask-image-radial": [{
         "mask-radial": [f, u]
@@ -1953,10 +1953,10 @@ const E = (e) => {
         "mask-radial-to": M()
       }],
       "mask-image-radial-from-color": [{
-        "mask-radial-from": p()
+        "mask-radial-from": g()
       }],
       "mask-image-radial-to-color": [{
-        "mask-radial-to": p()
+        "mask-radial-to": g()
       }],
       "mask-image-radial-shape": [{
         "mask-radial": ["circle", "ellipse"]
@@ -1980,10 +1980,10 @@ const E = (e) => {
         "mask-conic-to": M()
       }],
       "mask-image-conic-from-color": [{
-        "mask-conic-from": p()
+        "mask-conic-from": g()
       }],
       "mask-image-conic-to-color": [{
-        "mask-conic-to": p()
+        "mask-conic-to": g()
       }],
       /**
        * Mask Mode
@@ -2080,7 +2080,7 @@ const E = (e) => {
           // Deprecated since Tailwind CSS v4.0.0
           "",
           "none",
-          z,
+          S,
           ce,
           le
         ]
@@ -2090,7 +2090,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
        */
       "drop-shadow-color": [{
-        "drop-shadow": p()
+        "drop-shadow": g()
       }],
       /**
        * Grayscale
@@ -2308,7 +2308,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/perspective
        */
       perspective: [{
-        perspective: [S, f, u]
+        perspective: [z, f, u]
       }],
       /**
        * Perspective Origin
@@ -2461,7 +2461,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/accent-color
        */
       accent: [{
-        accent: p()
+        accent: g()
       }],
       /**
        * Appearance
@@ -2475,7 +2475,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
        */
       "caret-color": [{
-        caret: p()
+        caret: g()
       }],
       /**
        * Color Scheme
@@ -2721,7 +2721,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/fill
        */
       fill: [{
-        fill: ["none", ...p()]
+        fill: ["none", ...g()]
       }],
       /**
        * Stroke Width
@@ -2735,7 +2735,7 @@ const E = (e) => {
        * @see https://tailwindcss.com/docs/stroke
        */
       stroke: [{
-        stroke: ["none", ...p()]
+        stroke: ["none", ...g()]
       }],
       // ---------------------
       // --- Accessibility ---
@@ -2811,31 +2811,31 @@ const De = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $e = He, r
   var o;
   if (r?.variants == null) return $e(e, t?.class, t?.className);
   const { variants: n, defaultVariants: a } = r, i = Object.keys(n).map((d) => {
-    const g = t?.[d], m = a?.[d];
-    if (g === null) return null;
-    const y = De(g) || De(m);
+    const p = t?.[d], m = a?.[d];
+    if (p === null) return null;
+    const y = De(p) || De(m);
     return n[d][y];
-  }), c = t && Object.entries(t).reduce((d, g) => {
-    let [m, y] = g;
+  }), l = t && Object.entries(t).reduce((d, p) => {
+    let [m, y] = p;
     return y === void 0 || (d[m] = y), d;
-  }, {}), l = r == null || (o = r.compoundVariants) === null || o === void 0 ? void 0 : o.reduce((d, g) => {
-    let { class: m, className: y, ...z } = g;
-    return Object.entries(z).every((k) => {
-      let [S, R] = k;
+  }, {}), c = r == null || (o = r.compoundVariants) === null || o === void 0 ? void 0 : o.reduce((d, p) => {
+    let { class: m, className: y, ...S } = p;
+    return Object.entries(S).every((k) => {
+      let [z, R] = k;
       return Array.isArray(R) ? R.includes({
         ...a,
-        ...c
-      }[S]) : {
+        ...l
+      }[z]) : {
         ...a,
-        ...c
-      }[S] === R;
+        ...l
+      }[z] === R;
     }) ? [
       ...d,
       m,
       y
     ] : d;
   }, []);
-  return $e(e, i, l, t?.class, t?.className);
+  return $e(e, i, c, t?.class, t?.className);
 }, nt = rr(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
@@ -2954,10 +2954,10 @@ const st = (e) => {
   truncate: n = !1,
   children: a,
   className: i,
-  as: c,
-  ...l
+  as: l,
+  ...c
 }) => {
-  const d = c || ct(e), g = h(
+  const d = l || ct(e), p = h(
     "m-0",
     st(e),
     at(r),
@@ -2966,7 +2966,7 @@ const st = (e) => {
     n && "truncate",
     i
   );
-  return /* @__PURE__ */ s(d, { className: g, ...l, children: a });
+  return /* @__PURE__ */ s(d, { className: p, ...c, children: a });
 };
 function ct(e) {
   switch (e) {
@@ -3027,29 +3027,29 @@ const dt = (e) => {
   padding: n = "md",
   shadow: a = "md",
   borderRadius: i = "md",
-  onClick: c
+  onClick: l
 }) => {
-  const l = !!c, d = h(
+  const c = !!l, d = h(
     "bg-card",
     dt(n),
     mt(a),
     ut(i),
     "transition-all duration-200 ease-in-out",
-    l && "cursor-pointer hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0",
+    c && "cursor-pointer hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0",
     o
   );
-  return /* @__PURE__ */ x("div", { className: d, onClick: c, children: [
+  return /* @__PURE__ */ x("div", { className: d, onClick: l, children: [
     (r || t) && /* @__PURE__ */ x("div", { className: "mb-4", children: [
       r && /* @__PURE__ */ s("div", { className: "mb-2", children: /* @__PURE__ */ s(P, { variant: "h3", children: r }) }),
       t && /* @__PURE__ */ s("div", { className: "text-muted-foreground", children: /* @__PURE__ */ s(P, { variant: "body-sm", color: "muted", children: t }) })
     ] }),
     /* @__PURE__ */ s("div", { className: "flex-1", children: e })
   ] });
-}, gt = ({
+}, pt = ({
   children: e
 }) => /* @__PURE__ */ s("div", { className: "mt-4 pt-4 border-t border-border", children: e }), so = Object.assign(ft, {
-  Footer: gt
-}), pt = (e) => {
+  Footer: pt
+}), gt = (e) => {
   switch (e) {
     case "sm":
       return "max-w-md";
@@ -3070,28 +3070,28 @@ const dt = (e) => {
   size: n = "md",
   showCloseButton: a = !0,
   closeOnOverlayClick: i = !0,
-  closeOnEscape: c = !0
+  closeOnEscape: l = !0
 }) => {
-  const l = ke.useRef(null);
+  const c = ke.useRef(null);
   if (fe(() => {
-    if (!e || !c) return;
-    const k = (S) => {
-      S.key === "Escape" && r();
+    if (!e || !l) return;
+    const k = (z) => {
+      z.key === "Escape" && r();
     };
     return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [e, c, r]), fe(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
+  }, [e, l, r]), fe(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
     document.body.style.overflow = "unset";
   }), [e]), fe(() => {
-    e && l.current && l.current.focus();
+    e && c.current && c.current.focus();
   }, [e]), !e) return null;
   const d = h(
     "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
-  ), g = h(
+  ), p = h(
     "bg-card rounded-lg shadow-xl w-full max-h-[90vh] overflow-hidden flex flex-col",
-    pt(n)
+    gt(n)
   ), m = h(
     "p-6 border-b border-border flex items-center justify-between"
-  ), y = h("p-6 overflow-y-auto flex-1"), z = h(
+  ), y = h("p-6 overflow-y-auto flex-1"), S = h(
     "bg-none border-none text-xl cursor-pointer text-muted-foreground p-1 rounded-sm flex items-center justify-center hover:bg-accent hover:text-accent-foreground focus:outline-2 focus:outline-primary focus:outline-offset-2"
   );
   return /* @__PURE__ */ s(
@@ -3102,8 +3102,8 @@ const dt = (e) => {
       children: /* @__PURE__ */ x(
         "div",
         {
-          ref: l,
-          className: g,
+          ref: c,
+          className: p,
           onClick: (k) => k.stopPropagation(),
           tabIndex: -1,
           role: "dialog",
@@ -3117,7 +3117,7 @@ const dt = (e) => {
                 {
                   onClick: r,
                   "aria-label": "Close modal",
-                  className: z,
+                  className: S,
                   children: "×"
                 }
               )
@@ -3179,30 +3179,30 @@ function io(e, r, t = {}) {
     initialCategory: o = null,
     initialSort: n = null,
     enableSearch: a = !1
-  } = t, [i, c] = oe(
+  } = t, [i, l] = oe(
     o
-  ), [l, d] = oe(n), [g, m] = oe(""), y = ge(() => xt(e, i), [e, i]), z = ge(() => {
-    if (!a || !g.trim())
+  ), [c, d] = oe(n), [p, m] = oe(""), y = pe(() => xt(e, i), [e, i]), S = pe(() => {
+    if (!a || !p.trim())
       return y;
-    const A = g.toLowerCase();
+    const A = p.toLowerCase();
     return y.filter(
       (_) => _.title.toLowerCase().includes(A) || _.subtitle?.toLowerCase().includes(A)
     );
-  }, [y, g, a]), k = ge(() => l ? yt(z, l) : z, [z, l]), S = Pe(
+  }, [y, p, a]), k = pe(() => c ? yt(S, c) : S, [S, c]), z = Pe(
     (A) => vt(e, A),
     [e]
   ), R = Pe(() => {
-    c(o), d(n), m("");
+    l(o), d(n), m("");
   }, [o, n]);
   return {
     activeCategory: i,
-    setActiveCategory: c,
-    sort: l,
+    setActiveCategory: l,
+    sort: c,
     setSort: d,
-    searchQuery: g,
+    searchQuery: p,
     setSearchQuery: m,
     filteredEntities: k,
-    getCategoryCount: S,
+    getCategoryCount: z,
     resetFilters: R
   };
 }
@@ -3228,7 +3228,7 @@ const wt = rr(
       size: "default"
     }
   }
-), ze = C.forwardRef(
+), Se = C.forwardRef(
   ({
     className: e,
     variant: r,
@@ -3237,22 +3237,22 @@ const wt = rr(
     selected: n,
     dismissible: a,
     onDismiss: i,
-    children: c,
-    disabled: l,
+    children: l,
+    disabled: c,
     ...d
-  }, g) => /* @__PURE__ */ x(
+  }, p) => /* @__PURE__ */ x(
     "button",
     {
       type: "button",
       className: h(wt({ variant: n ? "selected" : r, size: t, className: e })),
-      ref: g,
-      disabled: l,
-      "aria-disabled": l ? "true" : void 0,
+      ref: p,
+      disabled: c,
+      "aria-disabled": c ? "true" : void 0,
       "aria-pressed": n ? "true" : "false",
       ...d,
       children: [
         o && /* @__PURE__ */ s("span", { className: "mr-1.5 inline-flex items-center", "aria-hidden": "true", children: o }),
-        /* @__PURE__ */ s("span", { children: c }),
+        /* @__PURE__ */ s("span", { children: l }),
         a && i && /* @__PURE__ */ s(
           "button",
           {
@@ -3269,7 +3269,7 @@ const wt = rr(
     }
   )
 );
-ze.displayName = "Chip";
+Se.displayName = "Chip";
 const tr = C.forwardRef(
   ({
     categories: e,
@@ -3288,20 +3288,20 @@ const tr = C.forwardRef(
         "flex flex-wrap gap-2 overflow-x-auto pb-2",
         a
       ),
-      children: e.map((c) => {
-        const l = r === c.id, d = o && n ? n(c.id) : void 0;
+      children: e.map((l) => {
+        const c = r === l.id, d = o && n ? n(l.id) : void 0;
         return /* @__PURE__ */ x(
-          ze,
+          Se,
           {
             role: "tab",
-            "aria-selected": l,
-            "aria-controls": `entities-panel-${c.id}`,
-            selected: l,
-            variant: l ? "selected" : "outline",
-            icon: c.icon,
-            onClick: () => t(l ? null : c.id),
+            "aria-selected": c,
+            "aria-controls": `entities-panel-${l.id}`,
+            selected: c,
+            variant: c ? "selected" : "outline",
+            icon: typeof l.icon == "string" ? l.icon : l.icon ? C.createElement(l.icon) : void 0,
+            onClick: () => t(c ? null : l.id),
             children: [
-              c.label,
+              l.label,
               d !== void 0 && /* @__PURE__ */ x("span", { className: "ml-1.5 opacity-70", children: [
                 "(",
                 d,
@@ -3309,7 +3309,7 @@ const tr = C.forwardRef(
               ] })
             ]
           },
-          c.id
+          l.id
         );
       })
     }
@@ -3339,7 +3339,7 @@ const kt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ct = (
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var zt = {
+var St = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -3356,7 +3356,7 @@ var zt = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const St = Be(
+const zt = Be(
   ({
     color: e = "currentColor",
     size: r = 24,
@@ -3365,22 +3365,22 @@ const St = Be(
     className: n = "",
     children: a,
     iconNode: i,
-    ...c
-  }, l) => xe(
+    ...l
+  }, c) => xe(
     "svg",
     {
-      ref: l,
-      ...zt,
+      ref: c,
+      ...St,
       width: r,
       height: r,
       stroke: e,
       strokeWidth: o ? Number(t) * 24 / Number(r) : t,
       className: or("lucide", n),
-      ...!a && !Nt(c) && { "aria-hidden": "true" },
-      ...c
+      ...!a && !Nt(l) && { "aria-hidden": "true" },
+      ...l
     },
     [
-      ...i.map(([d, g]) => xe(d, g)),
+      ...i.map(([d, p]) => xe(d, p)),
       ...Array.isArray(a) ? a : [a]
     ]
   )
@@ -3393,7 +3393,7 @@ const St = Be(
  */
 const O = (e, r) => {
   const t = Be(
-    ({ className: o, ...n }, a) => xe(St, {
+    ({ className: o, ...n }, a) => xe(zt, {
       ref: a,
       iconNode: r,
       className: or(
@@ -3546,21 +3546,21 @@ const Gt = [
   showLikeButton: n = !0,
   showNavigation: a = !0
 }) => {
-  const [i, c] = oe(0), [l, d] = oe(!1), g = () => {
-    c(
+  const [i, l] = oe(0), [c, d] = oe(!1), p = () => {
+    l(
       (w) => w === e.images.length - 1 ? 0 : w + 1
     );
   }, m = () => {
-    c(
+    l(
       (w) => w === 0 ? e.images.length - 1 : w - 1
     );
   }, y = (w) => {
     w.preventDefault(), w.stopPropagation();
-    const N = !l;
+    const N = !c;
     d(N), t?.(e.id, N);
-  }, z = (w) => {
+  }, S = (w) => {
     w.preventDefault(), w.stopPropagation(), o?.(i, e.id);
-  }, k = (w, N) => !w || !N ? "Price not available" : `$${w.toLocaleString()} ${N}`, S = h(
+  }, k = (w, N) => !w || !N ? "Price not available" : `$${w.toLocaleString()} ${N}`, z = h(
     "relative overflow-hidden bg-card rounded-2xl shadow-md transition-all duration-300 ease-out cursor-pointer hover:-translate-y-1 hover:shadow-xl",
     r
   ), R = h("relative overflow-hidden"), A = h(
@@ -3579,7 +3579,7 @@ const Gt = [
     "text-lg font-bold text-foreground mb-2 line-clamp-2 leading-tight"
   ), J = h("text-xl font-bold text-primary mb-2"), X = h("text-base text-muted-foreground mb-4"), H = h("flex items-center gap-4 mb-4"), B = h(
     "flex items-center gap-1 text-sm text-muted-foreground"
-  ), q = h("text-sm text-muted-foreground line-clamp-2"), $ = /* @__PURE__ */ x("div", { className: S, children: [
+  ), q = h("text-sm text-muted-foreground line-clamp-2"), $ = /* @__PURE__ */ x("div", { className: z, children: [
     /* @__PURE__ */ x("div", { className: h(R, "aspect-[4/3] bg-red-500"), children: [
       /* @__PURE__ */ s(
         "img",
@@ -3587,7 +3587,7 @@ const Gt = [
           src: e.images[i],
           alt: e.title,
           className: A,
-          onClick: o ? z : void 0
+          onClick: o ? S : void 0
         }
       ),
       /* @__PURE__ */ s("div", { className: _, children: e.transactionTypes.map((w, N) => /* @__PURE__ */ s(
@@ -3606,13 +3606,13 @@ const Gt = [
         {
           onClick: y,
           className: I,
-          "aria-label": l ? "Unlike property" : "Like property",
+          "aria-label": c ? "Unlike property" : "Like property",
           children: /* @__PURE__ */ s(
             Ft,
             {
               size: 20,
-              fill: l ? "currentColor" : "none",
-              className: l ? "text-destructive" : ""
+              fill: c ? "currentColor" : "none",
+              className: c ? "text-destructive" : ""
             }
           )
         }
@@ -3633,7 +3633,7 @@ const Gt = [
           K,
           {
             onClick: (w) => {
-              w.preventDefault(), w.stopPropagation(), g();
+              w.preventDefault(), w.stopPropagation(), p();
             },
             className: h(j, "right-4"),
             "aria-label": "Next image",
@@ -3647,8 +3647,8 @@ const Gt = [
               G,
               N === i ? "bg-background" : "bg-background/50"
             ),
-            onClick: (p) => {
-              p.preventDefault(), p.stopPropagation(), c(N);
+            onClick: (g) => {
+              g.preventDefault(), g.stopPropagation(), l(N);
             },
             "aria-label": `Go to image ${N + 1}`,
             "aria-current": N === i
@@ -3699,7 +3699,7 @@ const Gt = [
     onImageClick: n,
     className: a
   }, i) => {
-    const c = e.slice(0, 5), l = (d) => {
+    const l = e.slice(0, 5), c = (d) => {
       n?.(d);
     };
     return /* @__PURE__ */ x(
@@ -3708,53 +3708,53 @@ const Gt = [
         ref: i,
         className: h("w-full h-full grid grid-cols-2 gap-2", a),
         children: [
-          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-2 rounded-2xl overflow-hidden group cursor-pointer", children: c[0] ? /* @__PURE__ */ x(de, { children: [
+          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-2 rounded-2xl overflow-hidden group cursor-pointer", children: l[0] ? /* @__PURE__ */ x(de, { children: [
             /* @__PURE__ */ s(
               "img",
               {
-                src: c[0],
+                src: l[0],
                 alt: "Property main view",
                 className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
-                onClick: () => l(0)
+                onClick: () => c(0)
               }
             ),
             r && /* @__PURE__ */ s("div", { className: "absolute top-4 left-4 bg-white rounded-full px-4 py-2 shadow-md", children: /* @__PURE__ */ s("span", { className: "text-sm font-medium text-foreground", children: r }) })
           ] }) : /* @__PURE__ */ s("div", { className: "w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: "No image" }) }) }),
-          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: c[1] ? /* @__PURE__ */ s(
+          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: l[1] ? /* @__PURE__ */ s(
             "img",
             {
-              src: c[1],
+              src: l[1],
               alt: "Property view 2",
               className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
-              onClick: () => l(1)
+              onClick: () => c(1)
             }
           ) : /* @__PURE__ */ s("div", { className: "w-full h-full bg-muted" }) }),
-          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: c[2] ? /* @__PURE__ */ s(
+          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: l[2] ? /* @__PURE__ */ s(
             "img",
             {
-              src: c[2],
+              src: l[2],
               alt: "Property view 3",
               className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
-              onClick: () => l(2)
+              onClick: () => c(2)
             }
           ) : /* @__PURE__ */ s("div", { className: "w-full h-full bg-muted" }) }),
-          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: c[3] ? /* @__PURE__ */ s(
+          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: l[3] ? /* @__PURE__ */ s(
             "img",
             {
-              src: c[3],
+              src: l[3],
               alt: "Property view 4",
               className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
-              onClick: () => l(3)
+              onClick: () => c(3)
             }
           ) : /* @__PURE__ */ s("div", { className: "w-full h-full bg-muted" }) }),
-          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: c[4] ? /* @__PURE__ */ x(de, { children: [
+          /* @__PURE__ */ s("div", { className: "relative col-span-1 row-span-1 rounded-2xl overflow-hidden group cursor-pointer", children: l[4] ? /* @__PURE__ */ x(de, { children: [
             /* @__PURE__ */ s(
               "img",
               {
-                src: c[4],
+                src: l[4],
                 alt: "Property view 5",
                 className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
-                onClick: () => l(4)
+                onClick: () => c(4)
               }
             ),
             t && t > 5 && /* @__PURE__ */ s("div", { className: "absolute bottom-4 right-4", children: /* @__PURE__ */ x(
@@ -3782,8 +3782,8 @@ const Gt = [
 );
 Ut.displayName = "PropertyGallery";
 const nr = C.forwardRef(({ title: e, description: r, className: t }, o) => /* @__PURE__ */ x("div", { ref: o, className: h("space-y-1.5", t), children: [
-  /* @__PURE__ */ s(P, { variant: "heading", size: "2xl", className: "font-bold", children: e }),
-  r && /* @__PURE__ */ s(P, { variant: "body", size: "base", className: "text-muted-foreground", children: r })
+  /* @__PURE__ */ s(P, { variant: "h2", className: "font-bold", children: e }),
+  r && /* @__PURE__ */ s(P, { variant: "body", className: "text-muted-foreground", children: r })
 ] }));
 nr.displayName = "EntityDirectoryHeader";
 const sr = C.forwardRef(
@@ -3795,19 +3795,19 @@ const sr = C.forwardRef(
     showMetric: n = !0,
     compact: a = !1,
     className: i
-  }, c) => {
-    const l = r?.find((y) => y.id === e.categoryId), d = !!e.onClick, g = () => {
+  }, l) => {
+    const c = r?.find((y) => y.id === e.categoryId), d = !!e.onClick, p = () => {
       e.onClick && !e.disabled && e.onClick();
     }, m = (y) => {
-      d && (y.key === "Enter" || y.key === " ") && (y.preventDefault(), g());
+      d && (y.key === "Enter" || y.key === " ") && (y.preventDefault(), p());
     };
     return /* @__PURE__ */ x(
       "div",
       {
-        ref: c,
+        ref: l,
         role: d ? "button" : "listitem",
         tabIndex: d && !e.disabled ? 0 : void 0,
-        onClick: g,
+        onClick: p,
         onKeyDown: m,
         "aria-disabled": e.disabled,
         className: h(
@@ -3826,15 +3826,14 @@ const sr = C.forwardRef(
                 a ? "w-8 h-8 text-lg" : "w-10 h-10 text-xl"
               ),
               "aria-hidden": "true",
-              children: typeof e.icon == "string" ? /* @__PURE__ */ s("span", { children: e.icon }) : e.icon ? e.icon : /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: "•" })
+              children: typeof e.icon == "string" ? /* @__PURE__ */ s("span", { children: e.icon }) : e.icon ? C.createElement(e.icon) : /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: "•" })
             }
           ),
           /* @__PURE__ */ x("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ s(
               P,
               {
-                variant: "body",
-                size: a ? "sm" : "base",
+                variant: a ? "body-sm" : "body",
                 className: "font-semibold truncate",
                 children: e.title
               }
@@ -3842,34 +3841,32 @@ const sr = C.forwardRef(
             e.subtitle && /* @__PURE__ */ s(
               P,
               {
-                variant: "body",
-                size: a ? "xs" : "sm",
+                variant: a ? "caption" : "body-sm",
                 className: "text-muted-foreground truncate",
                 children: e.subtitle
               }
             )
           ] }),
-          o && l && /* @__PURE__ */ s(
-            ze,
+          o && c && /* @__PURE__ */ s(
+            Se,
             {
               variant: "secondary",
               size: a ? "sm" : "default",
               className: "flex-shrink-0 bg-foreground text-background hover:bg-foreground/90",
-              "aria-label": `Category: ${l.label}`,
-              children: l.label
+              "aria-label": `Category: ${c.label}`,
+              children: c.label
             }
           ),
           n && e.metricValue && /* @__PURE__ */ x("div", { className: "flex-shrink-0 text-right min-w-[4rem]", children: [
             /* @__PURE__ */ s(
               P,
               {
-                variant: "body",
-                size: a ? "sm" : "base",
+                variant: a ? "body-sm" : "body",
                 className: "font-medium",
                 children: e.metricValue
               }
             ),
-            e.metricLabel && /* @__PURE__ */ s(P, { variant: "body", size: "xs", className: "text-muted-foreground", children: e.metricLabel })
+            e.metricLabel && /* @__PURE__ */ s(P, { variant: "caption", className: "text-muted-foreground", children: e.metricLabel })
           ] })
         ]
       }
@@ -3878,18 +3875,18 @@ const sr = C.forwardRef(
 );
 sr.displayName = "EntityDirectoryListItem";
 const ar = C.forwardRef(({ columns: e, showIcon: r, sort: t, onSortChange: o, compact: n, className: a }, i) => {
-  const c = (m) => {
+  const l = (m) => {
     if (!o) return;
     const y = t?.column === m && t?.direction === "asc" ? "desc" : "asc";
     o({
       column: m,
       direction: y
     });
-  }, l = (m) => {
-    c(m);
+  }, c = (m) => {
+    l(m);
   }, d = (m, y) => {
-    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), c(y));
-  }, g = (m) => m !== "title" && m !== "metric" ? null : !t || t.column !== m ? /* @__PURE__ */ s("span", { className: "ml-1 text-muted-foreground opacity-50", "aria-hidden": "true", children: "⇅" }) : /* @__PURE__ */ s("span", { className: "ml-1", "aria-hidden": "true", children: t.direction === "asc" ? "↑" : "↓" });
+    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), l(y));
+  }, p = (m) => m !== "title" && m !== "metric" ? null : !t || t.column !== m ? /* @__PURE__ */ s("span", { className: "ml-1 text-muted-foreground opacity-50", "aria-hidden": "true", children: "⇅" }) : /* @__PURE__ */ s("span", { className: "ml-1", "aria-hidden": "true", children: t.direction === "asc" ? "↑" : "↓" });
   return /* @__PURE__ */ x(
     "div",
     {
@@ -3903,12 +3900,12 @@ const ar = C.forwardRef(({ columns: e, showIcon: r, sort: t, onSortChange: o, co
       children: [
         r && /* @__PURE__ */ s("div", { className: n ? "w-8" : "w-10" }),
         e.map((m) => {
-          const y = m.sortable && (m.key === "title" || m.key === "metric"), z = t?.column === m.key;
+          const y = m.sortable && (m.key === "title" || m.key === "metric"), S = t?.column === m.key;
           return /* @__PURE__ */ x(
             "div",
             {
               role: "columnheader",
-              "aria-sort": z ? t?.direction === "asc" ? "ascending" : "descending" : void 0,
+              "aria-sort": S ? t?.direction === "asc" ? "ascending" : "descending" : void 0,
               className: h(
                 m.key === "title" && "flex-1",
                 m.key === "category" && "w-40",
@@ -3916,15 +3913,15 @@ const ar = C.forwardRef(({ columns: e, showIcon: r, sort: t, onSortChange: o, co
                 m.align === "center" && "text-center",
                 m.align === "right" && "text-right",
                 y && "cursor-pointer hover:text-foreground transition-colors select-none",
-                z && "text-foreground"
+                S && "text-foreground"
               ),
               style: m.width ? { width: m.width } : void 0,
-              onClick: y && (m.key === "title" || m.key === "metric") ? () => l(m.key) : void 0,
+              onClick: y && (m.key === "title" || m.key === "metric") ? () => c(m.key) : void 0,
               tabIndex: y ? 0 : void 0,
               onKeyDown: y && (m.key === "title" || m.key === "metric") ? (k) => d(k, m.key) : void 0,
               children: [
                 m.label,
-                y && g(m.key)
+                y && p(m.key)
               ]
             },
             m.key
@@ -3944,13 +3941,13 @@ const ir = C.forwardRef(
     showMetric: n = !0,
     metricLabel: a,
     sortable: i = !1,
-    sort: c,
-    onSortChange: l,
+    sort: l,
+    onSortChange: c,
     compact: d = !1,
-    renderItem: g,
+    renderItem: p,
     className: m
   }, y) => {
-    const z = [
+    const S = [
       {
         key: "title",
         label: a ? "Nombre" : "Name",
@@ -3977,15 +3974,15 @@ const ir = C.forwardRef(
           /* @__PURE__ */ s(
             ar,
             {
-              columns: z,
+              columns: S,
               showIcon: t,
-              sort: c,
-              onSortChange: l,
+              sort: l,
+              onSortChange: c,
               compact: d
             }
           ),
           /* @__PURE__ */ s("div", { role: "rowgroup", children: e.map(
-            (k) => g ? /* @__PURE__ */ s(C.Fragment, { children: g(k) }, k.id) : /* @__PURE__ */ s(
+            (k) => p ? /* @__PURE__ */ s(C.Fragment, { children: p(k) }, k.id) : /* @__PURE__ */ s(
               sr,
               {
                 entity: k,
@@ -4016,7 +4013,7 @@ const lr = C.forwardRef(({ message: e = "No entities found", icon: r, action: t,
     ),
     children: [
       r && /* @__PURE__ */ s("div", { className: "mb-4 text-4xl opacity-50", "aria-hidden": "true", children: r }),
-      /* @__PURE__ */ s(P, { variant: "body", size: "lg", className: "text-muted-foreground mb-4", children: e }),
+      /* @__PURE__ */ s(P, { variant: "body-lg", className: "text-muted-foreground mb-4", children: e }),
       t && /* @__PURE__ */ s(K, { variant: "outline", onClick: t.onClick, children: t.label })
     ]
   }
@@ -4036,8 +4033,8 @@ const cr = C.forwardRef(({ error: e, onRetry: r, className: t }, o) => {
       ),
       children: [
         /* @__PURE__ */ s("div", { className: "mb-4 text-4xl", "aria-hidden": "true", children: "⚠️" }),
-        /* @__PURE__ */ s(P, { variant: "body", size: "lg", className: "text-destructive mb-2 font-semibold", children: "Error" }),
-        /* @__PURE__ */ s(P, { variant: "body", size: "base", className: "text-muted-foreground mb-4", children: n }),
+        /* @__PURE__ */ s(P, { variant: "body-lg", className: "text-destructive mb-2 font-semibold", children: "Error" }),
+        /* @__PURE__ */ s(P, { variant: "body", className: "text-muted-foreground mb-4", children: n }),
         r && /* @__PURE__ */ s(K, { variant: "outline", onClick: r, children: "Try Again" })
       ]
     }
@@ -4150,15 +4147,15 @@ const Ot = C.forwardRef(
     activeCategory: n,
     onCategoryChange: a,
     showCategoryCount: i,
-    getCategoryCount: c,
-    enableSearch: l = !1,
+    getCategoryCount: l,
+    enableSearch: c = !1,
     searchQuery: d = "",
-    onSearchChange: g,
+    onSearchChange: p,
     searchPlaceholder: m,
     sortable: y = !1,
-    sort: z,
+    sort: S,
     onSortChange: k,
-    showIcons: S = !0,
+    showIcons: z = !0,
     showCategoryBadges: R = !0,
     showMetric: A = !0,
     metricLabel: _,
@@ -4190,14 +4187,14 @@ const Ot = C.forwardRef(
               activeCategory: n,
               onCategoryChange: a,
               showCount: i,
-              getCategoryCount: c
+              getCategoryCount: l
             }
           ),
-          l && g && /* @__PURE__ */ s(
+          c && p && /* @__PURE__ */ s(
             mr,
             {
               value: d,
-              onChange: g,
+              onChange: p,
               placeholder: m
             }
           ),
@@ -4209,12 +4206,12 @@ const Ot = C.forwardRef(
             {
               entities: e,
               categories: r,
-              showIcons: S,
+              showIcons: z,
               showCategoryBadges: R,
               showMetric: A,
               metricLabel: _,
               sortable: y,
-              sort: z,
+              sort: S,
               onSortChange: k,
               compact: F,
               renderItem: X
@@ -4237,32 +4234,32 @@ const qt = (e) => {
     default:
       return "p-0";
   }
-}, Se = ({
+}, ze = ({
   children: e,
   header: r,
   sidebar: t,
   footer: o,
   padding: n = "md"
 }) => {
-  const a = h("min-h-screen flex flex-col"), i = h("bg-card border-b border-border z-10"), c = h("flex flex-1"), l = h("w-70 bg-card border-r border-border p-6"), d = h("flex-1 flex flex-col"), g = h(
+  const a = h("min-h-screen flex flex-col"), i = h("bg-card border-b border-border z-10"), l = h("flex flex-1"), c = h("w-70 bg-card border-r border-border p-6"), d = h("flex-1 flex flex-col"), p = h(
     "flex-1 mx-auto w-full max-w-7xl",
     qt(n)
   );
   return /* @__PURE__ */ x("div", { className: a, children: [
     r && /* @__PURE__ */ s("header", { className: i, children: r }),
-    /* @__PURE__ */ x("div", { className: c, children: [
-      t && /* @__PURE__ */ s("aside", { className: l, children: t }),
-      /* @__PURE__ */ s("div", { className: d, children: /* @__PURE__ */ s("main", { className: g, children: e }) })
+    /* @__PURE__ */ x("div", { className: l, children: [
+      t && /* @__PURE__ */ s("aside", { className: c, children: t }),
+      /* @__PURE__ */ s("div", { className: d, children: /* @__PURE__ */ s("main", { className: p, children: e }) })
     ] }),
     o && /* @__PURE__ */ s("footer", { className: "bg-card border-t border-border mt-auto", children: o })
   ] });
-}, co = ({ children: e, header: r, sidebar: t }) => /* @__PURE__ */ s(Se, { header: r, sidebar: t, padding: "lg", children: /* @__PURE__ */ s("div", { className: "max-w-screen-2xl", children: e }) }), mo = ({ children: e, title: r, subtitle: t }) => /* @__PURE__ */ s(Se, { padding: "lg", children: /* @__PURE__ */ x("div", { className: "max-w-md mx-auto", children: [
+}, co = ({ children: e, header: r, sidebar: t }) => /* @__PURE__ */ s(ze, { header: r, sidebar: t, padding: "lg", children: /* @__PURE__ */ s("div", { className: "max-w-screen-2xl", children: e }) }), mo = ({ children: e, title: r, subtitle: t }) => /* @__PURE__ */ s(ze, { padding: "lg", children: /* @__PURE__ */ x("div", { className: "max-w-md mx-auto", children: [
   /* @__PURE__ */ x("div", { className: "text-center mb-8", children: [
     r && /* @__PURE__ */ s(P, { variant: "h2", className: "mb-2", children: r }),
     t && /* @__PURE__ */ s(P, { variant: "body", color: "muted", children: t })
   ] }),
   e
-] }) }), uo = ({ children: e, header: r, footer: t }) => /* @__PURE__ */ s(Se, { header: r, footer: t, padding: "none", children: e }), Zt = {
+] }) }), uo = ({ children: e, header: r, footer: t }) => /* @__PURE__ */ s(ze, { header: r, footer: t, padding: "none", children: e }), Zt = {
   name: "light",
   colors: {
     primary: "#007bff",
@@ -4531,19 +4528,19 @@ const qt = (e) => {
   dark: Kt,
   corporate: Qt,
   minimal: Jt
-}, Xt = Ce(), Yt = Ce(), eo = Ce(), Q = pr(be.light).on(Xt, (e, r) => be[r] || e).on(Yt, (e, r) => r).on(eo, () => be.light), fo = Q.map((e) => e.name), go = Q.map((e) => e.colors);
+}, Xt = Ce(), Yt = Ce(), eo = Ce(), Q = gr(be.light).on(Xt, (e, r) => be[r] || e).on(Yt, (e, r) => r).on(eo, () => be.light), fo = Q.map((e) => e.name), po = Q.map((e) => e.colors);
 Q.map((e) => e.shapes);
 Q.map((e) => e.typography);
 Q.map((e) => e.spacing);
 Q.map((e) => e.shadows);
-const ur = ke.createContext(null), po = () => {
+const ur = ke.createContext(null), go = () => {
   const e = fr(ur);
   if (!e)
     throw new Error("useTheme must be used within a ThemeProvider");
   return e;
 }, ho = ({ children: e }) => {
   const t = {
-    theme: gr(Q)
+    theme: pr(Q)
   };
   return /* @__PURE__ */ s(ur.Provider, { value: t, children: e });
 }, bo = {
@@ -4779,7 +4776,7 @@ const ur = ke.createContext(null), po = () => {
     col: "flex flex-col",
     colCenter: "flex flex-col items-center justify-center"
   }
-}, zo = {
+}, So = {
   /**
    * Check if dark mode is active
    */
@@ -4796,7 +4793,7 @@ const ur = ke.createContext(null), po = () => {
   set: (e) => {
     typeof window > "u" || document.documentElement.classList.toggle("dark", e === "dark");
   }
-}, So = {
+}, zo = {
   /**
    * Debounce function for performance optimization
    */
@@ -4825,13 +4822,13 @@ const ur = ke.createContext(null), po = () => {
 );
 export {
   Q as $theme,
-  go as $themeColors,
+  po as $themeColors,
   fo as $themeName,
   mo as AuthLayout,
   K as Button,
   ft as Card,
   tr as CategoryChips,
-  ze as Chip,
+  Se as Chip,
   so as CompoundCard,
   ao as ConfirmModal,
   co as DashboardLayout,
@@ -4839,7 +4836,7 @@ export {
   uo as MarketingLayout,
   ht as Modal,
   bt as ModalWithActions,
-  Se as PageLayout,
+  ze as PageLayout,
   lo as PropertyCard,
   Ut as PropertyGallery,
   Eo as SkipLink,
@@ -4860,18 +4857,18 @@ export {
   xt as filterEntitiesByCategory,
   No as layout,
   No as layoutUtils,
-  So as performance,
-  So as performanceUtils,
+  zo as performance,
+  zo as performanceUtils,
   eo as resetTheme,
   yo as responsiveBreakpoints,
   Yt as setCustomTheme,
   Xt as setTheme,
   ko as sizes,
   yt as sortEntities,
-  zo as theme,
-  zo as themeUtils,
+  So as theme,
+  So as themeUtils,
   io as useEntityFilter,
-  po as useTheme,
+  go as useTheme,
   xo as variants
 };
 //# sourceMappingURL=design-system.es.js.map