@proyecto-viviana/ui 0.2.5 → 0.3.1

package/dist/index.js

@@ -551,6 +551,7 @@ function CheckboxGroup(props) {
 // src/radio/index.tsx
 import { template as _$template7 } from "solid-js/web";
 import { className as _$className7 } from "solid-js/web";
+import { effect as _$effect7 } from "solid-js/web";
 import { mergeProps as _$mergeProps4 } from "solid-js/web";
 import { memo as _$memo5 } from "solid-js/web";
 import { createComponent as _$createComponent7 } from "solid-js/web";
@@ -591,10 +592,11 @@ function RadioGroup(props) {
     const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
     return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(" ");
   };
+  const radioGroupProps = headlessProps;
   return _$createComponent7(RadioSizeContext.Provider, {
     value: size,
     get children() {
-      return _$createComponent7(HeadlessRadioGroup, _$mergeProps4(headlessProps, {
+      return _$createComponent7(HeadlessRadioGroup, _$mergeProps4(radioGroupProps, {
         "class": getClassName,
         "data-size": size,
         get children() {
@@ -632,46 +634,57 @@ function RadioGroup(props) {
   });
 }
 function Radio(props) {
-  const [local, headlessProps] = splitProps4(props, ["class"]);
-  const sizeFromContext = useContext(RadioSizeContext);
-  const sizeStyle = sizeStyles5[sizeFromContext];
+  const size = useContext(RadioSizeContext) ?? "md";
+  const [local, headlessProps] = splitProps4(props, ["class", "children"]);
   const customClass = local.class ?? "";
+  const styles = sizeStyles5[size];
   const getClassName = (renderProps) => {
-    const base = "inline-flex items-center gap-2";
-    const cursorClass = renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer";
-    const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
-    return [base, cursorClass, disabledClass, customClass].filter(Boolean).join(" ");
+    const base = "group flex items-center gap-3 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    return [base, disabledClass, customClass].filter(Boolean).join(" ");
+  };
+  const getCircleClassName = (renderProps) => {
+    const base = `rounded-full border-2 flex items-center justify-center transition-all ${styles.circle}`;
+    const selectedClass = renderProps.isSelected ? "border-accent-500 bg-accent-500" : "border-primary-400 bg-transparent group-hover:border-accent-400";
+    const disabledClass = renderProps.isDisabled ? "border-primary-600" : "";
+    const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-500 ring-offset-2 ring-offset-bg" : "";
+    return [base, selectedClass, disabledClass, focusClass].filter(Boolean).join(" ");
+  };
+  const getDotClassName = (renderProps) => {
+    const base = `rounded-full bg-white transition-transform ${styles.dot}`;
+    const selectedClass = renderProps.isSelected ? "scale-100" : "scale-0";
+    return [base, selectedClass].filter(Boolean).join(" ");
+  };
+  const getLabelClassName = () => {
+    return `text-primary-200 select-none ${styles.label}`;
   };
-  const circleClass = `relative flex items-center justify-center rounded-full border-2 transition-all duration-200 ${sizeStyle.circle} border-primary-600 bg-transparent hover:border-accent-300`;
-  const dotClass = `rounded-full bg-accent transition-all duration-200 ${sizeStyle.dot}`;
-  const labelClass = `text-primary-200 ${sizeStyle.label}`;
   return _$createComponent7(HeadlessRadio, _$mergeProps4(headlessProps, {
     "class": getClassName,
-    get children() {
-      return [(() => {
-        var _el$4 = _$getNextElement7(_tmpl$44), _el$5 = _el$4.firstChild;
-        _$className7(_el$4, circleClass);
-        _$className7(_el$5, dotClass);
-        return _el$4;
-      })(), _$createComponent7(Show5, {
-        get when() {
-          return props.children;
-        },
-        get children() {
-          var _el$6 = _$getNextElement7(_tmpl$53);
-          _$className7(_el$6, labelClass);
-          _$insert7(_el$6, () => props.children);
-          return _el$6;
-        }
-      })];
-    }
+    children: (renderProps) => [(() => {
+      var _el$4 = _$getNextElement7(_tmpl$44), _el$5 = _el$4.firstChild;
+      _$effect7((_p$) => {
+        var _v$ = getCircleClassName(renderProps), _v$2 = getDotClassName(renderProps);
+        _v$ !== _p$.e && _$className7(_el$4, _p$.e = _v$);
+        _v$2 !== _p$.t && _$className7(_el$5, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$4;
+    })(), (() => {
+      var _el$6 = _$getNextElement7(_tmpl$53);
+      _$insert7(_el$6, () => local.children);
+      _$effect7(() => _$className7(_el$6, getLabelClassName()));
+      return _el$6;
+    })()]
   }));
 }
 
 // src/dialog/Dialog.tsx
 import { template as _$template8 } from "solid-js/web";
 import { delegateEvents as _$delegateEvents3 } from "solid-js/web";
-import { effect as _$effect7 } from "solid-js/web";
+import { effect as _$effect8 } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { getNextMarker as _$getNextMarker3 } from "solid-js/web";
 import { createComponent as _$createComponent8 } from "solid-js/web";
@@ -822,7 +835,7 @@ function DialogFooter(props) {
   return (() => {
     var _el$12 = _$getNextElement8(_tmpl$45);
     _$insert8(_el$12, () => props.children);
-    _$effect7(() => _$className8(_el$12, `flex gap-3 justify-end mt-6 pt-4 border-t border-primary-700 ${props.class ?? ""}`));
+    _$effect8(() => _$className8(_el$12, `flex gap-3 justify-end mt-6 pt-4 border-t border-primary-700 ${props.class ?? ""}`));
     return _el$12;
   })();
 }
@@ -832,7 +845,7 @@ _$delegateEvents3(["click"]);
 import { template as _$template10 } from "solid-js/web";
 import { delegateEvents as _$delegateEvents4 } from "solid-js/web";
 import { className as _$className9 } from "solid-js/web";
-import { effect as _$effect9 } from "solid-js/web";
+import { effect as _$effect10 } from "solid-js/web";
 import { getNextElement as _$getNextElement10 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents4 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker4 } from "solid-js/web";
@@ -844,13 +857,13 @@ import { addEventListener as _$addEventListener2 } from "solid-js/web";
 // src/icon/icons/GitHubIcon.tsx
 import { template as _$template9 } from "solid-js/web";
 import { setAttribute as _$setAttribute4 } from "solid-js/web";
-import { effect as _$effect8 } from "solid-js/web";
+import { effect as _$effect9 } from "solid-js/web";
 import { getNextElement as _$getNextElement9 } from "solid-js/web";
 var _tmpl$11 = /* @__PURE__ */ _$template9(`<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$ = _$getNextElement9(_tmpl$11);
-    _$effect8((_p$) => {
+    _$effect9((_p$) => {
       var _v$ = props.size, _v$2 = props.size, _v$3 = props.color;
       _v$ !== _p$.e && _$setAttribute4(_el$, "width", _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute4(_el$, "height", _p$.t = _v$2);
@@ -896,7 +909,7 @@ function Icon(props) {
         return color();
       }
     }));
-    _$effect9(() => _$className9(_el$, `vui-icon ${props.withShadow ? "vui-icon--with-shadow" : ""} ${props.class ?? ""}`));
+    _$effect10(() => _$className9(_el$, `vui-icon ${props.withShadow ? "vui-icon--with-shadow" : ""} ${props.class ?? ""}`));
     _$runHydrationEvents4();
     return _el$;
   })();
@@ -907,7 +920,7 @@ _$delegateEvents4(["click"]);
 import { template as _$template11 } from "solid-js/web";
 import { insert as _$insert10 } from "solid-js/web";
 import { className as _$className10 } from "solid-js/web";
-import { effect as _$effect10 } from "solid-js/web";
+import { effect as _$effect11 } from "solid-js/web";
 import { getNextElement as _$getNextElement11 } from "solid-js/web";
 import { memo as _$memo7 } from "solid-js/web";
 import { mergeProps as _$mergeProps6 } from "solid-js/web";
@@ -957,7 +970,7 @@ function Tooltip(props) {
       },
       get children() {
         var _el$ = _$getNextElement11(_tmpl$13);
-        _$effect10(() => _$className10(_el$, ["absolute w-0 h-0 border-4", arrowStyles[renderProps.placement ?? placement()], getArrowBorderColor(variant())].join(" ")));
+        _$effect11(() => _$className10(_el$, ["absolute w-0 h-0 border-4", arrowStyles[renderProps.placement ?? placement()], getArrowBorderColor(variant())].join(" ")));
         return _el$;
       }
     })]
@@ -969,7 +982,7 @@ function SimpleTooltip(props) {
     var _el$2 = _$getNextElement11(_tmpl$29), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
     _$insert10(_el$3, () => props.children);
     _$insert10(_el$5, () => props.label);
-    _$effect10((_p$) => {
+    _$effect11((_p$) => {
       var _v$ = `vui-tooltip ${props.class ?? ""}`, _v$2 = `vui-tooltip__content vui-tooltip__content--${position()}`;
       _v$ !== _p$.e && _$className10(_el$2, _p$.e = _v$);
       _v$2 !== _p$.t && _$className10(_el$4, _p$.t = _v$2);
@@ -988,7 +1001,7 @@ import { className as _$className11 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker5 } from "solid-js/web";
 import { insert as _$insert11 } from "solid-js/web";
 import { setAttribute as _$setAttribute5 } from "solid-js/web";
-import { effect as _$effect11 } from "solid-js/web";
+import { effect as _$effect12 } from "solid-js/web";
 import { getNextElement as _$getNextElement12 } from "solid-js/web";
 import { memo as _$memo8 } from "solid-js/web";
 import { mergeProps as _$mergeProps7 } from "solid-js/web";
@@ -1100,7 +1113,7 @@ function PopoverArrow(props) {
     },
     get children() {
       var _el$ = _$getNextElement12(_tmpl$14);
-      _$effect11(() => _$setAttribute5(_el$, "class", `${arrowBaseStyles} ${getArrowRotation(props.placement)} ${props.class ?? ""}`));
+      _$effect12(() => _$setAttribute5(_el$, "class", `${arrowBaseStyles} ${getArrowRotation(props.placement)} ${props.class ?? ""}`));
       return _el$;
     }
   });
@@ -1119,7 +1132,7 @@ function PopoverHeader(props) {
         return _el$4;
       }
     }), _el$6, _co$);
-    _$effect11(() => _$className11(_el$2, `mb-3 ${props.class ?? ""}`));
+    _$effect12(() => _$className11(_el$2, `mb-3 ${props.class ?? ""}`));
     return _el$2;
   })();
 }
@@ -1127,7 +1140,7 @@ function PopoverFooter(props) {
   return (() => {
     var _el$7 = _$getNextElement12(_tmpl$46);
     _$insert11(_el$7, () => props.children);
-    _$effect11(() => _$className11(_el$7, `flex gap-2 justify-end mt-4 pt-3 border-t border-primary-700 ${props.class ?? ""}`));
+    _$effect12(() => _$className11(_el$7, `flex gap-2 justify-end mt-4 pt-3 border-t border-primary-700 ${props.class ?? ""}`));
     return _el$7;
   })();
 }
@@ -1136,7 +1149,7 @@ function PopoverFooter(props) {
 import { template as _$template13 } from "solid-js/web";
 import { setAttribute as _$setAttribute6 } from "solid-js/web";
 import { className as _$className12 } from "solid-js/web";
-import { effect as _$effect12 } from "solid-js/web";
+import { effect as _$effect13 } from "solid-js/web";
 import { memo as _$memo9 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents5 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker6 } from "solid-js/web";
@@ -1147,370 +1160,7 @@ import { spread as _$spread2 } from "solid-js/web";
 import { mergeProps as _$mergeProps8 } from "solid-js/web";
 import { splitProps as splitProps8, mergeProps as solidMergeProps4, Show as Show9 } from "solid-js";
 import { createTextField, createFocusRing } from "@proyecto-viviana/solidaria";
-
-// ../solid-stately/src/utils/reactivity.ts
-function access(value) {
-  return typeof value === "function" ? value() : value;
-}
-
-// ../solid-stately/src/textfield/createTextFieldState.ts
-import { createSignal as createSignal3 } from "solid-js";
-function createTextFieldState(props = {}) {
-  const getProps = () => access(props);
-  const initialProps = getProps();
-  const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
-  const [internalValue, setInternalValue] = createSignal3(initialValue);
-  const isControlled = () => getProps().value !== void 0;
-  const value = () => {
-    const p = getProps();
-    return isControlled() ? p.value ?? "" : internalValue();
-  };
-  function setValue(newValue) {
-    const p = getProps();
-    if (!isControlled()) {
-      setInternalValue(newValue);
-    }
-    p.onChange?.(newValue);
-  }
-  return {
-    value,
-    setValue
-  };
-}
-
-// ../solid-stately/src/numberfield/createNumberFieldState.ts
-import { createSignal as createSignal4, createMemo } from "solid-js";
-function handleDecimalOperation(operator, value1, value2) {
-  const getDecimals = (n) => {
-    const str = String(n);
-    const idx = str.indexOf(".");
-    return idx === -1 ? 0 : str.length - idx - 1;
-  };
-  const decimals = Math.max(getDecimals(value1), getDecimals(value2));
-  const multiplier = Math.pow(10, decimals);
-  const int1 = Math.round(value1 * multiplier);
-  const int2 = Math.round(value2 * multiplier);
-  const result = operator === "+" ? int1 + int2 : int1 - int2;
-  return result / multiplier;
-}
-function clamp(value, min, max) {
-  let result = value;
-  if (min != null && result < min) result = min;
-  if (max != null && result > max) result = max;
-  return result;
-}
-function snapToStep(value, step, min) {
-  const base = min ?? 0;
-  const diff = value - base;
-  const steps = Math.round(diff / step);
-  return handleDecimalOperation("+", base, steps * step);
-}
-function createNumberFieldState(props) {
-  const getProps = () => access(props);
-  const locale = () => getProps().locale ?? "en-US";
-  const formatOptions = () => getProps().formatOptions ?? {};
-  const formatter = createMemo(() => {
-    return new Intl.NumberFormat(locale(), formatOptions());
-  });
-  const parseNumber = (value) => {
-    if (!value || value === "" || value === "-") return NaN;
-    const opts = formatOptions();
-    const testNumber = formatter().format(1.1);
-    const decimalSeparator = testNumber.charAt(1);
-    let normalized = value;
-    if (decimalSeparator !== ".") {
-      normalized = normalized.replace(decimalSeparator, ".");
-    }
-    normalized = normalized.replace(/[^\d.\-]/g, "");
-    const parsed = parseFloat(normalized);
-    return parsed;
-  };
-  const formatNumber = (value) => {
-    if (isNaN(value)) return "";
-    return formatter().format(value);
-  };
-  const step = createMemo(() => {
-    const p = getProps();
-    if (p.step != null) return p.step;
-    if (p.formatOptions?.style === "percent") return 0.01;
-    return 1;
-  });
-  const [inputValue, setInputValueInternal] = createSignal4("");
-  const [numberValue, setNumberValue] = createSignal4(NaN);
-  const initValue = () => {
-    const p = getProps();
-    const initial = p.value ?? p.defaultValue;
-    if (initial != null) {
-      setNumberValue(initial);
-      setInputValueInternal(formatNumber(initial));
-    }
-  };
-  let initialized = false;
-  const ensureInitialized = () => {
-    if (!initialized) {
-      initialized = true;
-      initValue();
-    }
-  };
-  const actualNumberValue = createMemo(() => {
-    ensureInitialized();
-    const p = getProps();
-    if (p.value !== void 0) {
-      return p.value;
-    }
-    return numberValue();
-  });
-  const validate = (value) => {
-    if (value === "" || value === "-") return true;
-    const opts = formatOptions();
-    const testNumber = formatter().format(1.1);
-    const decimalSeparator = testNumber.charAt(1);
-    const pattern = new RegExp(
-      `^-?\\d*${decimalSeparator === "." ? "\\." : decimalSeparator}?\\d*$`
-    );
-    return pattern.test(value);
-  };
-  const setInputValue = (value) => {
-    ensureInitialized();
-    setInputValueInternal(value);
-  };
-  const commit = () => {
-    ensureInitialized();
-    const p = getProps();
-    const input = inputValue();
-    if (input === "" || input === "-") {
-      setNumberValue(NaN);
-      setInputValueInternal("");
-      return;
-    }
-    let parsed = parseNumber(input);
-    if (isNaN(parsed)) {
-      setInputValueInternal(formatNumber(actualNumberValue()));
-      return;
-    }
-    parsed = clamp(parsed, p.minValue, p.maxValue);
-    parsed = snapToStep(parsed, step(), p.minValue);
-    setNumberValue(parsed);
-    setInputValueInternal(formatNumber(parsed));
-    if (p.value === void 0) {
-      p.onChange?.(parsed);
-    } else {
-      p.onChange?.(parsed);
-    }
-  };
-  const canIncrement = createMemo(() => {
-    ensureInitialized();
-    const p = getProps();
-    if (p.isDisabled || p.isReadOnly) return false;
-    const current = actualNumberValue();
-    if (isNaN(current)) return true;
-    if (p.maxValue == null) return true;
-    return handleDecimalOperation("+", current, step()) <= p.maxValue;
-  });
-  const canDecrement = createMemo(() => {
-    ensureInitialized();
-    const p = getProps();
-    if (p.isDisabled || p.isReadOnly) return false;
-    const current = actualNumberValue();
-    if (isNaN(current)) return true;
-    if (p.minValue == null) return true;
-    return handleDecimalOperation("-", current, step()) >= p.minValue;
-  });
-  const increment = () => {
-    ensureInitialized();
-    const p = getProps();
-    if (p.isDisabled || p.isReadOnly) return;
-    let current = actualNumberValue();
-    if (isNaN(current)) {
-      current = p.minValue ?? 0;
-    } else {
-      current = snapToStep(current, step(), p.minValue);
-      current = handleDecimalOperation("+", current, step());
-    }
-    current = clamp(current, p.minValue, p.maxValue);
-    setNumberValue(current);
-    setInputValueInternal(formatNumber(current));
-    p.onChange?.(current);
-  };
-  const decrement = () => {
-    ensureInitialized();
-    const p = getProps();
-    if (p.isDisabled || p.isReadOnly) return;
-    let current = actualNumberValue();
-    if (isNaN(current)) {
-      current = p.maxValue ?? 0;
-    } else {
-      current = snapToStep(current, step(), p.minValue);
-      current = handleDecimalOperation("-", current, step());
-    }
-    current = clamp(current, p.minValue, p.maxValue);
-    setNumberValue(current);
-    setInputValueInternal(formatNumber(current));
-    p.onChange?.(current);
-  };
-  const incrementToMax = () => {
-    ensureInitialized();
-    const p = getProps();
-    if (p.isDisabled || p.isReadOnly) return;
-    if (p.maxValue == null) return;
-    const snapped = snapToStep(p.maxValue, step(), p.minValue);
-    setNumberValue(snapped);
-    setInputValueInternal(formatNumber(snapped));
-    p.onChange?.(snapped);
-  };
-  const decrementToMin = () => {
-    ensureInitialized();
-    const p = getProps();
-    if (p.isDisabled || p.isReadOnly) return;
-    if (p.minValue == null) return;
-    setNumberValue(p.minValue);
-    setInputValueInternal(formatNumber(p.minValue));
-    p.onChange?.(p.minValue);
-  };
-  return {
-    get inputValue() {
-      ensureInitialized();
-      return inputValue;
-    },
-    get numberValue() {
-      return actualNumberValue;
-    },
-    canIncrement,
-    canDecrement,
-    isDisabled: () => getProps().isDisabled ?? false,
-    isReadOnly: () => getProps().isReadOnly ?? false,
-    minValue: () => getProps().minValue,
-    maxValue: () => getProps().maxValue,
-    setInputValue,
-    validate,
-    commit,
-    increment,
-    decrement,
-    incrementToMax,
-    decrementToMin
-  };
-}
-
-// ../solid-stately/src/searchfield/createSearchFieldState.ts
-import { createSignal as createSignal5, createMemo as createMemo2 } from "solid-js";
-function createSearchFieldState(props) {
-  const getProps = () => access(props);
-  const isControlled = () => getProps().value !== void 0;
-  const [internalValue, setInternalValue] = createSignal5(
-    getProps().defaultValue ?? ""
-  );
-  const value = createMemo2(() => {
-    const p = getProps();
-    return isControlled() ? p.value ?? "" : internalValue();
-  });
-  const setValue = (newValue) => {
-    const p = getProps();
-    if (!isControlled()) {
-      setInternalValue(newValue);
-    }
-    p.onChange?.(newValue);
-  };
-  return {
-    value,
-    setValue
-  };
-}
-
-// ../solid-stately/src/slider/createSliderState.ts
-import { createSignal as createSignal6, createMemo as createMemo3 } from "solid-js";
-var DEFAULT_MIN = 0;
-var DEFAULT_MAX = 100;
-var DEFAULT_STEP = 1;
-function clamp2(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-function snapToStep2(value, min, max, step) {
-  const snapped = Math.round((value - min) / step) * step + min;
-  const decimalPlaces = (step.toString().split(".")[1] || "").length;
-  const rounded = parseFloat(snapped.toFixed(decimalPlaces));
-  return clamp2(rounded, min, max);
-}
-function createSliderState(props) {
-  const getProps = () => access(props);
-  const minValue = getProps().minValue ?? DEFAULT_MIN;
-  const maxValue = getProps().maxValue ?? DEFAULT_MAX;
-  const step = getProps().step ?? DEFAULT_STEP;
-  const orientation = getProps().orientation ?? "horizontal";
-  const isDisabled = getProps().isDisabled ?? false;
-  const pageStep = Math.max(step, snapToStep2((maxValue - minValue) / 10, 0, maxValue - minValue, step));
-  const isControlled = () => getProps().value !== void 0;
-  const [internalValue, setInternalValue] = createSignal6(
-    snapToStep2(getProps().defaultValue ?? minValue, minValue, maxValue, step)
-  );
-  const [isDragging, setIsDragging] = createSignal6(false);
-  const [isFocused, setIsFocused] = createSignal6(false);
-  const value = createMemo3(() => {
-    const p = getProps();
-    const rawValue = isControlled() ? p.value ?? minValue : internalValue();
-    return snapToStep2(rawValue, minValue, maxValue, step);
-  });
-  const getValuePercent = createMemo3(() => {
-    return (value() - minValue) / (maxValue - minValue);
-  });
-  const getFormattedValue = createMemo3(() => {
-    const p = getProps();
-    const formatter = new Intl.NumberFormat(p.locale, p.formatOptions);
-    return formatter.format(value());
-  });
-  const setValue = (newValue) => {
-    if (isDisabled) return;
-    const p = getProps();
-    const snappedValue = snapToStep2(newValue, minValue, maxValue, step);
-    if (!isControlled()) {
-      setInternalValue(snappedValue);
-    }
-    p.onChange?.(snappedValue);
-  };
-  const setValuePercent = (percent) => {
-    const clampedPercent = clamp2(percent, 0, 1);
-    const newValue = clampedPercent * (maxValue - minValue) + minValue;
-    setValue(newValue);
-  };
-  const setDragging = (dragging) => {
-    const wasDragging = isDragging();
-    setIsDragging(dragging);
-    if (wasDragging && !dragging) {
-      getProps().onChangeEnd?.(value());
-    }
-  };
-  const increment = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() + step * stepMultiplier);
-  };
-  const decrement = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() - step * stepMultiplier);
-  };
-  const setFocused = (focused) => {
-    setIsFocused(focused);
-  };
-  return {
-    value,
-    setValue,
-    setValuePercent,
-    getValuePercent,
-    getFormattedValue,
-    isDragging,
-    setDragging,
-    isFocused,
-    setFocused,
-    increment,
-    decrement,
-    minValue,
-    maxValue,
-    step,
-    pageStep,
-    orientation,
-    isDisabled
-  };
-}
-
-// src/textfield/index.tsx
+import { createTextFieldState } from "@proyecto-viviana/solid-stately";
 var _tmpl$15 = /* @__PURE__ */ _$template13(`<span class="text-danger-400 ml-0.5">*`);
 var _tmpl$211 = /* @__PURE__ */ _$template13(`<label><!$><!/><!$><!/>`);
 var _tmpl$38 = /* @__PURE__ */ _$template13(`<p>`);
@@ -1694,7 +1344,7 @@ function TextField(props) {
         return _el$0;
       }
     }), _el$14, _co$5);
-    _$effect12((_p$) => {
+    _$effect13((_p$) => {
       var _v$ = containerClasses(), _v$2 = ariaProps.isDisabled || void 0, _v$3 = textFieldAria.isInvalid || void 0, _v$4 = ariaProps.isReadOnly || void 0, _v$5 = ariaProps.isRequired || void 0, _v$6 = isFocused() || void 0, _v$7 = isFocusVisible() || void 0;
       _v$ !== _p$.e && _$className12(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute6(_el$, "data-disabled", _p$.t = _v$2);
@@ -1760,7 +1410,7 @@ import { template as _$template14 } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents6 } from "solid-js/web";
 import { className as _$className13 } from "solid-js/web";
-import { effect as _$effect13 } from "solid-js/web";
+import { effect as _$effect14 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker7 } from "solid-js/web";
 import { createComponent as _$createComponent14 } from "solid-js/web";
 import { getNextElement as _$getNextElement14 } from "solid-js/web";
@@ -1768,7 +1418,7 @@ import { insert as _$insert13 } from "solid-js/web";
 import { memo as _$memo10 } from "solid-js/web";
 import { spread as _$spread3 } from "solid-js/web";
 import { mergeProps as _$mergeProps10 } from "solid-js/web";
-import { splitProps as splitProps10, Show as Show10, createMemo as createMemo4 } from "solid-js";
+import { splitProps as splitProps10, Show as Show10, createMemo } from "solid-js";
 import { createProgressBar } from "@proyecto-viviana/solidaria";
 var _tmpl$16 = /* @__PURE__ */ _$template14(`<span class="text-primary-200 font-medium">`);
 var _tmpl$212 = /* @__PURE__ */ _$template14(`<span class=text-primary-300>`);
@@ -1795,7 +1445,7 @@ var variantStyles5 = {
   warning: "bg-yellow-500",
   danger: "bg-red-500"
 };
-function clamp3(value, min, max) {
+function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function ProgressBar(props) {
@@ -1827,14 +1477,14 @@ function ProgressBar(props) {
       return ariaProps["aria-label"];
     }
   });
-  const percentage = createMemo4(() => {
+  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 = clamp3(value, minValue, maxValue);
+    const clampedValue = clamp(value, minValue, maxValue);
     return (clampedValue - minValue) / (maxValue - minValue) * 100;
   });
   const valueText = () => progressAria.progressBarProps["aria-valuetext"];
@@ -1872,11 +1522,11 @@ function ProgressBar(props) {
             return _el$4;
           }
         }), _el$8, _co$2);
-        _$effect13(() => _$className13(_el$2, `flex justify-between items-center mb-1 ${sizeConfig().text}`));
+        _$effect14(() => _$className13(_el$2, `flex justify-between items-center mb-1 ${sizeConfig().text}`));
         return _el$2;
       }
     }), _el$10, _co$3);
-    _$effect13((_p$) => {
+    _$effect14((_p$) => {
       var _v$ = `w-full ${sizeConfig().track} bg-bg-300 rounded-full overflow-hidden`, _v$2 = `h-full rounded-full transition-all duration-300 ${variantStyles5[variant()]} ${isIndeterminate() ? "animate-progress-indeterminate" : ""}`, _v$3 = isIndeterminate() ? "30%" : `${percentage()}%`;
       _v$ !== _p$.e && _$className13(_el$9, _p$.e = _v$);
       _v$2 !== _p$.t && _$className13(_el$0, _p$.t = _v$2);
@@ -1899,7 +1549,7 @@ import { getNextElement as _$getNextElement15 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents7 } from "solid-js/web";
 import { spread as _$spread4 } from "solid-js/web";
 import { mergeProps as _$mergeProps11 } from "solid-js/web";
-import { splitProps as splitProps11, createMemo as createMemo5, Show as Show11 } from "solid-js";
+import { splitProps as splitProps11, createMemo as createMemo2, Show as Show11 } from "solid-js";
 import { createSeparator } from "@proyecto-viviana/solidaria";
 var _tmpl$17 = /* @__PURE__ */ _$template15(`<div>`);
 var _tmpl$213 = /* @__PURE__ */ _$template15(`<hr>`);
@@ -1923,7 +1573,7 @@ function Separator(props) {
   const orientation = () => local.orientation ?? "horizontal";
   const variant = () => local.variant ?? "default";
   const size = () => local.size ?? "md";
-  const elementType = createMemo5(() => {
+  const elementType = createMemo2(() => {
     if (orientation() === "vertical") {
       return "div";
     }
@@ -1940,7 +1590,7 @@ function Separator(props) {
       return ariaProps["aria-label"];
     }
   });
-  const className = createMemo5(() => {
+  const className = createMemo2(() => {
     const isVertical = orientation() === "vertical";
     const sizeStyles33 = isVertical ? verticalSizeStyles : horizontalSizeStyles;
     const base = [
@@ -2038,9 +1688,9 @@ import { getNextElement as _$getNextElement16 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents8 } from "solid-js/web";
 import { addEventListener as _$addEventListener3 } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
-import { effect as _$effect14 } from "solid-js/web";
+import { effect as _$effect15 } from "solid-js/web";
 import { use as _$use2 } from "solid-js/web";
-import { splitProps as splitProps13, createMemo as createMemo6, Show as Show12, For } from "solid-js";
+import { splitProps as splitProps13, createMemo as createMemo3, Show as Show12, For } from "solid-js";
 import { Autocomplete, useAutocompleteInput, useAutocompleteCollection, useAutocompleteState } from "@proyecto-viviana/solidaria-components";
 var _tmpl$18 = /* @__PURE__ */ _$template16(`<input type=text>`);
 var _tmpl$214 = /* @__PURE__ */ _$template16(`<ul role=listbox>`);
@@ -2083,7 +1733,7 @@ function AutocompleteInput(props) {
     _el$.$$input = (e) => ctx.inputProps.onChange(e.currentTarget.value);
     var _ref$ = ctx.inputRef;
     typeof _ref$ === "function" ? _$use2(_ref$, _el$) : ctx.inputRef = _el$;
-    _$effect14((_p$) => {
+    _$effect15((_p$) => {
       var _v$ = props.placeholder, _v$2 = props["aria-label"], _v$3 = props.isDisabled, _v$4 = ctx.inputProps["aria-activedescendant"](), _v$5 = ctx.inputProps["aria-controls"], _v$6 = ctx.inputProps["aria-autocomplete"], _v$7 = ctx.inputProps.autoComplete, _v$8 = ctx.inputProps.autoCorrect, _v$9 = ctx.inputProps.spellCheck !== "false", _v$0 = ["w-full rounded-md border border-bg-200 bg-bg-50", "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500", "placeholder:text-text-400", "disabled:opacity-50 disabled:cursor-not-allowed", styles().input].join(" ");
       _v$ !== _p$.e && _$setAttribute7(_el$, "placeholder", _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute7(_el$, "aria-label", _p$.t = _v$2);
@@ -2108,7 +1758,7 @@ function AutocompleteInput(props) {
       r: void 0,
       d: void 0
     });
-    _$effect14(() => _$setProperty(_el$, "value", ctx.inputProps.value()));
+    _$effect15(() => _$setProperty(_el$, "value", ctx.inputProps.value()));
     _$runHydrationEvents8();
     return _el$;
   })();
@@ -2118,7 +1768,7 @@ function AutocompleteList(props) {
   const state = useAutocompleteState();
   if (!ctx) return null;
   const styles = () => sizeStyles11[props.size];
-  const filteredItems = createMemo6(() => {
+  const filteredItems = createMemo3(() => {
     if (!ctx.filter) return props.items;
     return props.items.filter((item) => {
       const textValue = String(item[props.textKey] ?? item.name ?? "");
@@ -2158,7 +1808,7 @@ function AutocompleteList(props) {
               var _c$ = _$memo11(() => !!props.renderItem);
               return () => _c$() ? props.renderItem(item) : String(item[props.textKey] ?? item.name);
             })());
-            _$effect14((_p$) => {
+            _$effect15((_p$) => {
               var _v$12 = isFocused(), _v$13 = ["cursor-pointer transition-colors", isFocused() ? "bg-primary-100 text-primary-900" : "hover:bg-bg-100", styles().item].join(" ");
               _v$12 !== _p$.e && _$setAttribute7(_el$3, "aria-selected", _p$.e = _v$12);
               _v$13 !== _p$.t && _$className14(_el$3, _p$.t = _v$13);
@@ -2172,7 +1822,7 @@ function AutocompleteList(props) {
           })();
         }
       }));
-      _$effect14((_p$) => {
+      _$effect15((_p$) => {
         var _v$1 = ctx.collectionProps.id, _v$10 = ctx.collectionProps["aria-label"], _v$11 = ["mt-1 w-full rounded-md border border-bg-200 bg-bg-50 shadow-lg", "overflow-auto", styles().list].join(" ");
         _v$1 !== _p$.e && _$setAttribute7(_el$2, "id", _p$.e = _v$1);
         _v$10 !== _p$.t && _$setAttribute7(_el$2, "aria-label", _p$.t = _v$10);
@@ -2205,7 +1855,7 @@ function SearchAutocomplete(props) {
       get children() {
         var _el$5 = _$getNextElement16(_tmpl$49);
         _$insert14(_el$5, () => local.label);
-        _$effect14(() => _$className14(_el$5, ["block font-medium text-text-700", styles().label].join(" ")));
+        _$effect15(() => _$className14(_el$5, ["block font-medium text-text-700", styles().label].join(" ")));
         return _el$5;
       }
     }), _el$8, _co$);
@@ -2256,7 +1906,7 @@ function SearchAutocomplete(props) {
         return _el$6;
       }
     }), _el$10, _co$3);
-    _$effect14(() => _$className14(_el$4, ["vui-search-autocomplete relative", styles().container, local.class].filter(Boolean).join(" ")));
+    _$effect15(() => _$className14(_el$4, ["vui-search-autocomplete relative", styles().container, local.class].filter(Boolean).join(" ")));
     return _el$4;
   })();
 }
@@ -2269,7 +1919,7 @@ import { mergeProps as _$mergeProps14 } from "solid-js/web";
 import { memo as _$memo12 } from "solid-js/web";
 import { createComponent as _$createComponent18 } from "solid-js/web";
 import { className as _$className15 } from "solid-js/web";
-import { effect as _$effect15 } from "solid-js/web";
+import { effect as _$effect16 } from "solid-js/web";
 import { getNextElement as _$getNextElement17 } from "solid-js/web";
 import { insert as _$insert15 } from "solid-js/web";
 import { Show as Show13, splitProps as splitProps14, createContext as createContext3, useContext as useContext3 } from "solid-js";
@@ -2323,7 +1973,7 @@ function Select(props) {
             get children() {
               var _el$ = _$getNextElement17(_tmpl$19);
               _$insert15(_el$, () => local.label);
-              _$effect15(() => _$className15(_el$, `text-primary-200 font-medium ${sizeStyles12[size].label}`));
+              _$effect16(() => _$className15(_el$, `text-primary-200 font-medium ${sizeStyles12[size].label}`));
               return _el$;
             }
           }), _$memo12(() => props.children), _$createComponent18(Show13, {
@@ -2459,14 +2109,14 @@ function SelectOption(props) {
 function ChevronIcon(props) {
   return (() => {
     var _el$5 = _$getNextElement17(_tmpl$56);
-    _$effect15(() => _$setAttribute8(_el$5, "class", props.class));
+    _$effect16(() => _$setAttribute8(_el$5, "class", props.class));
     return _el$5;
   })();
 }
 function CheckIcon2(props) {
   return (() => {
     var _el$6 = _$getNextElement17(_tmpl$65);
-    _$effect15(() => _$setAttribute8(_el$6, "class", props.class));
+    _$effect16(() => _$setAttribute8(_el$6, "class", props.class));
     return _el$6;
   })();
 }
@@ -2480,7 +2130,7 @@ import { template as _$template18 } from "solid-js/web";
 import { setAttribute as _$setAttribute9 } from "solid-js/web";
 import { memo as _$memo13 } from "solid-js/web";
 import { className as _$className16 } from "solid-js/web";
-import { effect as _$effect16 } from "solid-js/web";
+import { effect as _$effect17 } from "solid-js/web";
 import { getNextElement as _$getNextElement18 } from "solid-js/web";
 import { insert as _$insert16 } from "solid-js/web";
 import { createComponent as _$createComponent19 } from "solid-js/web";
@@ -2531,7 +2181,7 @@ function MenuTrigger(props) {
           return props.children;
         }
       })));
-      _$effect16(() => _$className16(_el$, `relative inline-block ${local.class ?? ""}`));
+      _$effect17(() => _$className16(_el$, `relative inline-block ${local.class ?? ""}`));
       return _el$;
     }
   });
@@ -2617,7 +2267,7 @@ function MenuItem(props) {
       return [_$memo13(() => _$memo13(() => !!local.icon)() && (() => {
         var _el$3 = _$getNextElement18(_tmpl$312);
         _$insert16(_el$3, () => local.icon());
-        _$effect16(() => _$className16(_el$3, `shrink-0 ${sizeStyle.icon}`));
+        _$effect17(() => _$className16(_el$3, `shrink-0 ${sizeStyle.icon}`));
         return _el$3;
       })()), (() => {
         var _el$2 = _$getNextElement18(_tmpl$216);
@@ -2634,14 +2284,14 @@ function MenuItem(props) {
 function MenuSeparator(props) {
   return (() => {
     var _el$5 = _$getNextElement18(_tmpl$57);
-    _$effect16(() => _$className16(_el$5, `my-1 border-t border-primary-600 ${props.class ?? ""}`));
+    _$effect17(() => _$className16(_el$5, `my-1 border-t border-primary-600 ${props.class ?? ""}`));
     return _el$5;
   })();
 }
 function ChevronIcon2(props) {
   return (() => {
     var _el$6 = _$getNextElement18(_tmpl$66);
-    _$effect16(() => _$setAttribute9(_el$6, "class", props.class));
+    _$effect17(() => _$setAttribute9(_el$6, "class", props.class));
     return _el$6;
   })();
 }
@@ -2657,7 +2307,7 @@ import { mergeProps as _$mergeProps16 } from "solid-js/web";
 import { memo as _$memo14 } from "solid-js/web";
 import { createComponent as _$createComponent20 } from "solid-js/web";
 import { className as _$className17 } from "solid-js/web";
-import { effect as _$effect17 } from "solid-js/web";
+import { effect as _$effect18 } from "solid-js/web";
 import { insert as _$insert17 } from "solid-js/web";
 import { getNextElement as _$getNextElement19 } from "solid-js/web";
 import { splitProps as splitProps16, createContext as createContext5, useContext as useContext5, Show as Show14 } from "solid-js";
@@ -2722,7 +2372,7 @@ function ListBox(props) {
         get children() {
           var _el$3 = _$getNextElement19(_tmpl$217);
           _$insert17(_el$3, () => local.label);
-          _$effect17(() => _$className17(_el$3, `text-primary-200 font-medium ${styles.label}`));
+          _$effect18(() => _$className17(_el$3, `text-primary-200 font-medium ${styles.label}`));
           return _el$3;
         }
       }), _el$6, _co$);
@@ -2780,7 +2430,7 @@ function ListBoxOption(props) {
       return [_$memo14(() => _$memo14(() => !!local.icon)() && (() => {
         var _el$13 = _$getNextElement19(_tmpl$67);
         _$insert17(_el$13, () => local.icon());
-        _$effect17(() => _$className17(_el$13, `shrink-0 ${sizeStyle.icon}`));
+        _$effect18(() => _$className17(_el$13, `shrink-0 ${sizeStyle.icon}`));
         return _el$13;
       })()), _$createComponent20(CheckIcon3, {
         get ["class"]() {
@@ -2794,7 +2444,7 @@ function ListBoxOption(props) {
           return () => _c$() && (() => {
             var _el$14 = _$getNextElement19(_tmpl$67);
             _$insert17(_el$14, () => local.description);
-            _$effect17(() => _$className17(_el$14, `text-primary-400 truncate ${sizeStyle.description}`));
+            _$effect18(() => _$className17(_el$14, `text-primary-400 truncate ${sizeStyle.description}`));
             return _el$14;
           })();
         })(), _el$12, _co$4);
@@ -2806,7 +2456,7 @@ function ListBoxOption(props) {
 function CheckIcon3(props) {
   return (() => {
     var _el$15 = _$getNextElement19(_tmpl$73);
-    _$effect17(() => _$setAttribute10(_el$15, "class", props.class));
+    _$effect18(() => _$setAttribute10(_el$15, "class", props.class));
     return _el$15;
   })();
 }
@@ -2963,7 +2613,7 @@ Tabs.Panel = TabPanel;
 // src/breadcrumbs/index.tsx
 import { template as _$template20 } from "solid-js/web";
 import { setAttribute as _$setAttribute11 } from "solid-js/web";
-import { effect as _$effect18 } from "solid-js/web";
+import { effect as _$effect19 } from "solid-js/web";
 import { getNextElement as _$getNextElement20 } from "solid-js/web";
 import { memo as _$memo15 } from "solid-js/web";
 import { createComponent as _$createComponent22 } from "solid-js/web";
@@ -3068,7 +2718,7 @@ function BreadcrumbItem(props) {
 function ChevronIcon3(props) {
   return (() => {
     var _el$ = _$getNextElement20(_tmpl$30);
-    _$effect18(() => _$setAttribute11(_el$, "class", props.class));
+    _$effect19(() => _$setAttribute11(_el$, "class", props.class));
     return _el$;
   })();
 }
@@ -3086,10 +2736,11 @@ import { spread as _$spread5 } from "solid-js/web";
 import { mergeProps as _$mergeProps19 } from "solid-js/web";
 import { memo as _$memo16 } from "solid-js/web";
 import { setAttribute as _$setAttribute12 } from "solid-js/web";
-import { effect as _$effect19 } from "solid-js/web";
+import { effect as _$effect20 } from "solid-js/web";
 import { getNextElement as _$getNextElement21 } from "solid-js/web";
 import { splitProps as splitProps19, mergeProps as solidMergeProps5, Show as Show15 } from "solid-js";
 import { createNumberField, createFocusRing as createFocusRing2, createPress, createHover } from "@proyecto-viviana/solidaria";
+import { createNumberFieldState } from "@proyecto-viviana/solid-stately";
 var _tmpl$31 = /* @__PURE__ */ _$template21(`<svg viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=2><path d="M8 3v10M3 8h10">`);
 var _tmpl$218 = /* @__PURE__ */ _$template21(`<svg viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=2><path d="M3 8h10">`);
 var _tmpl$314 = /* @__PURE__ */ _$template21(`<span class="text-danger-500 ml-1">*`);
@@ -3123,14 +2774,14 @@ var sizeStyles17 = {
 function PlusIcon(props) {
   return (() => {
     var _el$ = _$getNextElement21(_tmpl$31);
-    _$effect19(() => _$setAttribute12(_el$, "class", props.class));
+    _$effect20(() => _$setAttribute12(_el$, "class", props.class));
     return _el$;
   })();
 }
 function MinusIcon(props) {
   return (() => {
     var _el$2 = _$getNextElement21(_tmpl$218);
-    _$effect19(() => _$setAttribute12(_el$2, "class", props.class));
+    _$effect20(() => _$setAttribute12(_el$2, "class", props.class));
     return _el$2;
   })();
 }
@@ -3524,7 +3175,7 @@ function NumberField(props) {
         return _el$17;
       }
     }), _el$23, _co$7);
-    _$effect19(() => _$className18(_el$0, groupClasses()));
+    _$effect20(() => _$className18(_el$0, groupClasses()));
     _$runHydrationEvents9();
     return _el$3;
   })();
@@ -3542,10 +3193,11 @@ import { createComponent as _$createComponent24 } from "solid-js/web";
 import { spread as _$spread6 } from "solid-js/web";
 import { mergeProps as _$mergeProps20 } from "solid-js/web";
 import { setAttribute as _$setAttribute13 } from "solid-js/web";
-import { effect as _$effect20 } from "solid-js/web";
+import { effect as _$effect21 } from "solid-js/web";
 import { getNextElement as _$getNextElement22 } from "solid-js/web";
 import { splitProps as splitProps20, mergeProps as solidMergeProps6, Show as Show16 } from "solid-js";
 import { createSearchField, createFocusRing as createFocusRing3, createPress as createPress2, createHover as createHover2 } from "@proyecto-viviana/solidaria";
+import { createSearchFieldState } from "@proyecto-viviana/solid-stately";
 var _tmpl$40 = /* @__PURE__ */ _$template22(`<svg viewBox="0 0 20 20"fill=none stroke=currentColor stroke-width=2><circle cx=8 cy=8 r=5></circle><path d="M12 12L17 17"stroke-linecap=round>`);
 var _tmpl$219 = /* @__PURE__ */ _$template22(`<svg viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=2><path d="M4 4L12 12M12 4L4 12"stroke-linecap=round>`);
 var _tmpl$315 = /* @__PURE__ */ _$template22(`<span class="text-danger-500 ml-1">*`);
@@ -3582,14 +3234,14 @@ var sizeStyles18 = {
 function SearchIcon(props) {
   return (() => {
     var _el$ = _$getNextElement22(_tmpl$40);
-    _$effect20(() => _$setAttribute13(_el$, "class", props.class));
+    _$effect21(() => _$setAttribute13(_el$, "class", props.class));
     return _el$;
   })();
 }
 function ClearIcon(props) {
   return (() => {
     var _el$2 = _$getNextElement22(_tmpl$219);
-    _$effect20(() => _$setAttribute13(_el$2, "class", props.class));
+    _$effect21(() => _$setAttribute13(_el$2, "class", props.class));
     return _el$2;
   })();
 }
@@ -3939,7 +3591,7 @@ function SearchField(props) {
         return _el$16;
       }
     }), _el$22, _co$7);
-    _$effect20((_p$) => {
+    _$effect21((_p$) => {
       var _v$ = containerClasses(), _v$2 = isEmpty() || void 0, _v$3 = ariaProps.isDisabled || void 0, _v$4 = ariaProps.isInvalid || void 0, _v$5 = inputWrapperClasses();
       _v$ !== _p$.e && _$className19(_el$3, _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute13(_el$3, "data-empty", _p$.t = _v$2);
@@ -3964,7 +3616,7 @@ import { template as _$template23 } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty2 } from "solid-js/web";
 import { use as _$use5 } from "solid-js/web";
 import { className as _$className20 } from "solid-js/web";
-import { effect as _$effect21 } from "solid-js/web";
+import { effect as _$effect22 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker12 } from "solid-js/web";
 import { createComponent as _$createComponent25 } from "solid-js/web";
 import { getNextElement as _$getNextElement23 } from "solid-js/web";
@@ -3975,6 +3627,7 @@ import { mergeProps as _$mergeProps21 } from "solid-js/web";
 import { memo as _$memo18 } from "solid-js/web";
 import { splitProps as splitProps21, mergeProps as solidMergeProps7, Show as Show17 } from "solid-js";
 import { createSlider, createFocusRing as createFocusRing4, createHover as createHover3 } from "@proyecto-viviana/solidaria";
+import { createSliderState } from "@proyecto-viviana/solid-stately";
 var _tmpl$41 = /* @__PURE__ */ _$template23(`<span>`);
 var _tmpl$220 = /* @__PURE__ */ _$template23(`<output>`);
 var _tmpl$316 = /* @__PURE__ */ _$template23(`<div><!$><!/><!$><!/>`);
@@ -4237,7 +3890,7 @@ function Slider(props) {
             return _el$4;
           }
         }), _el$8, _co$2);
-        _$effect21(() => _$className20(_el$2, labelRowClasses()));
+        _$effect22(() => _$className20(_el$2, labelRowClasses()));
         return _el$2;
       }
     }), _el$16, _co$3);
@@ -4282,7 +3935,7 @@ function Slider(props) {
         var _el$11 = _$getNextElement23(_tmpl$415), _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
         _$insert20(_el$12, () => state.minValue);
         _$insert20(_el$13, () => state.maxValue);
-        _$effect21((_p$) => {
+        _$effect22((_p$) => {
           var _v$ = minMaxClasses(), _v$2 = minMaxClasses();
           _v$ !== _p$.e && _$className20(_el$12, _p$.e = _v$);
           _v$2 !== _p$.t && _$className20(_el$13, _p$.t = _v$2);
@@ -4295,7 +3948,7 @@ function Slider(props) {
       }
     }), _el$18, _co$4);
     _$spread7(_el$14, _$mergeProps21(() => sliderAria.inputProps), false, false);
-    _$effect21((_p$) => {
+    _$effect22((_p$) => {
       var _v$3 = trackContainerClasses(), _v$4 = fillClasses(), _v$5 = `${percent()}%`;
       _v$3 !== _p$.e && _$className20(_el$9, _p$.e = _v$3);
       _v$4 !== _p$.t && _$className20(_el$1, _p$.t = _v$4);
@@ -4318,7 +3971,7 @@ import { mergeProps as _$mergeProps22 } from "solid-js/web";
 import { memo as _$memo19 } from "solid-js/web";
 import { createComponent as _$createComponent26 } from "solid-js/web";
 import { className as _$className21 } from "solid-js/web";
-import { effect as _$effect22 } from "solid-js/web";
+import { effect as _$effect23 } from "solid-js/web";
 import { getNextElement as _$getNextElement24 } from "solid-js/web";
 import { insert as _$insert21 } from "solid-js/web";
 import { splitProps as splitProps22, createContext as createContext8, useContext as useContext8, Show as Show18 } from "solid-js";
@@ -4379,7 +4032,7 @@ function ComboBox(props) {
             get children() {
               var _el$ = _$getNextElement24(_tmpl$50);
               _$insert21(_el$, () => local.label);
-              _$effect22(() => _$className21(_el$, `text-primary-200 font-medium ${sizeStyles20[size].label}`));
+              _$effect23(() => _$className21(_el$, `text-primary-200 font-medium ${sizeStyles20[size].label}`));
               return _el$;
             }
           }), _$memo19(() => props.children), _$createComponent26(Show18, {
@@ -4412,7 +4065,7 @@ function ComboBoxInputGroup(props) {
   return (() => {
     var _el$4 = _$getNextElement24(_tmpl$416);
     _$insert21(_el$4, () => props.children);
-    _$effect22(() => _$className21(_el$4, `relative flex items-center ${styles().wrapper} ${props.class ?? ""}`));
+    _$effect23(() => _$className21(_el$4, `relative flex items-center ${styles().wrapper} ${props.class ?? ""}`));
     return _el$4;
   })();
 }
@@ -4525,7 +4178,7 @@ function ComboBoxOption(props) {
       }), (() => {
         var _el$5 = _$getNextElement24(_tmpl$512);
         _$insert21(_el$5, () => props.children);
-        _$effect22(() => _$className21(_el$5, `flex-1 data-selected:pl-0 ${iconPadding[size]}`));
+        _$effect23(() => _$className21(_el$5, `flex-1 data-selected:pl-0 ${iconPadding[size]}`));
         return _el$5;
       })()];
     }
@@ -4534,14 +4187,14 @@ function ComboBoxOption(props) {
 function ChevronIcon4(props) {
   return (() => {
     var _el$6 = _$getNextElement24(_tmpl$610);
-    _$effect22(() => _$setAttribute14(_el$6, "class", props.class));
+    _$effect23(() => _$setAttribute14(_el$6, "class", props.class));
     return _el$6;
   })();
 }
 function CheckIcon4(props) {
   return (() => {
     var _el$7 = _$getNextElement24(_tmpl$76);
-    _$effect22(() => _$setAttribute14(_el$7, "class", props.class));
+    _$effect23(() => _$setAttribute14(_el$7, "class", props.class));
     return _el$7;
   })();
 }
@@ -4558,7 +4211,7 @@ import { getNextMarker as _$getNextMarker13 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents12 } from "solid-js/web";
 import { addEventListener as _$addEventListener4 } from "solid-js/web";
 import { className as _$className22 } from "solid-js/web";
-import { effect as _$effect23 } from "solid-js/web";
+import { effect as _$effect24 } from "solid-js/web";
 import { insert as _$insert22 } from "solid-js/web";
 import { mergeProps as _$mergeProps23 } from "solid-js/web";
 import { memo as _$memo20 } from "solid-js/web";
@@ -4658,7 +4311,7 @@ function Toast(props) {
       return [(() => {
         var _el$6 = _$getNextElement25(_tmpl$611);
         _$insert22(_el$6, () => getVariantIcon(variant()));
-        _$effect23(() => _$className22(_el$6, `flex-shrink-0 ${iconStyles[variant()]}`));
+        _$effect24(() => _$className22(_el$6, `flex-shrink-0 ${iconStyles[variant()]}`));
         return _el$6;
       })(), (() => {
         var _el$7 = _$getNextElement25(_tmpl$0), _el$1 = _el$7.firstChild, [_el$10, _co$] = _$getNextMarker13(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = _$getNextMarker13(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = _$getNextMarker13(_el$13.nextSibling);
@@ -4752,7 +4405,7 @@ _$delegateEvents6(["click"]);
 // src/disclosure/index.tsx
 import { template as _$template26 } from "solid-js/web";
 import { setAttribute as _$setAttribute15 } from "solid-js/web";
-import { effect as _$effect24 } from "solid-js/web";
+import { effect as _$effect25 } from "solid-js/web";
 import { getNextElement as _$getNextElement26 } from "solid-js/web";
 import { memo as _$memo21 } from "solid-js/web";
 import { createComponent as _$createComponent28 } from "solid-js/web";
@@ -4893,7 +4546,7 @@ function DisclosureTrigger(props) {
         },
         get children() {
           var _el$ = _$getNextElement26(_tmpl$60);
-          _$effect24(() => _$setAttribute15(_el$, "class", [
+          _$effect25(() => _$setAttribute15(_el$, "class", [
             sizeStyles21[ctx.size].icon,
             "transition-transform duration-200",
             "group-data-[expanded=true]:rotate-180"
@@ -4930,7 +4583,7 @@ import { template as _$template27 } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty3 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents13 } from "solid-js/web";
 import { className as _$className23 } from "solid-js/web";
-import { effect as _$effect25 } from "solid-js/web";
+import { effect as _$effect26 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker14 } from "solid-js/web";
 import { createComponent as _$createComponent29 } from "solid-js/web";
 import { getNextElement as _$getNextElement27 } from "solid-js/web";
@@ -4938,7 +4591,7 @@ import { insert as _$insert23 } from "solid-js/web";
 import { memo as _$memo22 } from "solid-js/web";
 import { spread as _$spread8 } from "solid-js/web";
 import { mergeProps as _$mergeProps25 } from "solid-js/web";
-import { splitProps as splitProps25, Show as Show21, createMemo as createMemo7 } from "solid-js";
+import { splitProps as splitProps25, Show as Show21, createMemo as createMemo4 } from "solid-js";
 import { createMeter } from "@proyecto-viviana/solidaria";
 var _tmpl$61 = /* @__PURE__ */ _$template27(`<span class="text-primary-200 font-medium">`);
 var _tmpl$223 = /* @__PURE__ */ _$template27(`<span class=text-primary-300>`);
@@ -4966,7 +4619,7 @@ var variantStyles12 = {
   danger: "bg-red-500",
   info: "bg-blue-500"
 };
-function clamp4(value, min, max) {
+function clamp2(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function Meter(props) {
@@ -4994,11 +4647,11 @@ function Meter(props) {
       return ariaProps["aria-label"];
     }
   });
-  const percentage = createMemo7(() => {
+  const percentage = createMemo4(() => {
     const value = ariaProps.value ?? 0;
     const minValue = ariaProps.minValue ?? 0;
     const maxValue = ariaProps.maxValue ?? 100;
-    const clampedValue = clamp4(value, minValue, maxValue);
+    const clampedValue = clamp2(value, minValue, maxValue);
     return (clampedValue - minValue) / (maxValue - minValue) * 100;
   });
   const valueText = () => meterAria.meterProps["aria-valuetext"];
@@ -5036,11 +4689,11 @@ function Meter(props) {
             return _el$4;
           }
         }), _el$8, _co$2);
-        _$effect25(() => _$className23(_el$2, `flex justify-between items-center mb-1 ${sizeConfig().text}`));
+        _$effect26(() => _$className23(_el$2, `flex justify-between items-center mb-1 ${sizeConfig().text}`));
         return _el$2;
       }
     }), _el$10, _co$3);
-    _$effect25((_p$) => {
+    _$effect26((_p$) => {
       var _v$ = `w-full ${sizeConfig().track} bg-bg-300 rounded-full overflow-hidden`, _v$2 = `h-full rounded-full transition-all duration-300 ${variantStyles12[variant()]}`, _v$3 = `${percentage()}%`;
       _v$ !== _p$.e && _$className23(_el$9, _p$.e = _v$);
       _v$2 !== _p$.t && _$className23(_el$0, _p$.t = _v$2);
@@ -5064,7 +4717,7 @@ import { getNextMarker as _$getNextMarker15 } from "solid-js/web";
 import { memo as _$memo23 } from "solid-js/web";
 import { createComponent as _$createComponent30 } from "solid-js/web";
 import { className as _$className24 } from "solid-js/web";
-import { effect as _$effect26 } from "solid-js/web";
+import { effect as _$effect27 } from "solid-js/web";
 import { getNextElement as _$getNextElement28 } from "solid-js/web";
 import { insert as _$insert24 } from "solid-js/web";
 import { splitProps as splitProps26, Show as Show22 } from "solid-js";
@@ -5128,7 +4781,7 @@ function TagGroup(props) {
       get children() {
         var _el$2 = _$getNextElement28(_tmpl$70);
         _$insert24(_el$2, () => local.label);
-        _$effect26(() => _$className24(_el$2, `font-medium text-primary-200 ${sizeConfig().label}`));
+        _$effect27(() => _$className24(_el$2, `font-medium text-primary-200 ${sizeConfig().label}`));
         return _el$2;
       }
     }), _el$4, _co$);
@@ -5188,7 +4841,7 @@ function TagGroup(props) {
               e.stopPropagation();
               local.onRemove?.(/* @__PURE__ */ new Set([getKey(item)]));
             };
-            _$effect26(() => _$className24(_el$9, `
+            _$effect27(() => _$className24(_el$9, `
                       ${sizeConfig().removeButton}
                       rounded-full flex items-center justify-center
                       hover:bg-black/20 transition-colors
@@ -5200,7 +4853,7 @@ function TagGroup(props) {
         })]
       })
     }), _el$6, _co$2);
-    _$effect26(() => _$className24(_el$, `flex flex-col gap-2 ${local.class ?? ""}`));
+    _$effect27(() => _$className24(_el$, `flex flex-col gap-2 ${local.class ?? ""}`));
     return _el$;
   })();
 }
@@ -5486,7 +5139,7 @@ function RangeCalendar(props) {
 // src/calendar/DateField.tsx
 import { template as _$template31 } from "solid-js/web";
 import { className as _$className25 } from "solid-js/web";
-import { effect as _$effect27 } from "solid-js/web";
+import { effect as _$effect28 } from "solid-js/web";
 import { getNextElement as _$getNextElement31 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker18 } from "solid-js/web";
 import { insert as _$insert27 } from "solid-js/web";
@@ -5542,7 +5195,7 @@ function DateField(props) {
           var _c$ = _$memo24(() => !!rest.isRequired);
           return () => _c$() && _$getNextElement31(_tmpl$227);
         })(), _el$5, _co$2);
-        _$effect27(() => _$className25(_el$, `font-medium text-primary-200 ${sizeConfig().label}`));
+        _$effect28(() => _$className25(_el$, `font-medium text-primary-200 ${sizeConfig().label}`));
         return _el$;
       })()), _$createComponent33(DateInput, {
         "class": ({
@@ -5593,12 +5246,12 @@ function DateField(props) {
       }), _$memo24(() => _$memo24(() => !!(local.description && !isInvalid()))() && (() => {
         var _el$7 = _$getNextElement31(_tmpl$323);
         _$insert27(_el$7, () => local.description);
-        _$effect27(() => _$className25(_el$7, `text-primary-400 ${sizeConfig().label}`));
+        _$effect28(() => _$className25(_el$7, `text-primary-400 ${sizeConfig().label}`));
         return _el$7;
       })()), _$memo24(() => _$memo24(() => !!(isInvalid() && local.errorMessage))() && (() => {
         var _el$8 = _$getNextElement31(_tmpl$323);
         _$insert27(_el$8, () => local.errorMessage);
-        _$effect27(() => _$className25(_el$8, `text-red-500 ${sizeConfig().label}`));
+        _$effect28(() => _$className25(_el$8, `text-red-500 ${sizeConfig().label}`));
         return _el$8;
       })())];
     }
@@ -5608,7 +5261,7 @@ function DateField(props) {
 // src/calendar/TimeField.tsx
 import { template as _$template32 } from "solid-js/web";
 import { className as _$className26 } from "solid-js/web";
-import { effect as _$effect28 } from "solid-js/web";
+import { effect as _$effect29 } from "solid-js/web";
 import { getNextElement as _$getNextElement32 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker19 } from "solid-js/web";
 import { insert as _$insert28 } from "solid-js/web";
@@ -5664,7 +5317,7 @@ function TimeField(props) {
           var _c$ = _$memo25(() => !!rest.isRequired);
           return () => _c$() && _$getNextElement32(_tmpl$228);
         })(), _el$5, _co$2);
-        _$effect28(() => _$className26(_el$, `font-medium text-primary-200 ${sizeConfig().label}`));
+        _$effect29(() => _$className26(_el$, `font-medium text-primary-200 ${sizeConfig().label}`));
         return _el$;
       })()), _$createComponent34(TimeInput, {
         "class": ({
@@ -5715,12 +5368,12 @@ function TimeField(props) {
       }), _$memo25(() => _$memo25(() => !!(local.description && !isInvalid()))() && (() => {
         var _el$7 = _$getNextElement32(_tmpl$324);
         _$insert28(_el$7, () => local.description);
-        _$effect28(() => _$className26(_el$7, `text-primary-400 ${sizeConfig().label}`));
+        _$effect29(() => _$className26(_el$7, `text-primary-400 ${sizeConfig().label}`));
         return _el$7;
       })()), _$memo25(() => _$memo25(() => !!(isInvalid() && local.errorMessage))() && (() => {
         var _el$8 = _$getNextElement32(_tmpl$324);
         _$insert28(_el$8, () => local.errorMessage);
-        _$effect28(() => _$className26(_el$8, `text-red-500 ${sizeConfig().label}`));
+        _$effect29(() => _$className26(_el$8, `text-red-500 ${sizeConfig().label}`));
         return _el$8;
       })())];
     }
@@ -5732,7 +5385,7 @@ import { template as _$template33 } from "solid-js/web";
 import { delegateEvents as _$delegateEvents8 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents15 } from "solid-js/web";
 import { className as _$className27 } from "solid-js/web";
-import { effect as _$effect29 } from "solid-js/web";
+import { effect as _$effect30 } from "solid-js/web";
 import { mergeProps as _$mergeProps30 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker20 } from "solid-js/web";
 import { insert as _$insert29 } from "solid-js/web";
@@ -5798,7 +5451,7 @@ function DatePicker(props) {
           var _c$ = _$memo26(() => !!rest.isRequired);
           return () => _c$() && _$getNextElement33(_tmpl$420);
         })(), _el$11, _co$5);
-        _$effect29(() => _$className27(_el$9, `font-medium text-primary-200 ${sizeConfig().label}`));
+        _$effect30(() => _$className27(_el$9, `font-medium text-primary-200 ${sizeConfig().label}`));
         return _el$9;
       })()), (() => {
         var _el$2 = _$getNextElement33(_tmpl$229), _el$3 = _el$2.firstChild, [_el$4, _co$] = _$getNextMarker20(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = _$getNextMarker20(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$3] = _$getNextMarker20(_el$7.nextSibling);
@@ -5884,12 +5537,12 @@ function DatePicker(props) {
       })(), _$memo26(() => _$memo26(() => !!(local.description && !isInvalid()))() && (() => {
         var _el$13 = _$getNextElement33(_tmpl$514);
         _$insert29(_el$13, () => local.description);
-        _$effect29(() => _$className27(_el$13, `text-primary-400 ${sizeConfig().label}`));
+        _$effect30(() => _$className27(_el$13, `text-primary-400 ${sizeConfig().label}`));
         return _el$13;
       })()), _$memo26(() => _$memo26(() => !!(isInvalid() && local.errorMessage))() && (() => {
         var _el$14 = _$getNextElement33(_tmpl$514);
         _$insert29(_el$14, () => local.errorMessage);
-        _$effect29(() => _$className27(_el$14, `text-red-500 ${sizeConfig().label}`));
+        _$effect30(() => _$className27(_el$14, `text-red-500 ${sizeConfig().label}`));
         return _el$14;
       })())];
     }
@@ -5936,7 +5589,7 @@ import { template as _$template34 } from "solid-js/web";
 import { setAttribute as _$setAttribute16 } from "solid-js/web";
 import { memo as _$memo27 } from "solid-js/web";
 import { className as _$className28 } from "solid-js/web";
-import { effect as _$effect30 } from "solid-js/web";
+import { effect as _$effect31 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker21 } from "solid-js/web";
 import { mergeProps as _$mergeProps31 } from "solid-js/web";
 import { createComponent as _$createComponent36 } from "solid-js/web";
@@ -6060,7 +5713,7 @@ function Table(props) {
           return props.children;
         }
       })));
-      _$effect30(() => _$className28(_el$4, variantStyle().wrapper));
+      _$effect31(() => _$className28(_el$4, variantStyle().wrapper));
       return _el$;
     }
   });
@@ -6211,7 +5864,7 @@ function TableSelectionCheckbox(props) {
         return props.rowKey;
       }
     }));
-    _$effect30(() => _$className28(_el$17, `${sizeStyle.cell} w-px`));
+    _$effect31(() => _$className28(_el$17, `${sizeStyle.cell} w-px`));
     return _el$17;
   })();
 }
@@ -6223,7 +5876,7 @@ function TableSelectAllCheckbox() {
     var _el$19 = _$getNextElement34(_tmpl$711), _el$20 = _el$19.firstChild;
     _$className28(_el$20, checkboxClass);
     _$insert30(_el$20, _$createComponent36(HeadlessTableSelectAllCheckbox, {}));
-    _$effect30(() => _$className28(_el$19, `${sizeStyle.headerCell} w-px`));
+    _$effect31(() => _$className28(_el$19, `${sizeStyle.headerCell} w-px`));
     return _el$19;
   })();
 }
@@ -6234,14 +5887,14 @@ function SortIcon(props) {
       var _c$2 = _$memo27(() => props.direction === "ascending");
       return () => _c$2() ? _$getNextElement34(_tmpl$93) : _$getNextElement34(_tmpl$02);
     })());
-    _$effect30(() => _$setAttribute16(_el$21, "class", props.class));
+    _$effect31(() => _$setAttribute16(_el$21, "class", props.class));
     return _el$21;
   })();
 }
 function EmptyIcon(props) {
   return (() => {
     var _el$24 = _$getNextElement34(_tmpl$1);
-    _$effect30(() => _$setAttribute16(_el$24, "class", props.class));
+    _$effect31(() => _$setAttribute16(_el$24, "class", props.class));
     return _el$24;
   })();
 }
@@ -6259,7 +5912,7 @@ import { setAttribute as _$setAttribute17 } from "solid-js/web";
 import { mergeProps as _$mergeProps32 } from "solid-js/web";
 import { memo as _$memo28 } from "solid-js/web";
 import { className as _$className29 } from "solid-js/web";
-import { effect as _$effect31 } from "solid-js/web";
+import { effect as _$effect32 } from "solid-js/web";
 import { getNextElement as _$getNextElement35 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker22 } from "solid-js/web";
 import { insert as _$insert31 } from "solid-js/web";
@@ -6383,7 +6036,7 @@ function GridList(props) {
         get children() {
           var _el$7 = _$getNextElement35(_tmpl$231);
           _$insert31(_el$7, () => local.label);
-          _$effect31(() => _$className29(_el$7, `text-primary-200 font-medium ${styles().label}`));
+          _$effect32(() => _$className29(_el$7, `text-primary-200 font-medium ${styles().label}`));
           return _el$7;
         }
       }), _el$0, _co$2);
@@ -6441,7 +6094,7 @@ function GridListItem(props) {
       },
       get children() {
         var _el$13 = _$getNextElement35(_tmpl$516);
-        _$effect31((_p$) => {
+        _$effect32((_p$) => {
           var _v$ = local.image, _v$2 = local.imageAlt ?? "", _v$3 = `${sizeStyle.image} rounded object-cover shrink-0`;
           _v$ !== _p$.e && _$setAttribute17(_el$13, "src", _p$.e = _v$);
           _v$2 !== _p$.t && _$setAttribute17(_el$13, "alt", _p$.t = _v$2);
@@ -6461,7 +6114,7 @@ function GridListItem(props) {
       get children() {
         var _el$14 = _$getNextElement35(_tmpl$614);
         _$insert31(_el$14, local.icon);
-        _$effect31(() => _$className29(_el$14, `shrink-0 ${sizeStyle.icon}`));
+        _$effect32(() => _$className29(_el$14, `shrink-0 ${sizeStyle.icon}`));
         return _el$14;
       }
     }), _$createComponent37(Show25, {
@@ -6488,7 +6141,7 @@ function GridListItem(props) {
         get children() {
           var _el$17 = _$getNextElement35(_tmpl$614);
           _$insert31(_el$17, () => local.description);
-          _$effect31(() => _$className29(_el$17, `text-primary-400 truncate ${sizeStyle.description}`));
+          _$effect32(() => _$className29(_el$17, `text-primary-400 truncate ${sizeStyle.description}`));
           return _el$17;
         }
       }), _el$19, _co$5);
@@ -6514,14 +6167,14 @@ function GridListSelectionCheckbox(props) {
 function CheckIcon5(props) {
   return (() => {
     var _el$21 = _$getNextElement35(_tmpl$86);
-    _$effect31(() => _$setAttribute17(_el$21, "class", props.class));
+    _$effect32(() => _$setAttribute17(_el$21, "class", props.class));
     return _el$21;
   })();
 }
 function EmptyIcon2(props) {
   return (() => {
     var _el$22 = _$getNextElement35(_tmpl$94);
-    _$effect31(() => _$setAttribute17(_el$22, "class", props.class));
+    _$effect32(() => _$setAttribute17(_el$22, "class", props.class));
     return _el$22;
   })();
 }
@@ -6534,7 +6187,7 @@ import { setAttribute as _$setAttribute18 } from "solid-js/web";
 import { mergeProps as _$mergeProps33 } from "solid-js/web";
 import { memo as _$memo29 } from "solid-js/web";
 import { className as _$className30 } from "solid-js/web";
-import { effect as _$effect32 } from "solid-js/web";
+import { effect as _$effect33 } from "solid-js/web";
 import { getNextElement as _$getNextElement36 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker23 } from "solid-js/web";
 import { insert as _$insert32 } from "solid-js/web";
@@ -6652,7 +6305,7 @@ function Tree(props) {
         get children() {
           var _el$7 = _$getNextElement36(_tmpl$232);
           _$insert32(_el$7, () => local.label);
-          _$effect32(() => _$className30(_el$7, `text-primary-200 font-medium ${styles().label}`));
+          _$effect33(() => _$className30(_el$7, `text-primary-200 font-medium ${styles().label}`));
           return _el$7;
         }
       }), _el$0, _co$2);
@@ -6719,7 +6372,7 @@ function TreeItem(props) {
       get children() {
         var _el$13 = _$getNextElement36(_tmpl$517);
         _$insert32(_el$13, local.icon);
-        _$effect32(() => _$className30(_el$13, `shrink-0 ${sizeStyle.icon}`));
+        _$effect33(() => _$className30(_el$13, `shrink-0 ${sizeStyle.icon}`));
         return _el$13;
       }
     }), _$createComponent38(Show26, {
@@ -6753,7 +6406,7 @@ function TreeItem(props) {
         get children() {
           var _el$16 = _$getNextElement36(_tmpl$517);
           _$insert32(_el$16, () => local.description);
-          _$effect32(() => _$className30(_el$16, `text-primary-400 truncate ${sizeStyle.description}`));
+          _$effect33(() => _$className30(_el$16, `text-primary-400 truncate ${sizeStyle.description}`));
           return _el$16;
         }
       }), _el$18, _co$5);
@@ -6809,7 +6462,7 @@ function TreeSelectionCheckbox(props) {
 function ChevronIcon5(props) {
   return (() => {
     var _el$20 = _$getNextElement36(_tmpl$713);
-    _$effect32(() => _$setAttribute18(_el$20, "class", props.class));
+    _$effect33(() => _$setAttribute18(_el$20, "class", props.class));
     return _el$20;
   })();
 }
@@ -6820,28 +6473,28 @@ function FolderIcon(props) {
       var _c$2 = _$memo29(() => !!props.isOpen);
       return () => _c$2() ? _$getNextElement36(_tmpl$95) : _$getNextElement36(_tmpl$03);
     })());
-    _$effect32(() => _$setAttribute18(_el$21, "class", props.class));
+    _$effect33(() => _$setAttribute18(_el$21, "class", props.class));
     return _el$21;
   })();
 }
 function FileIcon(props) {
   return (() => {
     var _el$24 = _$getNextElement36(_tmpl$110);
-    _$effect32(() => _$setAttribute18(_el$24, "class", props.class));
+    _$effect33(() => _$setAttribute18(_el$24, "class", props.class));
     return _el$24;
   })();
 }
 function CheckIcon6(props) {
   return (() => {
     var _el$25 = _$getNextElement36(_tmpl$102);
-    _$effect32(() => _$setAttribute18(_el$25, "class", props.class));
+    _$effect33(() => _$setAttribute18(_el$25, "class", props.class));
     return _el$25;
   })();
 }
 function EmptyTreeIcon(props) {
   return (() => {
     var _el$26 = _$getNextElement36(_tmpl$112);
-    _$effect32(() => _$setAttribute18(_el$26, "class", props.class));
+    _$effect33(() => _$setAttribute18(_el$26, "class", props.class));
     return _el$26;
   })();
 }
@@ -6856,7 +6509,7 @@ import { runHydrationEvents as _$runHydrationEvents16 } from "solid-js/web";
 import { memo as _$memo30 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker24 } from "solid-js/web";
 import { className as _$className31 } from "solid-js/web";
-import { effect as _$effect33 } from "solid-js/web";
+import { effect as _$effect34 } from "solid-js/web";
 import { getNextElement as _$getNextElement37 } from "solid-js/web";
 import { insert as _$insert33 } from "solid-js/web";
 import { createComponent as _$createComponent39 } from "solid-js/web";
@@ -6969,7 +6622,7 @@ function ColorSlider(props) {
             get children() {
               var _el$2 = _$getNextElement37(_tmpl$89);
               _$insert33(_el$2, () => headlessProps.label);
-              _$effect33(() => _$className31(_el$2, `text-primary-200 font-medium ${styles().slider.label}`));
+              _$effect34(() => _$className31(_el$2, `text-primary-200 font-medium ${styles().slider.label}`));
               return _el$2;
             }
           }), _el$5, _co$);
@@ -6980,7 +6633,7 @@ function ColorSlider(props) {
             get children() {
               var _el$3 = _$getNextElement37(_tmpl$89);
               _$insert33(_el$3, () => Math.round(renderProps.value));
-              _$effect33(() => _$className31(_el$3, `text-primary-400 ${styles().slider.label}`));
+              _$effect34(() => _$className31(_el$3, `text-primary-400 ${styles().slider.label}`));
               return _el$3;
             }
           }), _el$7, _co$2);
@@ -7155,7 +6808,7 @@ function ColorField(props) {
           get children() {
             var _el$8 = _$getNextElement37(_tmpl$89);
             _$insert33(_el$8, () => headlessProps.label);
-            _$effect33(() => _$className31(_el$8, `text-primary-200 font-medium ${styles().field.label}`));
+            _$effect34(() => _$className31(_el$8, `text-primary-200 font-medium ${styles().field.label}`));
             return _el$8;
           }
         }), _$createComponent39(ColorFieldInput, {
@@ -7234,7 +6887,7 @@ function ColorPicker(props) {
       get children() {
         var _el$11 = _$getNextElement37(_tmpl$89);
         _$insert33(_el$11, () => props.label);
-        _$effect33(() => _$className31(_el$11, `text-primary-200 font-medium ${styles().field.label}`));
+        _$effect34(() => _$className31(_el$11, `text-primary-200 font-medium ${styles().field.label}`));
         return _el$11;
       }
     }), _el$13, _co$3);
@@ -7330,7 +6983,7 @@ function ColorPicker(props) {
         });
       }
     }), _el$19, _co$6);
-    _$effect33(() => _$className31(_el$10, `flex flex-col gap-4 ${props.class ?? ""}`));
+    _$effect34(() => _$className31(_el$10, `flex flex-col gap-4 ${props.class ?? ""}`));
     return _el$10;
   })();
 }
@@ -7351,7 +7004,7 @@ import { setAttribute as _$setAttribute19 } from "solid-js/web";
 import { mergeProps as _$mergeProps35 } from "solid-js/web";
 import { memo as _$memo31 } from "solid-js/web";
 import { className as _$className32 } from "solid-js/web";
-import { effect as _$effect34 } from "solid-js/web";
+import { effect as _$effect35 } from "solid-js/web";
 import { createComponent as _$createComponent40 } from "solid-js/web";
 import { getNextElement as _$getNextElement38 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker25 } from "solid-js/web";
@@ -7413,7 +7066,7 @@ function Landmark(props) {
               return _el$2;
             }
           }), _el$9, _co$3);
-          _$effect34(() => _$className32(_el$, `absolute -top-3 left-2 px-2 py-0.5 text-xs font-medium rounded ${roleColors[role()]} text-primary-200`));
+          _$effect35(() => _$className32(_el$, `absolute -top-3 left-2 px-2 py-0.5 text-xs font-medium rounded ${roleColors[role()]} text-primary-200`));
           return _el$;
         }
       }), _$memo31(() => props.children)];
@@ -7437,7 +7090,7 @@ function SkipLink(props) {
     var _el$0 = _$getNextElement38(_tmpl$330);
     _$className32(_el$0, className);
     _$insert34(_el$0, () => props.children ?? "Skip to main content");
-    _$effect34(() => _$setAttribute19(_el$0, "href", props.href));
+    _$effect35(() => _$setAttribute19(_el$0, "href", props.href));
     return _el$0;
   })();
 }
@@ -7452,7 +7105,7 @@ function LandmarkNavigator(props) {
       _el$12.$$click = () => controller.focusPrevious();
       _el$13.$$click = () => controller.focusMain();
       _el$14.$$click = () => controller.focusNext();
-      _$effect34(() => _$className32(_el$1, `fixed bottom-4 right-4 z-50 flex flex-col gap-2 p-3 bg-bg-400 border border-bg-300 rounded-lg shadow-lg ${props.class ?? ""}`));
+      _$effect35(() => _$className32(_el$1, `fixed bottom-4 right-4 z-50 flex flex-col gap-2 p-3 bg-bg-400 border border-bg-300 rounded-lg shadow-lg ${props.class ?? ""}`));
       _$runHydrationEvents17();
       return _el$1;
     }
@@ -7464,7 +7117,7 @@ _$delegateEvents10(["click"]);
 import { template as _$template39 } from "solid-js/web";
 import { delegateEvents as _$delegateEvents11 } from "solid-js/web";
 import { className as _$className33 } from "solid-js/web";
-import { effect as _$effect35 } from "solid-js/web";
+import { effect as _$effect36 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents18 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker26 } from "solid-js/web";
 import { createComponent as _$createComponent41 } from "solid-js/web";
@@ -7502,7 +7155,7 @@ function Chip(props) {
       }
     }), _el$5, _co$);
     _$insert35(_el$3, () => props.text);
-    _$effect35(() => _$className33(_el$, `flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles17[variant()]} ${props.class ?? ""}`));
+    _$effect36(() => _$className33(_el$, `flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles17[variant()]} ${props.class ?? ""}`));
     _$runHydrationEvents18();
     return _el$;
   })();
@@ -7519,7 +7172,7 @@ import { addEventListener as _$addEventListener6 } from "solid-js/web";
 import { insert as _$insert36 } from "solid-js/web";
 import { createComponent as _$createComponent42 } from "solid-js/web";
 import { setAttribute as _$setAttribute20 } from "solid-js/web";
-import { effect as _$effect36 } from "solid-js/web";
+import { effect as _$effect37 } from "solid-js/web";
 import { getNextElement as _$getNextElement40 } from "solid-js/web";
 import { Show as Show30 } from "solid-js";
 var _tmpl$96 = /* @__PURE__ */ _$template40(`<img class="h-[42px] w-auto">`);
@@ -7547,7 +7200,7 @@ function NavHeader(props) {
       },
       get children() {
         var _el$3 = _$getNextElement40(_tmpl$96);
-        _$effect36((_p$) => {
+        _$effect37((_p$) => {
           var _v$ = props.logo, _v$2 = props.logoAlt ?? "Logo";
           _v$ !== _p$.e && _$setAttribute20(_el$3, "src", _p$.e = _v$);
           _v$2 !== _p$.t && _$setAttribute20(_el$3, "alt", _p$.t = _v$2);
@@ -7572,7 +7225,7 @@ function NavHeader(props) {
         return _el$5;
       }
     }), _el$9, _co$2);
-    _$effect36(() => _$className34(_el$, `flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ""}`));
+    _$effect37(() => _$className34(_el$, `flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ""}`));
     return _el$;
   })();
 }
@@ -7583,7 +7236,7 @@ import { template as _$template42 } from "solid-js/web";
 import { createComponent as _$createComponent43 } from "solid-js/web";
 import { mergeProps as _$mergeProps36 } from "solid-js/web";
 import { className as _$className36 } from "solid-js/web";
-import { effect as _$effect38 } from "solid-js/web";
+import { effect as _$effect39 } from "solid-js/web";
 import { getNextElement as _$getNextElement42 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker28 } from "solid-js/web";
 import { insert as _$insert38 } from "solid-js/web";
@@ -7593,7 +7246,7 @@ import { memo as _$memo32 } from "solid-js/web";
 import { template as _$template41 } from "solid-js/web";
 import { setAttribute as _$setAttribute21 } from "solid-js/web";
 import { className as _$className35 } from "solid-js/web";
-import { effect as _$effect37 } from "solid-js/web";
+import { effect as _$effect38 } from "solid-js/web";
 import { getNextElement as _$getNextElement41 } from "solid-js/web";
 import { insert as _$insert37 } from "solid-js/web";
 var _tmpl$97 = /* @__PURE__ */ _$template41(`<span><span class=vui-logo__first></span><span class=vui-logo__second>`);
@@ -7617,7 +7270,7 @@ function Logo(props) {
     var _el$ = _$getNextElement41(_tmpl$97), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _$insert37(_el$2, firstWord);
     _$insert37(_el$3, secondWord);
-    _$effect37((_p$) => {
+    _$effect38((_p$) => {
       var _v$ = `vui-logo ${sizeClass()} ${props.inverted ? "vui-logo--inverted" : ""} ${props.class ?? ""}`, _v$2 = props.inverted ? firstWord() : void 0, _v$3 = props.inverted ? void 0 : secondWord();
       _v$ !== _p$.e && _$className35(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute21(_el$2, "data-text", _p$.t = _v$2);
@@ -7646,7 +7299,7 @@ function Header(props) {
       }, () => props.logoProps ?? {})));
     })(), _el$7, _co$2);
     _$insert38(_el$8, () => props.children);
-    _$effect38(() => _$className36(_el$, `vui-header ${props.class ?? ""}`));
+    _$effect39(() => _$className36(_el$, `vui-header ${props.class ?? ""}`));
     return _el$;
   })();
 }
@@ -7656,7 +7309,7 @@ import { template as _$template43 } from "solid-js/web";
 import { createComponent as _$createComponent44 } from "solid-js/web";
 import { setAttribute as _$setAttribute22 } from "solid-js/web";
 import { className as _$className37 } from "solid-js/web";
-import { effect as _$effect39 } from "solid-js/web";
+import { effect as _$effect40 } from "solid-js/web";
 import { getNextElement as _$getNextElement43 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker29 } from "solid-js/web";
 import { insert as _$insert39 } from "solid-js/web";
@@ -7671,7 +7324,7 @@ function NavItem(props) {
     var _el$ = _$getNextElement43(_tmpl$99), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, [_el$4, _co$] = _$getNextMarker29(_el$3.nextSibling);
     _$insert39(_el$2, () => props.title);
     _$insert39(_el$, () => props.children, _el$4, _co$);
-    _$effect39(() => _$className37(_el$, `flex items-center ${props.class ?? ""}`));
+    _$effect40(() => _$className37(_el$, `flex items-center ${props.class ?? ""}`));
     return _el$;
   })();
 }
@@ -7681,7 +7334,7 @@ function NavLink(props) {
   return (() => {
     var _el$5 = _$getNextElement43(_tmpl$237);
     _$insert39(_el$5, () => props.children);
-    _$effect39((_p$) => {
+    _$effect40((_p$) => {
       var _v$ = props.href, _v$2 = `${props.active ? activeStyles : inactiveStyles} ${props.class ?? ""}`;
       _v$ !== _p$.e && _$setAttribute22(_el$5, "href", _p$.e = _v$);
       _v$2 !== _p$.t && _$className37(_el$5, _p$.t = _v$2);
@@ -7729,7 +7382,7 @@ function NavSection(props) {
       }
     }), _el$1, _co$2);
     _$insert39(_el$9, () => props.children, _el$11, _co$3);
-    _$effect39(() => _$className37(_el$6, props.class ?? ""));
+    _$effect40(() => _$className37(_el$6, props.class ?? ""));
     return _el$6;
   })();
 }
@@ -7738,7 +7391,7 @@ function LateralNav(props) {
   return (() => {
     var _el$15 = _$getNextElement43(_tmpl$519);
     _$insert39(_el$15, () => props.children);
-    _$effect39(() => _$className37(_el$15, `hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ""}`));
+    _$effect40(() => _$className37(_el$15, `hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ""}`));
     return _el$15;
   })();
 }
@@ -7746,7 +7399,7 @@ function LateralNav(props) {
 // src/custom/timeline-item/index.tsx
 import { template as _$template44 } from "solid-js/web";
 import { className as _$className38 } from "solid-js/web";
-import { effect as _$effect40 } from "solid-js/web";
+import { effect as _$effect41 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker30 } from "solid-js/web";
 import { createComponent as _$createComponent45 } from "solid-js/web";
 import { getNextElement as _$getNextElement44 } from "solid-js/web";
@@ -7860,7 +7513,7 @@ function TimelineItem(props) {
         return renderMessage();
       }
     }));
-    _$effect40(() => _$className38(_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 ?? ""}`));
+    _$effect41(() => _$className38(_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;
   })();
 }
@@ -7869,7 +7522,7 @@ function TimelineItem(props) {
 import { template as _$template45 } from "solid-js/web";
 import { delegateEvents as _$delegateEvents13 } from "solid-js/web";
 import { className as _$className39 } from "solid-js/web";
-import { effect as _$effect41 } from "solid-js/web";
+import { effect as _$effect42 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents20 } from "solid-js/web";
 import { memo as _$memo33 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker31 } from "solid-js/web";
@@ -7932,7 +7585,7 @@ function ConversationPreview(props) {
         return _el$1;
       }
     }), _el$13, _co$4);
-    _$effect41(() => _$className39(_el$, `flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
+    _$effect42(() => _$className39(_el$, `flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
     _$runHydrationEvents20();
     return _el$;
   })();
@@ -7949,11 +7602,11 @@ function ConversationBubble(props) {
       get children() {
         var _el$17 = _$getNextElement45(_tmpl$520);
         _$insert41(_el$17, () => props.timestamp);
-        _$effect41(() => _$className39(_el$17, `text-xs ${isUser() ? "text-white/70" : "text-primary-500"}`));
+        _$effect42(() => _$className39(_el$17, `text-xs ${isUser() ? "text-white/70" : "text-primary-500"}`));
         return _el$17;
       }
     }), _el$19, _co$5);
-    _$effect41((_p$) => {
+    _$effect42((_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 && _$className39(_el$14, _p$.e = _v$);
       _v$2 !== _p$.t && _$className39(_el$15, _p$.t = _v$2);
@@ -7984,7 +7637,7 @@ function Conversation(props) {
         }
       })
     }));
-    _$effect41(() => _$className39(_el$20, `flex flex-col gap-2 p-4 ${props.class ?? ""}`));
+    _$effect42(() => _$className39(_el$20, `flex flex-col gap-2 p-4 ${props.class ?? ""}`));
     return _el$20;
   })();
 }
@@ -7993,7 +7646,7 @@ _$delegateEvents13(["click"]);
 // src/custom/profile-card/index.tsx
 import { template as _$template46 } from "solid-js/web";
 import { className as _$className40 } from "solid-js/web";
-import { effect as _$effect42 } from "solid-js/web";
+import { effect as _$effect43 } from "solid-js/web";
 import { memo as _$memo34 } from "solid-js/web";
 import { getNextMarker as _$getNextMarker32 } from "solid-js/web";
 import { getNextElement as _$getNextElement46 } from "solid-js/web";
@@ -8066,7 +7719,7 @@ function ProfileCard(props) {
         return _el$17;
       }
     }), _el$19, _co$5);
-    _$effect42(() => _$className40(_el$, `bg-bg-200 rounded-xl p-4 ${props.class ?? ""}`));
+    _$effect43(() => _$className40(_el$, `bg-bg-200 rounded-xl p-4 ${props.class ?? ""}`));
     return _el$;
   })();
 }
@@ -8082,7 +7735,7 @@ import { memo as _$memo35 } from "solid-js/web";
 import { insert as _$insert43 } from "solid-js/web";
 import { createComponent as _$createComponent48 } from "solid-js/web";
 import { setAttribute as _$setAttribute23 } from "solid-js/web";
-import { effect as _$effect43 } from "solid-js/web";
+import { effect as _$effect44 } from "solid-js/web";
 import { getNextElement as _$getNextElement47 } from "solid-js/web";
 import { Show as Show35, For as For5 } from "solid-js";
 var _tmpl$104 = /* @__PURE__ */ _$template47(`<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">`);
@@ -8112,7 +7765,7 @@ function EventCard(props) {
       },
       get children() {
         var _el$2 = _$getNextElement47(_tmpl$104), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
-        _$effect43((_p$) => {
+        _$effect44((_p$) => {
           var _v$ = props.decorationImage, _v$2 = props.decorationImage, _v$3 = props.decorationImage;
           _v$ !== _p$.e && _$setAttribute23(_el$3, "src", _p$.e = _v$);
           _v$2 !== _p$.t && _$setAttribute23(_el$4, "src", _p$.t = _v$2);
@@ -8132,7 +7785,7 @@ function EventCard(props) {
       },
       get children() {
         var _el$6 = _$getNextElement47(_tmpl$241), _el$7 = _el$6.firstChild;
-        _$effect43((_p$) => {
+        _$effect44((_p$) => {
           var _v$4 = props.image, _v$5 = props.title;
           _v$4 !== _p$.e && _$setAttribute23(_el$7, "src", _p$.e = _v$4);
           _v$5 !== _p$.t && _$setAttribute23(_el$7, "alt", _p$.t = _v$5);
@@ -8220,7 +7873,7 @@ function EventCard(props) {
         return _el$28;
       }
     }), _el$34, _co$7);
-    _$effect43(() => _$className41(_el$, `relative bg-bg-200 rounded-3xl overflow-hidden ${props.class ?? ""}`));
+    _$effect44(() => _$className41(_el$, `relative bg-bg-200 rounded-3xl overflow-hidden ${props.class ?? ""}`));
     return _el$;
   })();
 }
@@ -8234,7 +7887,7 @@ function EventListItem(props) {
       },
       get children() {
         var _el$40 = _$getNextElement47(_tmpl$04), _el$41 = _el$40.firstChild;
-        _$effect43((_p$) => {
+        _$effect44((_p$) => {
           var _v$6 = props.image, _v$7 = props.title;
           _v$6 !== _p$.e && _$setAttribute23(_el$41, "src", _p$.e = _v$6);
           _v$7 !== _p$.t && _$setAttribute23(_el$41, "alt", _p$.t = _v$7);
@@ -8257,7 +7910,7 @@ function EventListItem(props) {
         return _el$44;
       }
     }), _el$46, _co$0);
-    _$effect43(() => _$className41(_el$39, `flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
+    _$effect44(() => _$className41(_el$39, `flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`));
     _$runHydrationEvents21();
     return _el$39;
   })();
@@ -8272,7 +7925,7 @@ import { insert as _$insert44 } from "solid-js/web";
 import { memo as _$memo36 } from "solid-js/web";
 import { createComponent as _$createComponent49 } from "solid-js/web";
 import { setAttribute as _$setAttribute24 } from "solid-js/web";
-import { effect as _$effect44 } from "solid-js/web";
+import { effect as _$effect45 } from "solid-js/web";
 import { getNextElement as _$getNextElement48 } from "solid-js/web";
 import { Show as Show36, For as For6 } from "solid-js";
 var _tmpl$106 = /* @__PURE__ */ _$template48(`<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">`);
@@ -8296,7 +7949,7 @@ function CalendarCard(props) {
       },
       get children() {
         var _el$2 = _$getNextElement48(_tmpl$106), _el$3 = _el$2.firstChild;
-        _$effect44((_p$) => {
+        _$effect45((_p$) => {
           var _v$ = props.image, _v$2 = props.title;
           _v$ !== _p$.e && _$setAttribute24(_el$3, "src", _p$.e = _v$);
           _v$2 !== _p$.t && _$setAttribute24(_el$3, "alt", _p$.t = _v$2);
@@ -8358,7 +8011,7 @@ function CalendarCard(props) {
         return _el$0;
       }
     }), _el$21, _co$4);
-    _$effect44(() => _$className42(_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 ?? ""}`));
+    _$effect45(() => _$className42(_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$;
   })();
 }
@@ -8367,7 +8020,7 @@ function CalendarCard(props) {
 import { template as _$template49 } from "solid-js/web";
 import { className as _$className43 } from "solid-js/web";
 import { setAttribute as _$setAttribute25 } from "solid-js/web";
-import { effect as _$effect45 } from "solid-js/web";
+import { effect as _$effect46 } from "solid-js/web";
 import { getNextElement as _$getNextElement49 } from "solid-js/web";
 import { insert as _$insert45 } from "solid-js/web";
 var _tmpl$107 = /* @__PURE__ */ _$template49(`<div class=vui-project-card__tooltip><span>`);
@@ -8383,7 +8036,7 @@ function ProjectCard(props) {
     return _el$;
   })(), (() => {
     var _el$3 = _$getNextElement49(_tmpl$243);
-    _$effect45((_p$) => {
+    _$effect46((_p$) => {
       var _v$ = props.imageSrc, _v$2 = props.imageAlt ?? props.name;
       _v$ !== _p$.e && _$setAttribute25(_el$3, "src", _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute25(_el$3, "alt", _p$.t = _v$2);
@@ -8399,7 +8052,7 @@ function ProjectCard(props) {
     return (() => {
       var _el$4 = _$getNextElement49(_tmpl$337);
       _$insert45(_el$4, cardContent);
-      _$effect45((_p$) => {
+      _$effect46((_p$) => {
         var _v$3 = props.href, _v$4 = cardClasses();
         _v$3 !== _p$.e && _$setAttribute25(_el$4, "href", _p$.e = _v$3);
         _v$4 !== _p$.t && _$className43(_el$4, _p$.t = _v$4);
@@ -8414,7 +8067,7 @@ function ProjectCard(props) {
   return (() => {
     var _el$5 = _$getNextElement49(_tmpl$432);
     _$insert45(_el$5, cardContent);
-    _$effect45(() => _$className43(_el$5, cardClasses()));
+    _$effect46(() => _$className43(_el$5, cardClasses()));
     return _el$5;
   })();
 }
@@ -8579,4 +8232,4 @@ export {
   useLandmarkController,
   useToastContext
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map