@proyecto-viviana/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1988 @@
+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';
+
+function Button(props) {
+  const defaultProps = {
+    variant: "primary",
+    buttonStyle: "fill",
+    size: "md"
+  };
+  const merged = mergeProps(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}`];
+    if (renderProps.isPressed) {
+      classList.push("is-pressed");
+    }
+    if (local.fullWidth) {
+      classList.push("vui-button--full-width");
+    }
+    if (local.class) {
+      classList.push(local.class);
+    }
+    return classList.join(" ");
+  };
+  return createComponent(Button$1, mergeProps$1(headlessProps, {
+    "class": getClassName,
+    get ["data-variant"]() {
+      return local.variant;
+    },
+    get ["data-style"]() {
+      return local.buttonStyle;
+    },
+    get ["data-static-color"]() {
+      return local.staticColor || void 0;
+    },
+    get children() {
+      return local.children;
+    }
+  }));
+}
+
+var _tmpl$$o = /* @__PURE__ */ template(`<span>`), _tmpl$2$j = /* @__PURE__ */ template(`<div>`);
+const variantStyles$5 = {
+  primary: "bg-primary-500 text-white",
+  secondary: "bg-bg-300 text-primary-300",
+  accent: "bg-accent-300 text-black",
+  success: "bg-success-400 text-white",
+  warning: "bg-warning-400 text-black",
+  danger: "bg-danger-400 text-white"
+};
+const sizeStyles$6 = {
+  sm: "w-5 h-5 text-xs",
+  md: "w-7 h-7 text-xs",
+  lg: "w-9 h-9 text-sm"
+};
+function Badge(props) {
+  const variant = () => props.variant ?? "accent";
+  const size = () => props.size ?? "md";
+  return (() => {
+    var _el$ = _tmpl$2$j();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.count !== void 0;
+      },
+      get fallback() {
+        return props.children;
+      },
+      get children() {
+        var _el$2 = _tmpl$$o();
+        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 ?? ""}`));
+    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 = {
+  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",
+  error: "bg-danger-600 text-danger-100 border border-danger-400"
+};
+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, {
+      get when() {
+        return props.title;
+      },
+      get children() {
+        return [(() => {
+          var _el$3 = _tmpl$$n();
+          insert(_el$3, () => props.title);
+          return _el$3;
+        })(), _tmpl$2$i()];
+      }
+    }), _el$5);
+    insert(_el$5, () => props.children);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return props.dismissible;
+      },
+      get children() {
+        var _el$6 = _tmpl$3$d();
+        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 ?? ""}`));
+    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 = {
+  xs: {
+    container: "w-6 h-6",
+    text: "text-xs",
+    indicator: "w-1.5 h-1.5"
+  },
+  sm: {
+    container: "w-8 h-8",
+    text: "text-sm",
+    indicator: "w-2 h-2"
+  },
+  md: {
+    container: "w-10 h-10",
+    text: "text-base",
+    indicator: "w-2.5 h-2.5"
+  },
+  lg: {
+    container: "w-14 h-14",
+    text: "text-lg",
+    indicator: "w-3 h-3"
+  },
+  xl: {
+    container: "w-20 h-20",
+    text: "text-xl",
+    indicator: "w-4 h-4"
+  }
+};
+function Avatar(props) {
+  const size = () => props.size ?? "md";
+  const styles = () => sizeStyles$5[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, {
+      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;
+        })();
+      },
+      get children() {
+        var _el$3 = _tmpl$$m();
+        effect((_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);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$3;
+      }
+    }));
+    insert(_el$, createComponent(Show, {
+      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"}`));
+        return _el$4;
+      }
+    }), null);
+    effect((_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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+function AvatarGroup(props) {
+  return (() => {
+    var _el$6 = _tmpl$4$c();
+    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 = {
+  sm: {
+    track: "h-5 w-9",
+    thumb: "h-4 w-4",
+    translate: "translate-x-4"
+  },
+  md: {
+    track: "h-6 w-11",
+    thumb: "h-5 w-5",
+    translate: "translate-x-5"
+  },
+  lg: {
+    track: "h-7 w-14",
+    thumb: "h-6 w-6",
+    translate: "translate-x-7"
+  }
+};
+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 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, {
+    "class": getClassName,
+    children: (renderProps) => [(() => {
+      var _el$ = _tmpl$$l(), _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$);
+        _v$2 !== _p$.t && className(_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);
+      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>`);
+function TabSwitch(props) {
+  const [leftSelected, setLeftSelected] = createSignal(props.value ? props.value === props.options[0]?.value : true);
+  createEffect(() => {
+    if (props.value !== void 0) {
+      setLeftSelected(props.value === props.options[0]?.value);
+    }
+  });
+  const toggle = () => {
+    const newLeftSelected = !leftSelected();
+    setLeftSelected(newLeftSelected);
+    const newValue = newLeftSelected ? props.options[0]?.value : props.options[1]?.value;
+    if (newValue) {
+      props.onChange?.(newValue);
+    }
+  };
+  const leftSelectedStyle = "left-0 w-[142px] border-l-2";
+  const rightSelectedStyle = "left-[142px] w-[108px] border-r-2";
+  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;
+    _el$.$$click = toggle;
+    insert(_el$5, () => props.options[0]?.label ?? "TENDENCIAS");
+    insert(_el$7, () => props.options[1]?.label ?? "ÚLTIMOS");
+    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$);
+      _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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+}
+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 = {
+  sm: {
+    box: "h-4 w-4",
+    icon: "h-3 w-3",
+    label: "text-sm"
+  },
+  md: {
+    box: "h-5 w-5",
+    icon: "h-3.5 w-3.5",
+    label: "text-base"
+  },
+  lg: {
+    box: "h-6 w-6",
+    icon: "h-4 w-4",
+    label: "text-lg"
+  }
+};
+function CheckIcon(props) {
+  return (() => {
+    var _el$ = _tmpl$$j();
+    effect(() => setAttribute(_el$, "class", props.class));
+    return _el$;
+  })();
+}
+function IndeterminateIcon(props) {
+  return (() => {
+    var _el$2 = _tmpl$2$f();
+    effect(() => setAttribute(_el$2, "class", props.class));
+    return _el$2;
+  })();
+}
+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 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, {
+    "class": getClassName,
+    children: (renderProps) => {
+      const boxClasses = () => {
+        const base = "relative flex items-center justify-center rounded border-2 transition-all duration-200";
+        const sizeClass = size().box;
+        let colorClass;
+        if (renderProps.isDisabled) {
+          colorClass = "border-bg-300 bg-bg-200";
+        } else if (renderProps.isSelected || renderProps.isIndeterminate) {
+          colorClass = "border-accent bg-accent";
+        } else {
+          colorClass = "border-primary-600 bg-transparent hover:border-accent-300";
+        }
+        const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400" : "";
+        const cursorClass = renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer";
+        return [base, sizeClass, colorClass, focusClass, cursorClass].filter(Boolean).join(" ");
+      };
+      const iconClasses = () => {
+        const base = "text-white transition-opacity duration-200";
+        const sizeClass = size().icon;
+        const visibilityClass = renderProps.isSelected || renderProps.isIndeterminate ? "opacity-100" : "opacity-0";
+        return [base, sizeClass, visibilityClass].filter(Boolean).join(" ");
+      };
+      const labelClasses = () => {
+        const base = "text-primary-200";
+        const sizeClass = size().label;
+        const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+        return [base, sizeClass, disabledClass].filter(Boolean).join(" ");
+      };
+      return [(() => {
+        var _el$3 = _tmpl$3$b();
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return !renderProps.isIndeterminate;
+          },
+          get fallback() {
+            return createComponent(IndeterminateIcon, {
+              get ["class"]() {
+                return iconClasses();
+              }
+            });
+          },
+          get children() {
+            return createComponent(CheckIcon, {
+              get ["class"]() {
+                return iconClasses();
+              }
+            });
+          }
+        }));
+        effect(() => className(_el$3, boxClasses()));
+        return _el$3;
+      })(), createComponent(Show, {
+        get when() {
+          return local.children;
+        },
+        get children() {
+          var _el$4 = _tmpl$3$b();
+          insert(_el$4, () => local.children);
+          effect(() => className(_el$4, labelClasses()));
+          return _el$4;
+        }
+      })];
+    }
+  }));
+}
+function CheckboxGroup(props) {
+  const [local, headlessProps] = splitProps(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, {
+    get when() {
+      return local.label;
+    },
+    get children() {
+      var _el$5 = _tmpl$4$b();
+      insert(_el$5, () => local.label);
+      return _el$5;
+    }
+  }), (() => {
+    var _el$6 = _tmpl$5$6();
+    insert(_el$6, () => local.children);
+    return _el$6;
+  })(), createComponent(Show, {
+    get when() {
+      return memo(() => !!local.description)() && !renderProps.isInvalid;
+    },
+    get children() {
+      var _el$7 = _tmpl$6$3();
+      insert(_el$7, () => local.description);
+      return _el$7;
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
+    },
+    get children() {
+      var _el$8 = _tmpl$7$2();
+      insert(_el$8, () => local.errorMessage);
+      return _el$8;
+    }
+  })];
+  return createComponent(CheckboxGroup$1, mergeProps$1(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 = {
+  sm: {
+    circle: "h-4 w-4",
+    dot: "h-2 w-2",
+    label: "text-sm"
+  },
+  md: {
+    circle: "h-5 w-5",
+    dot: "h-2.5 w-2.5",
+    label: "text-base"
+  },
+  lg: {
+    circle: "h-6 w-6",
+    dot: "h-3 w-3",
+    label: "text-lg"
+  }
+};
+function RadioGroup(props) {
+  const [local, headlessProps] = splitProps(props, ["size", "class", "label", "description", "errorMessage", "children"]);
+  const size = local.size ?? "md";
+  const customClass = local.class ?? "";
+  const getClassName = (renderProps) => {
+    const base = "flex gap-2";
+    const orientationClass = renderProps.orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col";
+    const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+    return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(" ");
+  };
+  const renderChildren = (renderProps) => [createComponent(Show, {
+    get when() {
+      return local.label;
+    },
+    get children() {
+      var _el$ = _tmpl$$i();
+      insert(_el$, () => local.label);
+      return _el$;
+    }
+  }), memo(() => memo(() => typeof local.children === "function")() ? local.children(renderProps) : local.children), createComponent(Show, {
+    get when() {
+      return memo(() => !!local.description)() && !renderProps.isInvalid;
+    },
+    get children() {
+      var _el$2 = _tmpl$2$e();
+      insert(_el$2, () => local.description);
+      return _el$2;
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
+    },
+    get children() {
+      var _el$3 = _tmpl$3$a();
+      insert(_el$3, () => local.errorMessage);
+      return _el$3;
+    }
+  })];
+  return createComponent(RadioSizeContext.Provider, {
+    value: size,
+    get children() {
+      return createComponent(RadioGroup$1, mergeProps$1(headlessProps, {
+        "class": getClassName,
+        "data-size": size,
+        children: renderChildren
+      }));
+    }
+  });
+}
+function Radio(props) {
+  const sizeFromContext = useContext(RadioSizeContext);
+  const size = () => sizeStyles$2[sizeFromContext];
+  const customClass = props.class ?? "";
+  const getClassName = (renderProps) => {
+    const base = "inline-flex items-center gap-2 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    return [base, disabledClass, customClass].filter(Boolean).join(" ");
+  };
+  const {
+    class: _,
+    children,
+    ...headlessProps
+  } = props;
+  return createComponent(Radio$1, mergeProps$1(headlessProps, {
+    "class": getClassName,
+    children: (renderProps) => {
+      const circleClasses = () => {
+        const base = "relative flex items-center justify-center rounded-full border-2 transition-all duration-200";
+        const sizeClass = size().circle;
+        let colorClass;
+        if (renderProps.isDisabled) {
+          colorClass = "border-bg-300 bg-bg-200";
+        } else if (renderProps.isSelected) {
+          colorClass = "border-accent bg-transparent";
+        } else {
+          colorClass = "border-primary-600 bg-transparent hover:border-accent-300";
+        }
+        const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400" : "";
+        const cursorClass = renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer";
+        return [base, sizeClass, colorClass, focusClass, cursorClass].filter(Boolean).join(" ");
+      };
+      const dotClasses = () => {
+        const base = "rounded-full bg-accent transition-all duration-200";
+        const sizeClass = size().dot;
+        const visibilityClass = renderProps.isSelected ? "scale-100 opacity-100" : "scale-0 opacity-0";
+        return [base, sizeClass, visibilityClass].filter(Boolean).join(" ");
+      };
+      const labelClasses = () => {
+        const base = "text-primary-200";
+        const sizeClass = size().label;
+        const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+        return [base, sizeClass, disabledClass].filter(Boolean).join(" ");
+      };
+      const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
+      return [(() => {
+        var _el$4 = _tmpl$4$a(), _el$5 = _el$4.firstChild;
+        effect((_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);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$4;
+      })(), createComponent(Show, {
+        when: resolvedChildren,
+        get children() {
+          var _el$6 = _tmpl$5$5();
+          insert(_el$6, resolvedChildren);
+          effect(() => className(_el$6, labelClasses()));
+          return _el$6;
+        }
+      })];
+    }
+  }));
+}
+
+var _tmpl$$h = /* @__PURE__ */ template(`<button><span>`), _tmpl$2$d = /* @__PURE__ */ template(`<span class=mr-1.5>`);
+const variantStyles$3 = {
+  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",
+  outline: "bg-transparent border border-primary-500 text-primary-300"
+};
+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);
+      return () => _c$() && (() => {
+        var _el$3 = _tmpl$2$d();
+        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 ?? ""}`));
+    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">`);
+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, {
+      get when() {
+        return props.subtitle;
+      },
+      get children() {
+        var _el$6 = _tmpl$$g();
+        insert(_el$6, () => props.subtitle);
+        return _el$6;
+      }
+    }));
+    insert(_el$9, () => props.children);
+    insert(_el$8, createComponent(Show, {
+      get when() {
+        return props.primaryAction || props.secondaryAction;
+      },
+      get children() {
+        var _el$0 = _tmpl$2$c();
+        insert(_el$0, createComponent(Show, {
+          get when() {
+            return props.secondaryAction;
+          },
+          get children() {
+            return createComponent(Button, {
+              variant: "primary",
+              buttonStyle: "outline",
+              get onPress() {
+                return props.secondaryAction.onClick;
+              },
+              get children() {
+                return props.secondaryAction.label;
+              }
+            });
+          }
+        }), null);
+        insert(_el$0, createComponent(Show, {
+          get when() {
+            return props.primaryAction;
+          },
+          get children() {
+            return createComponent(Button, {
+              variant: "primary",
+              get onPress() {
+                return props.primaryAction.onClick;
+              },
+              get children() {
+                return props.primaryAction.label;
+              }
+            });
+          }
+        }), null);
+        return _el$0;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!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, {
+          variant: "primary",
+          text: tag
+        })));
+        return _el$1;
+      }
+    }), null);
+    effect(() => className(_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">`);
+function GitHubIcon(props) {
+  return (() => {
+    var _el$ = _tmpl$$f();
+    effect((_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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+}
+
+var _tmpl$$e = /* @__PURE__ */ template(`<div><div class=vui-icon__main>`), _tmpl$2$b = /* @__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;
+    addEventListener(_el$, "click", props.onClick, true);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!props.withShadow);
+      return () => _c$() && (() => {
+        var _el$3 = _tmpl$2$b();
+        insert(_el$3, createComponent(IconComponent, {
+          get size() {
+            return size();
+          },
+          color: "var(--color-accent)"
+        }));
+        return _el$3;
+      })();
+    })(), _el$2);
+    insert(_el$2, createComponent(IconComponent, {
+      get size() {
+        return size();
+      },
+      get color() {
+        return color();
+      }
+    }));
+    effect(() => className(_el$, `vui-icon ${props.withShadow ? "vui-icon--with-shadow" : ""} ${props.class ?? ""}`));
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+
+var _tmpl$$d = /* @__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;
+    insert(_el$2, () => props.children);
+    insert(_el$4, () => props.label);
+    effect((_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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+
+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 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);
+    }
+    (_a = p.onChange) == null ? void 0 : _a.call(p, newValue);
+  }
+  return {
+    value,
+    setValue
+  };
+}
+
+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 = {
+  sm: {
+    input: "h-8 px-2 text-sm",
+    label: "text-sm",
+    description: "text-xs"
+  },
+  md: {
+    input: "h-10 px-3 text-base",
+    label: "text-sm",
+    description: "text-sm"
+  },
+  lg: {
+    input: "h-12 px-4 text-lg",
+    label: "text-base",
+    description: "text-sm"
+  }
+};
+function TextField(props) {
+  const defaultProps = {
+    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 state = createTextFieldState(() => ({
+    value: ariaProps.value,
+    defaultValue: ariaProps.defaultValue,
+    onChange: ariaProps.onChange
+  }));
+  const textFieldAria = createTextField(() => ({
+    ...ariaProps,
+    value: state.value(),
+    onChange: state.setValue
+  }));
+  const {
+    isFocused,
+    isFocusVisible,
+    focusProps
+  } = createFocusRing();
+  const containerClasses = () => {
+    const base = "flex flex-col";
+    const disabledClass = ariaProps.isDisabled ? "opacity-60" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  const inputClasses = () => {
+    const base = "w-full rounded-md transition-all duration-200 outline-none";
+    const sizeClass = size().input;
+    let variantClass;
+    if (local.variant === "filled") {
+      variantClass = "bg-bg-200 border border-transparent";
+    } else {
+      variantClass = "bg-transparent border border-bg-400";
+    }
+    let stateClass;
+    if (ariaProps.isDisabled) {
+      stateClass = "bg-bg-200 text-primary-500 cursor-not-allowed";
+    } else if (textFieldAria.isInvalid) {
+      stateClass = "border-danger-500 focus:border-danger-400 focus:ring-2 focus:ring-danger-400/20";
+    } else {
+      stateClass = "text-primary-100 placeholder:text-primary-500 focus:border-accent focus:ring-2 focus:ring-accent/20";
+    }
+    const hoverClass = ariaProps.isDisabled ? "" : "hover:border-accent-300";
+    return [base, sizeClass, variantClass, stateClass, hoverClass].filter(Boolean).join(" ");
+  };
+  const labelClasses = () => {
+    const base = "block font-medium text-primary-200 mb-1";
+    const sizeClass = size().label;
+    return [base, sizeClass].filter(Boolean).join(" ");
+  };
+  const descriptionClasses = () => {
+    const base = "mt-1 text-primary-400";
+    const sizeClass = size().description;
+    return [base, sizeClass].filter(Boolean).join(" ");
+  };
+  const errorClasses = () => {
+    const base = "mt-1 text-danger-400";
+    const sizeClass = size().description;
+    return [base, sizeClass].filter(Boolean).join(" ");
+  };
+  const cleanLabelProps = () => {
+    const {
+      ref: _ref,
+      ...rest
+    } = textFieldAria.labelProps;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const {
+      ref: _ref1,
+      ...rest
+    } = textFieldAria.inputProps;
+    const {
+      ref: _ref2,
+      ...focusRest
+    } = focusProps;
+    return {
+      ...rest,
+      ...focusRest
+    };
+  };
+  const cleanDescriptionProps = () => {
+    const {
+      ref: _ref,
+      ...rest
+    } = textFieldAria.descriptionProps;
+    return rest;
+  };
+  const cleanErrorMessageProps = () => {
+    const {
+      ref: _ref,
+      ...rest
+    } = textFieldAria.errorMessageProps;
+    return rest;
+  };
+  return (() => {
+    var _el$ = _tmpl$4$8(), _el$4 = _el$.firstChild;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.label;
+      },
+      get children() {
+        var _el$2 = _tmpl$2$a();
+        spread(_el$2, mergeProps$1(cleanLabelProps, {
+          get ["class"]() {
+            return labelClasses();
+          }
+        }), false, true);
+        insert(_el$2, () => local.label, null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return ariaProps.isRequired;
+          },
+          get children() {
+            return _tmpl$$c();
+          }
+        }), null);
+        return _el$2;
+      }
+    }), _el$4);
+    spread(_el$4, mergeProps$1(cleanInputProps, {
+      get ["class"]() {
+        return inputClasses();
+      }
+    }), false, false);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!local.description)() && !textFieldAria.isInvalid;
+      },
+      get children() {
+        var _el$5 = _tmpl$3$8();
+        spread(_el$5, mergeProps$1(cleanDescriptionProps, {
+          get ["class"]() {
+            return descriptionClasses();
+          }
+        }), false, true);
+        insert(_el$5, () => local.description);
+        return _el$5;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!local.errorMessage)() && textFieldAria.isInvalid;
+      },
+      get children() {
+        var _el$6 = _tmpl$3$8();
+        spread(_el$6, mergeProps$1(cleanErrorMessageProps, {
+          get ["class"]() {
+            return errorClasses();
+          }
+        }), false, true);
+        insert(_el$6, () => local.errorMessage);
+        return _el$6;
+      }
+    }), null);
+    effect((_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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    });
+    return _el$;
+  })();
+}
+
+const variantStyles$2 = {
+  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 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];
+    let underlineClass;
+    if (local.isStandalone && local.isQuiet) {
+      underlineClass = renderProps.isHovered || renderProps.isFocusVisible ? "underline" : "no-underline";
+    } else {
+      underlineClass = "underline";
+    }
+    const weightClass = local.isStandalone ? "font-medium" : "";
+    const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400" : "";
+    const disabledClass = renderProps.isDisabled ? "opacity-50 cursor-not-allowed" : "";
+    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, {
+    "class": getClassName,
+    get children() {
+      return local.children;
+    }
+  }));
+}
+
+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 = {
+  sm: {
+    track: "h-1",
+    text: "text-xs"
+  },
+  md: {
+    track: "h-2",
+    text: "text-sm"
+  },
+  lg: {
+    track: "h-3",
+    text: "text-base"
+  }
+};
+const variantStyles$1 = {
+  primary: "bg-primary-500",
+  accent: "bg-accent",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  danger: "bg-red-500"
+};
+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 size = () => local.size ?? "md";
+  const variant = () => local.variant ?? "primary";
+  const isIndeterminate = () => ariaProps.isIndeterminate ?? false;
+  const showValueLabel = () => local.showValueLabel ?? !isIndeterminate();
+  const progressAria = createProgressBar({
+    get value() {
+      return ariaProps.value;
+    },
+    get minValue() {
+      return ariaProps.minValue;
+    },
+    get maxValue() {
+      return ariaProps.maxValue;
+    },
+    get valueLabel() {
+      return ariaProps.valueLabel;
+    },
+    get isIndeterminate() {
+      return ariaProps.isIndeterminate;
+    },
+    get label() {
+      return local.label;
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    }
+  });
+  const percentage = createMemo(() => {
+    if (isIndeterminate()) {
+      return void 0;
+    }
+    const value = ariaProps.value ?? 0;
+    const minValue = ariaProps.minValue ?? 0;
+    const maxValue = ariaProps.maxValue ?? 100;
+    const clampedValue = clamp(value, minValue, maxValue);
+    return (clampedValue - minValue) / (maxValue - minValue) * 100;
+  });
+  const valueText = () => progressAria.progressBarProps["aria-valuetext"];
+  const sizeConfig = () => sizeStyles[size()];
+  return (() => {
+    var _el$ = _tmpl$4$7(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
+    spread(_el$, mergeProps$1(() => progressAria.progressBarProps, {
+      get ["class"]() {
+        return `w-full ${local.class ?? ""}`;
+      }
+    }), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.label || showValueLabel();
+      },
+      get children() {
+        var _el$2 = _tmpl$3$7();
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return local.label;
+          },
+          get children() {
+            var _el$3 = _tmpl$$b();
+            insert(_el$3, () => local.label);
+            return _el$3;
+          }
+        }), null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return memo(() => !!showValueLabel())() && !isIndeterminate();
+          },
+          get children() {
+            var _el$4 = _tmpl$2$9();
+            insert(_el$4, valueText);
+            return _el$4;
+          }
+        }), null);
+        effect(() => className(_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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+}
+
+var _tmpl$$a = /* @__PURE__ */ template(`<div>`), _tmpl$2$8 = /* @__PURE__ */ template(`<hr>`);
+const variantStyles = {
+  default: "bg-bg-100",
+  subtle: "bg-bg-200",
+  strong: "bg-primary-600"
+};
+const horizontalSizeStyles = {
+  sm: "h-px",
+  md: "h-0.5",
+  lg: "h-1"
+};
+const verticalSizeStyles = {
+  sm: "w-px",
+  md: "w-0.5",
+  lg: "w-1"
+};
+function Separator(props) {
+  const [local, ariaProps] = splitProps(props, ["orientation", "variant", "size", "class"]);
+  const orientation = () => local.orientation ?? "horizontal";
+  const variant = () => local.variant ?? "default";
+  const size = () => local.size ?? "md";
+  const elementType = createMemo(() => {
+    if (orientation() === "vertical") {
+      return "div";
+    }
+    return "hr";
+  });
+  const separatorAria = createSeparator({
+    get orientation() {
+      return orientation();
+    },
+    get elementType() {
+      return elementType();
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    }
+  });
+  const className = createMemo(() => {
+    const isVertical = orientation() === "vertical";
+    const sizeStyles = isVertical ? verticalSizeStyles : horizontalSizeStyles;
+    const base = [
+      variantStyles[variant()],
+      sizeStyles[size()],
+      isVertical ? "h-full self-stretch" : "w-full",
+      "border-0",
+      // Reset hr default border
+      local.class ?? ""
+    ];
+    return base.filter(Boolean).join(" ");
+  });
+  const getAriaProps = () => {
+    const {
+      ref: _,
+      ...props2
+    } = separatorAria.separatorProps;
+    return props2;
+  };
+  return createComponent(Show, {
+    get when() {
+      return orientation() === "vertical";
+    },
+    get fallback() {
+      return (() => {
+        var _el$2 = _tmpl$2$8();
+        spread(_el$2, mergeProps$1(getAriaProps, {
+          get ["class"]() {
+            return className();
+          }
+        }), false, false);
+        return _el$2;
+      })();
+    },
+    get children() {
+      var _el$ = _tmpl$$a();
+      spread(_el$, mergeProps$1(getAriaProps, {
+        get ["class"]() {
+          return className();
+        }
+      }), false, false);
+      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">`);
+function NavHeader(props) {
+  return (() => {
+    var _el$ = _tmpl$3$6(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return props.logo;
+      },
+      get fallback() {
+        return createComponent(Show, {
+          get when() {
+            return props.logoText;
+          },
+          get children() {
+            var _el$6 = _tmpl$4$6();
+            insert(_el$6, () => props.logoText);
+            return _el$6;
+          }
+        });
+      },
+      get children() {
+        var _el$3 = _tmpl$$9();
+        effect((_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);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$3;
+      }
+    }));
+    insert(_el$4, () => props.children, null);
+    insert(_el$4, createComponent(Show, {
+      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);
+        return _el$5;
+      }
+    }), null);
+    effect(() => className(_el$, `flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ""}`));
+    return _el$;
+  })();
+}
+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>`);
+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 ?? ""}`));
+    return _el$;
+  })();
+}
+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 _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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$3;
+  })();
+}
+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, {
+      get title() {
+        return props.title;
+      }
+    }), _el$5);
+    insert(_el$7, createComponent(Show, {
+      get when() {
+        return props.links;
+      },
+      get children() {
+        return createComponent(For, {
+          get each() {
+            return props.links;
+          },
+          children: (link) => (() => {
+            var _el$8 = _tmpl$4$5();
+            insert(_el$8, createComponent(NavLink, {
+              get href() {
+                return link.href;
+              },
+              get active() {
+                return link.active;
+              },
+              get children() {
+                return link.label;
+              }
+            }));
+            return _el$8;
+          })()
+        });
+      }
+    }), null);
+    insert(_el$7, () => props.children, null);
+    effect(() => className(_el$4, props.class ?? ""));
+    return _el$4;
+  })();
+}
+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 _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 = {
+  follow: (left, right) => [(() => {
+    var _el$ = _tmpl$$7();
+    insert(_el$, left);
+    return _el$;
+  })(), " ha empezado a seguir a ", (() => {
+    var _el$2 = _tmpl$$7();
+    insert(_el$2, right);
+    return _el$2;
+  })()],
+  like: (left, right) => [(() => {
+    var _el$3 = _tmpl$$7();
+    insert(_el$3, left);
+    return _el$3;
+  })(), " le ha dado like a ", (() => {
+    var _el$4 = _tmpl$$7();
+    insert(_el$4, right);
+    return _el$4;
+  })()],
+  comment: (left, right) => [(() => {
+    var _el$5 = _tmpl$$7();
+    insert(_el$5, left);
+    return _el$5;
+  })(), " ha comentado en ", (() => {
+    var _el$6 = _tmpl$$7();
+    insert(_el$6, right);
+    return _el$6;
+  })()],
+  event: (left, right) => [(() => {
+    var _el$7 = _tmpl$$7();
+    insert(_el$7, left);
+    return _el$7;
+  })(), " asistirá al evento de ", (() => {
+    var _el$8 = _tmpl$$7();
+    insert(_el$8, right);
+    return _el$8;
+  })()],
+  custom: () => null
+};
+function TimelineItem(props) {
+  const type = () => props.type ?? "follow";
+  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, {
+      get when() {
+        return props.leftUser;
+      },
+      get children() {
+        return createComponent(Avatar, {
+          get src() {
+            return props.leftUser.avatar;
+          },
+          get alt() {
+            return props.leftUser.name;
+          }
+        });
+      }
+    }), null);
+    insert(_el$0, createComponent(Show, {
+      get when() {
+        return props.icon;
+      },
+      get children() {
+        return props.icon;
+      }
+    }), null);
+    insert(_el$0, createComponent(Show, {
+      get when() {
+        return props.rightUser;
+      },
+      get children() {
+        return createComponent(Avatar, {
+          get src() {
+            return props.rightUser.avatar;
+          },
+          get alt() {
+            return props.rightUser.name;
+          }
+        });
+      }
+    }), null);
+    insert(_el$10, createComponent(Show, {
+      get when() {
+        return props.message;
+      },
+      get fallback() {
+        return eventMessages[type()](leftName(), rightName());
+      },
+      get children() {
+        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 ?? ""}`));
+    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>`);
+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, {
+      get src() {
+        return props.user.avatar;
+      },
+      get alt() {
+        return props.user.name;
+      },
+      get online() {
+        return props.user.online;
+      },
+      size: "md"
+    }), _el$2);
+    insert(_el$4, () => props.user.name);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return props.timestamp;
+      },
+      get children() {
+        var _el$5 = _tmpl$$6();
+        insert(_el$5, () => props.timestamp);
+        return _el$5;
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return props.lastMessage;
+      },
+      get children() {
+        var _el$6 = _tmpl$2$4();
+        insert(_el$6, () => props.lastMessage);
+        return _el$6;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!props.unreadCount)() && props.unreadCount > 0;
+      },
+      get children() {
+        var _el$7 = _tmpl$3$4();
+        insert(_el$7, () => props.unreadCount);
+        return _el$7;
+      }
+    }), 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 ?? ""}`));
+    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, {
+      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;
+      }
+    }), null);
+    effect((_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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$8;
+  })();
+}
+function Conversation(props) {
+  return (() => {
+    var _el$10 = _tmpl$7$1();
+    insert(_el$10, createComponent(For, {
+      get each() {
+        return props.messages;
+      },
+      children: (message) => createComponent(ConversationBubble, {
+        get content() {
+          return message.content;
+        },
+        get sender() {
+          return message.sender;
+        },
+        get timestamp() {
+          return message.timestamp;
+        }
+      })
+    }));
+    effect(() => className(_el$10, `flex flex-col gap-2 p-4 ${props.class ?? ""}`));
+    return _el$10;
+  })();
+}
+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">`);
+function ProfileCard(props) {
+  const formatNumber = (num) => {
+    if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
+    if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
+    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, {
+      get src() {
+        return props.avatar;
+      },
+      get alt() {
+        return props.username;
+      },
+      size: "lg"
+    }), _el$3);
+    insert(_el$4, () => props.username);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return props.bio;
+      },
+      get children() {
+        var _el$5 = _tmpl$$5();
+        insert(_el$5, () => props.bio);
+        return _el$5;
+      }
+    }), _el$6);
+    insert(_el$6, createComponent(Show, {
+      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));
+        return _el$7;
+      }
+    }), null);
+    insert(_el$6, createComponent(Show, {
+      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));
+        return _el$9;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.actions;
+      },
+      get children() {
+        var _el$1 = _tmpl$4$3();
+        insert(_el$1, () => props.actions);
+        return _el$1;
+      }
+    }), null);
+    effect(() => className(_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">`);
+function EventCard(props) {
+  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
+  const remainingCount = () => {
+    const total = props.attendeeCount ?? props.attendees?.length ?? 0;
+    const displayed = displayedAttendees().length;
+    return total - displayed;
+  };
+  return (() => {
+    var _el$ = _tmpl$9(), _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;
+        effect((_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);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$2;
+      }
+    }), _el$8);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.image;
+      },
+      get children() {
+        var _el$6 = _tmpl$2$2(), _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);
+          _v$5 !== _p$.t && setAttribute(_el$7, "alt", _p$.t = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$6;
+      }
+    }), _el$8);
+    insert(_el$9, () => props.title);
+    insert(_el$8, createComponent(Show, {
+      get when() {
+        return props.date || props.author;
+      },
+      get children() {
+        var _el$0 = _tmpl$5$1();
+        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;
+            insert(_el$11, () => props.author);
+            return _el$1;
+          }
+        }), null);
+        insert(_el$0, createComponent(Show, {
+          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);
+            return _el$12;
+          }
+        }), null);
+        return _el$0;
+      }
+    }), null);
+    insert(_el$8, createComponent(Show, {
+      get when() {
+        return displayedAttendees().length > 0;
+      },
+      get children() {
+        var _el$15 = _tmpl$7(), _el$16 = _el$15.firstChild;
+        insert(_el$16, createComponent(For, {
+          get each() {
+            return displayedAttendees();
+          },
+          children: (attendee) => createComponent(Avatar, {
+            get src() {
+              return attendee.avatar;
+            },
+            get alt() {
+              return attendee.name;
+            },
+            size: "sm"
+          })
+        }));
+        insert(_el$15, createComponent(Show, {
+          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;
+          }
+        }), null);
+        return _el$15;
+      }
+    }), null);
+    insert(_el$8, createComponent(Show, {
+      get when() {
+        return props.actions;
+      },
+      get children() {
+        var _el$21 = _tmpl$8();
+        insert(_el$21, () => props.actions);
+        return _el$21;
+      }
+    }), null);
+    effect(() => className(_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, {
+      get when() {
+        return props.image;
+      },
+      get children() {
+        var _el$23 = _tmpl$0(), _el$24 = _el$23.firstChild;
+        effect((_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);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$23;
+      }
+    }), _el$25);
+    insert(_el$26, () => props.title);
+    insert(_el$25, createComponent(Show, {
+      get when() {
+        return props.subtitle;
+      },
+      get children() {
+        var _el$27 = _tmpl$1();
+        insert(_el$27, () => props.subtitle);
+        return _el$27;
+      }
+    }), 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;
+  })();
+}
+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">`);
+function CalendarCard(props) {
+  const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
+  const remainingCount = () => {
+    const total = props.followerCount ?? props.followers?.length ?? 0;
+    const displayed = displayedFollowers().length;
+    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, {
+      get when() {
+        return props.image;
+      },
+      get children() {
+        var _el$2 = _tmpl$$3(), _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$);
+          _v$2 !== _p$.t && setAttribute(_el$3, "alt", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$2;
+      }
+    }), _el$4);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return memo(() => !!props.tags)() && props.tags.length > 0;
+      },
+      get children() {
+        var _el$5 = _tmpl$2$1(), _el$6 = _el$5.firstChild;
+        insert(_el$6, createComponent(For, {
+          get each() {
+            return props.tags;
+          },
+          children: (tag) => createComponent(Chip, {
+            text: tag,
+            variant: "primary"
+          })
+        }));
+        return _el$5;
+      }
+    }), _el$7);
+    insert(_el$9, () => props.title);
+    insert(_el$7, createComponent(Show, {
+      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, {
+          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, {
+          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);
+              return _el$12;
+            })()];
+          }
+        }), null);
+        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 ?? ""}`));
+    return _el$;
+  })();
+}
+
+var _tmpl$$2 = /* @__PURE__ */ template(`<span><span class=vui-logo__first></span><span class=vui-logo__second>`);
+function Logo(props) {
+  const sizeClass = () => {
+    switch (props.size) {
+      case "sm":
+        return "vui-logo--sm";
+      case "lg":
+        return "vui-logo--lg";
+      case "xl":
+        return "vui-logo--xl";
+      case "md":
+      default:
+        return "vui-logo--md";
+    }
+  };
+  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 _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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    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>`);
+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);
+    return _el$;
+  })(), (() => {
+    var _el$3 = _tmpl$2();
+    effect((_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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$3;
+  })()];
+  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 _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);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$4;
+    })();
+  }
+  return (() => {
+    var _el$5 = _tmpl$4();
+    insert(_el$5, cardContent);
+    effect(() => className(_el$5, cardClasses()));
+    return _el$5;
+  })();
+}
+
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function PageLayout(props) {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps$1({
+      get ["class"]() {
+        return `vui-page ${local.class ?? ""}`;
+      }
+    }, rest), false, true);
+    insert(_el$, () => local.children);
+    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