npm - @proyecto-viviana/ui - Versions diffs - 0.1.4 → 0.1.5 - Mend

@proyecto-viviana/ui 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -1,15 +1,16 @@
-import { createComponent, mergeProps as mergeProps$1, template, insert, effect, className, addEventListener, delegateEvents, setAttribute, memo, spread, setStyleProperty } from 'solid-js/web';
-import { mergeProps, splitProps, Show, createSignal, createEffect, createContext, 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}`];
@@ -24,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 +42,17 @@ function Button(props) {
   }));
 }
-var _tmpl$$o = /* @__PURE__ */ template(`<span>`), _tmpl$2$j = /* @__PURE__ */ template(`<div>`);
-const variantStyles$5 = {
+// 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",
   accent: "bg-accent-300 text-black",
@@ -50,7 +60,7 @@ const variantStyles$5 = {
   warning: "bg-warning-400 text-black",
   danger: "bg-danger-400 text-white"
 };
-const sizeStyles$6 = {
+var sizeStyles = {
   sm: "w-5 h-5 text-xs",
   md: "w-7 h-7 text-xs",
   lg: "w-9 h-9 text-sm"
@@ -59,8 +69,8 @@ function Badge(props) {
   const variant = () => props.variant ?? "accent";
   const size = () => props.size ?? "md";
   return (() => {
-    var _el$ = _tmpl$2$j();
-    insert(_el$, createComponent(Show, {
+    var _el$ = _$getNextElement(_tmpl$2);
+    _$insert(_el$, _$createComponent2(Show, {
       get when() {
         return props.count !== void 0;
       },
@@ -68,18 +78,33 @@ function Badge(props) {
         return props.children;
       },
       get children() {
-        var _el$2 = _tmpl$$o();
-        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$5[variant()]} ${sizeStyles$6[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$$n = /* @__PURE__ */ template(`<span class="font-semibold font-jost">`), _tmpl$2$i = /* @__PURE__ */ template(`<span class=opacity-50>|`), _tmpl$3$d = /* @__PURE__ */ template(`<button class="hover:opacity-70 transition-opacity ml-2"aria-label=Dismiss>✕`), _tmpl$4$d = /* @__PURE__ */ template(`<div role=alert><div class="flex items-center gap-3 flex-1"><div class=flex-1>`);
-const variantStyles$4 = {
+// 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",
   warning: "bg-warning-600 text-warning-100 border border-warning-400",
@@ -88,38 +113,52 @@ const variantStyles$4 = {
 function Alert(props) {
   const variant = () => props.variant ?? "info";
   return (() => {
-    var _el$ = _tmpl$4$d(), _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$$n();
-          insert(_el$3, () => props.title);
+          var _el$3 = _$getNextElement2(_tmpl$3);
+          _$insert2(_el$3, () => props.title);
           return _el$3;
-        })(), _tmpl$2$i()];
+        })(), _$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$3$d();
-        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 ${variantStyles$4[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"]);
+_$delegateEvents(["click"]);
-var _tmpl$$m = /* @__PURE__ */ template(`<img class="w-full h-full object-cover">`), _tmpl$2$h = /* @__PURE__ */ template(`<span>`), _tmpl$3$c = /* @__PURE__ */ template(`<div><div>`), _tmpl$4$c = /* @__PURE__ */ template(`<div class="flex -space-x-2">`);
-const sizeStyles$5 = {
+// 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",
     text: "text-xs",
@@ -148,32 +187,32 @@ const sizeStyles$5 = {
 };
 function Avatar(props) {
   const size = () => props.size ?? "md";
-  const styles = () => sizeStyles$5[size()];
+  const styles = () => sizeStyles2[size()];
   const initials = () => {
     if (props.fallback) return props.fallback.slice(0, 2).toUpperCase();
     if (props.alt) return props.alt.slice(0, 2).toUpperCase();
     return "?";
   };
   return (() => {
-    var _el$ = _tmpl$3$c(), _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$2$h();
-          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$$m();
-        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,
@@ -182,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$2$h();
-        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,
@@ -206,14 +245,37 @@ function Avatar(props) {
 }
 function AvatarGroup(props) {
   return (() => {
-    var _el$6 = _tmpl$4$c();
-    insert(_el$6, () => props.children);
-    return _el$6;
+    var _el$8 = _$getNextElement3(_tmpl$42);
+    _$insert3(_el$8, () => props.children);
+    return _el$8;
   })();
 }
-var _tmpl$$l = /* @__PURE__ */ template(`<span><span>`), _tmpl$2$g = /* @__PURE__ */ template(`<span class=text-primary-200>`);
-const sizeStyles$4 = {
+// 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",
     thumb: "h-4 w-4",
@@ -234,38 +296,39 @@ function ToggleSwitch(props) {
   const defaultProps = {
     size: "md"
   };
-  const merged = mergeProps(defaultProps, props);
-  const [local, headlessProps] = splitProps(merged, ["size", "class", "children"]);
-  const size = () => sizeStyles$4[local.size];
+  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";
     const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
     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$$l(), _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$2$g();
-      insert(_el$3, () => local.children);
+    })(), _$memo2(() => _$memo2(() => !!local.children)() && (() => {
+      var _el$3 = _$getNextElement4(_tmpl$24);
+      _$insert4(_el$3, () => local.children);
       return _el$3;
     })())]
   }));
 }
-var _tmpl$$k = /* @__PURE__ */ template(`<div><div></div><div class="flex z-10 h-8 justify-around"><button type=button><span></span></button><button type=button><span>`);
+// src/switch/index.tsx
+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(() => {
@@ -286,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$$k(), _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 ?? "ÚLTIMOS");
-    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,
@@ -303,13 +366,32 @@ function TabSwitch(props) {
       a: void 0,
       o: void 0
     });
+    _$runHydrationEvents2();
     return _el$;
   })();
 }
-delegateEvents(["click"]);
+_$delegateEvents2(["click"]);
-var _tmpl$$j = /* @__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>`), _tmpl$2$f = /* @__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>`), _tmpl$3$b = /* @__PURE__ */ template(`<span>`), _tmpl$4$b = /* @__PURE__ */ template(`<span class="text-sm font-medium text-primary-200">`), _tmpl$5$6 = /* @__PURE__ */ template(`<div class="flex flex-col gap-2">`), _tmpl$6$3 = /* @__PURE__ */ template(`<span class="text-sm text-primary-400">`), _tmpl$7$2 = /* @__PURE__ */ template(`<span class="text-sm text-danger-400">`);
-const sizeStyles$3 = {
+// 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",
     icon: "h-3 w-3",
@@ -328,15 +410,15 @@ const sizeStyles$3 = {
 };
 function CheckIcon(props) {
   return (() => {
-    var _el$ = _tmpl$$j();
-    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$2$f();
-    effect(() => setAttribute(_el$2, "class", props.class));
+    var _el$2 = _$getNextElement6(_tmpl$25);
+    _$effect6(() => _$setAttribute2(_el$2, "class", props.class));
     return _el$2;
   })();
 }
@@ -344,16 +426,16 @@ function Checkbox(props) {
   const defaultProps = {
     size: "md"
   };
-  const merged = mergeProps(defaultProps, props);
-  const [local, headlessProps] = splitProps(merged, ["size", "class", "children"]);
-  const size = () => sizeStyles$3[local.size];
+  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";
     const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
     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 = () => {
@@ -384,36 +466,36 @@ function Checkbox(props) {
         return [base, sizeClass, disabledClass].filter(Boolean).join(" ");
       };
       return [(() => {
-        var _el$3 = _tmpl$3$b();
-        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$3$b();
-          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;
         }
       })];
@@ -421,54 +503,69 @@ 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$4$b();
-      insert(_el$5, () => local.label);
+      var _el$5 = _$getNextElement6(_tmpl$43);
+      _$insert6(_el$5, () => local.label);
       return _el$5;
     }
   }), (() => {
-    var _el$6 = _tmpl$5$6();
-    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$6$3();
-      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$7$2();
-      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$$i = /* @__PURE__ */ template(`<span class="text-primary-200 font-medium mb-1">`), _tmpl$2$e = /* @__PURE__ */ template(`<span class="text-primary-400 text-sm">`), _tmpl$3$a = /* @__PURE__ */ template(`<span class="text-danger-400 text-sm">`), _tmpl$4$a = /* @__PURE__ */ template(`<span><span>`), _tmpl$5$5 = /* @__PURE__ */ template(`<span>`);
-const RadioSizeContext = createContext("md");
-const sizeStyles$2 = {
+// 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: {
     circle: "h-4 w-4",
     dot: "h-2 w-2",
@@ -486,7 +583,7 @@ const sizeStyles$2 = {
   }
 };
 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) => {
@@ -495,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$$i();
-      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$2$e();
-      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$3$a();
-      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
@@ -536,7 +633,7 @@ function RadioGroup(props) {
 }
 function Radio(props) {
   const sizeFromContext = useContext(RadioSizeContext);
-  const size = () => sizeStyles$2[sizeFromContext];
+  const size = () => sizeStyles5[sizeFromContext];
   const customClass = props.class ?? "";
   const getClassName = (renderProps) => {
     const base = "inline-flex items-center gap-2 cursor-pointer";
@@ -548,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 = () => {
@@ -580,23 +677,23 @@ function Radio(props) {
       };
       const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
       return [(() => {
-        var _el$4 = _tmpl$4$a(), _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$5$5();
-          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;
         }
       })];
@@ -604,8 +701,31 @@ function Radio(props) {
   }));
 }
-var _tmpl$$h = /* @__PURE__ */ template(`<button><span>`), _tmpl$2$d = /* @__PURE__ */ template(`<span class=mr-1.5>`);
-const variantStyles$3 = {
+// 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",
   accent: "bg-accent text-white",
@@ -614,51 +734,56 @@ const variantStyles$3 = {
 function Chip(props) {
   const variant = () => props.variant ?? "primary";
   return (() => {
-    var _el$ = _tmpl$$h(), _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$2$d();
-        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 ${variantStyles$3[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"]);
-var _tmpl$$g = /* @__PURE__ */ template(`<span class="text-base font-normal text-primary-300">`), _tmpl$2$c = /* @__PURE__ */ template(`<div class="flex flex-1 flex-row items-end justify-center gap-5 py-5">`), _tmpl$3$9 = /* @__PURE__ */ template(`<div class="relative bottom-4 right-4 w-full"><div class="flex flex-row justify-end gap-2 pr-4">`), _tmpl$4$9 = /* @__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">`);
+// src/dialog/index.tsx
+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$4$9(), _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$$g();
-        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$2$c();
-        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() {
@@ -669,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;
@@ -685,37 +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$3$9(), _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$$f = /* @__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$$f();
-    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,
@@ -726,28 +869,30 @@ function GitHubIcon(props) {
   })();
 }
-var _tmpl$$e = /* @__PURE__ */ template(`<div><div class=vui-icon__main>`), _tmpl$2$b = /* @__PURE__ */ template(`<div class=vui-icon__shadow>`);
+// src/icon/index.tsx
+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$$e(), _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$2$b();
-        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();
       },
@@ -755,23 +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"]);
+_$delegateEvents4(["click"]);
-var _tmpl$$d = /* @__PURE__ */ template(`<div><div class=vui-tooltip__trigger></div><div><span>`);
+// 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$$d(), _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,
@@ -781,26 +933,45 @@ function Tooltip(props) {
   })();
 }
+// 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;
 }
 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,
@@ -808,8 +979,12 @@ function createTextFieldState(props = {}) {
   };
 }
-var _tmpl$$c = /* @__PURE__ */ template(`<span class="text-danger-400 ml-0.5">*`), _tmpl$2$a = /* @__PURE__ */ template(`<label>`), _tmpl$3$8 = /* @__PURE__ */ template(`<p>`), _tmpl$4$8 = /* @__PURE__ */ template(`<div><input>`);
-const sizeStyles$1 = {
+// src/textfield/index.tsx
+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",
     label: "text-sm",
@@ -831,9 +1006,9 @@ function TextField(props) {
     size: "md",
     variant: "outline"
   };
-  const merged = mergeProps(defaultProps, props);
-  const [local, ariaProps] = splitProps(merged, ["size", "variant", "class", "label", "description", "errorMessage"]);
-  const size = () => sizeStyles$1[local.size];
+  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,
     defaultValue: ariaProps.defaultValue,
@@ -926,74 +1101,77 @@ function TextField(props) {
     return rest;
   };
   return (() => {
-    var _el$ = _tmpl$4$8(), _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$2$a();
-        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$$c();
+            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$3$8();
-        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$3$8();
-        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,
@@ -1004,22 +1182,28 @@ function TextField(props) {
       n: void 0,
       s: void 0
     });
+    _$runHydrationEvents5();
     return _el$;
   })();
 }
-const variantStyles$2 = {
+// 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) => {
     const base = "transition-colors duration-200 cursor-pointer rounded-sm outline-none";
-    const variantClass = variantStyles$2[variant];
+    const variantClass = variantStyles4[variant];
     let underlineClass;
     if (local.isStandalone && local.isQuiet) {
       underlineClass = renderProps.isHovered || renderProps.isFocusVisible ? "underline" : "no-underline";
@@ -1032,7 +1216,7 @@ 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;
@@ -1040,8 +1224,26 @@ function Link(props) {
   }));
 }
-var _tmpl$$b = /* @__PURE__ */ template(`<span class="text-primary-200 font-medium">`), _tmpl$2$9 = /* @__PURE__ */ template(`<span class=text-primary-300>`), _tmpl$3$7 = /* @__PURE__ */ template(`<div>`), _tmpl$4$7 = /* @__PURE__ */ template(`<div><div><div>`);
-const sizeStyles = {
+// 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",
     text: "text-xs"
@@ -1055,7 +1257,7 @@ const sizeStyles = {
     text: "text-base"
   }
 };
-const variantStyles$1 = {
+var variantStyles5 = {
   primary: "bg-primary-500",
   accent: "bg-accent",
   success: "bg-green-500",
@@ -1066,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;
@@ -1105,81 +1307,92 @@ function ProgressBar(props) {
     return (clampedValue - minValue) / (maxValue - minValue) * 100;
   });
   const valueText = () => progressAria.progressBarProps["aria-valuetext"];
-  const sizeConfig = () => sizeStyles[size()];
+  const sizeConfig = () => sizeStyles7[size()];
   return (() => {
-    var _el$ = _tmpl$4$7(), _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$3$7();
-        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$$b();
-            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$2$9();
-            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$) => {
-      var _v$ = `w-full ${sizeConfig().track} bg-bg-300 rounded-full overflow-hidden`, _v$2 = `h-full rounded-full transition-all duration-300 ${variantStyles$1[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);
+    }), _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 && _$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$$a = /* @__PURE__ */ template(`<div>`), _tmpl$2$8 = /* @__PURE__ */ template(`<hr>`);
-const variantStyles = {
+// 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",
   strong: "bg-primary-600"
 };
-const horizontalSizeStyles = {
+var horizontalSizeStyles = {
   sm: "h-px",
   md: "h-0.5",
   lg: "h-1"
 };
-const verticalSizeStyles = {
+var verticalSizeStyles = {
   sm: "w-px",
   md: "w-0.5",
   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";
     }
@@ -1196,12 +1409,12 @@ function Separator(props) {
       return ariaProps["aria-label"];
     }
   });
-  const className = createMemo(() => {
+  const className = createMemo2(() => {
     const isVertical = orientation() === "vertical";
-    const sizeStyles = isVertical ? verticalSizeStyles : horizontalSizeStyles;
+    const sizeStyles8 = isVertical ? verticalSizeStyles : horizontalSizeStyles;
     const base = [
-      variantStyles[variant()],
-      sizeStyles[size()],
+      variantStyles6[variant()],
+      sizeStyles8[size()],
       isVertical ? "h-full self-stretch" : "w-full",
       "border-0",
       // Reset hr default border
@@ -1216,59 +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$2$8();
-        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$$a();
-      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$$9 = /* @__PURE__ */ template(`<img class="h-[42px] w-auto">`), _tmpl$2$7 = /* @__PURE__ */ template(`<button class="md:hidden flex items-center justify-center">`), _tmpl$3$6 = /* @__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">`), _tmpl$4$6 = /* @__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$3$6(), _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$4$6();
-            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$$9();
-        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,
@@ -1277,31 +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$2$7();
-        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"]);
+_$delegateEvents5(["click"]);
-var _tmpl$$8 = /* @__PURE__ */ template(`<li><span class="text-lg font-bold text-primary-200">`), _tmpl$2$6 = /* @__PURE__ */ template(`<a>`), _tmpl$3$5 = /* @__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">`), _tmpl$4$5 = /* @__PURE__ */ template(`<li>`), _tmpl$5$4 = /* @__PURE__ */ template(`<div>`);
+// 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$$8(), _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$;
   })();
 }
@@ -1309,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$2$6();
-    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$3$5(), _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$4$5();
-            insert(_el$8, createComponent(NavLink, {
+            var _el$14 = _$getNextElement17(_tmpl$49);
+            _$insert15(_el$14, _$createComponent15(NavLink, {
               get href() {
                 return link.href;
               },
@@ -1353,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$5$4();
-    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$$7 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200">`), _tmpl$2$5 = /* @__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">`);
-const eventMessages = {
+// 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$$7();
-    insert(_el$, left);
+    var _el$ = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$, left);
     return _el$;
   })(), " ha empezado a seguir a ", (() => {
-    var _el$2 = _tmpl$$7();
-    insert(_el$2, right);
+    var _el$2 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$2, right);
     return _el$2;
   })()],
   like: (left, right) => [(() => {
-    var _el$3 = _tmpl$$7();
-    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$$7();
-    insert(_el$4, right);
+    var _el$4 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$4, right);
     return _el$4;
   })()],
   comment: (left, right) => [(() => {
-    var _el$5 = _tmpl$$7();
-    insert(_el$5, left);
+    var _el$5 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$5, left);
     return _el$5;
   })(), " ha comentado en ", (() => {
-    var _el$6 = _tmpl$$7();
-    insert(_el$6, right);
+    var _el$6 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$6, right);
     return _el$6;
   })()],
   event: (left, right) => [(() => {
-    var _el$7 = _tmpl$$7();
-    insert(_el$7, left);
+    var _el$7 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$7, left);
     return _el$7;
-  })(), " asistirá al evento de ", (() => {
-    var _el$8 = _tmpl$$7();
-    insert(_el$8, right);
+  })(), " asistir\xE1 al evento de ", (() => {
+    var _el$8 = _$getNextElement18(_tmpl$20);
+    _$insert16(_el$8, right);
     return _el$8;
   })()],
   custom: () => null
@@ -1418,13 +1674,13 @@ function TimelineItem(props) {
   const leftName = () => props.leftUser?.name ?? "";
   const rightName = () => props.rightUser?.name ?? "";
   return (() => {
-    var _el$9 = _tmpl$2$5(), _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;
           },
@@ -1433,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;
           },
@@ -1456,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;
       },
@@ -1468,17 +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$$6 = /* @__PURE__ */ template(`<span class="text-xs text-primary-500">`), _tmpl$2$4 = /* @__PURE__ */ template(`<p class="text-sm text-primary-400 truncate">`), _tmpl$3$4 = /* @__PURE__ */ template(`<span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">`), _tmpl$4$4 = /* @__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">`), _tmpl$5$3 = /* @__PURE__ */ template(`<span>`), _tmpl$6$2 = /* @__PURE__ */ template(`<div><div><p>`), _tmpl$7$1 = /* @__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$4$4(), _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;
       },
@@ -1489,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$$6();
-        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$2$4();
-        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$3$4();
-        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$6$2(), _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$5$3();
-        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$7$1();
-    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;
         },
@@ -1572,13 +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"]);
+_$delegateEvents6(["click"]);
-var _tmpl$$5 = /* @__PURE__ */ template(`<p class="text-primary-300 text-sm mt-1 line-clamp-2">`), _tmpl$2$3 = /* @__PURE__ */ template(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> seguidores`), _tmpl$3$3 = /* @__PURE__ */ template(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> siguiendo`), _tmpl$4$3 = /* @__PURE__ */ template(`<div class="mt-4 flex gap-2">`), _tmpl$5$2 = /* @__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">`);
+// 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`;
@@ -1586,8 +1875,8 @@ function ProfileCard(props) {
     return num.toString();
   };
   return (() => {
-    var _el$ = _tmpl$5$2(), _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;
       },
@@ -1595,54 +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$$5();
-        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$2$3(), _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$3$3(), _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$4$3();
-        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$$4 = /* @__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">`), _tmpl$2$2 = /* @__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">`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class="flex items-center gap-1.5"><span class=text-accent>@</span><span>`), _tmpl$4$2 = /* @__PURE__ */ template(`<div class="flex items-center gap-1.5"><span class=text-accent>⏱</span><span>`), _tmpl$5$1 = /* @__PURE__ */ template(`<div class="flex items-center gap-4 mt-3 text-sm text-primary-300">`), _tmpl$6$1 = /* @__PURE__ */ template(`<span class="ml-2 text-sm text-primary-300">+<!> más`), _tmpl$7 = /* @__PURE__ */ template(`<div class="flex items-center mt-3"><div class="flex -space-x-2">`), _tmpl$8 = /* @__PURE__ */ template(`<div class="mt-4 flex gap-2">`), _tmpl$9 = /* @__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">`), _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">`), _tmpl$1 = /* @__PURE__ */ template(`<p class="text-sm text-primary-300 truncate">`), _tmpl$10 = /* @__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 = () => {
@@ -1651,18 +1965,18 @@ function EventCard(props) {
     return total - displayed;
   };
   return (() => {
-    var _el$ = _tmpl$9(), _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$$4(), _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,
@@ -1671,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$2$2(), _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,
@@ -1689,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$5$1();
-        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$3$2(), _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$4$2(), _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$7(), _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;
             },
@@ -1740,73 +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$6$1(), _el$18 = _el$17.firstChild, _el$20 = _el$18.nextSibling; _el$20.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$8();
-        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$10(), _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"]);
+_$delegateEvents7(["click"]);
-var _tmpl$$3 = /* @__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">`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class="absolute bottom-[-20px] h-[30px] w-full"><div class="flex h-full w-full flex-1 justify-end gap-1">`), _tmpl$3$1 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200"> más`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="flex flex-1"><span class="text-base font-normal text-primary-500">seguida por `), _tmpl$5 = /* @__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">`), _tmpl$6 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200">`);
+// 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 = () => {
@@ -1815,17 +2146,17 @@ function CalendarCard(props) {
     return total - displayed;
   };
   return (() => {
-    var _el$ = _tmpl$5(), _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$$3(), _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,
@@ -1833,63 +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$2$1(), _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$4$1(), _el$1 = _el$0.firstChild; _el$1.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$6();
-            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$3$1(), _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$$2 = /* @__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) {
@@ -1907,13 +2245,13 @@ function Logo(props) {
   const firstWord = () => props.firstWord ?? "Proyecto";
   const secondWord = () => props.secondWord ?? "Viviana";
   return (() => {
-    var _el$ = _tmpl$$2(), _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,
@@ -1923,20 +2261,30 @@ function Logo(props) {
   })();
 }
-var _tmpl$$1 = /* @__PURE__ */ template(`<div class=vui-project-card__tooltip><span>`), _tmpl$2 = /* @__PURE__ */ template(`<img class=vui-project-card__image>`), _tmpl$3 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer">`), _tmpl$4 = /* @__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$$1(), _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$2();
-    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,
@@ -1947,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$3();
-      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,
@@ -1962,27 +2310,72 @@ function ProjectCard(props) {
     })();
   }
   return (() => {
-    var _el$5 = _tmpl$4();
-    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$ = /* @__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$();
-    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 };
-//# sourceMappingURL=index.js.map
+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