@proyecto-viviana/ui 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,16 +1,16 @@
-import { delegateEvents, createComponent, mergeProps as mergeProps$1, template, insert, effect, className, addEventListener, setAttribute, memo, spread, setStyleProperty } from 'solid-js/web';
-import { createContext, mergeProps, splitProps, Show, createSignal, createEffect, useContext, createMemo, For } from 'solid-js';
-import { Button as Button$1, ToggleSwitch as ToggleSwitch$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Link as Link$1 } from '@proyecto-viviana/solidaria-components';
-import { createTextField, createFocusRing, createProgressBar, createSeparator } from '@proyecto-viviana/solidaria';
-
 // src/button/Button.tsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { splitProps, mergeProps as solidMergeProps } from "solid-js";
+import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
 function Button(props) {
   const defaultProps = {
     variant: "primary",
     buttonStyle: "fill",
     size: "md"
   };
-  const merged = mergeProps(defaultProps, props);
+  const merged = solidMergeProps(defaultProps, props);
   const [local, headlessProps] = splitProps(merged, ["children", "variant", "buttonStyle", "size", "fullWidth", "staticColor", "class"]);
   const getClassName = (renderProps) => {
     const classList = ["vui-button", `vui-button--${local.buttonStyle}`, `vui-button--${local.variant}`, `vui-button--${local.size}`];
@@ -25,7 +25,7 @@ function Button(props) {
     }
     return classList.join(" ");
   };
-  return createComponent(Button$1, mergeProps$1(headlessProps, {
+  return _$createComponent(HeadlessButton, _$mergeProps(headlessProps, {
     "class": getClassName,
     get ["data-variant"]() {
       return local.variant;
@@ -41,8 +41,17 @@ function Button(props) {
     }
   }));
 }
-var _tmpl$ = /* @__PURE__ */ template(`<span>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+
+// src/badge/index.tsx
+import { template as _$template } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { createComponent as _$createComponent2 } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { Show } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ _$template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ _$template(`<div>`);
 var variantStyles = {
   primary: "bg-primary-500 text-white",
   secondary: "bg-bg-300 text-primary-300",
@@ -60,8 +69,8 @@ function Badge(props) {
   const variant = () => props.variant ?? "accent";
   const size = () => props.size ?? "md";
   return (() => {
-    var _el$ = _tmpl$2();
-    insert(_el$, createComponent(Show, {
+    var _el$ = _$getNextElement(_tmpl$2);
+    _$insert(_el$, _$createComponent2(Show, {
       get when() {
         return props.count !== void 0;
       },
@@ -69,19 +78,32 @@ function Badge(props) {
         return props.children;
       },
       get children() {
-        var _el$2 = _tmpl$();
-        insert(_el$2, () => props.count);
+        var _el$2 = _$getNextElement(_tmpl$);
+        _$insert(_el$2, () => props.count);
         return _el$2;
       }
     }));
-    effect(() => className(_el$, `flex items-center justify-center rounded-full border-b border-white font-semibold ${variantStyles[variant()]} ${sizeStyles[size()]} ${props.class ?? ""}`));
+    _$effect(() => _$className(_el$, `flex items-center justify-center rounded-full border-b border-white font-semibold ${variantStyles[variant()]} ${sizeStyles[size()]} ${props.class ?? ""}`));
     return _el$;
   })();
 }
-var _tmpl$3 = /* @__PURE__ */ template(`<span class="font-semibold font-jost">`);
-var _tmpl$22 = /* @__PURE__ */ template(`<span class=opacity-50>|`);
-var _tmpl$32 = /* @__PURE__ */ template(`<button class="hover:opacity-70 transition-opacity ml-2"aria-label=Dismiss>\u2715`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div role=alert><div class="flex items-center gap-3 flex-1"><div class=flex-1>`);
+
+// src/alert/index.tsx
+import { template as _$template2 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { className as _$className2 } from "solid-js/web";
+import { effect as _$effect2 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { createComponent as _$createComponent3 } from "solid-js/web";
+import { getNextElement as _$getNextElement2 } from "solid-js/web";
+import { insert as _$insert2 } from "solid-js/web";
+import { Show as Show2 } from "solid-js";
+var _tmpl$3 = /* @__PURE__ */ _$template2(`<span class="font-semibold font-jost">`);
+var _tmpl$22 = /* @__PURE__ */ _$template2(`<span class=opacity-50>|`);
+var _tmpl$32 = /* @__PURE__ */ _$template2(`<button class="hover:opacity-70 transition-opacity ml-2"aria-label=Dismiss>\u2715`);
+var _tmpl$4 = /* @__PURE__ */ _$template2(`<div role=alert><div class="flex items-center gap-3 flex-1"><!$><!/><div class=flex-1></div><!$><!/>`);
 var variantStyles2 = {
   info: "bg-primary-700 text-primary-200 border border-primary-500",
   success: "bg-success-600 text-success-100 border border-success-400",
@@ -91,39 +113,51 @@ var variantStyles2 = {
 function Alert(props) {
   const variant = () => props.variant ?? "info";
   return (() => {
-    var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$5 = _el$2.firstChild;
-    insert(_el$2, createComponent(Show, {
+    var _el$ = _$getNextElement2(_tmpl$4), _el$2 = _el$.firstChild, _el$7 = _el$2.firstChild, [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling), _el$5 = _el$8.nextSibling, _el$9 = _el$5.nextSibling, [_el$0, _co$2] = _$getNextMarker(_el$9.nextSibling);
+    _$insert2(_el$2, _$createComponent3(Show2, {
       get when() {
         return props.title;
       },
       get children() {
         return [(() => {
-          var _el$3 = _tmpl$3();
-          insert(_el$3, () => props.title);
+          var _el$3 = _$getNextElement2(_tmpl$3);
+          _$insert2(_el$3, () => props.title);
           return _el$3;
-        })(), _tmpl$22()];
+        })(), _$getNextElement2(_tmpl$22)];
       }
-    }), _el$5);
-    insert(_el$5, () => props.children);
-    insert(_el$2, createComponent(Show, {
+    }), _el$8, _co$);
+    _$insert2(_el$5, () => props.children);
+    _$insert2(_el$2, _$createComponent3(Show2, {
       get when() {
         return props.dismissible;
       },
       get children() {
-        var _el$6 = _tmpl$32();
-        addEventListener(_el$6, "click", props.onDismiss, true);
+        var _el$6 = _$getNextElement2(_tmpl$32);
+        _$addEventListener(_el$6, "click", props.onDismiss, true);
+        _$runHydrationEvents();
         return _el$6;
       }
-    }), null);
-    effect(() => className(_el$, `flex items-center min-h-[50px] font-normal rounded-lg px-4 py-2 ${variantStyles2[variant()]} ${props.class ?? ""}`));
+    }), _el$0, _co$2);
+    _$effect2(() => _$className2(_el$, `flex items-center min-h-[50px] font-normal rounded-lg px-4 py-2 ${variantStyles2[variant()]} ${props.class ?? ""}`));
     return _el$;
   })();
 }
-delegateEvents(["click"]);
-var _tmpl$5 = /* @__PURE__ */ template(`<img class="w-full h-full object-cover">`);
-var _tmpl$23 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<div><div>`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class="flex -space-x-2">`);
+_$delegateEvents(["click"]);
+
+// src/avatar/index.tsx
+import { template as _$template3 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker2 } from "solid-js/web";
+import { className as _$className3 } from "solid-js/web";
+import { insert as _$insert3 } from "solid-js/web";
+import { createComponent as _$createComponent4 } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect3 } from "solid-js/web";
+import { getNextElement as _$getNextElement3 } from "solid-js/web";
+import { Show as Show3 } from "solid-js";
+var _tmpl$5 = /* @__PURE__ */ _$template3(`<img class="w-full h-full object-cover">`);
+var _tmpl$23 = /* @__PURE__ */ _$template3(`<span>`);
+var _tmpl$33 = /* @__PURE__ */ _$template3(`<div><div></div><!$><!/>`);
+var _tmpl$42 = /* @__PURE__ */ _$template3(`<div class="flex -space-x-2">`);
 var sizeStyles2 = {
   xs: {
     container: "w-6 h-6",
@@ -160,25 +194,25 @@ function Avatar(props) {
     return "?";
   };
   return (() => {
-    var _el$ = _tmpl$33(), _el$2 = _el$.firstChild;
-    insert(_el$2, createComponent(Show, {
+    var _el$ = _$getNextElement3(_tmpl$33), _el$2 = _el$.firstChild, _el$5 = _el$2.nextSibling, [_el$6, _co$] = _$getNextMarker2(_el$5.nextSibling);
+    _$insert3(_el$2, _$createComponent4(Show3, {
       get when() {
         return props.src;
       },
       get fallback() {
         return (() => {
-          var _el$5 = _tmpl$23();
-          insert(_el$5, initials);
-          effect(() => className(_el$5, `${styles().text} font-medium text-primary-300`));
-          return _el$5;
+          var _el$7 = _$getNextElement3(_tmpl$23);
+          _$insert3(_el$7, initials);
+          _$effect3(() => _$className3(_el$7, `${styles().text} font-medium text-primary-300`));
+          return _el$7;
         })();
       },
       get children() {
-        var _el$3 = _tmpl$5();
-        effect((_p$) => {
+        var _el$3 = _$getNextElement3(_tmpl$5);
+        _$effect3((_p$) => {
           var _v$ = props.src, _v$2 = props.alt ?? "Avatar";
-          _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$3, "alt", _p$.t = _v$2);
+          _v$ !== _p$.e && _$setAttribute(_el$3, "src", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$3, "alt", _p$.t = _v$2);
           return _p$;
         }, {
           e: void 0,
@@ -187,20 +221,20 @@ function Avatar(props) {
         return _el$3;
       }
     }));
-    insert(_el$, createComponent(Show, {
+    _$insert3(_el$, _$createComponent4(Show3, {
       get when() {
         return props.online !== void 0;
       },
       get children() {
-        var _el$4 = _tmpl$23();
-        effect(() => className(_el$4, `absolute bottom-0 right-0 ${styles().indicator} rounded-full ring-2 ring-bg-400 ${props.online ? "bg-success-400" : "bg-bg-light"}`));
+        var _el$4 = _$getNextElement3(_tmpl$23);
+        _$effect3(() => _$className3(_el$4, `absolute bottom-0 right-0 ${styles().indicator} rounded-full ring-2 ring-bg-400 ${props.online ? "bg-success-400" : "bg-bg-light"}`));
         return _el$4;
       }
-    }), null);
-    effect((_p$) => {
+    }), _el$6, _co$);
+    _$effect3((_p$) => {
       var _v$3 = `relative inline-block ${props.class ?? ""}`, _v$4 = `${styles().container} rounded-full overflow-hidden bg-bg-200 flex items-center justify-center ring-2 ring-accent/50`;
-      _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
-      _v$4 !== _p$.t && className(_el$2, _p$.t = _v$4);
+      _v$3 !== _p$.e && _$className3(_el$, _p$.e = _v$3);
+      _v$4 !== _p$.t && _$className3(_el$2, _p$.t = _v$4);
       return _p$;
     }, {
       e: void 0,
@@ -211,13 +245,36 @@ function Avatar(props) {
 }
 function AvatarGroup(props) {
   return (() => {
-    var _el$6 = _tmpl$42();
-    insert(_el$6, () => props.children);
-    return _el$6;
+    var _el$8 = _$getNextElement3(_tmpl$42);
+    _$insert3(_el$8, () => props.children);
+    return _el$8;
   })();
 }
-var _tmpl$6 = /* @__PURE__ */ template(`<span><span>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<span class=text-primary-200>`);
+
+// src/switch/index.tsx
+import { template as _$template5 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents2 } from "solid-js/web";
+import { className as _$className5 } from "solid-js/web";
+import { effect as _$effect5 } from "solid-js/web";
+import { getNextElement as _$getNextElement5 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents2 } from "solid-js/web";
+import { insert as _$insert5 } from "solid-js/web";
+import { memo as _$memo3 } from "solid-js/web";
+import { createSignal, createEffect } from "solid-js";
+
+// src/switch/ToggleSwitch.tsx
+import { template as _$template4 } from "solid-js/web";
+import { insert as _$insert4 } from "solid-js/web";
+import { memo as _$memo2 } from "solid-js/web";
+import { className as _$className4 } from "solid-js/web";
+import { effect as _$effect4 } from "solid-js/web";
+import { getNextElement as _$getNextElement4 } from "solid-js/web";
+import { createComponent as _$createComponent5 } from "solid-js/web";
+import { mergeProps as _$mergeProps2 } from "solid-js/web";
+import { splitProps as splitProps2, mergeProps as solidMergeProps2 } from "solid-js";
+import { ToggleSwitch as HeadlessToggleSwitch } from "@proyecto-viviana/solidaria-components";
+var _tmpl$6 = /* @__PURE__ */ _$template4(`<span><span>`);
+var _tmpl$24 = /* @__PURE__ */ _$template4(`<span class=text-primary-200>`);
 var sizeStyles3 = {
   sm: {
     track: "h-5 w-9",
@@ -239,8 +296,8 @@ function ToggleSwitch(props) {
   const defaultProps = {
     size: "md"
   };
-  const merged = mergeProps(defaultProps, props);
-  const [local, headlessProps] = splitProps(merged, ["size", "class", "children"]);
+  const merged = solidMergeProps2(defaultProps, props);
+  const [local, headlessProps] = splitProps2(merged, ["size", "class", "children"]);
   const size = () => sizeStyles3[local.size];
   const getClassName = (renderProps) => {
     const base = "inline-flex items-center gap-2 cursor-pointer";
@@ -248,30 +305,30 @@ function ToggleSwitch(props) {
     const custom = local.class || "";
     return [base, disabledClass, custom].filter(Boolean).join(" ");
   };
-  return createComponent(ToggleSwitch$1, mergeProps$1(headlessProps, {
+  return _$createComponent5(HeadlessToggleSwitch, _$mergeProps2(headlessProps, {
     "class": getClassName,
     children: (renderProps) => [(() => {
-      var _el$ = _tmpl$6(), _el$2 = _el$.firstChild;
-      effect((_p$) => {
+      var _el$ = _$getNextElement4(_tmpl$6), _el$2 = _el$.firstChild;
+      _$effect4((_p$) => {
         var _v$ = ["relative rounded-full transition-colors duration-200", "focus-within:ring-2 focus-within:ring-accent-300 focus-within:ring-offset-2 focus-within:ring-offset-bg-400", size().track, renderProps.isSelected ? "bg-accent" : "bg-bg-300", renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer"].join(" "), _v$2 = ["absolute top-0.5 left-0.5 rounded-full bg-white shadow transition-transform duration-200", size().thumb, renderProps.isSelected ? size().translate : "translate-x-0"].join(" ");
-        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-        _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+        _v$ !== _p$.e && _$className4(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && _$className4(_el$2, _p$.t = _v$2);
         return _p$;
       }, {
         e: void 0,
         t: void 0
       });
       return _el$;
-    })(), memo(() => memo(() => !!local.children)() && (() => {
-      var _el$3 = _tmpl$24();
-      insert(_el$3, () => local.children);
+    })(), _$memo2(() => _$memo2(() => !!local.children)() && (() => {
+      var _el$3 = _$getNextElement4(_tmpl$24);
+      _$insert4(_el$3, () => local.children);
       return _el$3;
     })())]
   }));
 }
 
 // src/switch/index.tsx
-var _tmpl$7 = /* @__PURE__ */ template(`<div><div></div><div class="flex z-10 h-8 justify-around"><button type=button><span></span></button><button type=button><span>`);
+var _tmpl$7 = /* @__PURE__ */ _$template5(`<div><div></div><div class="flex z-10 h-8 justify-around"><button type=button><span></span></button><button type=button><span>`);
 function TabSwitch(props) {
   const [leftSelected, setLeftSelected] = createSignal(props.value ? props.value === props.options[0]?.value : true);
   createEffect(() => {
@@ -292,16 +349,16 @@ function TabSwitch(props) {
   const textSelected = "font-extrabold text-primary-300";
   const textUnselected = "font-medium text-primary-600 tracking-wider";
   return (() => {
-    var _el$ = _tmpl$7(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild;
+    var _el$ = _$getNextElement5(_tmpl$7), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild;
     _el$.$$click = toggle;
-    insert(_el$5, () => props.options[0]?.label ?? "TENDENCIAS");
-    insert(_el$7, () => props.options[1]?.label ?? "\xDALTIMOS");
-    effect((_p$) => {
+    _$insert5(_el$5, () => props.options[0]?.label ?? "TENDENCIAS");
+    _$insert5(_el$7, () => props.options[1]?.label ?? "\xDALTIMOS");
+    _$effect5((_p$) => {
       var _v$ = `relative bg-bg-400 rounded-full w-[250px] cursor-pointer ${props.class ?? ""}`, _v$2 = `${leftSelected() ? leftSelectedStyle : rightSelectedStyle} transition-all duration-500 ease-in-out z-0 absolute bg-primary-600 rounded-full h-8 border-accent-300`, _v$3 = `${leftSelected() ? textSelected : textUnselected} transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`, _v$4 = `${leftSelected() ? textUnselected : textSelected} transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
+      _v$ !== _p$.e && _$className5(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$className5(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && _$className5(_el$4, _p$.a = _v$3);
+      _v$4 !== _p$.o && _$className5(_el$6, _p$.o = _v$4);
       return _p$;
     }, {
       e: void 0,
@@ -309,17 +366,31 @@ function TabSwitch(props) {
       a: void 0,
       o: void 0
     });
+    _$runHydrationEvents2();
     return _el$;
   })();
 }
-delegateEvents(["click"]);
-var _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1 5L4.5 8.5L11 1"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
-var _tmpl$25 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 2"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1 1H11"stroke=currentColor stroke-width=2 stroke-linecap=round>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$43 = /* @__PURE__ */ template(`<span class="text-sm font-medium text-primary-200">`);
-var _tmpl$52 = /* @__PURE__ */ template(`<div class="flex flex-col gap-2">`);
-var _tmpl$62 = /* @__PURE__ */ template(`<span class="text-sm text-primary-400">`);
-var _tmpl$72 = /* @__PURE__ */ template(`<span class="text-sm text-danger-400">`);
+_$delegateEvents2(["click"]);
+
+// src/checkbox/index.tsx
+import { template as _$template6 } from "solid-js/web";
+import { memo as _$memo4 } from "solid-js/web";
+import { className as _$className6 } from "solid-js/web";
+import { insert as _$insert6 } from "solid-js/web";
+import { createComponent as _$createComponent6 } from "solid-js/web";
+import { mergeProps as _$mergeProps3 } from "solid-js/web";
+import { setAttribute as _$setAttribute2 } from "solid-js/web";
+import { effect as _$effect6 } from "solid-js/web";
+import { getNextElement as _$getNextElement6 } from "solid-js/web";
+import { splitProps as splitProps3, mergeProps as solidMergeProps3, Show as Show4 } from "solid-js";
+import { Checkbox as HeadlessCheckbox, CheckboxGroup as HeadlessCheckboxGroup } from "@proyecto-viviana/solidaria-components";
+var _tmpl$8 = /* @__PURE__ */ _$template6(`<svg viewBox="0 0 12 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1 5L4.5 8.5L11 1"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
+var _tmpl$25 = /* @__PURE__ */ _$template6(`<svg viewBox="0 0 12 2"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1 1H11"stroke=currentColor stroke-width=2 stroke-linecap=round>`);
+var _tmpl$34 = /* @__PURE__ */ _$template6(`<span>`);
+var _tmpl$43 = /* @__PURE__ */ _$template6(`<span class="text-sm font-medium text-primary-200">`);
+var _tmpl$52 = /* @__PURE__ */ _$template6(`<div class="flex flex-col gap-2">`);
+var _tmpl$62 = /* @__PURE__ */ _$template6(`<span class="text-sm text-primary-400">`);
+var _tmpl$72 = /* @__PURE__ */ _$template6(`<span class="text-sm text-danger-400">`);
 var sizeStyles4 = {
   sm: {
     box: "h-4 w-4",
@@ -339,15 +410,15 @@ var sizeStyles4 = {
 };
 function CheckIcon(props) {
   return (() => {
-    var _el$ = _tmpl$8();
-    effect(() => setAttribute(_el$, "class", props.class));
+    var _el$ = _$getNextElement6(_tmpl$8);
+    _$effect6(() => _$setAttribute2(_el$, "class", props.class));
     return _el$;
   })();
 }
 function IndeterminateIcon(props) {
   return (() => {
-    var _el$2 = _tmpl$25();
-    effect(() => setAttribute(_el$2, "class", props.class));
+    var _el$2 = _$getNextElement6(_tmpl$25);
+    _$effect6(() => _$setAttribute2(_el$2, "class", props.class));
     return _el$2;
   })();
 }
@@ -355,8 +426,8 @@ function Checkbox(props) {
   const defaultProps = {
     size: "md"
   };
-  const merged = mergeProps(defaultProps, props);
-  const [local, headlessProps] = splitProps(merged, ["size", "class", "children"]);
+  const merged = solidMergeProps3(defaultProps, props);
+  const [local, headlessProps] = splitProps3(merged, ["size", "class", "children"]);
   const size = () => sizeStyles4[local.size];
   const getClassName = (renderProps) => {
     const base = "inline-flex items-center gap-2 cursor-pointer";
@@ -364,7 +435,7 @@ function Checkbox(props) {
     const custom = local.class || "";
     return [base, disabledClass, custom].filter(Boolean).join(" ");
   };
-  return createComponent(Checkbox$1, mergeProps$1(headlessProps, {
+  return _$createComponent6(HeadlessCheckbox, _$mergeProps3(headlessProps, {
     "class": getClassName,
     children: (renderProps) => {
       const boxClasses = () => {
@@ -395,36 +466,36 @@ function Checkbox(props) {
         return [base, sizeClass, disabledClass].filter(Boolean).join(" ");
       };
       return [(() => {
-        var _el$3 = _tmpl$34();
-        insert(_el$3, createComponent(Show, {
+        var _el$3 = _$getNextElement6(_tmpl$34);
+        _$insert6(_el$3, _$createComponent6(Show4, {
           get when() {
             return !renderProps.isIndeterminate;
           },
           get fallback() {
-            return createComponent(IndeterminateIcon, {
+            return _$createComponent6(IndeterminateIcon, {
               get ["class"]() {
                 return iconClasses();
               }
             });
           },
           get children() {
-            return createComponent(CheckIcon, {
+            return _$createComponent6(CheckIcon, {
               get ["class"]() {
                 return iconClasses();
               }
             });
           }
         }));
-        effect(() => className(_el$3, boxClasses()));
+        _$effect6(() => _$className6(_el$3, boxClasses()));
         return _el$3;
-      })(), createComponent(Show, {
+      })(), _$createComponent6(Show4, {
         get when() {
           return local.children;
         },
         get children() {
-          var _el$4 = _tmpl$34();
-          insert(_el$4, () => local.children);
-          effect(() => className(_el$4, labelClasses()));
+          var _el$4 = _$getNextElement6(_tmpl$34);
+          _$insert6(_el$4, () => local.children);
+          _$effect6(() => _$className6(_el$4, labelClasses()));
           return _el$4;
         }
       })];
@@ -432,55 +503,67 @@ function Checkbox(props) {
   }));
 }
 function CheckboxGroup(props) {
-  const [local, headlessProps] = splitProps(props, ["class", "children", "label", "description", "errorMessage"]);
+  const [local, headlessProps] = splitProps3(props, ["class", "children", "label", "description", "errorMessage"]);
   const getClassName = (renderProps) => {
     const base = "flex flex-col gap-2";
     const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
     const custom = local.class || "";
     return [base, disabledClass, custom].filter(Boolean).join(" ");
   };
-  const renderChildren = (renderProps) => [createComponent(Show, {
+  const renderChildren = (renderProps) => [_$createComponent6(Show4, {
     get when() {
       return local.label;
     },
     get children() {
-      var _el$5 = _tmpl$43();
-      insert(_el$5, () => local.label);
+      var _el$5 = _$getNextElement6(_tmpl$43);
+      _$insert6(_el$5, () => local.label);
       return _el$5;
     }
   }), (() => {
-    var _el$6 = _tmpl$52();
-    insert(_el$6, () => local.children);
+    var _el$6 = _$getNextElement6(_tmpl$52);
+    _$insert6(_el$6, () => local.children);
     return _el$6;
-  })(), createComponent(Show, {
+  })(), _$createComponent6(Show4, {
     get when() {
-      return memo(() => !!local.description)() && !renderProps.isInvalid;
+      return _$memo4(() => !!local.description)() && !renderProps.isInvalid;
     },
     get children() {
-      var _el$7 = _tmpl$62();
-      insert(_el$7, () => local.description);
+      var _el$7 = _$getNextElement6(_tmpl$62);
+      _$insert6(_el$7, () => local.description);
       return _el$7;
     }
-  }), createComponent(Show, {
+  }), _$createComponent6(Show4, {
     get when() {
-      return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
+      return _$memo4(() => !!local.errorMessage)() && renderProps.isInvalid;
     },
     get children() {
-      var _el$8 = _tmpl$72();
-      insert(_el$8, () => local.errorMessage);
+      var _el$8 = _$getNextElement6(_tmpl$72);
+      _$insert6(_el$8, () => local.errorMessage);
       return _el$8;
     }
   })];
-  return createComponent(CheckboxGroup$1, mergeProps$1(headlessProps, {
+  return _$createComponent6(HeadlessCheckboxGroup, _$mergeProps3(headlessProps, {
     "class": getClassName,
     children: renderChildren
   }));
 }
-var _tmpl$9 = /* @__PURE__ */ template(`<span class="text-primary-200 font-medium mb-1">`);
-var _tmpl$26 = /* @__PURE__ */ template(`<span class="text-primary-400 text-sm">`);
-var _tmpl$35 = /* @__PURE__ */ template(`<span class="text-danger-400 text-sm">`);
-var _tmpl$44 = /* @__PURE__ */ template(`<span><span>`);
-var _tmpl$53 = /* @__PURE__ */ template(`<span>`);
+
+// src/radio/index.tsx
+import { template as _$template7 } from "solid-js/web";
+import { className as _$className7 } from "solid-js/web";
+import { effect as _$effect7 } from "solid-js/web";
+import { mergeProps as _$mergeProps4 } from "solid-js/web";
+import { memo as _$memo5 } from "solid-js/web";
+import { createComponent as _$createComponent7 } from "solid-js/web";
+import { getNextElement as _$getNextElement7 } from "solid-js/web";
+import { insert as _$insert7 } from "solid-js/web";
+import { Show as Show5, createContext, useContext, splitProps as splitProps4 } from "solid-js";
+import { RadioGroup as HeadlessRadioGroup, Radio as HeadlessRadio } from "@proyecto-viviana/solidaria-components";
+var _tmpl$9 = /* @__PURE__ */ _$template7(`<span class="text-primary-200 font-medium mb-1">`);
+var _tmpl$26 = /* @__PURE__ */ _$template7(`<span class="text-primary-400 text-sm">`);
+var _tmpl$35 = /* @__PURE__ */ _$template7(`<span class="text-danger-400 text-sm">`);
+var _tmpl$44 = /* @__PURE__ */ _$template7(`<span><span>`);
+var _tmpl$53 = /* @__PURE__ */ _$template7(`<span>`);
 var RadioSizeContext = createContext("md");
 var sizeStyles5 = {
   sm: {
@@ -500,7 +583,7 @@ var sizeStyles5 = {
   }
 };
 function RadioGroup(props) {
-  const [local, headlessProps] = splitProps(props, ["size", "class", "label", "description", "errorMessage", "children"]);
+  const [local, headlessProps] = splitProps4(props, ["size", "class", "label", "description", "errorMessage", "children"]);
   const size = local.size ?? "md";
   const customClass = local.class ?? "";
   const getClassName = (renderProps) => {
@@ -509,38 +592,38 @@ function RadioGroup(props) {
     const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
     return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(" ");
   };
-  const renderChildren = (renderProps) => [createComponent(Show, {
+  const renderChildren = (renderProps) => [_$createComponent7(Show5, {
     get when() {
       return local.label;
     },
     get children() {
-      var _el$ = _tmpl$9();
-      insert(_el$, () => local.label);
+      var _el$ = _$getNextElement7(_tmpl$9);
+      _$insert7(_el$, () => local.label);
       return _el$;
     }
-  }), memo(() => memo(() => typeof local.children === "function")() ? local.children(renderProps) : local.children), createComponent(Show, {
+  }), _$memo5(() => _$memo5(() => typeof local.children === "function")() ? local.children(renderProps) : local.children), _$createComponent7(Show5, {
     get when() {
-      return memo(() => !!local.description)() && !renderProps.isInvalid;
+      return _$memo5(() => !!local.description)() && !renderProps.isInvalid;
     },
     get children() {
-      var _el$2 = _tmpl$26();
-      insert(_el$2, () => local.description);
+      var _el$2 = _$getNextElement7(_tmpl$26);
+      _$insert7(_el$2, () => local.description);
       return _el$2;
     }
-  }), createComponent(Show, {
+  }), _$createComponent7(Show5, {
     get when() {
-      return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
+      return _$memo5(() => !!local.errorMessage)() && renderProps.isInvalid;
     },
     get children() {
-      var _el$3 = _tmpl$35();
-      insert(_el$3, () => local.errorMessage);
+      var _el$3 = _$getNextElement7(_tmpl$35);
+      _$insert7(_el$3, () => local.errorMessage);
       return _el$3;
     }
   })];
-  return createComponent(RadioSizeContext.Provider, {
+  return _$createComponent7(RadioSizeContext.Provider, {
     value: size,
     get children() {
-      return createComponent(RadioGroup$1, mergeProps$1(headlessProps, {
+      return _$createComponent7(HeadlessRadioGroup, _$mergeProps4(headlessProps, {
         "class": getClassName,
         "data-size": size,
         children: renderChildren
@@ -562,7 +645,7 @@ function Radio(props) {
     children,
     ...headlessProps
   } = props;
-  return createComponent(Radio$1, mergeProps$1(headlessProps, {
+  return _$createComponent7(HeadlessRadio, _$mergeProps4(headlessProps, {
     "class": getClassName,
     children: (renderProps) => {
       const circleClasses = () => {
@@ -594,31 +677,54 @@ function Radio(props) {
       };
       const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
       return [(() => {
-        var _el$4 = _tmpl$44(), _el$5 = _el$4.firstChild;
-        effect((_p$) => {
+        var _el$4 = _$getNextElement7(_tmpl$44), _el$5 = _el$4.firstChild;
+        _$effect7((_p$) => {
           var _v$ = circleClasses(), _v$2 = dotClasses();
-          _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
-          _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+          _v$ !== _p$.e && _$className7(_el$4, _p$.e = _v$);
+          _v$2 !== _p$.t && _$className7(_el$5, _p$.t = _v$2);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
         return _el$4;
-      })(), createComponent(Show, {
+      })(), _$createComponent7(Show5, {
         when: resolvedChildren,
         get children() {
-          var _el$6 = _tmpl$53();
-          insert(_el$6, resolvedChildren);
-          effect(() => className(_el$6, labelClasses()));
+          var _el$6 = _$getNextElement7(_tmpl$53);
+          _$insert7(_el$6, resolvedChildren);
+          _$effect7(() => _$className7(_el$6, labelClasses()));
           return _el$6;
         }
       })];
     }
   }));
 }
-var _tmpl$10 = /* @__PURE__ */ template(`<button><span>`);
-var _tmpl$27 = /* @__PURE__ */ template(`<span class=mr-1.5>`);
+
+// src/dialog/index.tsx
+import { template as _$template9 } from "solid-js/web";
+import { className as _$className9 } from "solid-js/web";
+import { effect as _$effect9 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker4 } from "solid-js/web";
+import { memo as _$memo7 } from "solid-js/web";
+import { createComponent as _$createComponent8 } from "solid-js/web";
+import { getNextElement as _$getNextElement9 } from "solid-js/web";
+import { insert as _$insert9 } from "solid-js/web";
+import { Show as Show6 } from "solid-js";
+
+// src/custom/chip/index.tsx
+import { template as _$template8 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents3 } from "solid-js/web";
+import { className as _$className8 } from "solid-js/web";
+import { effect as _$effect8 } from "solid-js/web";
+import { getNextElement as _$getNextElement8 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents3 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker3 } from "solid-js/web";
+import { insert as _$insert8 } from "solid-js/web";
+import { memo as _$memo6 } from "solid-js/web";
+import { addEventListener as _$addEventListener2 } from "solid-js/web";
+var _tmpl$10 = /* @__PURE__ */ _$template8(`<button><!$><!/><span>`);
+var _tmpl$27 = /* @__PURE__ */ _$template8(`<span class=mr-1.5>`);
 var variantStyles3 = {
   primary: "bg-primary-700 text-primary-200 shadow-primary-chip",
   secondary: "bg-primary-600 text-primary-100 hover:bg-primary-500",
@@ -628,55 +734,56 @@ var variantStyles3 = {
 function Chip(props) {
   const variant = () => props.variant ?? "primary";
   return (() => {
-    var _el$ = _tmpl$10(), _el$2 = _el$.firstChild;
-    addEventListener(_el$, "click", props.onClick, true);
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!props.icon);
+    var _el$ = _$getNextElement8(_tmpl$10), _el$3 = _el$.firstChild, [_el$4, _co$] = _$getNextMarker3(_el$3.nextSibling), _el$2 = _el$4.nextSibling;
+    _$addEventListener2(_el$, "click", props.onClick, true);
+    _$insert8(_el$, (() => {
+      var _c$ = _$memo6(() => !!props.icon);
       return () => _c$() && (() => {
-        var _el$3 = _tmpl$27();
-        insert(_el$3, () => props.icon);
-        return _el$3;
+        var _el$5 = _$getNextElement8(_tmpl$27);
+        _$insert8(_el$5, () => props.icon);
+        return _el$5;
       })();
-    })(), _el$2);
-    insert(_el$2, () => props.text);
-    effect(() => className(_el$, `flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles3[variant()]} ${props.class ?? ""}`));
+    })(), _el$4, _co$);
+    _$insert8(_el$2, () => props.text);
+    _$effect8(() => _$className8(_el$, `flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles3[variant()]} ${props.class ?? ""}`));
+    _$runHydrationEvents3();
     return _el$;
   })();
 }
-delegateEvents(["click"]);
+_$delegateEvents3(["click"]);
 
 // src/dialog/index.tsx
-var _tmpl$11 = /* @__PURE__ */ template(`<span class="text-base font-normal text-primary-300">`);
-var _tmpl$28 = /* @__PURE__ */ template(`<div class="flex flex-1 flex-row items-end justify-center gap-5 py-5">`);
-var _tmpl$36 = /* @__PURE__ */ template(`<div class="relative bottom-4 right-4 w-full"><div class="flex flex-row justify-end gap-2 pr-4">`);
-var _tmpl$45 = /* @__PURE__ */ template(`<div><span class="relative left-8 top-4 bg-gradient-to-b from-primary-100 to-primary-500 bg-clip-text text-4xl font-extrabold text-transparent"></span><div class="flex h-[50px] flex-col justify-end rounded-t-[26px] bg-primary-800"><div class="flex h-[40px] flex-col justify-end rounded-t-[30px] bg-primary-600"><div class="flex h-[20px] items-center justify-end rounded-t-[100px] bg-primary-700 pr-4"></div></div></div><div class="mt-1 flex min-h-[200px] flex-col rounded-b-[26px] rounded-t-lg border-b border-accent-500 bg-bg-300"><div class="flex flex-1 flex-col p-4"><div class="text-lg text-gray-100">`);
+var _tmpl$11 = /* @__PURE__ */ _$template9(`<span class="text-base font-normal text-primary-300">`);
+var _tmpl$28 = /* @__PURE__ */ _$template9(`<div class="flex flex-1 flex-row items-end justify-center gap-5 py-5"><!$><!/><!$><!/>`);
+var _tmpl$36 = /* @__PURE__ */ _$template9(`<div class="relative bottom-4 right-4 w-full"><div class="flex flex-row justify-end gap-2 pr-4">`);
+var _tmpl$45 = /* @__PURE__ */ _$template9(`<div><span class="relative left-8 top-4 bg-gradient-to-b from-primary-100 to-primary-500 bg-clip-text text-4xl font-extrabold text-transparent"></span><div class="flex h-[50px] flex-col justify-end rounded-t-[26px] bg-primary-800"><div class="flex h-[40px] flex-col justify-end rounded-t-[30px] bg-primary-600"><div class="flex h-[20px] items-center justify-end rounded-t-[100px] bg-primary-700 pr-4"></div></div></div><div class="mt-1 flex min-h-[200px] flex-col rounded-b-[26px] rounded-t-lg border-b border-accent-500 bg-bg-300"><div class="flex flex-1 flex-col p-4"><div class="text-lg text-gray-100"></div><!$><!/></div></div><!$><!/>`);
 function Dialog(props) {
   return (() => {
-    var _el$ = _tmpl$45(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$7 = _el$3.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild;
-    insert(_el$2, () => props.title);
-    insert(_el$5, createComponent(Show, {
+    var _el$ = _$getNextElement9(_tmpl$45), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$7 = _el$3.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$13 = _el$9.nextSibling, [_el$14, _co$3] = _$getNextMarker4(_el$13.nextSibling), _el$17 = _el$7.nextSibling, [_el$18, _co$4] = _$getNextMarker4(_el$17.nextSibling);
+    _$insert9(_el$2, () => props.title);
+    _$insert9(_el$5, _$createComponent8(Show6, {
       get when() {
         return props.subtitle;
       },
       get children() {
-        var _el$6 = _tmpl$11();
-        insert(_el$6, () => props.subtitle);
+        var _el$6 = _$getNextElement9(_tmpl$11);
+        _$insert9(_el$6, () => props.subtitle);
         return _el$6;
       }
     }));
-    insert(_el$9, () => props.children);
-    insert(_el$8, createComponent(Show, {
+    _$insert9(_el$9, () => props.children);
+    _$insert9(_el$8, _$createComponent8(Show6, {
       get when() {
         return props.primaryAction || props.secondaryAction;
       },
       get children() {
-        var _el$0 = _tmpl$28();
-        insert(_el$0, createComponent(Show, {
+        var _el$0 = _$getNextElement9(_tmpl$28), _el$1 = _el$0.firstChild, [_el$10, _co$] = _$getNextMarker4(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = _$getNextMarker4(_el$11.nextSibling);
+        _$insert9(_el$0, _$createComponent8(Show6, {
           get when() {
             return props.secondaryAction;
           },
           get children() {
-            return createComponent(Button, {
+            return _$createComponent8(Button, {
               variant: "primary",
               buttonStyle: "outline",
               get onPress() {
@@ -687,13 +794,13 @@ function Dialog(props) {
               }
             });
           }
-        }), null);
-        insert(_el$0, createComponent(Show, {
+        }), _el$10, _co$);
+        _$insert9(_el$0, _$createComponent8(Show6, {
           get when() {
             return props.primaryAction;
           },
           get children() {
-            return createComponent(Button, {
+            return _$createComponent8(Button, {
               variant: "primary",
               get onPress() {
                 return props.primaryAction.onClick;
@@ -703,36 +810,55 @@ function Dialog(props) {
               }
             });
           }
-        }), null);
+        }), _el$12, _co$2);
         return _el$0;
       }
-    }), null);
-    insert(_el$, createComponent(Show, {
+    }), _el$14, _co$3);
+    _$insert9(_el$, _$createComponent8(Show6, {
       get when() {
-        return memo(() => !!props.tags)() && props.tags.length > 0;
+        return _$memo7(() => !!props.tags)() && props.tags.length > 0;
       },
       get children() {
-        var _el$1 = _tmpl$36(), _el$10 = _el$1.firstChild;
-        insert(_el$10, () => props.tags.map((tag) => createComponent(Chip, {
+        var _el$15 = _$getNextElement9(_tmpl$36), _el$16 = _el$15.firstChild;
+        _$insert9(_el$16, () => props.tags.map((tag) => _$createComponent8(Chip, {
           variant: "primary",
           text: tag
         })));
-        return _el$1;
+        return _el$15;
       }
-    }), null);
-    effect(() => className(_el$, `flex flex-col w-full max-w-[540px] ${props.class ?? ""}`));
+    }), _el$18, _co$4);
+    _$effect9(() => _$className9(_el$, `flex flex-col w-full max-w-[540px] ${props.class ?? ""}`));
     return _el$;
   })();
 }
-var _tmpl$12 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"aria-hidden=true><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z">`);
+
+// src/icon/index.tsx
+import { template as _$template11 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents4 } from "solid-js/web";
+import { className as _$className10 } from "solid-js/web";
+import { effect as _$effect11 } from "solid-js/web";
+import { getNextElement as _$getNextElement11 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents4 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker5 } from "solid-js/web";
+import { insert as _$insert10 } from "solid-js/web";
+import { createComponent as _$createComponent9 } from "solid-js/web";
+import { memo as _$memo8 } from "solid-js/web";
+import { addEventListener as _$addEventListener3 } from "solid-js/web";
+
+// src/icon/icons/GitHubIcon.tsx
+import { template as _$template10 } from "solid-js/web";
+import { setAttribute as _$setAttribute3 } from "solid-js/web";
+import { effect as _$effect10 } from "solid-js/web";
+import { getNextElement as _$getNextElement10 } from "solid-js/web";
+var _tmpl$12 = /* @__PURE__ */ _$template10(`<svg viewBox="0 0 24 24"aria-hidden=true><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z">`);
 function GitHubIcon(props) {
   return (() => {
-    var _el$ = _tmpl$12();
-    effect((_p$) => {
+    var _el$ = _$getNextElement10(_tmpl$12);
+    _$effect10((_p$) => {
       var _v$ = props.size, _v$2 = props.size, _v$3 = props.color;
-      _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$, "fill", _p$.a = _v$3);
+      _v$ !== _p$.e && _$setAttribute3(_el$, "width", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute3(_el$, "height", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute3(_el$, "fill", _p$.a = _v$3);
       return _p$;
     }, {
       e: void 0,
@@ -744,29 +870,29 @@ function GitHubIcon(props) {
 }
 
 // src/icon/index.tsx
-var _tmpl$13 = /* @__PURE__ */ template(`<div><div class=vui-icon__main>`);
-var _tmpl$29 = /* @__PURE__ */ template(`<div class=vui-icon__shadow>`);
+var _tmpl$13 = /* @__PURE__ */ _$template11(`<div><!$><!/><div class=vui-icon__main>`);
+var _tmpl$29 = /* @__PURE__ */ _$template11(`<div class=vui-icon__shadow>`);
 function Icon(props) {
   const size = () => props.size ?? 24;
   const color = () => props.color ?? "var(--color-primary-500)";
   const IconComponent = props.icon;
   return (() => {
-    var _el$ = _tmpl$13(), _el$2 = _el$.firstChild;
-    addEventListener(_el$, "click", props.onClick, true);
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!props.withShadow);
+    var _el$ = _$getNextElement11(_tmpl$13), _el$3 = _el$.firstChild, [_el$4, _co$] = _$getNextMarker5(_el$3.nextSibling), _el$2 = _el$4.nextSibling;
+    _$addEventListener3(_el$, "click", props.onClick, true);
+    _$insert10(_el$, (() => {
+      var _c$ = _$memo8(() => !!props.withShadow);
       return () => _c$() && (() => {
-        var _el$3 = _tmpl$29();
-        insert(_el$3, createComponent(IconComponent, {
+        var _el$5 = _$getNextElement11(_tmpl$29);
+        _$insert10(_el$5, _$createComponent9(IconComponent, {
           get size() {
             return size();
           },
           color: "var(--color-accent)"
         }));
-        return _el$3;
+        return _el$5;
       })();
-    })(), _el$2);
-    insert(_el$2, createComponent(IconComponent, {
+    })(), _el$4, _co$);
+    _$insert10(_el$2, _$createComponent9(IconComponent, {
       get size() {
         return size();
       },
@@ -774,22 +900,30 @@ function Icon(props) {
         return color();
       }
     }));
-    effect(() => className(_el$, `vui-icon ${props.withShadow ? "vui-icon--with-shadow" : ""} ${props.class ?? ""}`));
+    _$effect11(() => _$className10(_el$, `vui-icon ${props.withShadow ? "vui-icon--with-shadow" : ""} ${props.class ?? ""}`));
+    _$runHydrationEvents4();
     return _el$;
   })();
 }
-delegateEvents(["click"]);
-var _tmpl$14 = /* @__PURE__ */ template(`<div><div class=vui-tooltip__trigger></div><div><span>`);
+_$delegateEvents4(["click"]);
+
+// src/tooltip/index.tsx
+import { template as _$template12 } from "solid-js/web";
+import { className as _$className11 } from "solid-js/web";
+import { effect as _$effect12 } from "solid-js/web";
+import { getNextElement as _$getNextElement12 } from "solid-js/web";
+import { insert as _$insert11 } from "solid-js/web";
+var _tmpl$14 = /* @__PURE__ */ _$template12(`<div><div class=vui-tooltip__trigger></div><div><span>`);
 function Tooltip(props) {
   const position = () => props.position ?? "bottom";
   return (() => {
-    var _el$ = _tmpl$14(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
-    insert(_el$2, () => props.children);
-    insert(_el$4, () => props.label);
-    effect((_p$) => {
+    var _el$ = _$getNextElement12(_tmpl$14), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+    _$insert11(_el$2, () => props.children);
+    _$insert11(_el$4, () => props.label);
+    _$effect12((_p$) => {
       var _v$ = `vui-tooltip ${props.class ?? ""}`, _v$2 = `vui-tooltip__content vui-tooltip__content--${position()}`;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      _v$ !== _p$.e && _$className11(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$className11(_el$3, _p$.t = _v$2);
       return _p$;
     }, {
       e: void 0,
@@ -798,6 +932,26 @@ function Tooltip(props) {
     return _el$;
   })();
 }
+
+// src/textfield/index.tsx
+import { template as _$template13 } from "solid-js/web";
+import { setAttribute as _$setAttribute4 } from "solid-js/web";
+import { className as _$className12 } from "solid-js/web";
+import { effect as _$effect13 } from "solid-js/web";
+import { memo as _$memo9 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents5 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker6 } from "solid-js/web";
+import { insert as _$insert12 } from "solid-js/web";
+import { createComponent as _$createComponent10 } from "solid-js/web";
+import { getNextElement as _$getNextElement13 } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps5 } from "solid-js/web";
+import { splitProps as splitProps5, mergeProps as solidMergeProps4, Show as Show7 } from "solid-js";
+import { createTextField, createFocusRing } from "@proyecto-viviana/solidaria";
+
+// ../solid-stately/dist/index.js
+import { createSignal as createSignal2, createUniqueId, untrack } from "solid-js";
+import { isServer } from "solid-js/web";
 function access(value) {
   return typeof value === "function" ? value() : value;
 }
@@ -805,18 +959,19 @@ function createTextFieldState(props = {}) {
   const getProps = () => access(props);
   const initialProps = getProps();
   const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
-  const [internalValue, setInternalValue] = createSignal(initialValue);
+  const [internalValue, setInternalValue] = createSignal2(initialValue);
   const isControlled = () => getProps().value !== void 0;
   const value = () => {
     const p = getProps();
     return isControlled() ? p.value ?? "" : internalValue();
   };
   function setValue(newValue) {
+    var _a;
     const p = getProps();
     if (!isControlled()) {
       setInternalValue(newValue);
     }
-    p.onChange?.(newValue);
+    (_a = p.onChange) == null ? void 0 : _a.call(p, newValue);
   }
   return {
     value,
@@ -825,10 +980,10 @@ function createTextFieldState(props = {}) {
 }
 
 // src/textfield/index.tsx
-var _tmpl$15 = /* @__PURE__ */ template(`<span class="text-danger-400 ml-0.5">*`);
-var _tmpl$210 = /* @__PURE__ */ template(`<label>`);
-var _tmpl$37 = /* @__PURE__ */ template(`<p>`);
-var _tmpl$46 = /* @__PURE__ */ template(`<div><input>`);
+var _tmpl$15 = /* @__PURE__ */ _$template13(`<span class="text-danger-400 ml-0.5">*`);
+var _tmpl$210 = /* @__PURE__ */ _$template13(`<label><!$><!/><!$><!/>`);
+var _tmpl$37 = /* @__PURE__ */ _$template13(`<p>`);
+var _tmpl$46 = /* @__PURE__ */ _$template13(`<div><!$><!/><input><!$><!/><!$><!/>`);
 var sizeStyles6 = {
   sm: {
     input: "h-8 px-2 text-sm",
@@ -851,8 +1006,8 @@ function TextField(props) {
     size: "md",
     variant: "outline"
   };
-  const merged = mergeProps(defaultProps, props);
-  const [local, ariaProps] = splitProps(merged, ["size", "variant", "class", "label", "description", "errorMessage"]);
+  const merged = solidMergeProps4(defaultProps, props);
+  const [local, ariaProps] = splitProps5(merged, ["size", "variant", "class", "label", "description", "errorMessage"]);
   const size = () => sizeStyles6[local.size];
   const state = createTextFieldState(() => ({
     value: ariaProps.value,
@@ -946,74 +1101,77 @@ function TextField(props) {
     return rest;
   };
   return (() => {
-    var _el$ = _tmpl$46(), _el$4 = _el$.firstChild;
-    insert(_el$, createComponent(Show, {
+    var _el$ = _$getNextElement13(_tmpl$46), _el$1 = _el$.firstChild, [_el$10, _co$3] = _$getNextMarker6(_el$1.nextSibling), _el$8 = _el$10.nextSibling, _el$11 = _el$8.nextSibling, [_el$12, _co$4] = _$getNextMarker6(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$5] = _$getNextMarker6(_el$13.nextSibling);
+    _$insert12(_el$, _$createComponent10(Show7, {
       get when() {
         return local.label;
       },
       get children() {
-        var _el$2 = _tmpl$210();
-        spread(_el$2, mergeProps$1(cleanLabelProps, {
+        var _el$2 = _$getNextElement13(_tmpl$210), _el$4 = _el$2.firstChild, [_el$5, _co$] = _$getNextMarker6(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = _$getNextMarker6(_el$6.nextSibling);
+        _$spread(_el$2, _$mergeProps5(cleanLabelProps, {
           get ["class"]() {
             return labelClasses();
           }
         }), false, true);
-        insert(_el$2, () => local.label, null);
-        insert(_el$2, createComponent(Show, {
+        _$insert12(_el$2, () => local.label, _el$5, _co$);
+        _$insert12(_el$2, _$createComponent10(Show7, {
           get when() {
             return ariaProps.isRequired;
           },
           get children() {
-            return _tmpl$15();
+            return _$getNextElement13(_tmpl$15);
           }
-        }), null);
+        }), _el$7, _co$2);
+        _$runHydrationEvents5();
         return _el$2;
       }
-    }), _el$4);
-    spread(_el$4, mergeProps$1(cleanInputProps, {
+    }), _el$10, _co$3);
+    _$spread(_el$8, _$mergeProps5(cleanInputProps, {
       get ["class"]() {
         return inputClasses();
       }
     }), false, false);
-    insert(_el$, createComponent(Show, {
+    _$insert12(_el$, _$createComponent10(Show7, {
       get when() {
-        return memo(() => !!local.description)() && !textFieldAria.isInvalid;
+        return _$memo9(() => !!local.description)() && !textFieldAria.isInvalid;
       },
       get children() {
-        var _el$5 = _tmpl$37();
-        spread(_el$5, mergeProps$1(cleanDescriptionProps, {
+        var _el$9 = _$getNextElement13(_tmpl$37);
+        _$spread(_el$9, _$mergeProps5(cleanDescriptionProps, {
           get ["class"]() {
             return descriptionClasses();
           }
         }), false, true);
-        insert(_el$5, () => local.description);
-        return _el$5;
+        _$insert12(_el$9, () => local.description);
+        _$runHydrationEvents5();
+        return _el$9;
       }
-    }), null);
-    insert(_el$, createComponent(Show, {
+    }), _el$12, _co$4);
+    _$insert12(_el$, _$createComponent10(Show7, {
       get when() {
-        return memo(() => !!local.errorMessage)() && textFieldAria.isInvalid;
+        return _$memo9(() => !!local.errorMessage)() && textFieldAria.isInvalid;
       },
       get children() {
-        var _el$6 = _tmpl$37();
-        spread(_el$6, mergeProps$1(cleanErrorMessageProps, {
+        var _el$0 = _$getNextElement13(_tmpl$37);
+        _$spread(_el$0, _$mergeProps5(cleanErrorMessageProps, {
           get ["class"]() {
             return errorClasses();
           }
         }), false, true);
-        insert(_el$6, () => local.errorMessage);
-        return _el$6;
+        _$insert12(_el$0, () => local.errorMessage);
+        _$runHydrationEvents5();
+        return _el$0;
       }
-    }), null);
-    effect((_p$) => {
+    }), _el$14, _co$5);
+    _$effect13((_p$) => {
       var _v$ = containerClasses(), _v$2 = ariaProps.isDisabled || void 0, _v$3 = textFieldAria.isInvalid || void 0, _v$4 = ariaProps.isReadOnly || void 0, _v$5 = ariaProps.isRequired || void 0, _v$6 = isFocused() || void 0, _v$7 = isFocusVisible() || void 0;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$, "data-invalid", _p$.a = _v$3);
-      _v$4 !== _p$.o && setAttribute(_el$, "data-readonly", _p$.o = _v$4);
-      _v$5 !== _p$.i && setAttribute(_el$, "data-required", _p$.i = _v$5);
-      _v$6 !== _p$.n && setAttribute(_el$, "data-focused", _p$.n = _v$6);
-      _v$7 !== _p$.s && setAttribute(_el$, "data-focus-visible", _p$.s = _v$7);
+      _v$ !== _p$.e && _$className12(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute4(_el$, "data-disabled", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute4(_el$, "data-invalid", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute4(_el$, "data-readonly", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute4(_el$, "data-required", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute4(_el$, "data-focused", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setAttribute4(_el$, "data-focus-visible", _p$.s = _v$7);
       return _p$;
     }, {
       e: void 0,
@@ -1024,16 +1182,23 @@ function TextField(props) {
       n: void 0,
       s: void 0
     });
+    _$runHydrationEvents5();
     return _el$;
   })();
 }
+
+// src/link/index.tsx
+import { createComponent as _$createComponent11 } from "solid-js/web";
+import { mergeProps as _$mergeProps6 } from "solid-js/web";
+import { splitProps as splitProps6 } from "solid-js";
+import { Link as HeadlessLink } from "@proyecto-viviana/solidaria-components";
 var variantStyles4 = {
   primary: "text-accent hover:text-accent-300",
   secondary: "text-primary-300 hover:text-primary-200",
   subtle: "text-primary-400 hover:text-primary-300"
 };
 function Link(props) {
-  const [local, headlessProps] = splitProps(props, ["variant", "isStandalone", "isQuiet", "class", "children"]);
+  const [local, headlessProps] = splitProps6(props, ["variant", "isStandalone", "isQuiet", "class", "children"]);
   const variant = local.variant ?? "primary";
   const customClass = local.class ?? "";
   const getClassName = (renderProps) => {
@@ -1051,17 +1216,33 @@ function Link(props) {
     const pressedClass = renderProps.isPressed ? "opacity-80" : "";
     return [base, variantClass, underlineClass, weightClass, focusClass, disabledClass, pressedClass, customClass].filter(Boolean).join(" ");
   };
-  return createComponent(Link$1, mergeProps$1(headlessProps, {
+  return _$createComponent11(HeadlessLink, _$mergeProps6(headlessProps, {
     "class": getClassName,
     get children() {
       return local.children;
     }
   }));
 }
-var _tmpl$16 = /* @__PURE__ */ template(`<span class="text-primary-200 font-medium">`);
-var _tmpl$211 = /* @__PURE__ */ template(`<span class=text-primary-300>`);
-var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$47 = /* @__PURE__ */ template(`<div><div><div>`);
+
+// src/progress-bar/index.tsx
+import { template as _$template14 } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents6 } from "solid-js/web";
+import { className as _$className13 } from "solid-js/web";
+import { effect as _$effect14 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker7 } from "solid-js/web";
+import { createComponent as _$createComponent12 } from "solid-js/web";
+import { getNextElement as _$getNextElement14 } from "solid-js/web";
+import { insert as _$insert13 } from "solid-js/web";
+import { memo as _$memo10 } from "solid-js/web";
+import { spread as _$spread2 } from "solid-js/web";
+import { mergeProps as _$mergeProps7 } from "solid-js/web";
+import { splitProps as splitProps7, Show as Show8, createMemo } from "solid-js";
+import { createProgressBar } from "@proyecto-viviana/solidaria";
+var _tmpl$16 = /* @__PURE__ */ _$template14(`<span class="text-primary-200 font-medium">`);
+var _tmpl$211 = /* @__PURE__ */ _$template14(`<span class=text-primary-300>`);
+var _tmpl$38 = /* @__PURE__ */ _$template14(`<div><!$><!/><!$><!/>`);
+var _tmpl$47 = /* @__PURE__ */ _$template14(`<div><!$><!/><div><div>`);
 var sizeStyles7 = {
   sm: {
     track: "h-1",
@@ -1087,7 +1268,7 @@ function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function ProgressBar(props) {
-  const [local, ariaProps] = splitProps(props, ["size", "variant", "label", "showValueLabel", "class"]);
+  const [local, ariaProps] = splitProps7(props, ["size", "variant", "label", "showValueLabel", "class"]);
   const size = () => local.size ?? "md";
   const variant = () => local.variant ?? "primary";
   const isIndeterminate = () => ariaProps.isIndeterminate ?? false;
@@ -1128,58 +1309,69 @@ function ProgressBar(props) {
   const valueText = () => progressAria.progressBarProps["aria-valuetext"];
   const sizeConfig = () => sizeStyles7[size()];
   return (() => {
-    var _el$ = _tmpl$47(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
-    spread(_el$, mergeProps$1(() => progressAria.progressBarProps, {
+    var _el$ = _$getNextElement14(_tmpl$47), _el$1 = _el$.firstChild, [_el$10, _co$3] = _$getNextMarker7(_el$1.nextSibling), _el$9 = _el$10.nextSibling, _el$0 = _el$9.firstChild;
+    _$spread2(_el$, _$mergeProps7(() => progressAria.progressBarProps, {
       get ["class"]() {
         return `w-full ${local.class ?? ""}`;
       }
     }), false, true);
-    insert(_el$, createComponent(Show, {
+    _$insert13(_el$, _$createComponent12(Show8, {
       get when() {
         return local.label || showValueLabel();
       },
       get children() {
-        var _el$2 = _tmpl$38();
-        insert(_el$2, createComponent(Show, {
+        var _el$2 = _$getNextElement14(_tmpl$38), _el$5 = _el$2.firstChild, [_el$6, _co$] = _$getNextMarker7(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = _$getNextMarker7(_el$7.nextSibling);
+        _$insert13(_el$2, _$createComponent12(Show8, {
           get when() {
             return local.label;
           },
           get children() {
-            var _el$3 = _tmpl$16();
-            insert(_el$3, () => local.label);
+            var _el$3 = _$getNextElement14(_tmpl$16);
+            _$insert13(_el$3, () => local.label);
             return _el$3;
           }
-        }), null);
-        insert(_el$2, createComponent(Show, {
+        }), _el$6, _co$);
+        _$insert13(_el$2, _$createComponent12(Show8, {
           get when() {
-            return memo(() => !!showValueLabel())() && !isIndeterminate();
+            return _$memo10(() => !!showValueLabel())() && !isIndeterminate();
           },
           get children() {
-            var _el$4 = _tmpl$211();
-            insert(_el$4, valueText);
+            var _el$4 = _$getNextElement14(_tmpl$211);
+            _$insert13(_el$4, valueText);
             return _el$4;
           }
-        }), null);
-        effect(() => className(_el$2, `flex justify-between items-center mb-1 ${sizeConfig().text}`));
+        }), _el$8, _co$2);
+        _$effect14(() => _$className13(_el$2, `flex justify-between items-center mb-1 ${sizeConfig().text}`));
         return _el$2;
       }
-    }), _el$5);
-    effect((_p$) => {
+    }), _el$10, _co$3);
+    _$effect14((_p$) => {
       var _v$ = `w-full ${sizeConfig().track} bg-bg-300 rounded-full overflow-hidden`, _v$2 = `h-full rounded-full transition-all duration-300 ${variantStyles5[variant()]} ${isIndeterminate() ? "animate-progress-indeterminate" : ""}`, _v$3 = isIndeterminate() ? "30%" : `${percentage()}%`;
-      _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
-      _v$3 !== _p$.a && setStyleProperty(_el$6, "width", _p$.a = _v$3);
+      _v$ !== _p$.e && _$className13(_el$9, _p$.e = _v$);
+      _v$2 !== _p$.t && _$className13(_el$0, _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$0, "width", _p$.a = _v$3);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
+    _$runHydrationEvents6();
     return _el$;
   })();
 }
-var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$212 = /* @__PURE__ */ template(`<hr>`);
+
+// src/separator/index.tsx
+import { template as _$template15 } from "solid-js/web";
+import { createComponent as _$createComponent13 } from "solid-js/web";
+import { getNextElement as _$getNextElement15 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents7 } from "solid-js/web";
+import { spread as _$spread3 } from "solid-js/web";
+import { mergeProps as _$mergeProps8 } from "solid-js/web";
+import { splitProps as splitProps8, createMemo as createMemo2, Show as Show9 } from "solid-js";
+import { createSeparator } from "@proyecto-viviana/solidaria";
+var _tmpl$17 = /* @__PURE__ */ _$template15(`<div>`);
+var _tmpl$212 = /* @__PURE__ */ _$template15(`<hr>`);
 var variantStyles6 = {
   default: "bg-bg-100",
   subtle: "bg-bg-200",
@@ -1196,11 +1388,11 @@ var verticalSizeStyles = {
   lg: "w-1"
 };
 function Separator(props) {
-  const [local, ariaProps] = splitProps(props, ["orientation", "variant", "size", "class"]);
+  const [local, ariaProps] = splitProps8(props, ["orientation", "variant", "size", "class"]);
   const orientation = () => local.orientation ?? "horizontal";
   const variant = () => local.variant ?? "default";
   const size = () => local.size ?? "md";
-  const elementType = createMemo(() => {
+  const elementType = createMemo2(() => {
     if (orientation() === "vertical") {
       return "div";
     }
@@ -1217,7 +1409,7 @@ function Separator(props) {
       return ariaProps["aria-label"];
     }
   });
-  const className = createMemo(() => {
+  const className = createMemo2(() => {
     const isVertical = orientation() === "vertical";
     const sizeStyles8 = isVertical ? verticalSizeStyles : horizontalSizeStyles;
     const base = [
@@ -1237,61 +1429,77 @@ function Separator(props) {
     } = separatorAria.separatorProps;
     return props2;
   };
-  return createComponent(Show, {
+  return _$createComponent13(Show9, {
     get when() {
       return orientation() === "vertical";
     },
     get fallback() {
       return (() => {
-        var _el$2 = _tmpl$212();
-        spread(_el$2, mergeProps$1(getAriaProps, {
+        var _el$2 = _$getNextElement15(_tmpl$212);
+        _$spread3(_el$2, _$mergeProps8(getAriaProps, {
           get ["class"]() {
             return className();
           }
         }), false, false);
+        _$runHydrationEvents7();
         return _el$2;
       })();
     },
     get children() {
-      var _el$ = _tmpl$17();
-      spread(_el$, mergeProps$1(getAriaProps, {
+      var _el$ = _$getNextElement15(_tmpl$17);
+      _$spread3(_el$, _$mergeProps8(getAriaProps, {
         get ["class"]() {
           return className();
         }
       }), false, false);
+      _$runHydrationEvents7();
       return _el$;
     }
   });
 }
-var _tmpl$18 = /* @__PURE__ */ template(`<img class="h-[42px] w-auto">`);
-var _tmpl$213 = /* @__PURE__ */ template(`<button class="md:hidden flex items-center justify-center">`);
-var _tmpl$39 = /* @__PURE__ */ template(`<nav><div class="pl-1 md:pl-8 flex items-center"></div><div class="flex-1 flex justify-end items-center pr-1 md:pr-8">`);
-var _tmpl$48 = /* @__PURE__ */ template(`<span class="text-[34px] font-light text-primary-700 flex items-center">`);
+
+// src/custom/nav-header/index.tsx
+import { template as _$template16 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents5 } from "solid-js/web";
+import { className as _$className14 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker8 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents8 } from "solid-js/web";
+import { addEventListener as _$addEventListener4 } from "solid-js/web";
+import { insert as _$insert14 } from "solid-js/web";
+import { createComponent as _$createComponent14 } from "solid-js/web";
+import { setAttribute as _$setAttribute5 } from "solid-js/web";
+import { effect as _$effect15 } from "solid-js/web";
+import { getNextElement as _$getNextElement16 } from "solid-js/web";
+import { Show as Show10 } from "solid-js";
+var _tmpl$18 = /* @__PURE__ */ _$template16(`<img class="h-[42px] w-auto">`);
+var _tmpl$213 = /* @__PURE__ */ _$template16(`<button class="md:hidden flex items-center justify-center">`);
+var _tmpl$39 = /* @__PURE__ */ _$template16(`<nav><div class="pl-1 md:pl-8 flex items-center"></div><div class="flex-1 flex justify-end items-center pr-1 md:pr-8"><!$><!/><!$><!/>`);
+var _tmpl$48 = /* @__PURE__ */ _$template16(`<span class="text-[34px] font-light text-primary-700 flex items-center">`);
 function NavHeader(props) {
   return (() => {
-    var _el$ = _tmpl$39(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
-    insert(_el$2, createComponent(Show, {
+    var _el$ = _$getNextElement16(_tmpl$39), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling, _el$6 = _el$4.firstChild, [_el$7, _co$] = _$getNextMarker8(_el$6.nextSibling), _el$8 = _el$7.nextSibling, [_el$9, _co$2] = _$getNextMarker8(_el$8.nextSibling);
+    _$insert14(_el$2, _$createComponent14(Show10, {
       get when() {
         return props.logo;
       },
       get fallback() {
-        return createComponent(Show, {
+        return _$createComponent14(Show10, {
           get when() {
             return props.logoText;
           },
           get children() {
-            var _el$6 = _tmpl$48();
-            insert(_el$6, () => props.logoText);
-            return _el$6;
+            var _el$0 = _$getNextElement16(_tmpl$48);
+            _$insert14(_el$0, () => props.logoText);
+            return _el$0;
           }
         });
       },
       get children() {
-        var _el$3 = _tmpl$18();
-        effect((_p$) => {
+        var _el$3 = _$getNextElement16(_tmpl$18);
+        _$effect15((_p$) => {
           var _v$ = props.logo, _v$2 = props.logoAlt ?? "Logo";
-          _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$3, "alt", _p$.t = _v$2);
+          _v$ !== _p$.e && _$setAttribute5(_el$3, "src", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute5(_el$3, "alt", _p$.t = _v$2);
           return _p$;
         }, {
           e: void 0,
@@ -1300,34 +1508,46 @@ function NavHeader(props) {
         return _el$3;
       }
     }));
-    insert(_el$4, () => props.children, null);
-    insert(_el$4, createComponent(Show, {
+    _$insert14(_el$4, () => props.children, _el$7, _co$);
+    _$insert14(_el$4, _$createComponent14(Show10, {
       get when() {
         return props.menuIcon;
       },
       get children() {
-        var _el$5 = _tmpl$213();
-        addEventListener(_el$5, "click", props.onMenuClick, true);
-        insert(_el$5, () => props.menuIcon);
+        var _el$5 = _$getNextElement16(_tmpl$213);
+        _$addEventListener4(_el$5, "click", props.onMenuClick, true);
+        _$insert14(_el$5, () => props.menuIcon);
+        _$runHydrationEvents8();
         return _el$5;
       }
-    }), null);
-    effect(() => className(_el$, `flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ""}`));
+    }), _el$9, _co$2);
+    _$effect15(() => _$className14(_el$, `flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ""}`));
     return _el$;
   })();
 }
-delegateEvents(["click"]);
-var _tmpl$19 = /* @__PURE__ */ template(`<li><span class="text-lg font-bold text-primary-200">`);
-var _tmpl$214 = /* @__PURE__ */ template(`<a>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<div><div class="flex h-full"><div class="h-5 w-1 bg-accent-300"></div><ul class="flex h-full flex-1 flex-col gap-1 pl-4">`);
-var _tmpl$49 = /* @__PURE__ */ template(`<li>`);
-var _tmpl$54 = /* @__PURE__ */ template(`<div>`);
+_$delegateEvents5(["click"]);
+
+// src/custom/lateral-nav/index.tsx
+import { template as _$template17 } from "solid-js/web";
+import { createComponent as _$createComponent15 } from "solid-js/web";
+import { setAttribute as _$setAttribute6 } from "solid-js/web";
+import { className as _$className15 } from "solid-js/web";
+import { effect as _$effect16 } from "solid-js/web";
+import { getNextElement as _$getNextElement17 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker9 } from "solid-js/web";
+import { insert as _$insert15 } from "solid-js/web";
+import { Show as Show11, For } from "solid-js";
+var _tmpl$19 = /* @__PURE__ */ _$template17(`<li><span class="text-lg font-bold text-primary-200"></span><!$><!/>`);
+var _tmpl$214 = /* @__PURE__ */ _$template17(`<a>`);
+var _tmpl$310 = /* @__PURE__ */ _$template17(`<div><!$><!/><div class="flex h-full"><div class="h-5 w-1 bg-accent-300"></div><ul class="flex h-full flex-1 flex-col gap-1 pl-4"><!$><!/><!$><!/>`);
+var _tmpl$49 = /* @__PURE__ */ _$template17(`<li>`);
+var _tmpl$54 = /* @__PURE__ */ _$template17(`<div>`);
 function NavItem(props) {
   return (() => {
-    var _el$ = _tmpl$19(), _el$2 = _el$.firstChild;
-    insert(_el$2, () => props.title);
-    insert(_el$, () => props.children, null);
-    effect(() => className(_el$, `flex items-center ${props.class ?? ""}`));
+    var _el$ = _$getNextElement17(_tmpl$19), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, [_el$4, _co$] = _$getNextMarker9(_el$3.nextSibling);
+    _$insert15(_el$2, () => props.title);
+    _$insert15(_el$, () => props.children, _el$4, _co$);
+    _$effect16(() => _$className15(_el$, `flex items-center ${props.class ?? ""}`));
     return _el$;
   })();
 }
@@ -1335,40 +1555,40 @@ function NavLink(props) {
   const activeStyles = "font-medium text-primary-300 underline underline-offset-4";
   const inactiveStyles = "font-normal text-gray-200 underline-offset-4 hover:text-gray-100 hover:underline";
   return (() => {
-    var _el$3 = _tmpl$214();
-    insert(_el$3, () => props.children);
-    effect((_p$) => {
+    var _el$5 = _$getNextElement17(_tmpl$214);
+    _$insert15(_el$5, () => props.children);
+    _$effect16((_p$) => {
       var _v$ = props.href, _v$2 = `${props.active ? activeStyles : inactiveStyles} ${props.class ?? ""}`;
-      _v$ !== _p$.e && setAttribute(_el$3, "href", _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      _v$ !== _p$.e && _$setAttribute6(_el$5, "href", _p$.e = _v$);
+      _v$2 !== _p$.t && _$className15(_el$5, _p$.t = _v$2);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    return _el$3;
+    return _el$5;
   })();
 }
 function NavSection(props) {
   return (() => {
-    var _el$4 = _tmpl$310(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
-    insert(_el$4, createComponent(NavItem, {
+    var _el$6 = _$getNextElement17(_tmpl$310), _el$12 = _el$6.firstChild, [_el$13, _co$4] = _$getNextMarker9(_el$12.nextSibling), _el$7 = _el$13.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.firstChild, [_el$1, _co$2] = _$getNextMarker9(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$3] = _$getNextMarker9(_el$10.nextSibling);
+    _$insert15(_el$6, _$createComponent15(NavItem, {
       get title() {
         return props.title;
       }
-    }), _el$5);
-    insert(_el$7, createComponent(Show, {
+    }), _el$13, _co$4);
+    _$insert15(_el$9, _$createComponent15(Show11, {
       get when() {
         return props.links;
       },
       get children() {
-        return createComponent(For, {
+        return _$createComponent15(For, {
           get each() {
             return props.links;
           },
           children: (link) => (() => {
-            var _el$8 = _tmpl$49();
-            insert(_el$8, createComponent(NavLink, {
+            var _el$14 = _$getNextElement17(_tmpl$49);
+            _$insert15(_el$14, _$createComponent15(NavLink, {
               get href() {
                 return link.href;
               },
@@ -1379,62 +1599,72 @@ function NavSection(props) {
                 return link.label;
               }
             }));
-            return _el$8;
+            return _el$14;
           })()
         });
       }
-    }), null);
-    insert(_el$7, () => props.children, null);
-    effect(() => className(_el$4, props.class ?? ""));
-    return _el$4;
+    }), _el$1, _co$2);
+    _$insert15(_el$9, () => props.children, _el$11, _co$3);
+    _$effect16(() => _$className15(_el$6, props.class ?? ""));
+    return _el$6;
   })();
 }
 function LateralNav(props) {
   const bgColor = () => props.transparent ? "" : "bg-bg-200";
   return (() => {
-    var _el$9 = _tmpl$54();
-    insert(_el$9, () => props.children);
-    effect(() => className(_el$9, `hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ""}`));
-    return _el$9;
+    var _el$15 = _$getNextElement17(_tmpl$54);
+    _$insert15(_el$15, () => props.children);
+    _$effect16(() => _$className15(_el$15, `hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ""}`));
+    return _el$15;
   })();
 }
-var _tmpl$20 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200">`);
-var _tmpl$215 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-around gap-3"></div><div class="flex items-center justify-center gap-3 text-center"><span class="font-light text-primary-300">`);
+
+// src/custom/timeline-item/index.tsx
+import { template as _$template18 } from "solid-js/web";
+import { className as _$className16 } from "solid-js/web";
+import { effect as _$effect17 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker10 } from "solid-js/web";
+import { createComponent as _$createComponent16 } from "solid-js/web";
+import { getNextElement as _$getNextElement18 } from "solid-js/web";
+import { insert as _$insert16 } from "solid-js/web";
+import { Show as Show12 } from "solid-js";
+var _tmpl$20 = /* @__PURE__ */ _$template18(`<span class="font-semibold text-accent-200">`);
+var _tmpl$215 = /* @__PURE__ */ _$template18(`<div><div class="flex items-center justify-around gap-3"><!$><!/><!$><!/><!$><!/></div><div class="flex items-center justify-center gap-3 text-center"><span class="font-light text-primary-300">`);
 var eventMessages = {
   follow: (left, right) => [(() => {
-    var _el$ = _tmpl$20();
-    insert(_el$, left);
+    var _el$ = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$, left);
     return _el$;
   })(), " ha empezado a seguir a ", (() => {
-    var _el$2 = _tmpl$20();
-    insert(_el$2, right);
+    var _el$2 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$2, right);
     return _el$2;
   })()],
   like: (left, right) => [(() => {
-    var _el$3 = _tmpl$20();
-    insert(_el$3, left);
+    var _el$3 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$3, left);
     return _el$3;
   })(), " le ha dado like a ", (() => {
-    var _el$4 = _tmpl$20();
-    insert(_el$4, right);
+    var _el$4 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$4, right);
     return _el$4;
   })()],
   comment: (left, right) => [(() => {
-    var _el$5 = _tmpl$20();
-    insert(_el$5, left);
+    var _el$5 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$5, left);
     return _el$5;
   })(), " ha comentado en ", (() => {
-    var _el$6 = _tmpl$20();
-    insert(_el$6, right);
+    var _el$6 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$6, right);
     return _el$6;
   })()],
   event: (left, right) => [(() => {
-    var _el$7 = _tmpl$20();
-    insert(_el$7, left);
+    var _el$7 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$7, left);
     return _el$7;
   })(), " asistir\xE1 al evento de ", (() => {
-    var _el$8 = _tmpl$20();
-    insert(_el$8, right);
+    var _el$8 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$8, right);
     return _el$8;
   })()],
   custom: () => null
@@ -1444,13 +1674,13 @@ function TimelineItem(props) {
   const leftName = () => props.leftUser?.name ?? "";
   const rightName = () => props.rightUser?.name ?? "";
   return (() => {
-    var _el$9 = _tmpl$215(), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild;
-    insert(_el$0, createComponent(Show, {
+    var _el$9 = _$getNextElement18(_tmpl$215), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, [_el$10, _co$] = _$getNextMarker10(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = _$getNextMarker10(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = _$getNextMarker10(_el$13.nextSibling), _el$15 = _el$0.nextSibling, _el$16 = _el$15.firstChild;
+    _$insert16(_el$0, _$createComponent16(Show12, {
       get when() {
         return props.leftUser;
       },
       get children() {
-        return createComponent(Avatar, {
+        return _$createComponent16(Avatar, {
           get src() {
             return props.leftUser.avatar;
           },
@@ -1459,21 +1689,21 @@ function TimelineItem(props) {
           }
         });
       }
-    }), null);
-    insert(_el$0, createComponent(Show, {
+    }), _el$10, _co$);
+    _$insert16(_el$0, _$createComponent16(Show12, {
       get when() {
         return props.icon;
       },
       get children() {
         return props.icon;
       }
-    }), null);
-    insert(_el$0, createComponent(Show, {
+    }), _el$12, _co$2);
+    _$insert16(_el$0, _$createComponent16(Show12, {
       get when() {
         return props.rightUser;
       },
       get children() {
-        return createComponent(Avatar, {
+        return _$createComponent16(Avatar, {
           get src() {
             return props.rightUser.avatar;
           },
@@ -1482,8 +1712,8 @@ function TimelineItem(props) {
           }
         });
       }
-    }), null);
-    insert(_el$10, createComponent(Show, {
+    }), _el$14, _co$3);
+    _$insert16(_el$16, _$createComponent16(Show12, {
       get when() {
         return props.message;
       },
@@ -1494,22 +1724,36 @@ function TimelineItem(props) {
         return props.message;
       }
     }));
-    effect(() => className(_el$9, `inline-flex w-auto flex-col gap-5 rounded-2xl border border-primary-700 bg-bg-200 p-5 hover:bg-bg-300 transition-colors ${props.class ?? ""}`));
+    _$effect17(() => _$className16(_el$9, `inline-flex w-auto flex-col gap-5 rounded-2xl border border-primary-700 bg-bg-200 p-5 hover:bg-bg-300 transition-colors ${props.class ?? ""}`));
     return _el$9;
   })();
 }
-var _tmpl$21 = /* @__PURE__ */ template(`<span class="text-xs text-primary-500">`);
-var _tmpl$216 = /* @__PURE__ */ template(`<p class="text-sm text-primary-400 truncate">`);
-var _tmpl$311 = /* @__PURE__ */ template(`<span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">`);
-var _tmpl$410 = /* @__PURE__ */ template(`<button><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><span class="font-semibold text-primary-100 truncate">`);
-var _tmpl$55 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$63 = /* @__PURE__ */ template(`<div><div><p>`);
-var _tmpl$73 = /* @__PURE__ */ template(`<div>`);
+
+// src/custom/conversation/index.tsx
+import { template as _$template19 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents6 } from "solid-js/web";
+import { className as _$className17 } from "solid-js/web";
+import { effect as _$effect18 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents9 } from "solid-js/web";
+import { memo as _$memo11 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker11 } from "solid-js/web";
+import { getNextElement as _$getNextElement19 } from "solid-js/web";
+import { insert as _$insert17 } from "solid-js/web";
+import { createComponent as _$createComponent17 } from "solid-js/web";
+import { addEventListener as _$addEventListener5 } from "solid-js/web";
+import { Show as Show13, For as For2 } from "solid-js";
+var _tmpl$21 = /* @__PURE__ */ _$template19(`<span class="text-xs text-primary-500">`);
+var _tmpl$216 = /* @__PURE__ */ _$template19(`<p class="text-sm text-primary-400 truncate">`);
+var _tmpl$311 = /* @__PURE__ */ _$template19(`<span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">`);
+var _tmpl$410 = /* @__PURE__ */ _$template19(`<button><!$><!/><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><span class="font-semibold text-primary-100 truncate"></span><!$><!/></div><!$><!/></div><!$><!/>`);
+var _tmpl$55 = /* @__PURE__ */ _$template19(`<span>`);
+var _tmpl$63 = /* @__PURE__ */ _$template19(`<div><div><p></p><!$><!/>`);
+var _tmpl$73 = /* @__PURE__ */ _$template19(`<div>`);
 function ConversationPreview(props) {
   return (() => {
-    var _el$ = _tmpl$410(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
-    addEventListener(_el$, "click", props.onClick, true);
-    insert(_el$, createComponent(Avatar, {
+    var _el$ = _$getNextElement19(_tmpl$410), _el$10 = _el$.firstChild, [_el$11, _co$3] = _$getNextMarker11(_el$10.nextSibling), _el$2 = _el$11.nextSibling, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling, [_el$7, _co$] = _$getNextMarker11(_el$6.nextSibling), _el$9 = _el$3.nextSibling, [_el$0, _co$2] = _$getNextMarker11(_el$9.nextSibling), _el$12 = _el$2.nextSibling, [_el$13, _co$4] = _$getNextMarker11(_el$12.nextSibling);
+    _$addEventListener5(_el$, "click", props.onClick, true);
+    _$insert17(_el$, _$createComponent17(Avatar, {
       get src() {
         return props.user.avatar;
       },
@@ -1520,78 +1764,79 @@ function ConversationPreview(props) {
         return props.user.online;
       },
       size: "md"
-    }), _el$2);
-    insert(_el$4, () => props.user.name);
-    insert(_el$3, createComponent(Show, {
+    }), _el$11, _co$3);
+    _$insert17(_el$4, () => props.user.name);
+    _$insert17(_el$3, _$createComponent17(Show13, {
       get when() {
         return props.timestamp;
       },
       get children() {
-        var _el$5 = _tmpl$21();
-        insert(_el$5, () => props.timestamp);
+        var _el$5 = _$getNextElement19(_tmpl$21);
+        _$insert17(_el$5, () => props.timestamp);
         return _el$5;
       }
-    }), null);
-    insert(_el$2, createComponent(Show, {
+    }), _el$7, _co$);
+    _$insert17(_el$2, _$createComponent17(Show13, {
       get when() {
         return props.lastMessage;
       },
       get children() {
-        var _el$6 = _tmpl$216();
-        insert(_el$6, () => props.lastMessage);
-        return _el$6;
+        var _el$8 = _$getNextElement19(_tmpl$216);
+        _$insert17(_el$8, () => props.lastMessage);
+        return _el$8;
       }
-    }), null);
-    insert(_el$, createComponent(Show, {
+    }), _el$0, _co$2);
+    _$insert17(_el$, _$createComponent17(Show13, {
       get when() {
-        return memo(() => !!props.unreadCount)() && props.unreadCount > 0;
+        return _$memo11(() => !!props.unreadCount)() && props.unreadCount > 0;
       },
       get children() {
-        var _el$7 = _tmpl$311();
-        insert(_el$7, () => props.unreadCount);
-        return _el$7;
+        var _el$1 = _$getNextElement19(_tmpl$311);
+        _$insert17(_el$1, () => props.unreadCount);
+        return _el$1;
       }
-    }), null);
-    effect(() => className(_el$, `flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
+    }), _el$13, _co$4);
+    _$effect18(() => _$className17(_el$, `flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
+    _$runHydrationEvents9();
     return _el$;
   })();
 }
 function ConversationBubble(props) {
   const isUser = () => props.sender === "user";
   return (() => {
-    var _el$8 = _tmpl$63(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild;
-    insert(_el$0, () => props.content);
-    insert(_el$9, createComponent(Show, {
+    var _el$14 = _$getNextElement19(_tmpl$63), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling, [_el$19, _co$5] = _$getNextMarker11(_el$18.nextSibling);
+    _$insert17(_el$16, () => props.content);
+    _$insert17(_el$15, _$createComponent17(Show13, {
       get when() {
         return props.timestamp;
       },
       get children() {
-        var _el$1 = _tmpl$55();
-        insert(_el$1, () => props.timestamp);
-        effect(() => className(_el$1, `text-xs ${isUser() ? "text-white/70" : "text-primary-500"}`));
-        return _el$1;
+        var _el$17 = _$getNextElement19(_tmpl$55);
+        _$insert17(_el$17, () => props.timestamp);
+        _$effect18(() => _$className17(_el$17, `text-xs ${isUser() ? "text-white/70" : "text-primary-500"}`));
+        return _el$17;
       }
-    }), null);
-    effect((_p$) => {
+    }), _el$19, _co$5);
+    _$effect18((_p$) => {
       var _v$ = `flex ${isUser() ? "justify-end" : "justify-start"} ${props.class ?? ""}`, _v$2 = `max-w-[70%] rounded-2xl px-4 py-2 ${isUser() ? "bg-accent text-white rounded-br-sm" : "bg-bg-300 text-primary-100 rounded-bl-sm"}`;
-      _v$ !== _p$.e && className(_el$8, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$9, _p$.t = _v$2);
+      _v$ !== _p$.e && _$className17(_el$14, _p$.e = _v$);
+      _v$2 !== _p$.t && _$className17(_el$15, _p$.t = _v$2);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    return _el$8;
+    return _el$14;
   })();
 }
 function Conversation(props) {
   return (() => {
-    var _el$10 = _tmpl$73();
-    insert(_el$10, createComponent(For, {
+    var _el$20 = _$getNextElement19(_tmpl$73);
+    _$insert17(_el$20, _$createComponent17(For2, {
       get each() {
         return props.messages;
       },
-      children: (message) => createComponent(ConversationBubble, {
+      children: (message) => _$createComponent17(ConversationBubble, {
         get content() {
           return message.content;
         },
@@ -1603,16 +1848,26 @@ function Conversation(props) {
         }
       })
     }));
-    effect(() => className(_el$10, `flex flex-col gap-2 p-4 ${props.class ?? ""}`));
-    return _el$10;
+    _$effect18(() => _$className17(_el$20, `flex flex-col gap-2 p-4 ${props.class ?? ""}`));
+    return _el$20;
   })();
 }
-delegateEvents(["click"]);
-var _tmpl$30 = /* @__PURE__ */ template(`<p class="text-primary-300 text-sm mt-1 line-clamp-2">`);
-var _tmpl$217 = /* @__PURE__ */ template(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> seguidores`);
-var _tmpl$312 = /* @__PURE__ */ template(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> siguiendo`);
-var _tmpl$411 = /* @__PURE__ */ template(`<div class="mt-4 flex gap-2">`);
-var _tmpl$56 = /* @__PURE__ */ template(`<div><div class="flex items-start gap-4"><div class="flex-1 min-w-0"><h3 class="font-semibold text-primary-100 text-lg truncate"></h3><div class="flex gap-4 mt-2 text-sm">`);
+_$delegateEvents6(["click"]);
+
+// src/custom/profile-card/index.tsx
+import { template as _$template20 } from "solid-js/web";
+import { className as _$className18 } from "solid-js/web";
+import { effect as _$effect19 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker12 } from "solid-js/web";
+import { getNextElement as _$getNextElement20 } from "solid-js/web";
+import { insert as _$insert18 } from "solid-js/web";
+import { createComponent as _$createComponent18 } from "solid-js/web";
+import { Show as Show14 } from "solid-js";
+var _tmpl$30 = /* @__PURE__ */ _$template20(`<p class="text-primary-300 text-sm mt-1 line-clamp-2">`);
+var _tmpl$217 = /* @__PURE__ */ _$template20(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> seguidores`);
+var _tmpl$312 = /* @__PURE__ */ _$template20(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> siguiendo`);
+var _tmpl$411 = /* @__PURE__ */ _$template20(`<div class="mt-4 flex gap-2">`);
+var _tmpl$56 = /* @__PURE__ */ _$template20(`<div><div class="flex items-start gap-4"><!$><!/><div class="flex-1 min-w-0"><h3 class="font-semibold text-primary-100 text-lg truncate"></h3><!$><!/><div class="flex gap-4 mt-2 text-sm"><!$><!/><!$><!/></div></div></div><!$><!/>`);
 function ProfileCard(props) {
   const formatNumber = (num) => {
     if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
@@ -1620,8 +1875,8 @@ function ProfileCard(props) {
     return num.toString();
   };
   return (() => {
-    var _el$ = _tmpl$56(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling;
-    insert(_el$2, createComponent(Avatar, {
+    var _el$ = _$getNextElement20(_tmpl$56), _el$2 = _el$.firstChild, _el$15 = _el$2.firstChild, [_el$16, _co$4] = _$getNextMarker12(_el$15.nextSibling), _el$3 = _el$16.nextSibling, _el$4 = _el$3.firstChild, _el$13 = _el$4.nextSibling, [_el$14, _co$3] = _$getNextMarker12(_el$13.nextSibling), _el$6 = _el$14.nextSibling, _el$1 = _el$6.firstChild, [_el$10, _co$] = _$getNextMarker12(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = _$getNextMarker12(_el$11.nextSibling), _el$18 = _el$2.nextSibling, [_el$19, _co$5] = _$getNextMarker12(_el$18.nextSibling);
+    _$insert18(_el$2, _$createComponent18(Avatar, {
       get src() {
         return props.avatar;
       },
@@ -1629,64 +1884,79 @@ function ProfileCard(props) {
         return props.username;
       },
       size: "lg"
-    }), _el$3);
-    insert(_el$4, () => props.username);
-    insert(_el$3, createComponent(Show, {
+    }), _el$16, _co$4);
+    _$insert18(_el$4, () => props.username);
+    _$insert18(_el$3, _$createComponent18(Show14, {
       get when() {
         return props.bio;
       },
       get children() {
-        var _el$5 = _tmpl$30();
-        insert(_el$5, () => props.bio);
+        var _el$5 = _$getNextElement20(_tmpl$30);
+        _$insert18(_el$5, () => props.bio);
         return _el$5;
       }
-    }), _el$6);
-    insert(_el$6, createComponent(Show, {
+    }), _el$14, _co$3);
+    _$insert18(_el$6, _$createComponent18(Show14, {
       get when() {
         return props.followers !== void 0;
       },
       get children() {
-        var _el$7 = _tmpl$217(), _el$8 = _el$7.firstChild;
-        insert(_el$8, () => formatNumber(props.followers));
+        var _el$7 = _$getNextElement20(_tmpl$217), _el$8 = _el$7.firstChild;
+        _$insert18(_el$8, () => formatNumber(props.followers));
         return _el$7;
       }
-    }), null);
-    insert(_el$6, createComponent(Show, {
+    }), _el$10, _co$);
+    _$insert18(_el$6, _$createComponent18(Show14, {
       get when() {
         return props.following !== void 0;
       },
       get children() {
-        var _el$9 = _tmpl$312(), _el$0 = _el$9.firstChild;
-        insert(_el$0, () => formatNumber(props.following));
+        var _el$9 = _$getNextElement20(_tmpl$312), _el$0 = _el$9.firstChild;
+        _$insert18(_el$0, () => formatNumber(props.following));
         return _el$9;
       }
-    }), null);
-    insert(_el$, createComponent(Show, {
+    }), _el$12, _co$2);
+    _$insert18(_el$, _$createComponent18(Show14, {
       get when() {
         return props.actions;
       },
       get children() {
-        var _el$1 = _tmpl$411();
-        insert(_el$1, () => props.actions);
-        return _el$1;
+        var _el$17 = _$getNextElement20(_tmpl$411);
+        _$insert18(_el$17, () => props.actions);
+        return _el$17;
       }
-    }), null);
-    effect(() => className(_el$, `bg-bg-200 rounded-xl p-4 ${props.class ?? ""}`));
+    }), _el$19, _co$5);
+    _$effect19(() => _$className18(_el$, `bg-bg-200 rounded-xl p-4 ${props.class ?? ""}`));
     return _el$;
   })();
 }
-var _tmpl$31 = /* @__PURE__ */ template(`<div class="absolute -top-2 -right-2 z-10 flex flex-col gap-1"><img alt class="w-8 h-8 object-contain"><img alt class="w-6 h-6 object-contain ml-2"><img alt class="w-5 h-5 object-contain">`);
-var _tmpl$218 = /* @__PURE__ */ template(`<div class="relative h-32 w-full"><img class="w-full h-full object-cover"><div class="absolute inset-0 bg-gradient-to-t from-bg-200 via-transparent to-transparent">`);
-var _tmpl$313 = /* @__PURE__ */ template(`<div class="flex items-center gap-1.5"><span class=text-accent>@</span><span>`);
-var _tmpl$412 = /* @__PURE__ */ template(`<div class="flex items-center gap-1.5"><span class=text-accent>\u23F1</span><span>`);
-var _tmpl$57 = /* @__PURE__ */ template(`<div class="flex items-center gap-4 mt-3 text-sm text-primary-300">`);
-var _tmpl$64 = /* @__PURE__ */ template(`<span class="ml-2 text-sm text-primary-300">+<!> m\xE1s`);
-var _tmpl$74 = /* @__PURE__ */ template(`<div class="flex items-center mt-3"><div class="flex -space-x-2">`);
-var _tmpl$82 = /* @__PURE__ */ template(`<div class="mt-4 flex gap-2">`);
-var _tmpl$92 = /* @__PURE__ */ template(`<div><div class="p-4 pt-2"><h3 class="font-bold text-xl leading-tight bg-gradient-to-r from-accent to-accent-300 bg-clip-text text-transparent">`);
-var _tmpl$0 = /* @__PURE__ */ template(`<div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0"><img class="w-full h-full object-cover">`);
-var _tmpl$1 = /* @__PURE__ */ template(`<p class="text-sm text-primary-300 truncate">`);
-var _tmpl$102 = /* @__PURE__ */ template(`<button><div class="flex-1 min-w-0"><h4 class="font-medium text-primary-100 truncate">`);
+
+// src/custom/event-card/index.tsx
+import { template as _$template21 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents7 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents10 } from "solid-js/web";
+import { addEventListener as _$addEventListener6 } from "solid-js/web";
+import { className as _$className19 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker13 } from "solid-js/web";
+import { memo as _$memo12 } from "solid-js/web";
+import { insert as _$insert19 } from "solid-js/web";
+import { createComponent as _$createComponent19 } from "solid-js/web";
+import { setAttribute as _$setAttribute7 } from "solid-js/web";
+import { effect as _$effect20 } from "solid-js/web";
+import { getNextElement as _$getNextElement21 } from "solid-js/web";
+import { Show as Show15, For as For3 } from "solid-js";
+var _tmpl$31 = /* @__PURE__ */ _$template21(`<div class="absolute -top-2 -right-2 z-10 flex flex-col gap-1"><img alt class="w-8 h-8 object-contain"><img alt class="w-6 h-6 object-contain ml-2"><img alt class="w-5 h-5 object-contain">`);
+var _tmpl$218 = /* @__PURE__ */ _$template21(`<div class="relative h-32 w-full"><img class="w-full h-full object-cover"><div class="absolute inset-0 bg-gradient-to-t from-bg-200 via-transparent to-transparent">`);
+var _tmpl$313 = /* @__PURE__ */ _$template21(`<div class="flex items-center gap-1.5"><span class=text-accent>@</span><span>`);
+var _tmpl$412 = /* @__PURE__ */ _$template21(`<div class="flex items-center gap-1.5"><span class=text-accent>\u23F1</span><span>`);
+var _tmpl$57 = /* @__PURE__ */ _$template21(`<div class="flex items-center gap-4 mt-3 text-sm text-primary-300"><!$><!/><!$><!/>`);
+var _tmpl$64 = /* @__PURE__ */ _$template21(`<span class="ml-2 text-sm text-primary-300">+<!$><!/> m\xE1s`);
+var _tmpl$74 = /* @__PURE__ */ _$template21(`<div class="flex items-center mt-3"><div class="flex -space-x-2"></div><!$><!/>`);
+var _tmpl$82 = /* @__PURE__ */ _$template21(`<div class="mt-4 flex gap-2">`);
+var _tmpl$92 = /* @__PURE__ */ _$template21(`<div><!$><!/><!$><!/><div class="p-4 pt-2"><h3 class="font-bold text-xl leading-tight bg-gradient-to-r from-accent to-accent-300 bg-clip-text text-transparent"></h3><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$0 = /* @__PURE__ */ _$template21(`<div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0"><img class="w-full h-full object-cover">`);
+var _tmpl$1 = /* @__PURE__ */ _$template21(`<p class="text-sm text-primary-300 truncate">`);
+var _tmpl$102 = /* @__PURE__ */ _$template21(`<button><!$><!/><div class="flex-1 min-w-0"><h4 class="font-medium text-primary-100 truncate"></h4><!$><!/>`);
 function EventCard(props) {
   const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
   const remainingCount = () => {
@@ -1695,18 +1965,18 @@ function EventCard(props) {
     return total - displayed;
   };
   return (() => {
-    var _el$ = _tmpl$92(), _el$8 = _el$.firstChild, _el$9 = _el$8.firstChild;
-    insert(_el$, createComponent(Show, {
+    var _el$ = _$getNextElement21(_tmpl$92), _el$35 = _el$.firstChild, [_el$36, _co$8] = _$getNextMarker13(_el$35.nextSibling), _el$37 = _el$36.nextSibling, [_el$38, _co$9] = _$getNextMarker13(_el$37.nextSibling), _el$8 = _el$38.nextSibling, _el$9 = _el$8.firstChild, _el$29 = _el$9.nextSibling, [_el$30, _co$5] = _$getNextMarker13(_el$29.nextSibling), _el$31 = _el$30.nextSibling, [_el$32, _co$6] = _$getNextMarker13(_el$31.nextSibling), _el$33 = _el$32.nextSibling, [_el$34, _co$7] = _$getNextMarker13(_el$33.nextSibling);
+    _$insert19(_el$, _$createComponent19(Show15, {
       get when() {
         return props.decorationImage;
       },
       get children() {
-        var _el$2 = _tmpl$31(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
-        effect((_p$) => {
+        var _el$2 = _$getNextElement21(_tmpl$31), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
+        _$effect20((_p$) => {
           var _v$ = props.decorationImage, _v$2 = props.decorationImage, _v$3 = props.decorationImage;
-          _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$4, "src", _p$.t = _v$2);
-          _v$3 !== _p$.a && setAttribute(_el$5, "src", _p$.a = _v$3);
+          _v$ !== _p$.e && _$setAttribute7(_el$3, "src", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute7(_el$4, "src", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$setAttribute7(_el$5, "src", _p$.a = _v$3);
           return _p$;
         }, {
           e: void 0,
@@ -1715,17 +1985,17 @@ function EventCard(props) {
         });
         return _el$2;
       }
-    }), _el$8);
-    insert(_el$, createComponent(Show, {
+    }), _el$36, _co$8);
+    _$insert19(_el$, _$createComponent19(Show15, {
       get when() {
         return props.image;
       },
       get children() {
-        var _el$6 = _tmpl$218(), _el$7 = _el$6.firstChild;
-        effect((_p$) => {
+        var _el$6 = _$getNextElement21(_tmpl$218), _el$7 = _el$6.firstChild;
+        _$effect20((_p$) => {
           var _v$4 = props.image, _v$5 = props.title;
-          _v$4 !== _p$.e && setAttribute(_el$7, "src", _p$.e = _v$4);
-          _v$5 !== _p$.t && setAttribute(_el$7, "alt", _p$.t = _v$5);
+          _v$4 !== _p$.e && _$setAttribute7(_el$7, "src", _p$.e = _v$4);
+          _v$5 !== _p$.t && _$setAttribute7(_el$7, "alt", _p$.t = _v$5);
           return _p$;
         }, {
           e: void 0,
@@ -1733,48 +2003,48 @@ function EventCard(props) {
         });
         return _el$6;
       }
-    }), _el$8);
-    insert(_el$9, () => props.title);
-    insert(_el$8, createComponent(Show, {
+    }), _el$38, _co$9);
+    _$insert19(_el$9, () => props.title);
+    _$insert19(_el$8, _$createComponent19(Show15, {
       get when() {
         return props.date || props.author;
       },
       get children() {
-        var _el$0 = _tmpl$57();
-        insert(_el$0, createComponent(Show, {
+        var _el$0 = _$getNextElement21(_tmpl$57), _el$15 = _el$0.firstChild, [_el$16, _co$] = _$getNextMarker13(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$2] = _$getNextMarker13(_el$17.nextSibling);
+        _$insert19(_el$0, _$createComponent19(Show15, {
           get when() {
             return props.author;
           },
           get children() {
-            var _el$1 = _tmpl$313(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
-            insert(_el$11, () => props.author);
+            var _el$1 = _$getNextElement21(_tmpl$313), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+            _$insert19(_el$11, () => props.author);
             return _el$1;
           }
-        }), null);
-        insert(_el$0, createComponent(Show, {
+        }), _el$16, _co$);
+        _$insert19(_el$0, _$createComponent19(Show15, {
           get when() {
             return props.date;
           },
           get children() {
-            var _el$12 = _tmpl$412(), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
-            insert(_el$14, () => props.date);
+            var _el$12 = _$getNextElement21(_tmpl$412), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
+            _$insert19(_el$14, () => props.date);
             return _el$12;
           }
-        }), null);
+        }), _el$18, _co$2);
         return _el$0;
       }
-    }), null);
-    insert(_el$8, createComponent(Show, {
+    }), _el$30, _co$5);
+    _$insert19(_el$8, _$createComponent19(Show15, {
       get when() {
         return displayedAttendees().length > 0;
       },
       get children() {
-        var _el$15 = _tmpl$74(), _el$16 = _el$15.firstChild;
-        insert(_el$16, createComponent(For, {
+        var _el$19 = _$getNextElement21(_tmpl$74), _el$20 = _el$19.firstChild, _el$26 = _el$20.nextSibling, [_el$27, _co$4] = _$getNextMarker13(_el$26.nextSibling);
+        _$insert19(_el$20, _$createComponent19(For3, {
           get each() {
             return displayedAttendees();
           },
-          children: (attendee) => createComponent(Avatar, {
+          children: (attendee) => _$createComponent19(Avatar, {
             get src() {
               return attendee.avatar;
             },
@@ -1784,77 +2054,90 @@ function EventCard(props) {
             size: "sm"
           })
         }));
-        insert(_el$15, createComponent(Show, {
+        _$insert19(_el$19, _$createComponent19(Show15, {
           get when() {
             return remainingCount() > 0;
           },
           get children() {
-            var _el$17 = _tmpl$64(), _el$18 = _el$17.firstChild, _el$20 = _el$18.nextSibling;
-            insert(_el$17, remainingCount, _el$20);
-            return _el$17;
+            var _el$21 = _$getNextElement21(_tmpl$64), _el$22 = _el$21.firstChild, _el$24 = _el$22.nextSibling, [_el$25, _co$3] = _$getNextMarker13(_el$24.nextSibling), _el$23 = _el$25.nextSibling;
+            _$insert19(_el$21, remainingCount, _el$25, _co$3);
+            return _el$21;
           }
-        }), null);
-        return _el$15;
+        }), _el$27, _co$4);
+        return _el$19;
       }
-    }), null);
-    insert(_el$8, createComponent(Show, {
+    }), _el$32, _co$6);
+    _$insert19(_el$8, _$createComponent19(Show15, {
       get when() {
         return props.actions;
       },
       get children() {
-        var _el$21 = _tmpl$82();
-        insert(_el$21, () => props.actions);
-        return _el$21;
+        var _el$28 = _$getNextElement21(_tmpl$82);
+        _$insert19(_el$28, () => props.actions);
+        return _el$28;
       }
-    }), null);
-    effect(() => className(_el$, `relative bg-bg-200 rounded-3xl overflow-hidden ${props.class ?? ""}`));
+    }), _el$34, _co$7);
+    _$effect20(() => _$className19(_el$, `relative bg-bg-200 rounded-3xl overflow-hidden ${props.class ?? ""}`));
     return _el$;
   })();
 }
 function EventListItem(props) {
   return (() => {
-    var _el$22 = _tmpl$102(), _el$25 = _el$22.firstChild, _el$26 = _el$25.firstChild;
-    addEventListener(_el$22, "click", props.onClick, true);
-    insert(_el$22, createComponent(Show, {
+    var _el$39 = _$getNextElement21(_tmpl$102), _el$47 = _el$39.firstChild, [_el$48, _co$1] = _$getNextMarker13(_el$47.nextSibling), _el$42 = _el$48.nextSibling, _el$43 = _el$42.firstChild, _el$45 = _el$43.nextSibling, [_el$46, _co$0] = _$getNextMarker13(_el$45.nextSibling);
+    _$addEventListener6(_el$39, "click", props.onClick, true);
+    _$insert19(_el$39, _$createComponent19(Show15, {
       get when() {
         return props.image;
       },
       get children() {
-        var _el$23 = _tmpl$0(), _el$24 = _el$23.firstChild;
-        effect((_p$) => {
+        var _el$40 = _$getNextElement21(_tmpl$0), _el$41 = _el$40.firstChild;
+        _$effect20((_p$) => {
           var _v$6 = props.image, _v$7 = props.title;
-          _v$6 !== _p$.e && setAttribute(_el$24, "src", _p$.e = _v$6);
-          _v$7 !== _p$.t && setAttribute(_el$24, "alt", _p$.t = _v$7);
+          _v$6 !== _p$.e && _$setAttribute7(_el$41, "src", _p$.e = _v$6);
+          _v$7 !== _p$.t && _$setAttribute7(_el$41, "alt", _p$.t = _v$7);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$23;
+        return _el$40;
       }
-    }), _el$25);
-    insert(_el$26, () => props.title);
-    insert(_el$25, createComponent(Show, {
+    }), _el$48, _co$1);
+    _$insert19(_el$43, () => props.title);
+    _$insert19(_el$42, _$createComponent19(Show15, {
       get when() {
         return props.subtitle;
       },
       get children() {
-        var _el$27 = _tmpl$1();
-        insert(_el$27, () => props.subtitle);
-        return _el$27;
+        var _el$44 = _$getNextElement21(_tmpl$1);
+        _$insert19(_el$44, () => props.subtitle);
+        return _el$44;
       }
-    }), null);
-    effect(() => className(_el$22, `flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
-    return _el$22;
+    }), _el$46, _co$0);
+    _$effect20(() => _$className19(_el$39, `flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
+    _$runHydrationEvents10();
+    return _el$39;
   })();
 }
-delegateEvents(["click"]);
-var _tmpl$40 = /* @__PURE__ */ template(`<div class="relative h-[80px] w-[80px] flex-shrink-0 overflow-hidden rounded-xl border-2 border-accent-200"><img class="h-full w-full object-cover">`);
-var _tmpl$219 = /* @__PURE__ */ template(`<div class="absolute bottom-[-20px] h-[30px] w-full"><div class="flex h-full w-full flex-1 justify-end gap-1">`);
-var _tmpl$314 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200"> m\xE1s`);
-var _tmpl$413 = /* @__PURE__ */ template(`<div class="flex flex-1"><span class="text-base font-normal text-primary-500">seguida por `);
-var _tmpl$58 = /* @__PURE__ */ template(`<div><div class="relative h-full flex-1 flex-col pl-3"><div class="flex h-full flex-col items-end justify-center pb-3 pr-5 pt-2"><div class="flex flex-1"><span class="text-lg font-semibold text-white drop-shadow-sm">`);
-var _tmpl$65 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200">`);
+_$delegateEvents7(["click"]);
+
+// src/custom/calendar-card/index.tsx
+import { template as _$template22 } from "solid-js/web";
+import { className as _$className20 } from "solid-js/web";
+import { getNextMarker as _$getNextMarker14 } from "solid-js/web";
+import { insert as _$insert20 } from "solid-js/web";
+import { memo as _$memo13 } from "solid-js/web";
+import { createComponent as _$createComponent20 } from "solid-js/web";
+import { setAttribute as _$setAttribute8 } from "solid-js/web";
+import { effect as _$effect21 } from "solid-js/web";
+import { getNextElement as _$getNextElement22 } from "solid-js/web";
+import { Show as Show16, For as For4 } from "solid-js";
+var _tmpl$40 = /* @__PURE__ */ _$template22(`<div class="relative h-[80px] w-[80px] flex-shrink-0 overflow-hidden rounded-xl border-2 border-accent-200"><img class="h-full w-full object-cover">`);
+var _tmpl$219 = /* @__PURE__ */ _$template22(`<div class="absolute bottom-[-20px] h-[30px] w-full"><div class="flex h-full w-full flex-1 justify-end gap-1">`);
+var _tmpl$314 = /* @__PURE__ */ _$template22(`<span class="font-semibold text-accent-200"><!$><!/> m\xE1s`);
+var _tmpl$413 = /* @__PURE__ */ _$template22(`<div class="flex flex-1"><span class="text-base font-normal text-primary-500">seguida por <!$><!/><!$><!/>`);
+var _tmpl$58 = /* @__PURE__ */ _$template22(`<div><!$><!/><div class="relative h-full flex-1 flex-col pl-3"><!$><!/><div class="flex h-full flex-col items-end justify-center pb-3 pr-5 pt-2"><div class="flex flex-1"><span class="text-lg font-semibold text-white drop-shadow-sm"></span></div><!$><!/>`);
+var _tmpl$65 = /* @__PURE__ */ _$template22(`<span class="font-semibold text-accent-200">`);
 function CalendarCard(props) {
   const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
   const remainingCount = () => {
@@ -1863,17 +2146,17 @@ function CalendarCard(props) {
     return total - displayed;
   };
   return (() => {
-    var _el$ = _tmpl$58(), _el$4 = _el$.firstChild, _el$7 = _el$4.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild;
-    insert(_el$, createComponent(Show, {
+    var _el$ = _$getNextElement22(_tmpl$58), _el$24 = _el$.firstChild, [_el$25, _co$6] = _$getNextMarker14(_el$24.nextSibling), _el$4 = _el$25.nextSibling, _el$22 = _el$4.firstChild, [_el$23, _co$5] = _$getNextMarker14(_el$22.nextSibling), _el$7 = _el$23.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$20 = _el$8.nextSibling, [_el$21, _co$4] = _$getNextMarker14(_el$20.nextSibling);
+    _$insert20(_el$, _$createComponent20(Show16, {
       get when() {
         return props.image;
       },
       get children() {
-        var _el$2 = _tmpl$40(), _el$3 = _el$2.firstChild;
-        effect((_p$) => {
+        var _el$2 = _$getNextElement22(_tmpl$40), _el$3 = _el$2.firstChild;
+        _$effect21((_p$) => {
           var _v$ = props.image, _v$2 = props.title;
-          _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$3, "alt", _p$.t = _v$2);
+          _v$ !== _p$.e && _$setAttribute8(_el$3, "src", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute8(_el$3, "alt", _p$.t = _v$2);
           return _p$;
         }, {
           e: void 0,
@@ -1881,62 +2164,70 @@ function CalendarCard(props) {
         });
         return _el$2;
       }
-    }), _el$4);
-    insert(_el$4, createComponent(Show, {
+    }), _el$25, _co$6);
+    _$insert20(_el$4, _$createComponent20(Show16, {
       get when() {
-        return memo(() => !!props.tags)() && props.tags.length > 0;
+        return _$memo13(() => !!props.tags)() && props.tags.length > 0;
       },
       get children() {
-        var _el$5 = _tmpl$219(), _el$6 = _el$5.firstChild;
-        insert(_el$6, createComponent(For, {
+        var _el$5 = _$getNextElement22(_tmpl$219), _el$6 = _el$5.firstChild;
+        _$insert20(_el$6, _$createComponent20(For4, {
           get each() {
             return props.tags;
           },
-          children: (tag) => createComponent(Chip, {
+          children: (tag) => _$createComponent20(Chip, {
             text: tag,
             variant: "primary"
           })
         }));
         return _el$5;
       }
-    }), _el$7);
-    insert(_el$9, () => props.title);
-    insert(_el$7, createComponent(Show, {
+    }), _el$23, _co$5);
+    _$insert20(_el$9, () => props.title);
+    _$insert20(_el$7, _$createComponent20(Show16, {
       get when() {
         return displayedFollowers().length > 0;
       },
       get children() {
-        var _el$0 = _tmpl$413(), _el$1 = _el$0.firstChild;
-        insert(_el$1, createComponent(For, {
+        var _el$0 = _$getNextElement22(_tmpl$413), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$16 = _el$10.nextSibling, [_el$17, _co$2] = _$getNextMarker14(_el$16.nextSibling), _el$18 = _el$17.nextSibling, [_el$19, _co$3] = _$getNextMarker14(_el$18.nextSibling);
+        _$insert20(_el$1, _$createComponent20(For4, {
           get each() {
             return displayedFollowers();
           },
           children: (follower, index) => [(() => {
-            var _el$14 = _tmpl$65();
-            insert(_el$14, () => follower.name);
-            return _el$14;
-          })(), memo(() => index() < displayedFollowers().length - 1 && ", ")]
-        }), null);
-        insert(_el$1, createComponent(Show, {
+            var _el$26 = _$getNextElement22(_tmpl$65);
+            _$insert20(_el$26, () => follower.name);
+            return _el$26;
+          })(), _$memo13(() => index() < displayedFollowers().length - 1 && ", ")]
+        }), _el$17, _co$2);
+        _$insert20(_el$1, _$createComponent20(Show16, {
           get when() {
             return remainingCount() > 0;
           },
           get children() {
             return [" ", "y ", (() => {
-              var _el$12 = _tmpl$314(), _el$13 = _el$12.firstChild;
-              insert(_el$12, remainingCount, _el$13);
+              var _el$12 = _$getNextElement22(_tmpl$314), _el$14 = _el$12.firstChild, [_el$15, _co$] = _$getNextMarker14(_el$14.nextSibling), _el$13 = _el$15.nextSibling;
+              _$insert20(_el$12, remainingCount, _el$15, _co$);
               return _el$12;
             })()];
           }
-        }), null);
+        }), _el$19, _co$3);
         return _el$0;
       }
-    }), null);
-    effect(() => className(_el$, `flex h-[100px] w-full max-w-[500px] items-center rounded-xl border border-primary-600 border-b-accent-500 bg-bg-300 p-2 ${props.class ?? ""}`));
+    }), _el$21, _co$4);
+    _$effect21(() => _$className20(_el$, `flex h-[100px] w-full max-w-[500px] items-center rounded-xl border border-primary-600 border-b-accent-500 bg-bg-300 p-2 ${props.class ?? ""}`));
     return _el$;
   })();
 }
-var _tmpl$41 = /* @__PURE__ */ template(`<span><span class=vui-logo__first></span><span class=vui-logo__second>`);
+
+// src/custom/logo/index.tsx
+import { template as _$template23 } from "solid-js/web";
+import { setAttribute as _$setAttribute9 } from "solid-js/web";
+import { className as _$className21 } from "solid-js/web";
+import { effect as _$effect22 } from "solid-js/web";
+import { getNextElement as _$getNextElement23 } from "solid-js/web";
+import { insert as _$insert21 } from "solid-js/web";
+var _tmpl$41 = /* @__PURE__ */ _$template23(`<span><span class=vui-logo__first></span><span class=vui-logo__second>`);
 function Logo(props) {
   const sizeClass = () => {
     switch (props.size) {
@@ -1954,13 +2245,13 @@ function Logo(props) {
   const firstWord = () => props.firstWord ?? "Proyecto";
   const secondWord = () => props.secondWord ?? "Viviana";
   return (() => {
-    var _el$ = _tmpl$41(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    insert(_el$2, firstWord);
-    insert(_el$3, secondWord);
-    effect((_p$) => {
+    var _el$ = _$getNextElement23(_tmpl$41), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    _$insert21(_el$2, firstWord);
+    _$insert21(_el$3, secondWord);
+    _$effect22((_p$) => {
       var _v$ = `vui-logo ${sizeClass()} ${props.class ?? ""}`, _v$2 = secondWord();
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$3, "data-text", _p$.t = _v$2);
+      _v$ !== _p$.e && _$className21(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute9(_el$3, "data-text", _p$.t = _v$2);
       return _p$;
     }, {
       e: void 0,
@@ -1969,23 +2260,31 @@ function Logo(props) {
     return _el$;
   })();
 }
-var _tmpl$50 = /* @__PURE__ */ template(`<div class=vui-project-card__tooltip><span>`);
-var _tmpl$220 = /* @__PURE__ */ template(`<img class=vui-project-card__image>`);
-var _tmpl$315 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer">`);
-var _tmpl$414 = /* @__PURE__ */ template(`<div>`);
+
+// src/custom/project-card/index.tsx
+import { template as _$template24 } from "solid-js/web";
+import { className as _$className22 } from "solid-js/web";
+import { setAttribute as _$setAttribute10 } from "solid-js/web";
+import { effect as _$effect23 } from "solid-js/web";
+import { getNextElement as _$getNextElement24 } from "solid-js/web";
+import { insert as _$insert22 } from "solid-js/web";
+var _tmpl$50 = /* @__PURE__ */ _$template24(`<div class=vui-project-card__tooltip><span>`);
+var _tmpl$220 = /* @__PURE__ */ _$template24(`<img class=vui-project-card__image>`);
+var _tmpl$315 = /* @__PURE__ */ _$template24(`<a target=_blank rel="noopener noreferrer">`);
+var _tmpl$414 = /* @__PURE__ */ _$template24(`<div>`);
 function ProjectCard(props) {
   const size = () => props.size ?? "sm";
   const inactive = () => props.inactive ?? false;
   const cardContent = () => [(() => {
-    var _el$ = _tmpl$50(), _el$2 = _el$.firstChild;
-    insert(_el$2, () => props.name);
+    var _el$ = _$getNextElement24(_tmpl$50), _el$2 = _el$.firstChild;
+    _$insert22(_el$2, () => props.name);
     return _el$;
   })(), (() => {
-    var _el$3 = _tmpl$220();
-    effect((_p$) => {
+    var _el$3 = _$getNextElement24(_tmpl$220);
+    _$effect23((_p$) => {
       var _v$ = props.imageSrc, _v$2 = props.imageAlt ?? props.name;
-      _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$3, "alt", _p$.t = _v$2);
+      _v$ !== _p$.e && _$setAttribute10(_el$3, "src", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute10(_el$3, "alt", _p$.t = _v$2);
       return _p$;
     }, {
       e: void 0,
@@ -1996,12 +2295,12 @@ function ProjectCard(props) {
   const cardClasses = () => `vui-project-card vui-project-card--${size()} ${inactive() ? "vui-project-card--inactive" : ""} ${props.class ?? ""}`;
   if (props.href) {
     return (() => {
-      var _el$4 = _tmpl$315();
-      insert(_el$4, cardContent);
-      effect((_p$) => {
+      var _el$4 = _$getNextElement24(_tmpl$315);
+      _$insert22(_el$4, cardContent);
+      _$effect23((_p$) => {
         var _v$3 = props.href, _v$4 = cardClasses();
-        _v$3 !== _p$.e && setAttribute(_el$4, "href", _p$.e = _v$3);
-        _v$4 !== _p$.t && className(_el$4, _p$.t = _v$4);
+        _v$3 !== _p$.e && _$setAttribute10(_el$4, "href", _p$.e = _v$3);
+        _v$4 !== _p$.t && _$className22(_el$4, _p$.t = _v$4);
         return _p$;
       }, {
         e: void 0,
@@ -2011,25 +2310,72 @@ function ProjectCard(props) {
     })();
   }
   return (() => {
-    var _el$5 = _tmpl$414();
-    insert(_el$5, cardContent);
-    effect(() => className(_el$5, cardClasses()));
+    var _el$5 = _$getNextElement24(_tmpl$414);
+    _$insert22(_el$5, cardContent);
+    _$effect23(() => _$className22(_el$5, cardClasses()));
     return _el$5;
   })();
 }
-var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
+
+// src/custom/page-layout/index.tsx
+import { template as _$template25 } from "solid-js/web";
+import { getNextElement as _$getNextElement25 } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents11 } from "solid-js/web";
+import { insert as _$insert23 } from "solid-js/web";
+import { spread as _$spread4 } from "solid-js/web";
+import { mergeProps as _$mergeProps9 } from "solid-js/web";
+import { splitProps as splitProps9 } from "solid-js";
+var _tmpl$51 = /* @__PURE__ */ _$template25(`<div>`);
 function PageLayout(props) {
-  const [local, rest] = splitProps(props, ["children", "class"]);
+  const [local, rest] = splitProps9(props, ["children", "class"]);
   return (() => {
-    var _el$ = _tmpl$51();
-    spread(_el$, mergeProps$1({
+    var _el$ = _$getNextElement25(_tmpl$51);
+    _$spread4(_el$, _$mergeProps9({
       get ["class"]() {
         return `vui-page ${local.class ?? ""}`;
       }
     }, rest), false, true);
-    insert(_el$, () => local.children);
+    _$insert23(_el$, () => local.children);
+    _$runHydrationEvents11();
     return _el$;
   })();
 }
-
-export { Alert, Avatar, AvatarGroup, Badge, Button, CalendarCard, Checkbox, CheckboxGroup, Chip, Conversation, ConversationBubble, ConversationPreview, Dialog, EventCard, EventListItem, GitHubIcon, Icon, LateralNav, Link, Logo, NavHeader, NavItem, NavLink, NavSection, PageLayout, ProfileCard, ProgressBar, ProjectCard, Radio, RadioGroup, Separator, TabSwitch, TextField, TimelineItem, ToggleSwitch, Tooltip };
+export {
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Button,
+  CalendarCard,
+  Checkbox,
+  CheckboxGroup,
+  Chip,
+  Conversation,
+  ConversationBubble,
+  ConversationPreview,
+  Dialog,
+  EventCard,
+  EventListItem,
+  GitHubIcon,
+  Icon,
+  LateralNav,
+  Link,
+  Logo,
+  NavHeader,
+  NavItem,
+  NavLink,
+  NavSection,
+  PageLayout,
+  ProfileCard,
+  ProgressBar,
+  ProjectCard,
+  Radio,
+  RadioGroup,
+  Separator,
+  TabSwitch,
+  TextField,
+  TimelineItem,
+  ToggleSwitch,
+  Tooltip
+};
+//# sourceMappingURL=index.js.map