zabi-components 3.0.2 → 4.0.0

package/dist/molecules/index.js

@@ -1,85 +1,52 @@
-import { t as S, F as ie, G as le, H as de, I as ce, J, y as ve, K as ue, w as T, L as fe, S as me, l as A, p as w, i as te, f as k, a as Q, s as L, e as N, c as b, d as H, g as G, h as a, z as Y, A as ae, b as j, x as R, k as m, m as I, o as P, D, j as _, C as W, M as be, n as U, v as K, q as ge, r as he, u as re, N as Z, O as V } from "../props-B4BdFk2B.js";
-import { e as ne, B as ee, I as oe, T as xe } from "../Textarea-DP1BihDh.js";
-function pe(n, e, s = !1, t = !1, c = !1) {
-  var r = n, h = "";
-  S(() => {
-    var o = (
-      /** @type {Effect} */
-      ie
-    );
-    if (h !== (h = e() ?? "") && (o.nodes_start !== null && (le(
-      o.nodes_start,
-      /** @type {TemplateNode} */
-      o.nodes_end
-    ), o.nodes_start = o.nodes_end = null), h !== "")) {
-      var i = h + "";
-      s ? i = `<svg>${i}</svg>` : t && (i = `<math>${i}</math>`);
-      var u = de(i);
-      if ((s || t) && (u = /** @type {Element} */
-      J(u)), ce(
-        /** @type {TemplateNode} */
-        J(u),
-        /** @type {TemplateNode} */
-        u.lastChild
-      ), s || t)
-        for (; J(u); )
-          r.before(
-            /** @type {Node} */
-            J(u)
-          );
-      else
-        r.before(u);
-    }
-  });
-}
-function se(n, e) {
-  return n === e || (n == null ? void 0 : n[me]) === e;
+import { o as te, K as ae, L as re, M as oe, S as ne, p as b, f as _, a as A, q as j, b as s, c as G, d as V, r as Y, w as M, h as r, i as S, g as N, v as F, I as R, y as x, H as I, D, t as E, C as U, B as P, F as ie, G as se, z as W, N as K, e as Z, s as $, E as ee, x as le } from "../props-BKbHJRuR.js";
+import { f as J, h as de, B as H, e as ce, I as Q, T as ve, C as ue } from "../CodeBlock-Bbv6JfD2.js";
+function X(t, e) {
+  return t === e || (t == null ? void 0 : t[ne]) === e;
 }
-function we(n = {}, e, s, t) {
-  return ve(() => {
-    var c, r;
-    return ue(() => {
-      c = r, r = [], T(() => {
-        n !== s(...r) && (e(n, ...r), c && se(s(...c), n) && e(null, ...c));
+function me(t = {}, e, a, o) {
+  return te(() => {
+    var i, n;
+    return ae(() => {
+      i = n, n = [], oe(() => {
+        t !== a(...n) && (e(t, ...n), i && X(a(...i), t) && e(null, ...i));
       });
     }), () => {
-      fe(() => {
-        r && se(s(...r), n) && e(null, ...r);
+      re(() => {
+        n && X(a(...n), t) && e(null, ...n);
       });
     };
-  }), n;
-}
-function ye(n) {
-  return function(...e) {
-    var s = (
-      /** @type {Event} */
-      e[0]
-    );
-    return s.preventDefault(), n == null ? void 0 : n.apply(this, e);
-  };
+  }), t;
 }
-var _e = k("<form><!></form>");
-function ke(n, e) {
-  const s = A(e, ["children", "$$slots", "$$events", "$$legacy"]), t = A(s, ["method", "action", "className"]);
-  G(e, !1);
-  let c = w(e, "method", 8, "post"), r = w(e, "action", 8, ""), h = w(e, "className", 8, "");
-  function o(g) {
-    const d = new FormData(g.target);
-    Object.fromEntries(d.entries());
+var fe = _("<form><!></form>");
+function be(t, e) {
+  V(e, !0);
+  let a = b(e, "method", 3, "post"), o = b(e, "action", 3, ""), i = b(e, "className", 3, ""), n = Y(e, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "method",
+    "action",
+    "className",
+    "onsubmit",
+    "children"
+  ]);
+  function g(u) {
+    const h = new FormData(u.target);
+    Object.fromEntries(h.entries()), e.onsubmit && e.onsubmit(u);
   }
-  te();
-  var i = _e();
-  Q(i, () => ({
-    method: c(),
-    action: r(),
-    class: `space-y-4 ${h() ?? ""}`,
-    ...t
+  var c = fe();
+  A(c, () => ({
+    method: a(),
+    action: o(),
+    class: `space-y-4 ${i() ?? ""}`,
+    onsubmit: g,
+    ...n
   }));
-  var u = a(i);
-  L(u, e, "default", {}), N("submit", i, ye(o)), b(n, i), H();
+  var d = r(c);
+  j(d, () => e.children ?? M), s(t, c), G();
 }
-var ze = k('<header class="layout-header svelte-wzmt5k"><!></header> <main class="layout-main svelte-wzmt5k"><!></main> <footer class="layout-footer svelte-wzmt5k"><!></footer>', 1), qe = k('<aside class="layout-sidebar svelte-wzmt5k"><!></aside> <main class="layout-main svelte-wzmt5k"><!></main>', 1), Ce = k('<div class="layout-grid svelte-wzmt5k"><!></div>'), $e = k("<div><!></div>");
-const Me = {
+var ge = _('<header class="layout-header svelte-wzmt5k"><!></header> <main class="layout-main svelte-wzmt5k"><!></main> <footer class="layout-footer svelte-wzmt5k"><!></footer>', 1), xe = _('<aside class="layout-sidebar svelte-wzmt5k"><!></aside> <main class="layout-main svelte-wzmt5k"><!></main>', 1), he = _('<div class="layout-grid svelte-wzmt5k"><!></div>'), pe = _("<div><!></div>");
+const we = {
   hash: "svelte-wzmt5k",
   code: `.layout.svelte-wzmt5k {min-height:100vh}.layout-main.svelte-wzmt5k {display:flex;flex-direction:column}.layout-sidebar.svelte-wzmt5k {width:16rem;border-right-width:1px;border-color:rgb(var(--color-border));background-color:rgb(var(--color-surface-secondary))}.layout-grid.svelte-wzmt5k {display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}
 
@@ -89,147 +56,161 @@ const Me = {
     @media (min-width: 1024px) {.layout-grid.svelte-wzmt5k {grid-template-columns:repeat(3, minmax(0, 1fr))}
 }.layout-header.svelte-wzmt5k {border-bottom-width:1px;border-color:rgb(var(--color-border));background-color:rgb(var(--color-surface));padding:1rem}.layout-footer.svelte-wzmt5k {margin-top:auto;border-top-width:1px;border-color:rgb(var(--color-border));background-color:rgb(var(--color-surface-secondary));padding:1rem}`
 };
-function Xe(n, e) {
-  const s = A(e, ["children", "$$slots", "$$events", "$$legacy"]), t = A(s, ["variant", "gap", "className"]);
-  G(e, !1), ne(n, Me);
-  const c = I();
-  let r = w(e, "variant", 8, "main"), h = w(e, "gap", 8, "md"), o = w(e, "className", 8, "");
-  Y(() => R(h()), () => {
-    P(c, `gap-${h()}`);
-  }), ae();
-  var i = $e();
-  Q(
-    i,
+function rt(t, e) {
+  J(t, we);
+  let a = b(e, "variant", 3, "main"), o = b(e, "gap", 3, "md"), i = b(e, "className", 3, ""), n = Y(e, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "variant",
+    "gap",
+    "className",
+    "children",
+    "header",
+    "main",
+    "footer",
+    "sidebar"
+  ]), g = F(() => `gap-${o()}`);
+  var c = pe();
+  A(
+    c,
     () => ({
-      class: `layout layout-${r() ?? ""} ${m(c) ?? ""} ${o() ?? ""}`,
-      ...t
+      class: `layout layout-${a() ?? ""} ${N(g) ?? ""} ${i() ?? ""}`,
+      ...n
     }),
     void 0,
     void 0,
     "svelte-wzmt5k"
   );
-  var u = a(i);
+  var d = r(c);
   {
-    var g = (l) => {
-      var x = ze(), p = D(x), v = a(p);
-      L(v, e, "header", {});
-      var y = _(p, 2), f = a(y);
-      L(f, e, "main", {});
-      var z = _(y, 2), q = a(z);
-      L(q, e, "footer", {}), b(l, x);
-    }, d = (l) => {
-      var x = W(), p = D(x);
+    var u = (m) => {
+      var f = ge(), k = R(f), p = r(k);
+      j(p, () => e.header ?? M);
+      var w = x(k, 2), y = r(w);
+      j(y, () => e.main ?? M);
+      var v = x(w, 2), q = r(v);
+      j(q, () => e.footer ?? M), s(m, f);
+    }, h = (m) => {
+      var f = I(), k = R(f);
       {
-        var v = (f) => {
-          var z = qe(), q = D(z), $ = a(q);
-          L($, e, "sidebar", {});
-          var M = _(q, 2), C = a(M);
-          L(C, e, "main", {}), b(f, z);
-        }, y = (f) => {
-          var z = W(), q = D(z);
+        var p = (y) => {
+          var v = xe(), q = R(v), z = r(q);
+          j(z, () => e.sidebar ?? M);
+          var L = x(q, 2), B = r(L);
+          j(B, () => e.main ?? M), s(y, v);
+        }, w = (y) => {
+          var v = I(), q = R(v);
           {
-            var $ = (M) => {
-              var C = Ce(), O = a(C);
-              L(O, e, "default", {}), b(M, C);
+            var z = (L) => {
+              var B = he(), O = r(B);
+              j(O, () => e.children ?? M), s(L, B);
             };
-            j(
+            S(
               q,
-              (M) => {
-                r() === "grid" && M($);
+              (L) => {
+                a() === "grid" && L(z);
               },
               !0
             );
           }
-          b(f, z);
+          s(y, v);
         };
-        j(
-          p,
-          (f) => {
-            r() === "sidebar" ? f(v) : f(y, !1);
+        S(
+          k,
+          (y) => {
+            a() === "sidebar" ? y(p) : y(w, !1);
           },
           !0
         );
       }
-      b(l, x);
+      s(m, f);
     };
-    j(u, (l) => {
-      r() === "main" ? l(g) : l(d, !1);
+    S(d, (m) => {
+      a() === "main" ? m(u) : m(h, !1);
     });
   }
-  b(n, i), H();
+  s(t, c);
 }
-var Le = k('<div class="flex justify-end gap-3 p-6 border-t border-gray-200"><!></div>'), Ne = k('<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50" role="dialog" aria-modal="true" tabindex="-1"><div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto"><div class="flex items-center justify-between p-6 border-b border-gray-200"><h2 class="text-xl font-semibold text-gray-900"> </h2> <button type="button" class="text-gray-400 hover:text-gray-600 text-2xl" aria-label="Close">×</button></div> <div class="p-6"><!></div> <!></div></div>');
-function Ze(n, e) {
-  const s = be(e);
-  let t = w(e, "isOpen", 12, !1), c = w(e, "title", 8, "");
-  function r() {
-    t(!1);
-  }
-  function h(d) {
-    d.target === d.currentTarget && r();
-  }
-  function o(d) {
-    d.key === "Escape" && r();
+function ye(t, e) {
+  t.target === t.currentTarget && e();
+}
+function _e(t, e) {
+  t.key === "Escape" && e();
+}
+var ke = _('<div class="flex justify-end gap-3 p-6 border-t border-gray-200"><!></div>'), qe = _('<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50" role="dialog" aria-modal="true" tabindex="-1"><div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto"><div class="flex items-center justify-between p-6 border-b border-gray-200"><h2 class="text-xl font-semibold text-gray-900"> </h2> <button type="button" class="text-gray-400 hover:text-gray-600 text-2xl" aria-label="Close">×</button></div> <div class="p-6"><!></div> <!></div></div>');
+function ot(t, e) {
+  let a = b(e, "isOpen", 7, !1), o = b(e, "title", 3, "");
+  function i() {
+    a(!1);
   }
-  var i = W(), u = D(i);
+  var n = I(), g = R(n);
   {
-    var g = (d) => {
-      var l = Ne(), x = a(l), p = a(x), v = a(p), y = a(v), f = _(v, 2), z = _(p, 2), q = a(z);
-      L(q, e, "default", {});
-      var $ = _(z, 2);
+    var c = (d) => {
+      var u = qe();
+      u.__click = [ye, i], u.__keydown = [_e, i];
+      var h = r(u), m = r(h), f = r(m), k = r(f), p = x(f, 2);
+      p.__click = i;
+      var w = x(m, 2), y = r(w);
+      j(y, () => e.children ?? M);
+      var v = x(w, 2);
       {
-        var M = (C) => {
-          var O = Le(), F = a(O);
-          L(F, e, "footer", {}), b(C, O);
+        var q = (z) => {
+          var L = ke(), B = r(L);
+          j(B, () => e.footer ?? M), s(z, L);
         };
-        j($, (C) => {
-          T(() => s.footer) && C(M);
+        S(v, (z) => {
+          e.footer && z(q);
         });
       }
-      S(() => U(y, c())), N("click", f, r), N("click", l, h), N("keydown", l, o), b(d, l);
+      E(() => U(k, o())), s(d, u);
     };
-    j(u, (d) => {
-      t() && d(g);
+    S(g, (d) => {
+      a() && d(c);
     });
   }
-  b(n, i);
+  s(t, n);
 }
-var Se = k('<div class="flex items-center justify-between p-4 border-b border-gray-200"><h3 class="text-lg font-semibold text-gray-900"> </h3> <button type="button" class="text-gray-400 hover:text-gray-600 text-2xl" aria-label="Close">×</button></div>'), je = k('<div class="fixed inset-0 bg-black/50 z-50" role="dialog" aria-modal="true" tabindex="-1"></div> <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 rounded-t-xl shadow-xl z-50 max-h-[80vh] overflow-y-auto" role="dialog" aria-modal="true"><!> <div class="p-4"><!></div></div>', 1);
-function et(n, e) {
-  let s = w(e, "isOpen", 12, !1), t = w(e, "title", 8, "");
-  function c() {
-    s(!1);
-  }
-  function r(g) {
-    g.target === g.currentTarget && c();
-  }
-  function h(g) {
-    g.key === "Escape" && c();
+D(["click", "keydown"]);
+function ze(t, e) {
+  t.target === t.currentTarget && e();
+}
+function Ce(t, e) {
+  t.key === "Escape" && e();
+}
+var Le = _('<div class="flex items-center justify-between p-4 border-b border-gray-200"><h3 class="text-lg font-semibold text-gray-900"> </h3> <button type="button" class="text-gray-400 hover:text-gray-600 text-2xl" aria-label="Close">×</button></div>'), je = _('<div class="fixed inset-0 bg-black/50 z-50" role="dialog" aria-modal="true" tabindex="-1"></div> <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 rounded-t-xl shadow-xl z-50 max-h-[80vh] overflow-y-auto" role="dialog" aria-modal="true"><!> <div class="p-4"><!></div></div>', 1);
+function nt(t, e) {
+  let a = b(e, "isOpen", 7, !1), o = b(e, "title", 3, "");
+  function i() {
+    a(!1);
   }
-  var o = W(), i = D(o);
+  var n = I(), g = R(n);
   {
-    var u = (g) => {
-      var d = je(), l = D(d), x = _(l, 2), p = a(x);
+    var c = (d) => {
+      var u = je(), h = R(u);
+      h.__click = [ze, i], h.__keydown = [Ce, i];
+      var m = x(h, 2), f = r(m);
       {
-        var v = (z) => {
-          var q = Se(), $ = a(q), M = a($), C = _($, 2);
-          S(() => U(M, t())), N("click", C, c), b(z, q);
+        var k = (y) => {
+          var v = Le(), q = r(v), z = r(q), L = x(q, 2);
+          L.__click = i, E(() => U(z, o())), s(y, v);
         };
-        j(p, (z) => {
-          t() && z(v);
+        S(f, (y) => {
+          o() && y(k);
         });
       }
-      var y = _(p, 2), f = a(y);
-      L(f, e, "default", {}), N("click", l, r), N("keydown", l, h), b(g, d);
+      var p = x(f, 2), w = r(p);
+      j(w, () => e.children ?? M), s(d, u);
     };
-    j(i, (g) => {
-      s() && g(u);
+    S(g, (d) => {
+      a() && d(c);
     });
   }
-  b(n, o);
+  s(t, n);
 }
-var Ee = k('<div class="dropdown-content group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible svelte-1o1q13x"><!></div>'), Te = k('<div class="dropdown-container group relative inline-block svelte-1o1q13x"><!> <!></div>');
-const Oe = {
+D(["click", "keydown"]);
+var Me = _('<div class="dropdown-content opacity-100 visible transform-none group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible svelte-1o1q13x"><!></div>'), Ne = _('<div class="dropdown-container group relative inline-block svelte-1o1q13x"><!> <!></div>');
+const Se = {
   hash: "svelte-1o1q13x",
   code: `.dropdown-container.svelte-1o1q13x {position:relative;display:inline-block;}.dropdown-content.svelte-1o1q13x {position:absolute;z-index:50;background-color:white;border:1px solid #e5e7eb;border-radius:0.5rem;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1),
             0 4px 6px -2px rgba(0, 0, 0, 0.05);min-width:12rem;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out,
@@ -247,322 +228,353 @@ const Oe = {
     .dropdown-container[data-placement="top-end"].svelte-1o1q13x .dropdown-content:where(.svelte-1o1q13x)::before {bottom:-6px;border-top-color:white;}.dropdown-container[data-placement="bottom-start"].svelte-1o1q13x
         .dropdown-content:where(.svelte-1o1q13x)::before {left:1rem;}.dropdown-container[data-placement="bottom-end"].svelte-1o1q13x .dropdown-content:where(.svelte-1o1q13x)::before {right:1rem;}.dropdown-container[data-placement="top-start"].svelte-1o1q13x .dropdown-content:where(.svelte-1o1q13x)::before {left:1rem;}.dropdown-container[data-placement="top-end"].svelte-1o1q13x .dropdown-content:where(.svelte-1o1q13x)::before {right:1rem;}`
 };
-function tt(n, e) {
-  ne(n, Oe);
-  let s = w(e, "isOpen", 8, !1), t = w(e, "placement", 8, "bottom-start");
-  var c = Te(), r = a(c);
-  L(r, e, "trigger", {});
-  var h = _(r, 2);
+function it(t, e) {
+  J(t, Se);
+  let a = b(e, "isOpen", 3, !1), o = b(e, "placement", 3, "bottom-start");
+  var i = Ne(), n = r(i);
+  j(n, () => e.trigger ?? M);
+  var g = x(n, 2);
   {
-    var o = (i) => {
-      var u = Ee(), g = a(u);
-      L(g, e, "default", {}), b(i, u);
+    var c = (d) => {
+      var u = Me(), h = r(u);
+      j(h, () => e.children ?? M), s(d, u);
     };
-    j(h, (i) => {
-      s() && i(o);
+    S(g, (d) => {
+      a() && d(c);
     });
   }
-  S(() => K(c, "data-placement", t())), b(n, c);
+  E(() => P(i, "data-placement", o())), s(t, i);
 }
-var Be = k('<button type="button" role="tab"> </button>'), De = k('<div class="tabs-container"><div class="flex border-b border-gray-200" role="tablist" tabindex="0"></div> <div class="mt-4"><!></div></div>');
-function at(n, e) {
-  G(e, !1);
-  let s = w(e, "tabs", 24, () => []), t = w(e, "activeTab", 12, ""), c = w(e, "variant", 8, "default");
-  function r(d) {
-    t(d);
+function Be(t, e, a, o) {
+  if (t.key === "ArrowLeft" || t.key === "ArrowRight") {
+    const i = e().findIndex((c) => c.id === a()), n = t.key === "ArrowLeft" ? -1 : 1, g = (i + n + e().length) % e().length;
+    o(e()[g].id);
   }
-  function h(d) {
-    if (d.key === "ArrowLeft" || d.key === "ArrowRight") {
-      const l = s().findIndex((v) => v.id === t()), x = d.key === "ArrowLeft" ? -1 : 1, p = (l + x + s().length) % s().length;
-      r(s()[p].id);
-    }
+}
+var Ee = (t, e, a) => e(N(a).id), Re = _('<button type="button" role="tab"> </button>'), Ue = _('<div class="tabs-container"><div class="flex border-b border-gray-200" role="tablist" tabindex="0"></div> <div class="mt-4"><!></div></div>');
+function st(t, e) {
+  V(e, !0);
+  let a = b(e, "tabs", 19, () => []), o = b(e, "activeTab", 7, ""), i = b(e, "variant", 3, "default");
+  function n(h) {
+    o(h);
   }
-  te();
-  var o = De(), i = a(o);
-  ge(i, 5, s, he, (d, l) => {
-    var x = Be(), p = a(x);
-    S(() => {
-      re(x, 1, `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${R(t()), m(l), R(c()), T(() => t() === m(l).id ? c() === "pills" ? "bg-blue-100 text-blue-700 border-blue-500" : "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300") ?? ""}`), x.disabled = (m(l), T(() => m(l).disabled)), K(x, "aria-selected", (R(t()), m(l), T(() => t() === m(l).id))), U(p, (m(l), T(() => m(l).label)));
-    }), N("click", x, () => r(m(l).id)), b(d, x);
+  var g = Ue(), c = r(g);
+  c.__keydown = [Be, a, o, n], ie(c, 21, a, se, (h, m) => {
+    var f = Re();
+    f.__click = [Ee, n, m];
+    var k = r(f);
+    E(() => {
+      W(f, 1, `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${o() === N(m).id ? i() === "pills" ? "bg-blue-100 text-blue-700 border-blue-500" : "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}`), f.disabled = N(m).disabled, P(f, "aria-selected", o() === N(m).id), U(k, N(m).label);
+    }), s(h, f);
   });
-  var u = _(i, 2), g = a(u);
-  L(
-    g,
-    e,
-    "default",
-    {
-      get activeTab() {
-        return t();
-      }
-    }
-  ), N("keydown", i, h), b(n, o), H();
+  var d = x(c, 2), u = r(d);
+  j(u, () => e.children ?? M, () => ({ activeTab: o() })), s(t, g), G();
 }
-var Ie = k('<button class="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full text-text-secondary hover:text-primary transition-colors duration-200 motion-reduce:transition-none group focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2" aria-label="Dismiss alert" type="button"><svg class="w-4 h-4 text-current group-hover:scale-110 transition-transform duration-200 motion-reduce:transition-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button>'), Pe = k('<h4 class="font-semibold text-sm mb-1" style="color: inherit;"> </h4>'), Ae = k('<p class="text-sm leading-relaxed" style="color: inherit;"> </p>'), Fe = k('<div><!> <div><div class="flex-shrink-0 mt-0.5"><!></div> <div class="flex-1 min-w-0"><!> <!> <!></div></div></div>');
-function rt(n, e) {
-  const s = A(e, ["children", "$$slots", "$$events", "$$legacy"]), t = A(s, ["variant", "title", "message", "closable", "className"]);
-  G(e, !1);
-  const c = I(), r = I(), h = I();
-  let o = w(e, "variant", 8, "info"), i = w(e, "title", 8, ""), u = w(e, "message", 8, ""), g = w(e, "closable", 8, !1), d = w(e, "className", 8, "");
-  function l(E) {
-  }
-  Y(() => {
-  }, () => {
-    P(c, {
-      info: "bg-info-surface text-info-text border border-info",
-      success: "bg-success-surface text-success-text border border-success",
-      warning: "bg-warning-surface text-warning-text border border-warning",
-      error: "bg-error-surface text-error-text border border-error"
-    });
-  }), Y(() => R(o()), () => {
-    P(r, o() === "success" || o() === "info" ? "status" : "alert");
-  }), Y(() => {
-  }, () => {
-    P(h, {
-      info: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+D(["keydown", "click"]);
+function Oe(t) {
+}
+var Te = _('<button class="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full text-text-secondary hover:text-primary transition-colors duration-200 motion-reduce:transition-none group focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2" aria-label="Dismiss alert" type="button"><svg class="w-4 h-4 text-current group-hover:scale-110 transition-transform duration-200 motion-reduce:transition-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button>'), De = _('<h4 class="font-semibold text-sm mb-1 text-inherit"> </h4>'), Pe = _('<p class="text-sm leading-relaxed text-inherit"> </p>'), Fe = _('<div><!> <div><div class="flex-shrink-0 mt-0.5"><!></div> <div class="flex-1 min-w-0"><!> <!> <!></div></div></div>');
+function lt(t, e) {
+  let a = b(e, "variant", 3, "info"), o = b(e, "title", 3, ""), i = b(e, "message", 3, ""), n = b(e, "closable", 3, !1), g = b(e, "className", 3, ""), c = Y(e, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "variant",
+    "title",
+    "message",
+    "closable",
+    "className",
+    "children"
+  ]), d = F(() => ({
+    info: "bg-info-surface text-info-text border border-info",
+    success: "bg-success-surface text-success-text border border-success",
+    warning: "bg-warning-surface text-warning-text border border-warning",
+    error: "bg-error-surface text-error-text border border-error"
+  })), u = F(() => a() === "success" || a() === "info" ? "status" : "alert"), h = F(() => ({
+    info: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
         </svg>`,
-      success: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+    success: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
         </svg>`,
-      warning: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+    warning: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
         </svg>`,
-      error: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+    error: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
         </svg>`
-    });
-  }), ae();
-  var x = Fe();
-  Q(x, () => ({
-    class: `relative rounded-md p-4 border ${m(c), R(o()), T(() => m(c)[o()]) ?? ""} transition-all duration-200 motion-reduce:transition-none ${d() ?? ""}`,
-    role: m(r),
-    "aria-live": o() === "success" || o() === "info" ? "polite" : "assertive",
+  }));
+  var m = Fe();
+  A(m, () => ({
+    class: `relative rounded-md p-4 border ${N(d)[a()] ?? ""} transition-all duration-200 motion-reduce:transition-none ${g() ?? ""}`,
+    role: N(u),
+    "aria-live": a() === "success" || a() === "info" ? "polite" : "assertive",
     "aria-atomic": "true",
-    ...t
+    ...c
   }));
-  var p = a(x);
+  var f = r(m);
   {
-    var v = (E) => {
-      var B = Ie();
-      N("click", B, l), b(E, B);
+    var k = (l) => {
+      var C = Te();
+      C.__click = [Oe], s(l, C);
     };
-    j(p, (E) => {
-      g() && E(v);
+    S(f, (l) => {
+      n() && l(k);
     });
   }
-  var y = _(p, 2), f = a(y), z = a(f);
-  pe(z, () => (m(h), R(o()), T(() => m(h)[o()])));
-  var q = _(f, 2), $ = a(q);
+  var p = x(f, 2), w = r(p), y = r(w);
+  de(y, () => N(h)[a()]);
+  var v = x(w, 2), q = r(v);
   {
-    var M = (E) => {
-      var B = Pe(), X = a(B);
-      S(() => U(X, i())), b(E, B);
+    var z = (l) => {
+      var C = De(), T = r(C);
+      E(() => U(T, o())), s(l, C);
     };
-    j($, (E) => {
-      i() && E(M);
+    S(q, (l) => {
+      o() && l(z);
     });
   }
-  var C = _($, 2);
+  var L = x(q, 2);
   {
-    var O = (E) => {
-      var B = Ae(), X = a(B);
-      S(() => U(X, u())), b(E, B);
+    var B = (l) => {
+      var C = Pe(), T = r(C);
+      E(() => U(T, i())), s(l, C);
     };
-    j(C, (E) => {
-      u() && E(O);
+    S(L, (l) => {
+      i() && l(B);
     });
   }
-  var F = _(C, 2);
-  L(F, e, "default", {}), S(() => re(y, 1, `flex items-start gap-3 ${g() ? "pr-8" : ""}`)), b(n, x), H();
+  var O = x(L, 2);
+  j(O, () => e.children ?? M), E(() => W(p, 1, `flex items-start gap-3 ${n() ? "pr-8" : ""}`)), s(t, m);
 }
-var Re = k('<div class="relative group"><img alt="" class="w-full h-32 object-cover rounded-lg border border-gray-300"/> <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"><div class="flex gap-2"><!> <!></div></div></div>'), Ue = k('<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors cursor-pointer" role="button" tabindex="0"><div class="space-y-3"><div class="w-12 h-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center"><span class="text-2xl">📷</span></div> <div><p class="font-medium text-gray-900"> </p> <p class="text-sm text-gray-500">Click to choose a file</p></div></div></div>'), Ye = k('<div class="space-y-3"><!> <input type="file" class="hidden"/></div>');
-function ot(n, e) {
-  let s = w(e, "value", 12, null), t = w(e, "disabled", 8, !1), c = w(e, "accept", 8, "image/*"), r = w(e, "placeholder", 8, "No image selected"), h = I();
-  function o(v) {
-    const y = v.target;
-    if (!y.files || y.files.length === 0) return;
-    const f = y.files[0], z = URL.createObjectURL(f);
-    s(z);
+D(["click"]);
+function Ie(t, e) {
+  const a = t.target;
+  if (!a.files || a.files.length === 0) return;
+  const o = a.files[0];
+  if (typeof URL < "u" && URL.createObjectURL) {
+    const i = URL.createObjectURL(o);
+    e(i);
   }
-  function i() {
-    s() && URL.revokeObjectURL(s()), s(null);
+}
+var Ae = _('<div class="relative group"><img alt="" class="w-full h-32 object-cover rounded-lg border border-gray-300"/> <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"><div class="flex gap-2"><!> <!></div></div></div>'), Ye = (t, e) => t.key === "Enter" && e(), Ke = _('<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors cursor-pointer" role="button" tabindex="0"><div class="space-y-3"><div class="w-12 h-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center"><span class="text-2xl">📷</span></div> <div><p class="font-medium text-gray-900"> </p> <p class="text-sm text-gray-500">Click to choose a file</p></div></div></div>'), He = _('<div class="space-y-3"><!> <input type="file" class="hidden"/></div>');
+function dt(t, e) {
+  let a = b(e, "value", 7, null), o = b(e, "disabled", 3, !1), i = b(e, "accept", 3, "image/*"), n = b(e, "placeholder", 3, "No image selected"), g = Z(void 0);
+  function c() {
+    a() && typeof URL < "u" && URL.revokeObjectURL && URL.revokeObjectURL(a()), a(null);
   }
-  function u() {
-    var v;
-    (v = m(h)) == null || v.click();
+  function d() {
+    var p;
+    (p = N(g)) == null || p.click();
   }
-  var g = Ye(), d = a(g);
+  var u = He(), h = r(u);
   {
-    var l = (v) => {
-      var y = Re(), f = a(y), z = _(f, 2), q = a(z), $ = a(q);
-      ee($, {
+    var m = (p) => {
+      var w = Ae(), y = r(w), v = x(y, 2), q = r(v), z = r(q);
+      H(z, {
         variant: "secondary",
         size: "sm",
+        onclick: d,
         get disabled() {
-          return t();
+          return o();
         },
-        $$events: { click: u },
-        children: (C, O) => {
-          var F = Z("Change");
-          b(C, F);
+        children: (B, O) => {
+          var l = K("Change");
+          s(B, l);
         },
         $$slots: { default: !0 }
       });
-      var M = _($, 2);
-      ee(M, {
+      var L = x(z, 2);
+      H(L, {
         variant: "danger",
         size: "sm",
+        onclick: c,
         get disabled() {
-          return t();
+          return o();
         },
-        $$events: { click: i },
-        children: (C, O) => {
-          var F = Z("Remove");
-          b(C, F);
+        children: (B, O) => {
+          var l = K("Remove");
+          s(B, l);
         },
         $$slots: { default: !0 }
-      }), S(() => K(f, "src", s())), b(v, y);
-    }, x = (v) => {
-      var y = Ue(), f = a(y), z = _(a(f), 2), q = a(z), $ = a(q);
-      S(() => U($, r())), N("click", y, u), N("keydown", y, (M) => M.key === "Enter" && u()), b(v, y);
+      }), E(() => P(y, "src", a())), s(p, w);
+    }, f = (p) => {
+      var w = Ke();
+      w.__click = d, w.__keydown = [Ye, d];
+      var y = r(w), v = x(r(y), 2), q = r(v), z = r(q);
+      E(() => U(z, n())), s(p, w);
     };
-    j(d, (v) => {
-      s() ? v(l) : v(x, !1);
+    S(h, (p) => {
+      a() ? p(m) : p(f, !1);
     });
   }
-  var p = _(d, 2);
-  we(p, (v) => P(h, v), () => m(h)), S(() => K(p, "accept", c())), N("change", p, o), b(n, g);
+  var k = x(h, 2);
+  k.__change = [Ie, a], me(k, (p) => $(g, p), () => N(g)), E(() => P(k, "accept", i())), s(t, u);
 }
-var Ke = k('<label class="text-sm font-medium cursor-pointer"> </label>'), He = k('<div class="flex items-center gap-2"><input/> <!></div>');
-function Ge(n, e) {
-  const s = A(e, ["children", "$$slots", "$$events", "$$legacy"]), t = A(s, ["checked", "disabled", "label"]);
-  G(e, !1);
-  const c = I();
-  let r = w(e, "checked", 12, !1), h = w(e, "disabled", 8, !1), o = w(e, "label", 8, ""), i = I();
-  typeof window < "u" ? P(i, `checkbox-${Math.random().toString(36).substr(2, 9)}`) : P(i, `checkbox-ssr-${Date.now()}`);
-  function u(p) {
-    const v = p.target;
-    r(v.checked);
-  }
-  Y(() => {
-  }, () => {
-    P(c, [
-      "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded",
-      "focus:ring-blue-500 focus:ring-2",
-      "disabled:opacity-50 disabled:cursor-not-allowed"
-    ].join(" "));
-  }), ae(), te();
-  var g = He(), d = a(g);
-  Q(
-    d,
+D(["click", "keydown", "change"]);
+var Ge = _('<p class="text-sm text-text-secondary mt-1"> </p>'), Ve = (t, e) => $(e, !N(e)), We = ee('<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> Preview', 1), Je = ee('<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg> Code', 1), Qe = _('<div class="component-preview svelte-1uavm9q"><!></div>'), Xe = _('<div><div class="px-6 py-4 border-b border-border bg-surface-secondary"><div class="flex items-center justify-between"><div><h3 class="text-lg font-semibold text-text"> </h3> <!></div> <button class="flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text hover:bg-surface rounded-md transition-colors duration-200"><!></button></div></div> <div class="p-6"><!></div></div>');
+const Ze = {
+  hash: "svelte-1uavm9q",
+  code: ".component-preview.svelte-1uavm9q {display:flex;min-height:100px;align-items:center;justify-content:center}"
+};
+function ct(t, e) {
+  J(t, Ze);
+  let a = b(e, "description", 3, ""), o = b(e, "language", 3, "svelte"), i = b(e, "className", 3, ""), n = Y(e, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "title",
+    "description",
+    "code",
+    "language",
+    "className",
+    "children"
+  ]), g = Z(!1);
+  var c = Xe();
+  A(
+    c,
     () => ({
-      type: "checkbox",
-      id: m(i),
-      checked: r(),
-      disabled: h(),
-      class: m(c),
-      ...t
+      class: `component-demo bg-surface border border-border rounded-lg overflow-hidden ${i() ?? ""}`,
+      ...n
     }),
     void 0,
     void 0,
-    void 0,
-    !0
+    "svelte-1uavm9q"
   );
-  var l = _(d, 2);
+  var d = r(c), u = r(d), h = r(u), m = r(h), f = r(m), k = x(m, 2);
   {
-    var x = (p) => {
-      var v = Ke(), y = a(v);
-      S(() => {
-        K(v, "for", m(i)), U(y, o());
-      }), b(p, v);
+    var p = (l) => {
+      var C = Ge(), T = r(C);
+      E(() => U(T, a())), s(l, C);
     };
-    j(l, (p) => {
-      o() && p(x);
+    S(k, (l) => {
+      a() && l(p);
     });
   }
-  N("change", d, u), b(n, g), H();
+  var w = x(h, 2);
+  w.__click = [Ve, g];
+  var y = r(w);
+  {
+    var v = (l) => {
+      var C = We();
+      s(l, C);
+    }, q = (l) => {
+      var C = Je();
+      s(l, C);
+    };
+    S(y, (l) => {
+      N(g) ? l(v) : l(q, !1);
+    });
+  }
+  var z = x(d, 2), L = r(z);
+  {
+    var B = (l) => {
+      ce(l, {
+        get code() {
+          return e.code;
+        },
+        get language() {
+          return o();
+        }
+      });
+    }, O = (l) => {
+      var C = Qe(), T = r(C);
+      j(T, () => e.children ?? M), s(l, C);
+    };
+    S(L, (l) => {
+      N(g) ? l(B) : l(O, !1);
+    });
+  }
+  E(() => {
+    U(f, e.title), P(w, "aria-label", N(g) ? "Show preview" : "Show code");
+  }), s(t, c);
 }
-var Je = k('<div class="space-y-4"><!> <!> <!> <!></div> <div class="pt-4"><!></div>', 1), Ve = k(`<div><div class="mb-6"><h2 class="text-2xl font-bold text-text mb-2">Get in Touch</h2> <p class="text-text-secondary">We'd love to hear from you. Send us a message and we'll respond as
+D(["click"]);
+var $e = _('<div class="space-y-4"><!> <!> <!> <!></div> <div class="pt-4"><!></div>', 1), et = _(`<div><div class="mb-6"><h2 class="text-2xl font-bold text-text mb-2">Get in Touch</h2> <p class="text-text-secondary">We'd love to hear from you. Send us a message and we'll respond as
             soon as possible.</p></div> <!></div>`);
-function st(n, e) {
-  let s = w(e, "className", 8, ""), t = I({ name: "", email: "", message: "", subscribe: !1 });
-  function c(o) {
-    o.detail.data.name, o.detail.data.email, o.detail.data.message, o.detail.data.subscribe;
+function vt(t, e) {
+  V(e, !0);
+  let a = b(e, "className", 3, ""), o = le({ name: "", email: "", message: "", subscribe: !1 });
+  function i(c) {
+    const d = new FormData(c.target), u = {
+      name: d.get("name") || "",
+      email: d.get("email") || "",
+      message: d.get("message") || "",
+      subscribe: d.get("subscribe") === "on" || !1
+    };
+    console.log("Form submitted with data:", u);
   }
-  var r = Ve(), h = _(a(r), 2);
-  ke(h, {
+  var n = et(), g = x(r(n), 2);
+  be(g, {
+    onsubmit: i,
     className: "space-y-4",
-    $$events: { submit: c },
-    children: (o, i) => {
-      var u = Je(), g = D(u), d = a(g);
-      oe(d, {
+    children: (c, d) => {
+      var u = $e(), h = R(u), m = r(h);
+      Q(m, {
         type: "text",
+        name: "name",
         label: "Name",
         placeholder: "Enter your name",
         get value() {
-          return m(t), T(() => m(t).name);
+          return o.name;
         },
-        $$events: {
-          input: (f) => V(t, m(t).name = f.target.value)
-        }
+        oninput: (v) => o.name = v.target.value
       });
-      var l = _(d, 2);
-      oe(l, {
+      var f = x(m, 2);
+      Q(f, {
         type: "email",
+        name: "email",
         label: "Email",
         placeholder: "Enter your email",
         get value() {
-          return m(t), T(() => m(t).email);
+          return o.email;
         },
-        $$events: {
-          input: (f) => V(t, m(t).email = f.target.value)
-        }
+        oninput: (v) => o.email = v.target.value
       });
-      var x = _(l, 2);
-      xe(x, {
+      var k = x(f, 2);
+      ve(k, {
+        name: "message",
         label: "Message",
         placeholder: "Enter your message",
         rows: 4,
         get value() {
-          return m(t), T(() => m(t).message);
+          return o.message;
         },
-        $$events: {
-          input: (f) => V(t, m(t).message = f.target.value)
-        }
+        oninput: (v) => o.message = v.target.value
       });
-      var p = _(x, 2);
-      Ge(p, {
+      var p = x(k, 2);
+      ue(p, {
+        name: "subscribe",
         label: "Subscribe to updates",
         get checked() {
-          return m(t), T(() => m(t).subscribe);
+          return o.subscribe;
         },
-        $$events: {
-          change: (f) => V(t, m(t).subscribe = f.target.checked)
-        }
+        onchange: (v) => o.subscribe = v.target.checked
       });
-      var v = _(g, 2), y = a(v);
-      ee(y, {
+      var w = x(h, 2), y = r(w);
+      H(y, {
         type: "submit",
         variant: "primary",
         size: "md",
-        children: (f, z) => {
-          var q = Z("Send Message");
-          b(f, q);
+        children: (v, q) => {
+          var z = K("Send Message");
+          s(v, z);
         },
         $$slots: { default: !0 }
-      }), b(o, u);
+      }), s(c, u);
     },
     $$slots: { default: !0 }
-  }), S(() => re(r, 1, `max-w-md mx-auto ${s() ?? ""}`)), b(n, r);
+  }), E(() => W(n, 1, `max-w-md mx-auto ${a() ?? ""}`)), s(t, n), G();
 }
 export {
-  rt as Alert,
-  st as ContactForm,
-  tt as Dropdown,
-  ke as Form,
-  ot as ImageUpload,
-  Xe as Layout,
-  Ze as Modal,
-  et as SlideUp,
-  at as Tabs
+  lt as Alert,
+  ct as ComponentDemo,
+  vt as ContactForm,
+  it as Dropdown,
+  be as Form,
+  dt as ImageUpload,
+  rt as Layout,
+  ot as Modal,
+  nt as SlideUp,
+  st as Tabs
 };