@proyecto-viviana/ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,8 +1,9 @@
-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 { delegateEvents, createComponent, mergeProps as mergeProps$1, template, insert, effect, className, addEventListener, setAttribute, memo, spread, setStyleProperty } from 'solid-js/web';
+import { createContext, mergeProps, splitProps, Show, createSignal, createEffect, useContext, createMemo, For } from 'solid-js';
 import { Button as Button$1, ToggleSwitch as ToggleSwitch$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Link as Link$1 } from '@proyecto-viviana/solidaria-components';
 import { createTextField, createFocusRing, createProgressBar, createSeparator } from '@proyecto-viviana/solidaria';
 
+// src/button/Button.tsx
 function Button(props) {
   const defaultProps = {
     variant: "primary",
@@ -40,9 +41,9 @@ function Button(props) {
     }
   }));
 }
-
-var _tmpl$$o = /* @__PURE__ */ template(`<span>`), _tmpl$2$j = /* @__PURE__ */ template(`<div>`);
-const variantStyles$5 = {
+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 +51,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,7 +60,7 @@ function Badge(props) {
   const variant = () => props.variant ?? "accent";
   const size = () => props.size ?? "md";
   return (() => {
-    var _el$ = _tmpl$2$j();
+    var _el$ = _tmpl$2();
     insert(_el$, createComponent(Show, {
       get when() {
         return props.count !== void 0;
@@ -68,18 +69,20 @@ function Badge(props) {
         return props.children;
       },
       get children() {
-        var _el$2 = _tmpl$$o();
+        var _el$2 = _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 = {
+var _tmpl$3 = /* @__PURE__ */ template(`<span class="font-semibold font-jost">`);
+var _tmpl$22 = /* @__PURE__ */ template(`<span class=opacity-50>|`);
+var _tmpl$32 = /* @__PURE__ */ template(`<button class="hover:opacity-70 transition-opacity ml-2"aria-label=Dismiss>\u2715`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div role=alert><div class="flex items-center gap-3 flex-1"><div class=flex-1>`);
+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,17 +91,17 @@ 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;
+    var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$5 = _el$2.firstChild;
     insert(_el$2, createComponent(Show, {
       get when() {
         return props.title;
       },
       get children() {
         return [(() => {
-          var _el$3 = _tmpl$$n();
+          var _el$3 = _tmpl$3();
           insert(_el$3, () => props.title);
           return _el$3;
-        })(), _tmpl$2$i()];
+        })(), _tmpl$22()];
       }
     }), _el$5);
     insert(_el$5, () => props.children);
@@ -107,19 +110,21 @@ function Alert(props) {
         return props.dismissible;
       },
       get children() {
-        var _el$6 = _tmpl$3$d();
+        var _el$6 = _tmpl$32();
         addEventListener(_el$6, "click", props.onDismiss, true);
         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 ?? ""}`));
+    effect(() => className(_el$, `flex items-center min-h-[50px] font-normal rounded-lg px-4 py-2 ${variantStyles2[variant()]} ${props.class ?? ""}`));
     return _el$;
   })();
 }
 delegateEvents(["click"]);
-
-var _tmpl$$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 = {
+var _tmpl$5 = /* @__PURE__ */ template(`<img class="w-full h-full object-cover">`);
+var _tmpl$23 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class="flex -space-x-2">`);
+var sizeStyles2 = {
   xs: {
     container: "w-6 h-6",
     text: "text-xs",
@@ -148,28 +153,28 @@ 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;
+    var _el$ = _tmpl$33(), _el$2 = _el$.firstChild;
     insert(_el$2, createComponent(Show, {
       get when() {
         return props.src;
       },
       get fallback() {
         return (() => {
-          var _el$5 = _tmpl$2$h();
+          var _el$5 = _tmpl$23();
           insert(_el$5, initials);
           effect(() => className(_el$5, `${styles().text} font-medium text-primary-300`));
           return _el$5;
         })();
       },
       get children() {
-        var _el$3 = _tmpl$$m();
+        var _el$3 = _tmpl$5();
         effect((_p$) => {
           var _v$ = props.src, _v$2 = props.alt ?? "Avatar";
           _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
@@ -187,7 +192,7 @@ function Avatar(props) {
         return props.online !== void 0;
       },
       get children() {
-        var _el$4 = _tmpl$2$h();
+        var _el$4 = _tmpl$23();
         effect(() => className(_el$4, `absolute bottom-0 right-0 ${styles().indicator} rounded-full ring-2 ring-bg-400 ${props.online ? "bg-success-400" : "bg-bg-light"}`));
         return _el$4;
       }
@@ -206,14 +211,14 @@ function Avatar(props) {
 }
 function AvatarGroup(props) {
   return (() => {
-    var _el$6 = _tmpl$4$c();
+    var _el$6 = _tmpl$42();
     insert(_el$6, () => props.children);
     return _el$6;
   })();
 }
-
-var _tmpl$$l = /* @__PURE__ */ template(`<span><span>`), _tmpl$2$g = /* @__PURE__ */ template(`<span class=text-primary-200>`);
-const sizeStyles$4 = {
+var _tmpl$6 = /* @__PURE__ */ template(`<span><span>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<span class=text-primary-200>`);
+var sizeStyles3 = {
   sm: {
     track: "h-5 w-9",
     thumb: "h-4 w-4",
@@ -236,7 +241,7 @@ function ToggleSwitch(props) {
   };
   const merged = mergeProps(defaultProps, props);
   const [local, headlessProps] = splitProps(merged, ["size", "class", "children"]);
-  const size = () => sizeStyles$4[local.size];
+  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" : "";
@@ -246,7 +251,7 @@ function ToggleSwitch(props) {
   return createComponent(ToggleSwitch$1, mergeProps$1(headlessProps, {
     "class": getClassName,
     children: (renderProps) => [(() => {
-      var _el$ = _tmpl$$l(), _el$2 = _el$.firstChild;
+      var _el$ = _tmpl$6(), _el$2 = _el$.firstChild;
       effect((_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$);
@@ -258,14 +263,15 @@ function ToggleSwitch(props) {
       });
       return _el$;
     })(), memo(() => memo(() => !!local.children)() && (() => {
-      var _el$3 = _tmpl$2$g();
+      var _el$3 = _tmpl$24();
       insert(_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__ */ template(`<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,10 +292,10 @@ 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$ = _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");
+    insert(_el$7, () => props.options[1]?.label ?? "\xDALTIMOS");
     effect((_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$);
@@ -307,9 +313,14 @@ function TabSwitch(props) {
   })();
 }
 delegateEvents(["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 = {
+var _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1 5L4.5 8.5L11 1"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 2"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1 1H11"stroke=currentColor stroke-width=2 stroke-linecap=round>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$43 = /* @__PURE__ */ template(`<span class="text-sm font-medium text-primary-200">`);
+var _tmpl$52 = /* @__PURE__ */ template(`<div class="flex flex-col gap-2">`);
+var _tmpl$62 = /* @__PURE__ */ template(`<span class="text-sm text-primary-400">`);
+var _tmpl$72 = /* @__PURE__ */ template(`<span class="text-sm text-danger-400">`);
+var sizeStyles4 = {
   sm: {
     box: "h-4 w-4",
     icon: "h-3 w-3",
@@ -328,14 +339,14 @@ const sizeStyles$3 = {
 };
 function CheckIcon(props) {
   return (() => {
-    var _el$ = _tmpl$$j();
+    var _el$ = _tmpl$8();
     effect(() => setAttribute(_el$, "class", props.class));
     return _el$;
   })();
 }
 function IndeterminateIcon(props) {
   return (() => {
-    var _el$2 = _tmpl$2$f();
+    var _el$2 = _tmpl$25();
     effect(() => setAttribute(_el$2, "class", props.class));
     return _el$2;
   })();
@@ -346,7 +357,7 @@ function Checkbox(props) {
   };
   const merged = mergeProps(defaultProps, props);
   const [local, headlessProps] = splitProps(merged, ["size", "class", "children"]);
-  const size = () => sizeStyles$3[local.size];
+  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" : "";
@@ -384,7 +395,7 @@ function Checkbox(props) {
         return [base, sizeClass, disabledClass].filter(Boolean).join(" ");
       };
       return [(() => {
-        var _el$3 = _tmpl$3$b();
+        var _el$3 = _tmpl$34();
         insert(_el$3, createComponent(Show, {
           get when() {
             return !renderProps.isIndeterminate;
@@ -411,7 +422,7 @@ function Checkbox(props) {
           return local.children;
         },
         get children() {
-          var _el$4 = _tmpl$3$b();
+          var _el$4 = _tmpl$34();
           insert(_el$4, () => local.children);
           effect(() => className(_el$4, labelClasses()));
           return _el$4;
@@ -433,12 +444,12 @@ function CheckboxGroup(props) {
       return local.label;
     },
     get children() {
-      var _el$5 = _tmpl$4$b();
+      var _el$5 = _tmpl$43();
       insert(_el$5, () => local.label);
       return _el$5;
     }
   }), (() => {
-    var _el$6 = _tmpl$5$6();
+    var _el$6 = _tmpl$52();
     insert(_el$6, () => local.children);
     return _el$6;
   })(), createComponent(Show, {
@@ -446,7 +457,7 @@ function CheckboxGroup(props) {
       return memo(() => !!local.description)() && !renderProps.isInvalid;
     },
     get children() {
-      var _el$7 = _tmpl$6$3();
+      var _el$7 = _tmpl$62();
       insert(_el$7, () => local.description);
       return _el$7;
     }
@@ -455,7 +466,7 @@ function CheckboxGroup(props) {
       return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
     },
     get children() {
-      var _el$8 = _tmpl$7$2();
+      var _el$8 = _tmpl$72();
       insert(_el$8, () => local.errorMessage);
       return _el$8;
     }
@@ -465,10 +476,13 @@ function CheckboxGroup(props) {
     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 = {
+var _tmpl$9 = /* @__PURE__ */ template(`<span class="text-primary-200 font-medium mb-1">`);
+var _tmpl$26 = /* @__PURE__ */ template(`<span class="text-primary-400 text-sm">`);
+var _tmpl$35 = /* @__PURE__ */ template(`<span class="text-danger-400 text-sm">`);
+var _tmpl$44 = /* @__PURE__ */ template(`<span><span>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<span>`);
+var RadioSizeContext = createContext("md");
+var sizeStyles5 = {
   sm: {
     circle: "h-4 w-4",
     dot: "h-2 w-2",
@@ -500,7 +514,7 @@ function RadioGroup(props) {
       return local.label;
     },
     get children() {
-      var _el$ = _tmpl$$i();
+      var _el$ = _tmpl$9();
       insert(_el$, () => local.label);
       return _el$;
     }
@@ -509,7 +523,7 @@ function RadioGroup(props) {
       return memo(() => !!local.description)() && !renderProps.isInvalid;
     },
     get children() {
-      var _el$2 = _tmpl$2$e();
+      var _el$2 = _tmpl$26();
       insert(_el$2, () => local.description);
       return _el$2;
     }
@@ -518,7 +532,7 @@ function RadioGroup(props) {
       return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
     },
     get children() {
-      var _el$3 = _tmpl$3$a();
+      var _el$3 = _tmpl$35();
       insert(_el$3, () => local.errorMessage);
       return _el$3;
     }
@@ -536,7 +550,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";
@@ -580,7 +594,7 @@ function Radio(props) {
       };
       const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
       return [(() => {
-        var _el$4 = _tmpl$4$a(), _el$5 = _el$4.firstChild;
+        var _el$4 = _tmpl$44(), _el$5 = _el$4.firstChild;
         effect((_p$) => {
           var _v$ = circleClasses(), _v$2 = dotClasses();
           _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
@@ -594,7 +608,7 @@ function Radio(props) {
       })(), createComponent(Show, {
         when: resolvedChildren,
         get children() {
-          var _el$6 = _tmpl$5$5();
+          var _el$6 = _tmpl$53();
           insert(_el$6, resolvedChildren);
           effect(() => className(_el$6, labelClasses()));
           return _el$6;
@@ -603,9 +617,9 @@ function Radio(props) {
     }
   }));
 }
-
-var _tmpl$$h = /* @__PURE__ */ template(`<button><span>`), _tmpl$2$d = /* @__PURE__ */ template(`<span class=mr-1.5>`);
-const variantStyles$3 = {
+var _tmpl$10 = /* @__PURE__ */ template(`<button><span>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<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,34 +628,38 @@ const variantStyles$3 = {
 function Chip(props) {
   const variant = () => props.variant ?? "primary";
   return (() => {
-    var _el$ = _tmpl$$h(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$10(), _el$2 = _el$.firstChild;
     addEventListener(_el$, "click", props.onClick, true);
     insert(_el$, (() => {
       var _c$ = memo(() => !!props.icon);
       return () => _c$() && (() => {
-        var _el$3 = _tmpl$2$d();
+        var _el$3 = _tmpl$27();
         insert(_el$3, () => props.icon);
         return _el$3;
       })();
     })(), _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 ?? ""}`));
+    effect(() => className(_el$, `flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles3[variant()]} ${props.class ?? ""}`));
     return _el$;
   })();
 }
 delegateEvents(["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__ */ template(`<span class="text-base font-normal text-primary-300">`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div class="flex flex-1 flex-row items-end justify-center gap-5 py-5">`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div class="relative bottom-4 right-4 w-full"><div class="flex flex-row justify-end gap-2 pr-4">`);
+var _tmpl$45 = /* @__PURE__ */ template(`<div><span class="relative left-8 top-4 bg-gradient-to-b from-primary-100 to-primary-500 bg-clip-text text-4xl font-extrabold text-transparent"></span><div class="flex h-[50px] flex-col justify-end rounded-t-[26px] bg-primary-800"><div class="flex h-[40px] flex-col justify-end rounded-t-[30px] bg-primary-600"><div class="flex h-[20px] items-center justify-end rounded-t-[100px] bg-primary-700 pr-4"></div></div></div><div class="mt-1 flex min-h-[200px] flex-col rounded-b-[26px] rounded-t-lg border-b border-accent-500 bg-bg-300"><div class="flex flex-1 flex-col p-4"><div class="text-lg text-gray-100">`);
 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;
+    var _el$ = _tmpl$45(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$7 = _el$3.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild;
     insert(_el$2, () => props.title);
     insert(_el$5, createComponent(Show, {
       get when() {
         return props.subtitle;
       },
       get children() {
-        var _el$6 = _tmpl$$g();
+        var _el$6 = _tmpl$11();
         insert(_el$6, () => props.subtitle);
         return _el$6;
       }
@@ -652,7 +670,7 @@ function Dialog(props) {
         return props.primaryAction || props.secondaryAction;
       },
       get children() {
-        var _el$0 = _tmpl$2$c();
+        var _el$0 = _tmpl$28();
         insert(_el$0, createComponent(Show, {
           get when() {
             return props.secondaryAction;
@@ -694,7 +712,7 @@ function Dialog(props) {
         return memo(() => !!props.tags)() && props.tags.length > 0;
       },
       get children() {
-        var _el$1 = _tmpl$3$9(), _el$10 = _el$1.firstChild;
+        var _el$1 = _tmpl$36(), _el$10 = _el$1.firstChild;
         insert(_el$10, () => props.tags.map((tag) => createComponent(Chip, {
           variant: "primary",
           text: tag
@@ -706,11 +724,10 @@ function Dialog(props) {
     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">`);
+var _tmpl$12 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"aria-hidden=true><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z">`);
 function GitHubIcon(props) {
   return (() => {
-    var _el$ = _tmpl$$f();
+    var _el$ = _tmpl$12();
     effect((_p$) => {
       var _v$ = props.size, _v$2 = props.size, _v$3 = props.color;
       _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -726,18 +743,20 @@ 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__ */ template(`<div><div class=vui-icon__main>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<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;
+    var _el$ = _tmpl$13(), _el$2 = _el$.firstChild;
     addEventListener(_el$, "click", props.onClick, true);
     insert(_el$, (() => {
       var _c$ = memo(() => !!props.withShadow);
       return () => _c$() && (() => {
-        var _el$3 = _tmpl$2$b();
+        var _el$3 = _tmpl$29();
         insert(_el$3, createComponent(IconComponent, {
           get size() {
             return size();
@@ -760,12 +779,11 @@ function Icon(props) {
   })();
 }
 delegateEvents(["click"]);
-
-var _tmpl$$d = /* @__PURE__ */ template(`<div><div class=vui-tooltip__trigger></div><div><span>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<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;
+    var _el$ = _tmpl$14(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
     insert(_el$2, () => props.children);
     insert(_el$4, () => props.label);
     effect((_p$) => {
@@ -780,11 +798,9 @@ function Tooltip(props) {
     return _el$;
   })();
 }
-
 function access(value) {
   return typeof value === "function" ? value() : value;
 }
-
 function createTextFieldState(props = {}) {
   const getProps = () => access(props);
   const initialProps = getProps();
@@ -808,8 +824,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__ */ template(`<span class="text-danger-400 ml-0.5">*`);
+var _tmpl$210 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<div><input>`);
+var sizeStyles6 = {
   sm: {
     input: "h-8 px-2 text-sm",
     label: "text-sm",
@@ -833,7 +853,7 @@ function TextField(props) {
   };
   const merged = mergeProps(defaultProps, props);
   const [local, ariaProps] = splitProps(merged, ["size", "variant", "class", "label", "description", "errorMessage"]);
-  const size = () => sizeStyles$1[local.size];
+  const size = () => sizeStyles6[local.size];
   const state = createTextFieldState(() => ({
     value: ariaProps.value,
     defaultValue: ariaProps.defaultValue,
@@ -926,13 +946,13 @@ function TextField(props) {
     return rest;
   };
   return (() => {
-    var _el$ = _tmpl$4$8(), _el$4 = _el$.firstChild;
+    var _el$ = _tmpl$46(), _el$4 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return local.label;
       },
       get children() {
-        var _el$2 = _tmpl$2$a();
+        var _el$2 = _tmpl$210();
         spread(_el$2, mergeProps$1(cleanLabelProps, {
           get ["class"]() {
             return labelClasses();
@@ -944,7 +964,7 @@ function TextField(props) {
             return ariaProps.isRequired;
           },
           get children() {
-            return _tmpl$$c();
+            return _tmpl$15();
           }
         }), null);
         return _el$2;
@@ -960,7 +980,7 @@ function TextField(props) {
         return memo(() => !!local.description)() && !textFieldAria.isInvalid;
       },
       get children() {
-        var _el$5 = _tmpl$3$8();
+        var _el$5 = _tmpl$37();
         spread(_el$5, mergeProps$1(cleanDescriptionProps, {
           get ["class"]() {
             return descriptionClasses();
@@ -975,7 +995,7 @@ function TextField(props) {
         return memo(() => !!local.errorMessage)() && textFieldAria.isInvalid;
       },
       get children() {
-        var _el$6 = _tmpl$3$8();
+        var _el$6 = _tmpl$37();
         spread(_el$6, mergeProps$1(cleanErrorMessageProps, {
           get ["class"]() {
             return errorClasses();
@@ -1007,8 +1027,7 @@ function TextField(props) {
     return _el$;
   })();
 }
-
-const variantStyles$2 = {
+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"
@@ -1019,7 +1038,7 @@ function Link(props) {
   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";
@@ -1039,9 +1058,11 @@ 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 = {
+var _tmpl$16 = /* @__PURE__ */ template(`<span class="text-primary-200 font-medium">`);
+var _tmpl$211 = /* @__PURE__ */ template(`<span class=text-primary-300>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<div><div><div>`);
+var sizeStyles7 = {
   sm: {
     track: "h-1",
     text: "text-xs"
@@ -1055,7 +1076,7 @@ const sizeStyles = {
     text: "text-base"
   }
 };
-const variantStyles$1 = {
+var variantStyles5 = {
   primary: "bg-primary-500",
   accent: "bg-accent",
   success: "bg-green-500",
@@ -1105,9 +1126,9 @@ 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;
+    var _el$ = _tmpl$47(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
     spread(_el$, mergeProps$1(() => progressAria.progressBarProps, {
       get ["class"]() {
         return `w-full ${local.class ?? ""}`;
@@ -1118,13 +1139,13 @@ function ProgressBar(props) {
         return local.label || showValueLabel();
       },
       get children() {
-        var _el$2 = _tmpl$3$7();
+        var _el$2 = _tmpl$38();
         insert(_el$2, createComponent(Show, {
           get when() {
             return local.label;
           },
           get children() {
-            var _el$3 = _tmpl$$b();
+            var _el$3 = _tmpl$16();
             insert(_el$3, () => local.label);
             return _el$3;
           }
@@ -1134,7 +1155,7 @@ function ProgressBar(props) {
             return memo(() => !!showValueLabel())() && !isIndeterminate();
           },
           get children() {
-            var _el$4 = _tmpl$2$9();
+            var _el$4 = _tmpl$211();
             insert(_el$4, valueText);
             return _el$4;
           }
@@ -1144,7 +1165,7 @@ function ProgressBar(props) {
       }
     }), _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()}%`;
+      var _v$ = `w-full ${sizeConfig().track} bg-bg-300 rounded-full overflow-hidden`, _v$2 = `h-full rounded-full transition-all duration-300 ${variantStyles5[variant()]} ${isIndeterminate() ? "animate-progress-indeterminate" : ""}`, _v$3 = isIndeterminate() ? "30%" : `${percentage()}%`;
       _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
       _v$3 !== _p$.a && setStyleProperty(_el$6, "width", _p$.a = _v$3);
@@ -1157,19 +1178,19 @@ function ProgressBar(props) {
     return _el$;
   })();
 }
-
-var _tmpl$$a = /* @__PURE__ */ template(`<div>`), _tmpl$2$8 = /* @__PURE__ */ template(`<hr>`);
-const variantStyles = {
+var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$212 = /* @__PURE__ */ template(`<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"
@@ -1198,10 +1219,10 @@ function Separator(props) {
   });
   const className = createMemo(() => {
     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
@@ -1222,7 +1243,7 @@ function Separator(props) {
     },
     get fallback() {
       return (() => {
-        var _el$2 = _tmpl$2$8();
+        var _el$2 = _tmpl$212();
         spread(_el$2, mergeProps$1(getAriaProps, {
           get ["class"]() {
             return className();
@@ -1232,7 +1253,7 @@ function Separator(props) {
       })();
     },
     get children() {
-      var _el$ = _tmpl$$a();
+      var _el$ = _tmpl$17();
       spread(_el$, mergeProps$1(getAriaProps, {
         get ["class"]() {
           return className();
@@ -1242,11 +1263,13 @@ function Separator(props) {
     }
   });
 }
-
-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">`);
+var _tmpl$18 = /* @__PURE__ */ template(`<img class="h-[42px] w-auto">`);
+var _tmpl$213 = /* @__PURE__ */ template(`<button class="md:hidden flex items-center justify-center">`);
+var _tmpl$39 = /* @__PURE__ */ template(`<nav><div class="pl-1 md:pl-8 flex items-center"></div><div class="flex-1 flex justify-end items-center pr-1 md:pr-8">`);
+var _tmpl$48 = /* @__PURE__ */ template(`<span class="text-[34px] font-light text-primary-700 flex items-center">`);
 function NavHeader(props) {
   return (() => {
-    var _el$ = _tmpl$3$6(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
+    var _el$ = _tmpl$39(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
     insert(_el$2, createComponent(Show, {
       get when() {
         return props.logo;
@@ -1257,14 +1280,14 @@ function NavHeader(props) {
             return props.logoText;
           },
           get children() {
-            var _el$6 = _tmpl$4$6();
+            var _el$6 = _tmpl$48();
             insert(_el$6, () => props.logoText);
             return _el$6;
           }
         });
       },
       get children() {
-        var _el$3 = _tmpl$$9();
+        var _el$3 = _tmpl$18();
         effect((_p$) => {
           var _v$ = props.logo, _v$2 = props.logoAlt ?? "Logo";
           _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
@@ -1283,7 +1306,7 @@ function NavHeader(props) {
         return props.menuIcon;
       },
       get children() {
-        var _el$5 = _tmpl$2$7();
+        var _el$5 = _tmpl$213();
         addEventListener(_el$5, "click", props.onMenuClick, true);
         insert(_el$5, () => props.menuIcon);
         return _el$5;
@@ -1294,11 +1317,14 @@ function NavHeader(props) {
   })();
 }
 delegateEvents(["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>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<li><span class="text-lg font-bold text-primary-200">`);
+var _tmpl$214 = /* @__PURE__ */ template(`<a>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<div><div class="flex h-full"><div class="h-5 w-1 bg-accent-300"></div><ul class="flex h-full flex-1 flex-col gap-1 pl-4">`);
+var _tmpl$49 = /* @__PURE__ */ template(`<li>`);
+var _tmpl$54 = /* @__PURE__ */ template(`<div>`);
 function NavItem(props) {
   return (() => {
-    var _el$ = _tmpl$$8(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$19(), _el$2 = _el$.firstChild;
     insert(_el$2, () => props.title);
     insert(_el$, () => props.children, null);
     effect(() => className(_el$, `flex items-center ${props.class ?? ""}`));
@@ -1309,7 +1335,7 @@ 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();
+    var _el$3 = _tmpl$214();
     insert(_el$3, () => props.children);
     effect((_p$) => {
       var _v$ = props.href, _v$2 = `${props.active ? activeStyles : inactiveStyles} ${props.class ?? ""}`;
@@ -1325,7 +1351,7 @@ function NavLink(props) {
 }
 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;
+    var _el$4 = _tmpl$310(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
     insert(_el$4, createComponent(NavItem, {
       get title() {
         return props.title;
@@ -1341,7 +1367,7 @@ function NavSection(props) {
             return props.links;
           },
           children: (link) => (() => {
-            var _el$8 = _tmpl$4$5();
+            var _el$8 = _tmpl$49();
             insert(_el$8, createComponent(NavLink, {
               get href() {
                 return link.href;
@@ -1366,48 +1392,48 @@ function NavSection(props) {
 function LateralNav(props) {
   const bgColor = () => props.transparent ? "" : "bg-bg-200";
   return (() => {
-    var _el$9 = _tmpl$5$4();
+    var _el$9 = _tmpl$54();
     insert(_el$9, () => props.children);
     effect(() => className(_el$9, `hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ""}`));
     return _el$9;
   })();
 }
-
-var _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 = {
+var _tmpl$20 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200">`);
+var _tmpl$215 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-around gap-3"></div><div class="flex items-center justify-center gap-3 text-center"><span class="font-light text-primary-300">`);
+var eventMessages = {
   follow: (left, right) => [(() => {
-    var _el$ = _tmpl$$7();
+    var _el$ = _tmpl$20();
     insert(_el$, left);
     return _el$;
   })(), " ha empezado a seguir a ", (() => {
-    var _el$2 = _tmpl$$7();
+    var _el$2 = _tmpl$20();
     insert(_el$2, right);
     return _el$2;
   })()],
   like: (left, right) => [(() => {
-    var _el$3 = _tmpl$$7();
+    var _el$3 = _tmpl$20();
     insert(_el$3, left);
     return _el$3;
   })(), " le ha dado like a ", (() => {
-    var _el$4 = _tmpl$$7();
+    var _el$4 = _tmpl$20();
     insert(_el$4, right);
     return _el$4;
   })()],
   comment: (left, right) => [(() => {
-    var _el$5 = _tmpl$$7();
+    var _el$5 = _tmpl$20();
     insert(_el$5, left);
     return _el$5;
   })(), " ha comentado en ", (() => {
-    var _el$6 = _tmpl$$7();
+    var _el$6 = _tmpl$20();
     insert(_el$6, right);
     return _el$6;
   })()],
   event: (left, right) => [(() => {
-    var _el$7 = _tmpl$$7();
+    var _el$7 = _tmpl$20();
     insert(_el$7, left);
     return _el$7;
-  })(), " asistirá al evento de ", (() => {
-    var _el$8 = _tmpl$$7();
+  })(), " asistir\xE1 al evento de ", (() => {
+    var _el$8 = _tmpl$20();
     insert(_el$8, right);
     return _el$8;
   })()],
@@ -1418,7 +1444,7 @@ 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;
+    var _el$9 = _tmpl$215(), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild;
     insert(_el$0, createComponent(Show, {
       get when() {
         return props.leftUser;
@@ -1472,11 +1498,16 @@ function TimelineItem(props) {
     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>`);
+var _tmpl$21 = /* @__PURE__ */ template(`<span class="text-xs text-primary-500">`);
+var _tmpl$216 = /* @__PURE__ */ template(`<p class="text-sm text-primary-400 truncate">`);
+var _tmpl$311 = /* @__PURE__ */ template(`<span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">`);
+var _tmpl$410 = /* @__PURE__ */ template(`<button><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><span class="font-semibold text-primary-100 truncate">`);
+var _tmpl$55 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$63 = /* @__PURE__ */ template(`<div><div><p>`);
+var _tmpl$73 = /* @__PURE__ */ template(`<div>`);
 function ConversationPreview(props) {
   return (() => {
-    var _el$ = _tmpl$4$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+    var _el$ = _tmpl$410(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
     addEventListener(_el$, "click", props.onClick, true);
     insert(_el$, createComponent(Avatar, {
       get src() {
@@ -1496,7 +1527,7 @@ function ConversationPreview(props) {
         return props.timestamp;
       },
       get children() {
-        var _el$5 = _tmpl$$6();
+        var _el$5 = _tmpl$21();
         insert(_el$5, () => props.timestamp);
         return _el$5;
       }
@@ -1506,7 +1537,7 @@ function ConversationPreview(props) {
         return props.lastMessage;
       },
       get children() {
-        var _el$6 = _tmpl$2$4();
+        var _el$6 = _tmpl$216();
         insert(_el$6, () => props.lastMessage);
         return _el$6;
       }
@@ -1516,7 +1547,7 @@ function ConversationPreview(props) {
         return memo(() => !!props.unreadCount)() && props.unreadCount > 0;
       },
       get children() {
-        var _el$7 = _tmpl$3$4();
+        var _el$7 = _tmpl$311();
         insert(_el$7, () => props.unreadCount);
         return _el$7;
       }
@@ -1528,14 +1559,14 @@ function ConversationPreview(props) {
 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;
+    var _el$8 = _tmpl$63(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild;
     insert(_el$0, () => props.content);
     insert(_el$9, createComponent(Show, {
       get when() {
         return props.timestamp;
       },
       get children() {
-        var _el$1 = _tmpl$5$3();
+        var _el$1 = _tmpl$55();
         insert(_el$1, () => props.timestamp);
         effect(() => className(_el$1, `text-xs ${isUser() ? "text-white/70" : "text-primary-500"}`));
         return _el$1;
@@ -1555,7 +1586,7 @@ function ConversationBubble(props) {
 }
 function Conversation(props) {
   return (() => {
-    var _el$10 = _tmpl$7$1();
+    var _el$10 = _tmpl$73();
     insert(_el$10, createComponent(For, {
       get each() {
         return props.messages;
@@ -1577,8 +1608,11 @@ function Conversation(props) {
   })();
 }
 delegateEvents(["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">`);
+var _tmpl$30 = /* @__PURE__ */ template(`<p class="text-primary-300 text-sm mt-1 line-clamp-2">`);
+var _tmpl$217 = /* @__PURE__ */ template(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> seguidores`);
+var _tmpl$312 = /* @__PURE__ */ template(`<span class=text-primary-300><span class="font-semibold text-primary-100"></span> siguiendo`);
+var _tmpl$411 = /* @__PURE__ */ template(`<div class="mt-4 flex gap-2">`);
+var _tmpl$56 = /* @__PURE__ */ template(`<div><div class="flex items-start gap-4"><div class="flex-1 min-w-0"><h3 class="font-semibold text-primary-100 text-lg truncate"></h3><div class="flex gap-4 mt-2 text-sm">`);
 function ProfileCard(props) {
   const formatNumber = (num) => {
     if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
@@ -1586,7 +1620,7 @@ 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;
+    var _el$ = _tmpl$56(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling;
     insert(_el$2, createComponent(Avatar, {
       get src() {
         return props.avatar;
@@ -1602,7 +1636,7 @@ function ProfileCard(props) {
         return props.bio;
       },
       get children() {
-        var _el$5 = _tmpl$$5();
+        var _el$5 = _tmpl$30();
         insert(_el$5, () => props.bio);
         return _el$5;
       }
@@ -1612,7 +1646,7 @@ function ProfileCard(props) {
         return props.followers !== void 0;
       },
       get children() {
-        var _el$7 = _tmpl$2$3(), _el$8 = _el$7.firstChild;
+        var _el$7 = _tmpl$217(), _el$8 = _el$7.firstChild;
         insert(_el$8, () => formatNumber(props.followers));
         return _el$7;
       }
@@ -1622,7 +1656,7 @@ function ProfileCard(props) {
         return props.following !== void 0;
       },
       get children() {
-        var _el$9 = _tmpl$3$3(), _el$0 = _el$9.firstChild;
+        var _el$9 = _tmpl$312(), _el$0 = _el$9.firstChild;
         insert(_el$0, () => formatNumber(props.following));
         return _el$9;
       }
@@ -1632,7 +1666,7 @@ function ProfileCard(props) {
         return props.actions;
       },
       get children() {
-        var _el$1 = _tmpl$4$3();
+        var _el$1 = _tmpl$411();
         insert(_el$1, () => props.actions);
         return _el$1;
       }
@@ -1641,8 +1675,18 @@ function ProfileCard(props) {
     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">`);
+var _tmpl$31 = /* @__PURE__ */ template(`<div class="absolute -top-2 -right-2 z-10 flex flex-col gap-1"><img alt class="w-8 h-8 object-contain"><img alt class="w-6 h-6 object-contain ml-2"><img alt class="w-5 h-5 object-contain">`);
+var _tmpl$218 = /* @__PURE__ */ template(`<div class="relative h-32 w-full"><img class="w-full h-full object-cover"><div class="absolute inset-0 bg-gradient-to-t from-bg-200 via-transparent to-transparent">`);
+var _tmpl$313 = /* @__PURE__ */ template(`<div class="flex items-center gap-1.5"><span class=text-accent>@</span><span>`);
+var _tmpl$412 = /* @__PURE__ */ template(`<div class="flex items-center gap-1.5"><span class=text-accent>\u23F1</span><span>`);
+var _tmpl$57 = /* @__PURE__ */ template(`<div class="flex items-center gap-4 mt-3 text-sm text-primary-300">`);
+var _tmpl$64 = /* @__PURE__ */ template(`<span class="ml-2 text-sm text-primary-300">+<!> m\xE1s`);
+var _tmpl$74 = /* @__PURE__ */ template(`<div class="flex items-center mt-3"><div class="flex -space-x-2">`);
+var _tmpl$82 = /* @__PURE__ */ template(`<div class="mt-4 flex gap-2">`);
+var _tmpl$92 = /* @__PURE__ */ template(`<div><div class="p-4 pt-2"><h3 class="font-bold text-xl leading-tight bg-gradient-to-r from-accent to-accent-300 bg-clip-text text-transparent">`);
+var _tmpl$0 = /* @__PURE__ */ template(`<div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0"><img class="w-full h-full object-cover">`);
+var _tmpl$1 = /* @__PURE__ */ template(`<p class="text-sm text-primary-300 truncate">`);
+var _tmpl$102 = /* @__PURE__ */ template(`<button><div class="flex-1 min-w-0"><h4 class="font-medium text-primary-100 truncate">`);
 function EventCard(props) {
   const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
   const remainingCount = () => {
@@ -1651,13 +1695,13 @@ function EventCard(props) {
     return total - displayed;
   };
   return (() => {
-    var _el$ = _tmpl$9(), _el$8 = _el$.firstChild, _el$9 = _el$8.firstChild;
+    var _el$ = _tmpl$92(), _el$8 = _el$.firstChild, _el$9 = _el$8.firstChild;
     insert(_el$, createComponent(Show, {
       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;
+        var _el$2 = _tmpl$31(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
         effect((_p$) => {
           var _v$ = props.decorationImage, _v$2 = props.decorationImage, _v$3 = props.decorationImage;
           _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
@@ -1677,7 +1721,7 @@ function EventCard(props) {
         return props.image;
       },
       get children() {
-        var _el$6 = _tmpl$2$2(), _el$7 = _el$6.firstChild;
+        var _el$6 = _tmpl$218(), _el$7 = _el$6.firstChild;
         effect((_p$) => {
           var _v$4 = props.image, _v$5 = props.title;
           _v$4 !== _p$.e && setAttribute(_el$7, "src", _p$.e = _v$4);
@@ -1696,13 +1740,13 @@ function EventCard(props) {
         return props.date || props.author;
       },
       get children() {
-        var _el$0 = _tmpl$5$1();
+        var _el$0 = _tmpl$57();
         insert(_el$0, createComponent(Show, {
           get when() {
             return props.author;
           },
           get children() {
-            var _el$1 = _tmpl$3$2(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+            var _el$1 = _tmpl$313(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
             insert(_el$11, () => props.author);
             return _el$1;
           }
@@ -1712,7 +1756,7 @@ function EventCard(props) {
             return props.date;
           },
           get children() {
-            var _el$12 = _tmpl$4$2(), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
+            var _el$12 = _tmpl$412(), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
             insert(_el$14, () => props.date);
             return _el$12;
           }
@@ -1725,7 +1769,7 @@ function EventCard(props) {
         return displayedAttendees().length > 0;
       },
       get children() {
-        var _el$15 = _tmpl$7(), _el$16 = _el$15.firstChild;
+        var _el$15 = _tmpl$74(), _el$16 = _el$15.firstChild;
         insert(_el$16, createComponent(For, {
           get each() {
             return displayedAttendees();
@@ -1745,7 +1789,7 @@ function EventCard(props) {
             return remainingCount() > 0;
           },
           get children() {
-            var _el$17 = _tmpl$6$1(), _el$18 = _el$17.firstChild, _el$20 = _el$18.nextSibling; _el$20.nextSibling;
+            var _el$17 = _tmpl$64(), _el$18 = _el$17.firstChild, _el$20 = _el$18.nextSibling;
             insert(_el$17, remainingCount, _el$20);
             return _el$17;
           }
@@ -1758,7 +1802,7 @@ function EventCard(props) {
         return props.actions;
       },
       get children() {
-        var _el$21 = _tmpl$8();
+        var _el$21 = _tmpl$82();
         insert(_el$21, () => props.actions);
         return _el$21;
       }
@@ -1769,7 +1813,7 @@ function EventCard(props) {
 }
 function EventListItem(props) {
   return (() => {
-    var _el$22 = _tmpl$10(), _el$25 = _el$22.firstChild, _el$26 = _el$25.firstChild;
+    var _el$22 = _tmpl$102(), _el$25 = _el$22.firstChild, _el$26 = _el$25.firstChild;
     addEventListener(_el$22, "click", props.onClick, true);
     insert(_el$22, createComponent(Show, {
       get when() {
@@ -1805,8 +1849,12 @@ function EventListItem(props) {
   })();
 }
 delegateEvents(["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">`);
+var _tmpl$40 = /* @__PURE__ */ template(`<div class="relative h-[80px] w-[80px] flex-shrink-0 overflow-hidden rounded-xl border-2 border-accent-200"><img class="h-full w-full object-cover">`);
+var _tmpl$219 = /* @__PURE__ */ template(`<div class="absolute bottom-[-20px] h-[30px] w-full"><div class="flex h-full w-full flex-1 justify-end gap-1">`);
+var _tmpl$314 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200"> m\xE1s`);
+var _tmpl$413 = /* @__PURE__ */ template(`<div class="flex flex-1"><span class="text-base font-normal text-primary-500">seguida por `);
+var _tmpl$58 = /* @__PURE__ */ template(`<div><div class="relative h-full flex-1 flex-col pl-3"><div class="flex h-full flex-col items-end justify-center pb-3 pr-5 pt-2"><div class="flex flex-1"><span class="text-lg font-semibold text-white drop-shadow-sm">`);
+var _tmpl$65 = /* @__PURE__ */ template(`<span class="font-semibold text-accent-200">`);
 function CalendarCard(props) {
   const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
   const remainingCount = () => {
@@ -1815,13 +1863,13 @@ 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;
+    var _el$ = _tmpl$58(), _el$4 = _el$.firstChild, _el$7 = _el$4.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return props.image;
       },
       get children() {
-        var _el$2 = _tmpl$$3(), _el$3 = _el$2.firstChild;
+        var _el$2 = _tmpl$40(), _el$3 = _el$2.firstChild;
         effect((_p$) => {
           var _v$ = props.image, _v$2 = props.title;
           _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
@@ -1839,7 +1887,7 @@ function CalendarCard(props) {
         return memo(() => !!props.tags)() && props.tags.length > 0;
       },
       get children() {
-        var _el$5 = _tmpl$2$1(), _el$6 = _el$5.firstChild;
+        var _el$5 = _tmpl$219(), _el$6 = _el$5.firstChild;
         insert(_el$6, createComponent(For, {
           get each() {
             return props.tags;
@@ -1858,13 +1906,13 @@ function CalendarCard(props) {
         return displayedFollowers().length > 0;
       },
       get children() {
-        var _el$0 = _tmpl$4$1(), _el$1 = _el$0.firstChild; _el$1.firstChild;
+        var _el$0 = _tmpl$413(), _el$1 = _el$0.firstChild;
         insert(_el$1, createComponent(For, {
           get each() {
             return displayedFollowers();
           },
           children: (follower, index) => [(() => {
-            var _el$14 = _tmpl$6();
+            var _el$14 = _tmpl$65();
             insert(_el$14, () => follower.name);
             return _el$14;
           })(), memo(() => index() < displayedFollowers().length - 1 && ", ")]
@@ -1875,7 +1923,7 @@ function CalendarCard(props) {
           },
           get children() {
             return [" ", "y ", (() => {
-              var _el$12 = _tmpl$3$1(), _el$13 = _el$12.firstChild;
+              var _el$12 = _tmpl$314(), _el$13 = _el$12.firstChild;
               insert(_el$12, remainingCount, _el$13);
               return _el$12;
             })()];
@@ -1888,8 +1936,7 @@ function CalendarCard(props) {
     return _el$;
   })();
 }
-
-var _tmpl$$2 = /* @__PURE__ */ template(`<span><span class=vui-logo__first></span><span class=vui-logo__second>`);
+var _tmpl$41 = /* @__PURE__ */ template(`<span><span class=vui-logo__first></span><span class=vui-logo__second>`);
 function Logo(props) {
   const sizeClass = () => {
     switch (props.size) {
@@ -1907,7 +1954,7 @@ 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;
+    var _el$ = _tmpl$41(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     insert(_el$2, firstWord);
     insert(_el$3, secondWord);
     effect((_p$) => {
@@ -1922,17 +1969,19 @@ function Logo(props) {
     return _el$;
   })();
 }
-
-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>`);
+var _tmpl$50 = /* @__PURE__ */ template(`<div class=vui-project-card__tooltip><span>`);
+var _tmpl$220 = /* @__PURE__ */ template(`<img class=vui-project-card__image>`);
+var _tmpl$315 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer">`);
+var _tmpl$414 = /* @__PURE__ */ template(`<div>`);
 function ProjectCard(props) {
   const size = () => props.size ?? "sm";
   const inactive = () => props.inactive ?? false;
   const cardContent = () => [(() => {
-    var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$50(), _el$2 = _el$.firstChild;
     insert(_el$2, () => props.name);
     return _el$;
   })(), (() => {
-    var _el$3 = _tmpl$2();
+    var _el$3 = _tmpl$220();
     effect((_p$) => {
       var _v$ = props.imageSrc, _v$2 = props.imageAlt ?? props.name;
       _v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
@@ -1947,7 +1996,7 @@ 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();
+      var _el$4 = _tmpl$315();
       insert(_el$4, cardContent);
       effect((_p$) => {
         var _v$3 = props.href, _v$4 = cardClasses();
@@ -1962,18 +2011,17 @@ function ProjectCard(props) {
     })();
   }
   return (() => {
-    var _el$5 = _tmpl$4();
+    var _el$5 = _tmpl$414();
     insert(_el$5, cardContent);
     effect(() => className(_el$5, cardClasses()));
     return _el$5;
   })();
 }
-
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
 function PageLayout(props) {
   const [local, rest] = splitProps(props, ["children", "class"]);
   return (() => {
-    var _el$ = _tmpl$();
+    var _el$ = _tmpl$51();
     spread(_el$, mergeProps$1({
       get ["class"]() {
         return `vui-page ${local.class ?? ""}`;
@@ -1985,4 +2033,3 @@ function PageLayout(props) {
 }
 
 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