@proyecto-viviana/ui 0.1.4 → 0.1.5

package/dist/index.ssr.js

@@ -0,0 +1,1657 @@
+// src/button/Button.tsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { splitProps, mergeProps as solidMergeProps } from "solid-js";
+import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
+function Button(props) {
+  const defaultProps = {
+    variant: "primary",
+    buttonStyle: "fill",
+    size: "md"
+  };
+  const merged = solidMergeProps(defaultProps, props);
+  const [local, headlessProps] = splitProps(merged, ["children", "variant", "buttonStyle", "size", "fullWidth", "staticColor", "class"]);
+  const getClassName = (renderProps) => {
+    const classList = ["vui-button", `vui-button--${local.buttonStyle}`, `vui-button--${local.variant}`, `vui-button--${local.size}`];
+    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(HeadlessButton, _$mergeProps(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;
+    }
+  }));
+}
+
+// src/badge/index.tsx
+import { createComponent as _$createComponent2 } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { Show } from "solid-js";
+var _tmpl$ = ["<span>", "</span>"];
+var _tmpl$2 = ['<div class="', '">', "</div>"];
+var variantStyles = {
+  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"
+};
+var sizeStyles = {
+  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 _$ssr(_tmpl$2, `flex items-center justify-center rounded-full border-b border-white font-semibold ${_$escape(variantStyles[variant()], true)} ${_$escape(sizeStyles[size()], true)} ${_$escape(props.class, true) ?? ""}`, _$escape(_$createComponent2(Show, {
+    get when() {
+      return props.count !== void 0;
+    },
+    get fallback() {
+      return props.children;
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$escape(props.count));
+    }
+  })));
+}
+
+// src/alert/index.tsx
+import { createComponent as _$createComponent3 } from "solid-js/web";
+import { ssr as _$ssr2 } from "solid-js/web";
+import { escape as _$escape2 } from "solid-js/web";
+import { Show as Show2 } from "solid-js";
+var _tmpl$3 = ['<span class="font-semibold font-jost">', "</span>"];
+var _tmpl$22 = '<span class="opacity-50">|</span>';
+var _tmpl$32 = '<button class="hover:opacity-70 transition-opacity ml-2" aria-label="Dismiss">\u2715</button>';
+var _tmpl$4 = ['<div class="', '" role="alert"><div class="flex items-center gap-3 flex-1">', '<div class="flex-1">', "</div>", "</div></div>"];
+var variantStyles2 = {
+  info: "bg-primary-700 text-primary-200 border border-primary-500",
+  success: "bg-success-600 text-success-100 border border-success-400",
+  warning: "bg-warning-600 text-warning-100 border border-warning-400",
+  error: "bg-danger-600 text-danger-100 border border-danger-400"
+};
+function Alert(props) {
+  const variant = () => props.variant ?? "info";
+  return _$ssr2(_tmpl$4, `flex items-center min-h-[50px] font-normal rounded-lg px-4 py-2 ${_$escape2(variantStyles2[variant()], true)} ${_$escape2(props.class, true) ?? ""}`, _$escape2(_$createComponent3(Show2, {
+    get when() {
+      return props.title;
+    },
+    get children() {
+      return [_$ssr2(_tmpl$3, _$escape2(props.title)), _$ssr2(_tmpl$22)];
+    }
+  })), _$escape2(props.children), _$escape2(_$createComponent3(Show2, {
+    get when() {
+      return props.dismissible;
+    },
+    get children() {
+      return _$ssr2(_tmpl$32);
+    }
+  })));
+}
+
+// src/avatar/index.tsx
+import { createComponent as _$createComponent4 } from "solid-js/web";
+import { ssr as _$ssr3 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape3 } from "solid-js/web";
+import { Show as Show3 } from "solid-js";
+var _tmpl$5 = ["<img", ' class="w-full h-full object-cover">'];
+var _tmpl$23 = ['<span class="', '"></span>'];
+var _tmpl$33 = ['<div class="', '"><div class="', '">', "</div>", "</div>"];
+var _tmpl$42 = ['<span class="', '">', "</span>"];
+var _tmpl$52 = ['<div class="flex -space-x-2">', "</div>"];
+var sizeStyles2 = {
+  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 = () => 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 _$ssr3(_tmpl$33, `relative inline-block ${_$escape3(props.class, true) ?? ""}`, `${_$escape3(styles().container, true)} rounded-full overflow-hidden bg-bg-200 flex items-center justify-center ring-2 ring-accent/50`, _$escape3(_$createComponent4(Show3, {
+    get when() {
+      return props.src;
+    },
+    get fallback() {
+      return _$ssr3(_tmpl$42, `${_$escape3(styles().text, true)} font-medium text-primary-300`, _$escape3(initials()));
+    },
+    get children() {
+      return _$ssr3(_tmpl$5, _$ssrAttribute("src", _$escape3(props.src, true), false) + _$ssrAttribute("alt", _$escape3(props.alt, true) ?? "Avatar", false));
+    }
+  })), _$escape3(_$createComponent4(Show3, {
+    get when() {
+      return props.online !== void 0;
+    },
+    get children() {
+      return _$ssr3(_tmpl$23, `absolute bottom-0 right-0 ${_$escape3(styles().indicator, true)} rounded-full ring-2 ring-bg-400 ${props.online ? "bg-success-400" : "bg-bg-light"}`);
+    }
+  })));
+}
+function AvatarGroup(props) {
+  return _$ssr3(_tmpl$52, _$escape3(props.children));
+}
+
+// src/switch/index.tsx
+import { ssr as _$ssr5 } from "solid-js/web";
+import { escape as _$escape5 } from "solid-js/web";
+import { createSignal, createEffect } from "solid-js";
+
+// src/switch/ToggleSwitch.tsx
+import { ssr as _$ssr4 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute2 } from "solid-js/web";
+import { escape as _$escape4 } from "solid-js/web";
+import { createComponent as _$createComponent5 } from "solid-js/web";
+import { mergeProps as _$mergeProps2 } from "solid-js/web";
+import { splitProps as splitProps2, mergeProps as solidMergeProps2 } from "solid-js";
+import { ToggleSwitch as HeadlessToggleSwitch } from "@proyecto-viviana/solidaria-components";
+var _tmpl$6 = ["<span", "><span", "></span></span>"];
+var _tmpl$24 = ['<span class="text-primary-200">', "</span>"];
+var sizeStyles3 = {
+  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 = solidMergeProps2(defaultProps, props);
+  const [local, headlessProps] = splitProps2(merged, ["size", "class", "children"]);
+  const size = () => sizeStyles3[local.size];
+  const getClassName = (renderProps) => {
+    const base = "inline-flex items-center gap-2 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  return _$createComponent5(HeadlessToggleSwitch, _$mergeProps2(headlessProps, {
+    "class": getClassName,
+    children: (renderProps) => [_$ssr4(_tmpl$6, _$ssrAttribute2("class", _$escape4(["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(" "), true), false), _$ssrAttribute2("class", _$escape4(["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(" "), true), false)), local.children && _$ssr4(_tmpl$24, _$escape4(local.children))]
+  }));
+}
+
+// src/switch/index.tsx
+var _tmpl$7 = ['<div class="', '"><div class="', '"></div><div class="flex z-10 h-8 justify-around"><button type="button" class="', '"><span>', '</span></button><button type="button" class="', '"><span>', "</span></button></div></div>"];
+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 _$ssr5(_tmpl$7, `relative bg-bg-400 rounded-full w-[250px] cursor-pointer ${_$escape5(props.class, true) ?? ""}`, `${leftSelected() ? _$escape5(leftSelectedStyle, true) : _$escape5(rightSelectedStyle, true)} transition-all duration-500 ease-in-out z-0 absolute bg-primary-600 rounded-full h-8 border-accent-300`, `${leftSelected() ? _$escape5(textSelected, true) : _$escape5(textUnselected, true)} transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`, _$escape5(props.options[0]?.label) ?? "TENDENCIAS", `${leftSelected() ? _$escape5(textUnselected, true) : _$escape5(textSelected, true)} transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`, _$escape5(props.options[1]?.label) ?? "\xDALTIMOS");
+}
+
+// src/checkbox/index.tsx
+import { createComponent as _$createComponent6 } from "solid-js/web";
+import { mergeProps as _$mergeProps3 } from "solid-js/web";
+import { ssr as _$ssr6 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute3 } from "solid-js/web";
+import { escape as _$escape6 } from "solid-js/web";
+import { splitProps as splitProps3, mergeProps as solidMergeProps3, Show as Show4 } from "solid-js";
+import { Checkbox as HeadlessCheckbox, CheckboxGroup as HeadlessCheckboxGroup } from "@proyecto-viviana/solidaria-components";
+var _tmpl$8 = ["<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"></path></svg>'];
+var _tmpl$25 = ["<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"></path></svg>'];
+var _tmpl$34 = ["<span", ">", "</span>"];
+var _tmpl$43 = ['<span class="text-sm font-medium text-primary-200">', "</span>"];
+var _tmpl$53 = ['<div class="flex flex-col gap-2">', "</div>"];
+var _tmpl$62 = ['<span class="text-sm text-primary-400">', "</span>"];
+var _tmpl$72 = ['<span class="text-sm text-danger-400">', "</span>"];
+var sizeStyles4 = {
+  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 _$ssr6(_tmpl$8, _$ssrAttribute3("class", _$escape6(props.class, true), false));
+}
+function IndeterminateIcon(props) {
+  return _$ssr6(_tmpl$25, _$ssrAttribute3("class", _$escape6(props.class, true), false));
+}
+function Checkbox(props) {
+  const defaultProps = {
+    size: "md"
+  };
+  const merged = solidMergeProps3(defaultProps, props);
+  const [local, headlessProps] = splitProps3(merged, ["size", "class", "children"]);
+  const size = () => sizeStyles4[local.size];
+  const getClassName = (renderProps) => {
+    const base = "inline-flex items-center gap-2 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  return _$createComponent6(HeadlessCheckbox, _$mergeProps3(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 [_$ssr6(_tmpl$34, _$ssrAttribute3("class", _$escape6(boxClasses(), true), false), _$escape6(_$createComponent6(Show4, {
+        get when() {
+          return !renderProps.isIndeterminate;
+        },
+        get fallback() {
+          return _$createComponent6(IndeterminateIcon, {
+            get ["class"]() {
+              return iconClasses();
+            }
+          });
+        },
+        get children() {
+          return _$createComponent6(CheckIcon, {
+            get ["class"]() {
+              return iconClasses();
+            }
+          });
+        }
+      }))), _$createComponent6(Show4, {
+        get when() {
+          return local.children;
+        },
+        get children() {
+          return _$ssr6(_tmpl$34, _$ssrAttribute3("class", _$escape6(labelClasses(), true), false), _$escape6(local.children));
+        }
+      })];
+    }
+  }));
+}
+function CheckboxGroup(props) {
+  const [local, headlessProps] = splitProps3(props, ["class", "children", "label", "description", "errorMessage"]);
+  const getClassName = (renderProps) => {
+    const base = "flex flex-col gap-2";
+    const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  const renderChildren = (renderProps) => [_$createComponent6(Show4, {
+    get when() {
+      return local.label;
+    },
+    get children() {
+      return _$ssr6(_tmpl$43, _$escape6(local.label));
+    }
+  }), _$ssr6(_tmpl$53, _$escape6(local.children)), _$createComponent6(Show4, {
+    get when() {
+      return local.description && !renderProps.isInvalid;
+    },
+    get children() {
+      return _$ssr6(_tmpl$62, _$escape6(local.description));
+    }
+  }), _$createComponent6(Show4, {
+    get when() {
+      return local.errorMessage && renderProps.isInvalid;
+    },
+    get children() {
+      return _$ssr6(_tmpl$72, _$escape6(local.errorMessage));
+    }
+  })];
+  return _$createComponent6(HeadlessCheckboxGroup, _$mergeProps3(headlessProps, {
+    "class": getClassName,
+    children: renderChildren
+  }));
+}
+
+// src/radio/index.tsx
+import { ssrAttribute as _$ssrAttribute4 } from "solid-js/web";
+import { mergeProps as _$mergeProps4 } from "solid-js/web";
+import { createComponent as _$createComponent7 } from "solid-js/web";
+import { ssr as _$ssr7 } from "solid-js/web";
+import { escape as _$escape7 } from "solid-js/web";
+import { Show as Show5, createContext, useContext, splitProps as splitProps4 } from "solid-js";
+import { RadioGroup as HeadlessRadioGroup, Radio as HeadlessRadio } from "@proyecto-viviana/solidaria-components";
+var _tmpl$9 = ['<span class="text-primary-200 font-medium mb-1">', "</span>"];
+var _tmpl$26 = ['<span class="text-primary-400 text-sm">', "</span>"];
+var _tmpl$35 = ['<span class="text-danger-400 text-sm">', "</span>"];
+var _tmpl$44 = ["<span", "><span", "></span></span>"];
+var _tmpl$54 = ["<span", ">", "</span>"];
+var RadioSizeContext = createContext("md");
+var sizeStyles5 = {
+  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] = splitProps4(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) => [_$createComponent7(Show5, {
+    get when() {
+      return local.label;
+    },
+    get children() {
+      return _$ssr7(_tmpl$9, _$escape7(local.label));
+    }
+  }), typeof local.children === "function" ? local.children(renderProps) : local.children, _$createComponent7(Show5, {
+    get when() {
+      return local.description && !renderProps.isInvalid;
+    },
+    get children() {
+      return _$ssr7(_tmpl$26, _$escape7(local.description));
+    }
+  }), _$createComponent7(Show5, {
+    get when() {
+      return local.errorMessage && renderProps.isInvalid;
+    },
+    get children() {
+      return _$ssr7(_tmpl$35, _$escape7(local.errorMessage));
+    }
+  })];
+  return _$createComponent7(RadioSizeContext.Provider, {
+    value: size,
+    get children() {
+      return _$createComponent7(HeadlessRadioGroup, _$mergeProps4(headlessProps, {
+        "class": getClassName,
+        "data-size": size,
+        children: renderChildren
+      }));
+    }
+  });
+}
+function Radio(props) {
+  const sizeFromContext = useContext(RadioSizeContext);
+  const size = () => sizeStyles5[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 _$createComponent7(HeadlessRadio, _$mergeProps4(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 [_$ssr7(_tmpl$44, _$ssrAttribute4("class", _$escape7(circleClasses(), true), false), _$ssrAttribute4("class", _$escape7(dotClasses(), true), false)), _$createComponent7(Show5, {
+        when: resolvedChildren,
+        get children() {
+          return _$ssr7(_tmpl$54, _$ssrAttribute4("class", _$escape7(labelClasses(), true), false), _$escape7(resolvedChildren));
+        }
+      })];
+    }
+  }));
+}
+
+// src/dialog/index.tsx
+import { createComponent as _$createComponent8 } from "solid-js/web";
+import { ssr as _$ssr9 } from "solid-js/web";
+import { escape as _$escape9 } from "solid-js/web";
+import { Show as Show6 } from "solid-js";
+
+// src/custom/chip/index.tsx
+import { ssr as _$ssr8 } from "solid-js/web";
+import { escape as _$escape8 } from "solid-js/web";
+var _tmpl$10 = ['<button class="', '">', "<span>", "</span></button>"];
+var _tmpl$27 = ['<span class="mr-1.5">', "</span>"];
+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",
+  outline: "bg-transparent border border-primary-500 text-primary-300"
+};
+function Chip(props) {
+  const variant = () => props.variant ?? "primary";
+  return _$ssr8(_tmpl$10, `flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${_$escape8(variantStyles3[variant()], true)} ${_$escape8(props.class, true) ?? ""}`, props.icon && _$ssr8(_tmpl$27, _$escape8(props.icon)), _$escape8(props.text));
+}
+
+// src/dialog/index.tsx
+var _tmpl$11 = ['<span class="text-base font-normal text-primary-300">', "</span>"];
+var _tmpl$28 = ['<div class="flex flex-1 flex-row items-end justify-center gap-5 py-5">', "", "</div>"];
+var _tmpl$36 = ['<div class="relative bottom-4 right-4 w-full"><div class="flex flex-row justify-end gap-2 pr-4">', "</div></div>"];
+var _tmpl$45 = ['<div class="', '"><span class="relative left-8 top-4 bg-gradient-to-b from-primary-100 to-primary-500 bg-clip-text text-4xl font-extrabold text-transparent">', '</span><div class="flex h-[50px] flex-col justify-end rounded-t-[26px] bg-primary-800"><div class="flex h-[40px] flex-col justify-end rounded-t-[30px] bg-primary-600"><div class="flex h-[20px] items-center justify-end rounded-t-[100px] bg-primary-700 pr-4">', '</div></div></div><div class="mt-1 flex min-h-[200px] flex-col rounded-b-[26px] rounded-t-lg border-b border-accent-500 bg-bg-300"><div class="flex flex-1 flex-col p-4"><div class="text-lg text-gray-100">', "</div>", "</div></div>", "</div>"];
+function Dialog(props) {
+  return _$ssr9(_tmpl$45, `flex flex-col w-full max-w-[540px] ${_$escape9(props.class, true) ?? ""}`, _$escape9(props.title), _$escape9(_$createComponent8(Show6, {
+    get when() {
+      return props.subtitle;
+    },
+    get children() {
+      return _$ssr9(_tmpl$11, _$escape9(props.subtitle));
+    }
+  })), _$escape9(props.children), _$escape9(_$createComponent8(Show6, {
+    get when() {
+      return props.primaryAction || props.secondaryAction;
+    },
+    get children() {
+      return _$ssr9(_tmpl$28, _$escape9(_$createComponent8(Show6, {
+        get when() {
+          return props.secondaryAction;
+        },
+        get children() {
+          return _$createComponent8(Button, {
+            variant: "primary",
+            buttonStyle: "outline",
+            get onPress() {
+              return props.secondaryAction.onClick;
+            },
+            get children() {
+              return props.secondaryAction.label;
+            }
+          });
+        }
+      })), _$escape9(_$createComponent8(Show6, {
+        get when() {
+          return props.primaryAction;
+        },
+        get children() {
+          return _$createComponent8(Button, {
+            variant: "primary",
+            get onPress() {
+              return props.primaryAction.onClick;
+            },
+            get children() {
+              return props.primaryAction.label;
+            }
+          });
+        }
+      })));
+    }
+  })), _$escape9(_$createComponent8(Show6, {
+    get when() {
+      return props.tags && props.tags.length > 0;
+    },
+    get children() {
+      return _$ssr9(_tmpl$36, _$escape9(props.tags.map((tag) => _$createComponent8(Chip, {
+        variant: "primary",
+        text: tag
+      }))));
+    }
+  })));
+}
+
+// src/icon/index.tsx
+import { ssr as _$ssr11 } from "solid-js/web";
+import { createComponent as _$createComponent9 } from "solid-js/web";
+import { escape as _$escape11 } from "solid-js/web";
+
+// src/icon/icons/GitHubIcon.tsx
+import { ssr as _$ssr10 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute5 } from "solid-js/web";
+import { escape as _$escape10 } from "solid-js/web";
+var _tmpl$12 = ['<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"></path></svg>'];
+function GitHubIcon(props) {
+  return _$ssr10(_tmpl$12, _$ssrAttribute5("width", _$escape10(props.size, true), false) + _$ssrAttribute5("height", _$escape10(props.size, true), false) + _$ssrAttribute5("fill", _$escape10(props.color, true), false));
+}
+
+// src/icon/index.tsx
+var _tmpl$13 = ['<div class="', '">', '<div class="vui-icon__main">', "</div></div>"];
+var _tmpl$29 = ['<div class="vui-icon__shadow">', "</div>"];
+function Icon(props) {
+  const size = () => props.size ?? 24;
+  const color = () => props.color ?? "var(--color-primary-500)";
+  const IconComponent = props.icon;
+  return _$ssr11(_tmpl$13, `vui-icon ${props.withShadow ? "vui-icon--with-shadow" : ""} ${_$escape11(props.class, true) ?? ""}`, props.withShadow && _$ssr11(_tmpl$29, _$escape11(_$createComponent9(IconComponent, {
+    get size() {
+      return size();
+    },
+    color: "var(--color-accent)"
+  }))), _$escape11(_$createComponent9(IconComponent, {
+    get size() {
+      return size();
+    },
+    get color() {
+      return color();
+    }
+  })));
+}
+
+// src/tooltip/index.tsx
+import { ssr as _$ssr12 } from "solid-js/web";
+import { escape as _$escape12 } from "solid-js/web";
+var _tmpl$14 = ['<div class="', '"><div class="vui-tooltip__trigger">', '</div><div class="', '"><span>', "</span></div></div>"];
+function Tooltip(props) {
+  const position = () => props.position ?? "bottom";
+  return _$ssr12(_tmpl$14, `vui-tooltip ${_$escape12(props.class, true) ?? ""}`, _$escape12(props.children), `vui-tooltip__content vui-tooltip__content--${_$escape12(position(), true)}`, _$escape12(props.label));
+}
+
+// src/textfield/index.tsx
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps5 } from "solid-js/web";
+import { createComponent as _$createComponent10 } from "solid-js/web";
+import { ssr as _$ssr13 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute6 } from "solid-js/web";
+import { escape as _$escape13 } from "solid-js/web";
+import { splitProps as splitProps5, mergeProps as solidMergeProps4, Show as Show7 } from "solid-js";
+import { createTextField, createFocusRing } from "@proyecto-viviana/solidaria";
+
+// ../solid-stately/dist/index.js
+import { createSignal as createSignal2, createUniqueId, untrack } from "solid-js";
+import { isServer } from "solid-js/web";
+function access(value) {
+  return typeof value === "function" ? value() : value;
+}
+function createTextFieldState(props = {}) {
+  const getProps = () => access(props);
+  const initialProps = getProps();
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
+  const [internalValue, setInternalValue] = createSignal2(initialValue);
+  const isControlled = () => getProps().value !== void 0;
+  const value = () => {
+    const p = getProps();
+    return isControlled() ? p.value ?? "" : internalValue();
+  };
+  function setValue(newValue) {
+    var _a;
+    const p = getProps();
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+    (_a = p.onChange) == null ? void 0 : _a.call(p, newValue);
+  }
+  return {
+    value,
+    setValue
+  };
+}
+
+// src/textfield/index.tsx
+var _tmpl$15 = '<span class="text-danger-400 ml-0.5">*</span>';
+var _tmpl$210 = ["<div", ">", "", "", "", "</div>"];
+var sizeStyles6 = {
+  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 = solidMergeProps4(defaultProps, props);
+  const [local, ariaProps] = splitProps5(merged, ["size", "variant", "class", "label", "description", "errorMessage"]);
+  const size = () => sizeStyles6[local.size];
+  const state = createTextFieldState(() => ({
+    value: ariaProps.value,
+    defaultValue: ariaProps.defaultValue,
+    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 _$ssr13(_tmpl$210, _$ssrAttribute6("class", _$escape13(containerClasses(), true), false) + _$ssrAttribute6("data-disabled", _$escape13(ariaProps.isDisabled, true) || _$escape13(void 0, true), false) + _$ssrAttribute6("data-invalid", _$escape13(textFieldAria.isInvalid, true) || _$escape13(void 0, true), false) + _$ssrAttribute6("data-readonly", _$escape13(ariaProps.isReadOnly, true) || _$escape13(void 0, true), false) + _$ssrAttribute6("data-required", _$escape13(ariaProps.isRequired, true) || _$escape13(void 0, true), false) + _$ssrAttribute6("data-focused", _$escape13(isFocused(), true) || _$escape13(void 0, true), false) + _$ssrAttribute6("data-focus-visible", _$escape13(isFocusVisible(), true) || _$escape13(void 0, true), false), _$escape13(_$createComponent10(Show7, {
+    get when() {
+      return local.label;
+    },
+    get children() {
+      return _$ssrElement("label", _$mergeProps5(cleanLabelProps, {
+        get ["class"]() {
+          return labelClasses();
+        }
+      }), [_$escape13(local.label), _$escape13(_$createComponent10(Show7, {
+        get when() {
+          return ariaProps.isRequired;
+        },
+        get children() {
+          return _$ssr13(_tmpl$15);
+        }
+      }))], false);
+    }
+  })), _$ssrElement("input", _$mergeProps5(cleanInputProps, {
+    get ["class"]() {
+      return inputClasses();
+    }
+  }), void 0, false), _$escape13(_$createComponent10(Show7, {
+    get when() {
+      return local.description && !textFieldAria.isInvalid;
+    },
+    get children() {
+      return _$ssrElement("p", _$mergeProps5(cleanDescriptionProps, {
+        get ["class"]() {
+          return descriptionClasses();
+        }
+      }), _$escape13(local.description), false);
+    }
+  })), _$escape13(_$createComponent10(Show7, {
+    get when() {
+      return local.errorMessage && textFieldAria.isInvalid;
+    },
+    get children() {
+      return _$ssrElement("p", _$mergeProps5(cleanErrorMessageProps, {
+        get ["class"]() {
+          return errorClasses();
+        }
+      }), _$escape13(local.errorMessage), false);
+    }
+  })));
+}
+
+// src/link/index.tsx
+import { createComponent as _$createComponent11 } from "solid-js/web";
+import { mergeProps as _$mergeProps6 } from "solid-js/web";
+import { splitProps as splitProps6 } from "solid-js";
+import { Link as HeadlessLink } from "@proyecto-viviana/solidaria-components";
+var variantStyles4 = {
+  primary: "text-accent hover:text-accent-300",
+  secondary: "text-primary-300 hover:text-primary-200",
+  subtle: "text-primary-400 hover:text-primary-300"
+};
+function Link(props) {
+  const [local, headlessProps] = splitProps6(props, ["variant", "isStandalone", "isQuiet", "class", "children"]);
+  const variant = local.variant ?? "primary";
+  const customClass = local.class ?? "";
+  const getClassName = (renderProps) => {
+    const base = "transition-colors duration-200 cursor-pointer rounded-sm outline-none";
+    const variantClass = variantStyles4[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 _$createComponent11(HeadlessLink, _$mergeProps6(headlessProps, {
+    "class": getClassName,
+    get children() {
+      return local.children;
+    }
+  }));
+}
+
+// src/progress-bar/index.tsx
+import { ssrElement as _$ssrElement2 } from "solid-js/web";
+import { mergeProps as _$mergeProps7 } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { createComponent as _$createComponent12 } from "solid-js/web";
+import { ssr as _$ssr14 } from "solid-js/web";
+import { escape as _$escape14 } from "solid-js/web";
+import { splitProps as splitProps7, Show as Show8, createMemo } from "solid-js";
+import { createProgressBar } from "@proyecto-viviana/solidaria";
+var _tmpl$16 = ['<span class="text-primary-200 font-medium">', "</span>"];
+var _tmpl$211 = ['<span class="text-primary-300">', "</span>"];
+var _tmpl$37 = ['<div class="', '">', "", "</div>"];
+var _tmpl$46 = ['<div class="', '"><div class="', '" style="', '"></div></div>'];
+var sizeStyles7 = {
+  sm: {
+    track: "h-1",
+    text: "text-xs"
+  },
+  md: {
+    track: "h-2",
+    text: "text-sm"
+  },
+  lg: {
+    track: "h-3",
+    text: "text-base"
+  }
+};
+var variantStyles5 = {
+  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] = splitProps7(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 = () => sizeStyles7[size()];
+  return _$ssrElement2("div", _$mergeProps7(() => progressAria.progressBarProps, {
+    get ["class"]() {
+      return `w-full ${local.class ?? ""}`;
+    }
+  }), [_$escape14(_$createComponent12(Show8, {
+    get when() {
+      return local.label || showValueLabel();
+    },
+    get children() {
+      return _$ssr14(_tmpl$37, `flex justify-between items-center mb-1 ${_$escape14(sizeConfig().text, true)}`, _$escape14(_$createComponent12(Show8, {
+        get when() {
+          return local.label;
+        },
+        get children() {
+          return _$ssr14(_tmpl$16, _$escape14(local.label));
+        }
+      })), _$escape14(_$createComponent12(Show8, {
+        get when() {
+          return showValueLabel() && !isIndeterminate();
+        },
+        get children() {
+          return _$ssr14(_tmpl$211, _$escape14(valueText()));
+        }
+      })));
+    }
+  })), _$ssr14(_tmpl$46, `w-full ${_$escape14(sizeConfig().track, true)} bg-bg-300 rounded-full overflow-hidden`, `h-full rounded-full transition-all duration-300 ${_$escape14(variantStyles5[variant()], true)} ${isIndeterminate() ? "animate-progress-indeterminate" : ""}`, _$ssrStyleProperty("width:", isIndeterminate() ? "30%" : `${_$escape14(percentage(), true)}%`))], false);
+}
+
+// src/separator/index.tsx
+import { createComponent as _$createComponent13 } from "solid-js/web";
+import { ssrElement as _$ssrElement3 } from "solid-js/web";
+import { mergeProps as _$mergeProps8 } from "solid-js/web";
+import { splitProps as splitProps8, createMemo as createMemo2, Show as Show9 } from "solid-js";
+import { createSeparator } from "@proyecto-viviana/solidaria";
+var variantStyles6 = {
+  default: "bg-bg-100",
+  subtle: "bg-bg-200",
+  strong: "bg-primary-600"
+};
+var horizontalSizeStyles = {
+  sm: "h-px",
+  md: "h-0.5",
+  lg: "h-1"
+};
+var verticalSizeStyles = {
+  sm: "w-px",
+  md: "w-0.5",
+  lg: "w-1"
+};
+function Separator(props) {
+  const [local, ariaProps] = splitProps8(props, ["orientation", "variant", "size", "class"]);
+  const orientation = () => local.orientation ?? "horizontal";
+  const variant = () => local.variant ?? "default";
+  const size = () => local.size ?? "md";
+  const elementType = createMemo2(() => {
+    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 = createMemo2(() => {
+    const isVertical = orientation() === "vertical";
+    const sizeStyles8 = isVertical ? verticalSizeStyles : horizontalSizeStyles;
+    const base = [
+      variantStyles6[variant()],
+      sizeStyles8[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 _$createComponent13(Show9, {
+    get when() {
+      return orientation() === "vertical";
+    },
+    get fallback() {
+      return _$ssrElement3("hr", _$mergeProps8(getAriaProps, {
+        get ["class"]() {
+          return className();
+        }
+      }), void 0, false);
+    },
+    get children() {
+      return _$ssrElement3("div", _$mergeProps8(getAriaProps, {
+        get ["class"]() {
+          return className();
+        }
+      }), void 0, false);
+    }
+  });
+}
+
+// src/custom/nav-header/index.tsx
+import { createComponent as _$createComponent14 } from "solid-js/web";
+import { ssr as _$ssr15 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute7 } from "solid-js/web";
+import { escape as _$escape15 } from "solid-js/web";
+import { Show as Show10 } from "solid-js";
+var _tmpl$17 = ["<img", ' class="h-[42px] w-auto">'];
+var _tmpl$212 = ['<button class="md:hidden flex items-center justify-center">', "</button>"];
+var _tmpl$38 = ['<nav class="', '"><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">', "", "</div></nav>"];
+var _tmpl$47 = ['<span class="text-[34px] font-light text-primary-700 flex items-center">', "</span>"];
+function NavHeader(props) {
+  return _$ssr15(_tmpl$38, `flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${_$escape15(props.class, true) ?? ""}`, _$escape15(_$createComponent14(Show10, {
+    get when() {
+      return props.logo;
+    },
+    get fallback() {
+      return _$createComponent14(Show10, {
+        get when() {
+          return props.logoText;
+        },
+        get children() {
+          return _$ssr15(_tmpl$47, _$escape15(props.logoText));
+        }
+      });
+    },
+    get children() {
+      return _$ssr15(_tmpl$17, _$ssrAttribute7("src", _$escape15(props.logo, true), false) + _$ssrAttribute7("alt", _$escape15(props.logoAlt, true) ?? "Logo", false));
+    }
+  })), _$escape15(props.children), _$escape15(_$createComponent14(Show10, {
+    get when() {
+      return props.menuIcon;
+    },
+    get children() {
+      return _$ssr15(_tmpl$212, _$escape15(props.menuIcon));
+    }
+  })));
+}
+
+// src/custom/lateral-nav/index.tsx
+import { createComponent as _$createComponent15 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute8 } from "solid-js/web";
+import { ssr as _$ssr16 } from "solid-js/web";
+import { escape as _$escape16 } from "solid-js/web";
+import { Show as Show11, For } from "solid-js";
+var _tmpl$18 = ['<li class="', '"><span class="text-lg font-bold text-primary-200">', "</span>", "</li>"];
+var _tmpl$213 = ["<a", ' class="', '">', "</a>"];
+var _tmpl$39 = ["<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">', "", "</ul></div></div>"];
+var _tmpl$48 = ["<li>", "</li>"];
+var _tmpl$55 = ['<div class="', '">', "</div>"];
+function NavItem(props) {
+  return _$ssr16(_tmpl$18, `flex items-center ${_$escape16(props.class, true) ?? ""}`, _$escape16(props.title), _$escape16(props.children));
+}
+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 _$ssr16(_tmpl$213, _$ssrAttribute8("href", _$escape16(props.href, true), false), `${props.active ? _$escape16(activeStyles, true) : _$escape16(inactiveStyles, true)} ${_$escape16(props.class, true) ?? ""}`, _$escape16(props.children));
+}
+function NavSection(props) {
+  return _$ssr16(_tmpl$39, _$ssrAttribute8("class", _$escape16(props.class, true) ?? "", false), _$escape16(_$createComponent15(NavItem, {
+    get title() {
+      return props.title;
+    }
+  })), _$escape16(_$createComponent15(Show11, {
+    get when() {
+      return props.links;
+    },
+    get children() {
+      return _$createComponent15(For, {
+        get each() {
+          return props.links;
+        },
+        children: (link) => _$ssr16(_tmpl$48, _$escape16(_$createComponent15(NavLink, {
+          get href() {
+            return link.href;
+          },
+          get active() {
+            return link.active;
+          },
+          get children() {
+            return link.label;
+          }
+        })))
+      });
+    }
+  })), _$escape16(props.children));
+}
+function LateralNav(props) {
+  const bgColor = () => props.transparent ? "" : "bg-bg-200";
+  return _$ssr16(_tmpl$55, `hidden w-[300px] md:block ${_$escape16(bgColor(), true)} m-0 border-r border-primary-600 p-3 ${_$escape16(props.class, true) ?? ""}`, _$escape16(props.children));
+}
+
+// src/custom/timeline-item/index.tsx
+import { createComponent as _$createComponent16 } from "solid-js/web";
+import { ssr as _$ssr17 } from "solid-js/web";
+import { escape as _$escape17 } from "solid-js/web";
+import { Show as Show12 } from "solid-js";
+var _tmpl$19 = ['<span class="font-semibold text-accent-200">', "</span>"];
+var _tmpl$214 = ['<div class="', '"><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">', "</span></div></div>"];
+var eventMessages = {
+  follow: (left, right) => [_$ssr17(_tmpl$19, _$escape17(left)), " ha empezado a seguir a ", _$ssr17(_tmpl$19, _$escape17(right))],
+  like: (left, right) => [_$ssr17(_tmpl$19, _$escape17(left)), " le ha dado like a ", _$ssr17(_tmpl$19, _$escape17(right))],
+  comment: (left, right) => [_$ssr17(_tmpl$19, _$escape17(left)), " ha comentado en ", _$ssr17(_tmpl$19, _$escape17(right))],
+  event: (left, right) => [_$ssr17(_tmpl$19, _$escape17(left)), " asistir\xE1 al evento de ", _$ssr17(_tmpl$19, _$escape17(right))],
+  custom: () => null
+};
+function TimelineItem(props) {
+  const type = () => props.type ?? "follow";
+  const leftName = () => props.leftUser?.name ?? "";
+  const rightName = () => props.rightUser?.name ?? "";
+  return _$ssr17(_tmpl$214, `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 ${_$escape17(props.class, true) ?? ""}`, _$escape17(_$createComponent16(Show12, {
+    get when() {
+      return props.leftUser;
+    },
+    get children() {
+      return _$createComponent16(Avatar, {
+        get src() {
+          return props.leftUser.avatar;
+        },
+        get alt() {
+          return props.leftUser.name;
+        }
+      });
+    }
+  })), _$escape17(_$createComponent16(Show12, {
+    get when() {
+      return props.icon;
+    },
+    get children() {
+      return props.icon;
+    }
+  })), _$escape17(_$createComponent16(Show12, {
+    get when() {
+      return props.rightUser;
+    },
+    get children() {
+      return _$createComponent16(Avatar, {
+        get src() {
+          return props.rightUser.avatar;
+        },
+        get alt() {
+          return props.rightUser.name;
+        }
+      });
+    }
+  })), _$escape17(_$createComponent16(Show12, {
+    get when() {
+      return props.message;
+    },
+    get fallback() {
+      return eventMessages[type()](leftName(), rightName());
+    },
+    get children() {
+      return props.message;
+    }
+  })));
+}
+
+// src/custom/conversation/index.tsx
+import { ssr as _$ssr18 } from "solid-js/web";
+import { createComponent as _$createComponent17 } from "solid-js/web";
+import { escape as _$escape18 } from "solid-js/web";
+import { Show as Show13, For as For2 } from "solid-js";
+var _tmpl$20 = ['<span class="text-xs text-primary-500">', "</span>"];
+var _tmpl$215 = ['<p class="text-sm text-primary-400 truncate">', "</p>"];
+var _tmpl$310 = ['<span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">', "</span>"];
+var _tmpl$49 = ['<button class="', '">', '<div class="flex-1 min-w-0"><div class="flex items-center justify-between"><span class="font-semibold text-primary-100 truncate">', "</span>", "</div>", "</div>", "</button>"];
+var _tmpl$56 = ['<span class="', '">', "</span>"];
+var _tmpl$63 = ['<div class="', '"><div class="', '"><p>', "</p>", "</div></div>"];
+var _tmpl$73 = ['<div class="', '">', "</div>"];
+function ConversationPreview(props) {
+  return _$ssr18(_tmpl$49, `flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${_$escape18(props.class, true) ?? ""}`, _$escape18(_$createComponent17(Avatar, {
+    get src() {
+      return props.user.avatar;
+    },
+    get alt() {
+      return props.user.name;
+    },
+    get online() {
+      return props.user.online;
+    },
+    size: "md"
+  })), _$escape18(props.user.name), _$escape18(_$createComponent17(Show13, {
+    get when() {
+      return props.timestamp;
+    },
+    get children() {
+      return _$ssr18(_tmpl$20, _$escape18(props.timestamp));
+    }
+  })), _$escape18(_$createComponent17(Show13, {
+    get when() {
+      return props.lastMessage;
+    },
+    get children() {
+      return _$ssr18(_tmpl$215, _$escape18(props.lastMessage));
+    }
+  })), _$escape18(_$createComponent17(Show13, {
+    get when() {
+      return props.unreadCount && props.unreadCount > 0;
+    },
+    get children() {
+      return _$ssr18(_tmpl$310, _$escape18(props.unreadCount));
+    }
+  })));
+}
+function ConversationBubble(props) {
+  const isUser = () => props.sender === "user";
+  return _$ssr18(_tmpl$63, `flex ${isUser() ? "justify-end" : "justify-start"} ${_$escape18(props.class, true) ?? ""}`, `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"}`, _$escape18(props.content), _$escape18(_$createComponent17(Show13, {
+    get when() {
+      return props.timestamp;
+    },
+    get children() {
+      return _$ssr18(_tmpl$56, `text-xs ${isUser() ? "text-white/70" : "text-primary-500"}`, _$escape18(props.timestamp));
+    }
+  })));
+}
+function Conversation(props) {
+  return _$ssr18(_tmpl$73, `flex flex-col gap-2 p-4 ${_$escape18(props.class, true) ?? ""}`, _$escape18(_$createComponent17(For2, {
+    get each() {
+      return props.messages;
+    },
+    children: (message) => _$createComponent17(ConversationBubble, {
+      get content() {
+        return message.content;
+      },
+      get sender() {
+        return message.sender;
+      },
+      get timestamp() {
+        return message.timestamp;
+      }
+    })
+  })));
+}
+
+// src/custom/profile-card/index.tsx
+import { ssr as _$ssr19 } from "solid-js/web";
+import { createComponent as _$createComponent18 } from "solid-js/web";
+import { escape as _$escape19 } from "solid-js/web";
+import { Show as Show14 } from "solid-js";
+var _tmpl$21 = ['<p class="text-primary-300 text-sm mt-1 line-clamp-2">', "</p>"];
+var _tmpl$216 = ['<span class="text-primary-300"><span class="font-semibold text-primary-100">', "</span> seguidores</span>"];
+var _tmpl$311 = ['<span class="text-primary-300"><span class="font-semibold text-primary-100">', "</span> siguiendo</span>"];
+var _tmpl$410 = ['<div class="mt-4 flex gap-2">', "</div>"];
+var _tmpl$57 = ['<div class="', '"><div class="flex items-start gap-4">', '<div class="flex-1 min-w-0"><h3 class="font-semibold text-primary-100 text-lg truncate">', "</h3>", '<div class="flex gap-4 mt-2 text-sm">', "", "</div></div></div>", "</div>"];
+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 _$ssr19(_tmpl$57, `bg-bg-200 rounded-xl p-4 ${_$escape19(props.class, true) ?? ""}`, _$escape19(_$createComponent18(Avatar, {
+    get src() {
+      return props.avatar;
+    },
+    get alt() {
+      return props.username;
+    },
+    size: "lg"
+  })), _$escape19(props.username), _$escape19(_$createComponent18(Show14, {
+    get when() {
+      return props.bio;
+    },
+    get children() {
+      return _$ssr19(_tmpl$21, _$escape19(props.bio));
+    }
+  })), _$escape19(_$createComponent18(Show14, {
+    get when() {
+      return props.followers !== void 0;
+    },
+    get children() {
+      return _$ssr19(_tmpl$216, _$escape19(formatNumber(props.followers)));
+    }
+  })), _$escape19(_$createComponent18(Show14, {
+    get when() {
+      return props.following !== void 0;
+    },
+    get children() {
+      return _$ssr19(_tmpl$311, _$escape19(formatNumber(props.following)));
+    }
+  })), _$escape19(_$createComponent18(Show14, {
+    get when() {
+      return props.actions;
+    },
+    get children() {
+      return _$ssr19(_tmpl$410, _$escape19(props.actions));
+    }
+  })));
+}
+
+// src/custom/event-card/index.tsx
+import { createComponent as _$createComponent19 } from "solid-js/web";
+import { ssr as _$ssr20 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute9 } from "solid-js/web";
+import { escape as _$escape20 } from "solid-js/web";
+import { Show as Show15, For as For3 } from "solid-js";
+var _tmpl$30 = ['<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"></div>'];
+var _tmpl$217 = ['<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"></div></div>'];
+var _tmpl$312 = ['<div class="flex items-center gap-1.5"><span class="text-accent">@</span><span>', "</span></div>"];
+var _tmpl$411 = ['<div class="flex items-center gap-1.5"><span class="text-accent">\u23F1</span><span>', "</span></div>"];
+var _tmpl$58 = ['<div class="flex items-center gap-4 mt-3 text-sm text-primary-300">', "", "</div>"];
+var _tmpl$64 = ['<span class="ml-2 text-sm text-primary-300">+', " m\xE1s</span>"];
+var _tmpl$74 = ['<div class="flex items-center mt-3"><div class="flex -space-x-2">', "</div>", "</div>"];
+var _tmpl$82 = ['<div class="mt-4 flex gap-2">', "</div>"];
+var _tmpl$92 = ['<div class="', '">', "", '<div class="p-4 pt-2"><h3 class="font-bold text-xl leading-tight bg-gradient-to-r from-accent to-accent-300 bg-clip-text text-transparent">', "</h3>", "", "", "</div></div>"];
+var _tmpl$0 = ['<div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0"><img', ' class="w-full h-full object-cover"></div>'];
+var _tmpl$1 = ['<p class="text-sm text-primary-300 truncate">', "</p>"];
+var _tmpl$102 = ['<button class="', '">', '<div class="flex-1 min-w-0"><h4 class="font-medium text-primary-100 truncate">', "</h4>", "</div></button>"];
+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 _$ssr20(_tmpl$92, `relative bg-bg-200 rounded-3xl overflow-hidden ${_$escape20(props.class, true) ?? ""}`, _$escape20(_$createComponent19(Show15, {
+    get when() {
+      return props.decorationImage;
+    },
+    get children() {
+      return _$ssr20(_tmpl$30, _$ssrAttribute9("src", _$escape20(props.decorationImage, true), false), _$ssrAttribute9("src", _$escape20(props.decorationImage, true), false), _$ssrAttribute9("src", _$escape20(props.decorationImage, true), false));
+    }
+  })), _$escape20(_$createComponent19(Show15, {
+    get when() {
+      return props.image;
+    },
+    get children() {
+      return _$ssr20(_tmpl$217, _$ssrAttribute9("src", _$escape20(props.image, true), false) + _$ssrAttribute9("alt", _$escape20(props.title, true), false));
+    }
+  })), _$escape20(props.title), _$escape20(_$createComponent19(Show15, {
+    get when() {
+      return props.date || props.author;
+    },
+    get children() {
+      return _$ssr20(_tmpl$58, _$escape20(_$createComponent19(Show15, {
+        get when() {
+          return props.author;
+        },
+        get children() {
+          return _$ssr20(_tmpl$312, _$escape20(props.author));
+        }
+      })), _$escape20(_$createComponent19(Show15, {
+        get when() {
+          return props.date;
+        },
+        get children() {
+          return _$ssr20(_tmpl$411, _$escape20(props.date));
+        }
+      })));
+    }
+  })), _$escape20(_$createComponent19(Show15, {
+    get when() {
+      return displayedAttendees().length > 0;
+    },
+    get children() {
+      return _$ssr20(_tmpl$74, _$escape20(_$createComponent19(For3, {
+        get each() {
+          return displayedAttendees();
+        },
+        children: (attendee) => _$createComponent19(Avatar, {
+          get src() {
+            return attendee.avatar;
+          },
+          get alt() {
+            return attendee.name;
+          },
+          size: "sm"
+        })
+      })), _$escape20(_$createComponent19(Show15, {
+        get when() {
+          return remainingCount() > 0;
+        },
+        get children() {
+          return _$ssr20(_tmpl$64, _$escape20(remainingCount()));
+        }
+      })));
+    }
+  })), _$escape20(_$createComponent19(Show15, {
+    get when() {
+      return props.actions;
+    },
+    get children() {
+      return _$ssr20(_tmpl$82, _$escape20(props.actions));
+    }
+  })));
+}
+function EventListItem(props) {
+  return _$ssr20(_tmpl$102, `flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${_$escape20(props.class, true) ?? ""}`, _$escape20(_$createComponent19(Show15, {
+    get when() {
+      return props.image;
+    },
+    get children() {
+      return _$ssr20(_tmpl$0, _$ssrAttribute9("src", _$escape20(props.image, true), false) + _$ssrAttribute9("alt", _$escape20(props.title, true), false));
+    }
+  })), _$escape20(props.title), _$escape20(_$createComponent19(Show15, {
+    get when() {
+      return props.subtitle;
+    },
+    get children() {
+      return _$ssr20(_tmpl$1, _$escape20(props.subtitle));
+    }
+  })));
+}
+
+// src/custom/calendar-card/index.tsx
+import { createComponent as _$createComponent20 } from "solid-js/web";
+import { ssr as _$ssr21 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute10 } from "solid-js/web";
+import { escape as _$escape21 } from "solid-js/web";
+import { Show as Show16, For as For4 } from "solid-js";
+var _tmpl$31 = ['<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"></div>'];
+var _tmpl$218 = ['<div class="absolute bottom-[-20px] h-[30px] w-full"><div class="flex h-full w-full flex-1 justify-end gap-1">', "</div></div>"];
+var _tmpl$313 = ['<span class="font-semibold text-accent-200">', " m\xE1s</span>"];
+var _tmpl$412 = ['<div class="flex flex-1"><span class="text-base font-normal text-primary-500">seguida por ', "", "</span></div>"];
+var _tmpl$59 = ['<div class="', '">', '<div class="relative h-full flex-1 flex-col pl-3">', '<div class="flex h-full flex-col items-end justify-center pb-3 pr-5 pt-2"><div class="flex flex-1"><span class="text-lg font-semibold text-white drop-shadow-sm">', "</span></div>", "</div></div></div>"];
+var _tmpl$65 = ['<span class="font-semibold text-accent-200">', "</span>"];
+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 _$ssr21(_tmpl$59, `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 ${_$escape21(props.class, true) ?? ""}`, _$escape21(_$createComponent20(Show16, {
+    get when() {
+      return props.image;
+    },
+    get children() {
+      return _$ssr21(_tmpl$31, _$ssrAttribute10("src", _$escape21(props.image, true), false) + _$ssrAttribute10("alt", _$escape21(props.title, true), false));
+    }
+  })), _$escape21(_$createComponent20(Show16, {
+    get when() {
+      return props.tags && props.tags.length > 0;
+    },
+    get children() {
+      return _$ssr21(_tmpl$218, _$escape21(_$createComponent20(For4, {
+        get each() {
+          return props.tags;
+        },
+        children: (tag) => _$createComponent20(Chip, {
+          text: tag,
+          variant: "primary"
+        })
+      })));
+    }
+  })), _$escape21(props.title), _$escape21(_$createComponent20(Show16, {
+    get when() {
+      return displayedFollowers().length > 0;
+    },
+    get children() {
+      return _$ssr21(_tmpl$412, _$escape21(_$createComponent20(For4, {
+        get each() {
+          return displayedFollowers();
+        },
+        children: (follower, index) => [_$ssr21(_tmpl$65, _$escape21(follower.name)), index() < displayedFollowers().length - 1 && ", "]
+      })), _$escape21(_$createComponent20(Show16, {
+        get when() {
+          return remainingCount() > 0;
+        },
+        get children() {
+          return [" ", "y ", _$ssr21(_tmpl$313, _$escape21(remainingCount()))];
+        }
+      })));
+    }
+  })));
+}
+
+// src/custom/logo/index.tsx
+import { ssr as _$ssr22 } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute11 } from "solid-js/web";
+import { escape as _$escape22 } from "solid-js/web";
+var _tmpl$40 = ['<span class="', '"><span class="vui-logo__first">', '</span><span class="vui-logo__second"', ">", "</span></span>"];
+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 _$ssr22(_tmpl$40, `vui-logo ${_$escape22(sizeClass(), true)} ${_$escape22(props.class, true) ?? ""}`, _$escape22(firstWord()), _$ssrAttribute11("data-text", _$escape22(secondWord(), true), false), _$escape22(secondWord()));
+}
+
+// src/custom/project-card/index.tsx
+import { ssrAttribute as _$ssrAttribute12 } from "solid-js/web";
+import { ssr as _$ssr23 } from "solid-js/web";
+import { escape as _$escape23 } from "solid-js/web";
+var _tmpl$41 = ['<div class="vui-project-card__tooltip"><span>', "</span></div>"];
+var _tmpl$219 = ['<img class="vui-project-card__image"', ">"];
+var _tmpl$314 = ["<a", ' target="_blank" rel="noopener noreferrer"', ">", "</a>"];
+var _tmpl$413 = ["<div", ">", "</div>"];
+function ProjectCard(props) {
+  const size = () => props.size ?? "sm";
+  const inactive = () => props.inactive ?? false;
+  const cardContent = () => [_$ssr23(_tmpl$41, _$escape23(props.name)), _$ssr23(_tmpl$219, _$ssrAttribute12("src", _$escape23(props.imageSrc, true), false) + _$ssrAttribute12("alt", _$escape23(props.imageAlt, true) ?? _$escape23(props.name, true), false))];
+  const cardClasses = () => `vui-project-card vui-project-card--${size()} ${inactive() ? "vui-project-card--inactive" : ""} ${props.class ?? ""}`;
+  if (props.href) {
+    return _$ssr23(_tmpl$314, _$ssrAttribute12("href", _$escape23(props.href, true), false), _$ssrAttribute12("class", _$escape23(cardClasses(), true), false), _$escape23(cardContent()));
+  }
+  return _$ssr23(_tmpl$413, _$ssrAttribute12("class", _$escape23(cardClasses(), true), false), _$escape23(cardContent()));
+}
+
+// src/custom/page-layout/index.tsx
+import { ssrElement as _$ssrElement4 } from "solid-js/web";
+import { mergeProps as _$mergeProps9 } from "solid-js/web";
+import { escape as _$escape24 } from "solid-js/web";
+import { splitProps as splitProps9 } from "solid-js";
+function PageLayout(props) {
+  const [local, rest] = splitProps9(props, ["children", "class"]);
+  return _$ssrElement4("div", _$mergeProps9({
+    get ["class"]() {
+      return `vui-page ${local.class ?? ""}`;
+    }
+  }, rest), _$escape24(local.children), false);
+}
+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.ssr.js.map