@udixio/ui-react 2.8.3 → 2.8.4

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx as m, jsxs as Y, Fragment as me } from "react/jsx-runtime";
 import { clsx as Oe } from "clsx";
 import { extendTailwindMerge as ut } from "tailwind-merge";
-import Z, { useMemo as Me, useState as $, useEffect as R, useRef as W, useLayoutEffect as Ve, isValidElement as pe, cloneElement as xe, Children as dt, Fragment as ft } from "react";
+import Z, { useMemo as Me, useState as M, useEffect as $, useRef as W, useLayoutEffect as Ve, isValidElement as pe, cloneElement as xe, Children as dt, Fragment as ft } from "react";
 import { motion as q, AnimatePresence as se, useScroll as mt, useMotionValueEvent as Be, animate as ht } from "motion/react";
 import { animate as pt } from "motion";
 import { createPortal as Ye } from "react-dom";
@@ -40,22 +40,22 @@ function Lt(e) {
 }
 const $e = (e) => {
   const t = {};
-  e.classNameList.forEach((l) => {
+  e.classNameList.forEach((o) => {
     var r;
-    if (l)
-      if (typeof l == "string")
-        (t[r = e.default] ?? (t[r] = [])).push(l);
+    if (o)
+      if (typeof o == "string")
+        (t[r = e.default] ?? (t[r] = [])).push(o);
       else {
-        const s = l(e.states);
+        const s = o(e.states);
         Object.entries(s).map((c) => {
-          const [a, u] = c;
-          (t[a] ?? (t[a] = [])).push(u);
+          const [a, i] = c;
+          (t[a] ?? (t[a] = [])).push(i);
         });
       }
   });
   const n = t;
-  return Object.entries(t).map((l) => {
-    let [r, s] = l;
+  return Object.entries(t).map((o) => {
+    let [r, s] = o;
     s = s.reverse(), r == e.default && s.unshift("relative"), s.unshift(Lt(r)), n[r] = bt(...s);
   }), n;
 }, Q = (e, t) => (n) => $e({
@@ -84,36 +84,36 @@ const je = ({
   variant: e,
   disableTextMargins: t,
   disabled: n,
-  iconPosition: l,
+  iconPosition: o,
   icon: r,
   isActive: s,
   loading: c,
   shape: a,
-  onToggle: u,
-  size: o,
-  allowShapeTransformation: p
+  onToggle: i,
+  size: l,
+  allowShapeTransformation: h
 }) => ({
   button: y(
     " relative cursor-pointer group/button outline-none inline-block flex  justify-center   items-center  ",
-    o === "xSmall" && "text-label-large px-3 py-1.5 gap-1",
-    o === "small" && "text-label-large px-4 py-2.5 gap-2",
-    o === "medium" && "text-title-medium px-6 py-4 gap-2",
-    o === "large" && "text-headline-small px-12 py-8 gap-3",
-    o === "xLarge" && "text-headline-large px-16 py-12 gap-4",
+    l === "xSmall" && "text-label-large px-3 py-1.5 gap-1",
+    l === "small" && "text-label-large px-4 py-2.5 gap-2",
+    l === "medium" && "text-title-medium px-6 py-4 gap-2",
+    l === "large" && "text-headline-small px-12 py-8 gap-3",
+    l === "xLarge" && "text-headline-large px-16 py-12 gap-4",
     a === "rounded" && {
-      "rounded-[30px]": o === "xSmall" || o == "small",
-      "rounded-[40px]": o === "medium",
-      "rounded-[70px]": o === "large" || o == "xLarge"
+      "rounded-[30px]": l === "xSmall" || l == "small",
+      "rounded-[40px]": l === "medium",
+      "rounded-[70px]": l === "large" || l == "xLarge"
     },
-    (a === "squared" || p && s) && {
-      "rounded-[12px]": o === "xSmall" || o == "small",
-      "rounded-[16px]": o === "medium",
-      "rounded-[28px]": o === "large" || o == "xLarge"
+    (a === "squared" || h && s) && {
+      "rounded-[12px]": l === "xSmall" || l == "small",
+      "rounded-[16px]": l === "medium",
+      "rounded-[28px]": l === "large" || l == "xLarge"
     },
-    p && !n && {
-      "active:rounded-[12px]": o === "xSmall" || o == "small",
-      "active:rounded-[16px]": o === "medium",
-      "active:rounded-[28px]": o === "large" || o == "xLarge"
+    h && !n && {
+      "active:rounded-[12px]": l === "xSmall" || l == "small",
+      "active:rounded-[16px]": l === "medium",
+      "active:rounded-[28px]": l === "large" || l == "xLarge"
     },
     e === "elevated" && {
       "shadow-1 hover:shadow-2": !n,
@@ -123,8 +123,8 @@ const je = ({
     },
     e === "filled" && {
       "hover:shadow-1": !n,
-      "bg-surface-container text-on-surface-variant": !n && !s && u,
-      "bg-primary text-on-primary": !n && (s && u || !u),
+      "bg-surface-container text-on-surface-variant": !n && !s && i,
+      "bg-primary text-on-primary": !n && (s && i || !i),
       "text-on-surface/[38%]": n
     },
     e === "tonal" && {
@@ -148,11 +148,11 @@ const je = ({
         "text-on-surface/[0.38]": n
       },
       t && [
-        o === "xSmall" && "-mx-3 ",
-        o === "small" && "-mx-4 ",
-        o === "medium" && "-mx-6 ",
-        o === "large" && "-mx-12",
-        o === "xLarge" && "-mx-16 "
+        l === "xSmall" && "-mx-3 ",
+        l === "small" && "-mx-4 ",
+        l === "medium" && "-mx-6 ",
+        l === "large" && "-mx-12",
+        l === "xLarge" && "-mx-16 "
         // size === 'small' && ' -my-2.5',
         // size === 'medium' && ' -my-4',
         // size === 'large' && '-my-8',
@@ -167,29 +167,29 @@ const je = ({
   stateLayer: y(
     "overflow-hidden",
     a === "rounded" && {
-      "rounded-[30px]": o === "xSmall" || o == "small",
-      "rounded-[40px]": o === "medium",
-      "rounded-[70px]": o === "large" || o == "xLarge"
+      "rounded-[30px]": l === "xSmall" || l == "small",
+      "rounded-[40px]": l === "medium",
+      "rounded-[70px]": l === "large" || l == "xLarge"
     },
-    (a === "squared" || p && s) && {
-      "rounded-[12px]": o === "xSmall" || o == "small",
-      "rounded-[16px]": o === "medium",
-      "rounded-[28px]": o === "large" || o == "xLarge"
+    (a === "squared" || h && s) && {
+      "rounded-[12px]": l === "xSmall" || l == "small",
+      "rounded-[16px]": l === "medium",
+      "rounded-[28px]": l === "large" || l == "xLarge"
     },
-    p && !n && {
-      "group-active/button:rounded-[12px]": o === "xSmall" || o == "small",
-      "group-active/button:rounded-[16px]": o === "medium",
-      "group-active/button:rounded-[28px]": o === "large" || o == "xLarge"
+    h && !n && {
+      "group-active/button:rounded-[12px]": l === "xSmall" || l == "small",
+      "group-active/button:rounded-[16px]": l === "medium",
+      "group-active/button:rounded-[28px]": l === "large" || l == "xLarge"
     }
   ),
   label: y({ invisible: c }),
   icon: y(
     { invisible: c },
-    o === "xSmall" && "size-5",
-    o === "small" && "size-5",
-    o === "medium" && "size-6",
-    o === "large" && "size-8",
-    o === "xLarge" && "size-10"
+    l === "xSmall" && "size-5",
+    l === "small" && "size-5",
+    l === "medium" && "size-6",
+    l === "large" && "size-8",
+    l === "xLarge" && "size-10"
   )
 }), $n = Q(
   "button",
@@ -302,7 +302,7 @@ const je = ({
   variant: e,
   disabled: t,
   onToggle: n,
-  isActive: l,
+  isActive: o,
   size: r,
   width: s,
   shape: c,
@@ -319,7 +319,7 @@ const je = ({
       "rounded-[40px]": r === "medium",
       "rounded-[70px]": r === "large" || r == "xLarge"
     },
-    (c === "squared" || a && l) && {
+    (c === "squared" || a && o) && {
       "rounded-[12px]": r === "xSmall" || r == "small",
       "rounded-[16px]": r === "medium",
       "rounded-[28px]": r === "large" || r == "xLarge"
@@ -331,26 +331,26 @@ const je = ({
     },
     e === "filled" && [
       !t && {
-        "bg-surface-container": !l && !!n,
-        "bg-primary": l || !n
+        "bg-surface-container": !o && !!n,
+        "bg-primary": o || !n
       },
       !!t && "bg-on-surface/[0.12]"
     ],
     e === "tonal" && [
       !t && {
-        "bg-secondary-container text-on-secondary-container": !l && !!n,
-        "bg-secondary text-on-secondary": l || !n
+        "bg-secondary-container text-on-secondary-container": !o && !!n,
+        "bg-secondary text-on-secondary": o || !n
       },
       !!t && "bg-on-surface/[0.12]"
     ],
     e === "outlined" && [
       !t && {
-        "border border-outline": !l,
-        "border border-transparent bg-inverse-surface": l
+        "border border-outline": !o,
+        "border border-transparent bg-inverse-surface": o
       },
       !!t && {
-        "border border-on-surface/[0.12]": !l,
-        "border border-transparent bg-on-surface/[0.12]": l
+        "border border-on-surface/[0.12]": !o,
+        "border border-transparent bg-on-surface/[0.12]": o
       }
     ]
   ),
@@ -359,12 +359,12 @@ const je = ({
   ),
   stateLayer: y(
     "absolute top-0 left-0 h-full w-full overflow-hidden",
-    (c === "rounded" || c === "squared" && n && !t && l && a) && {
+    (c === "rounded" || c === "squared" && n && !t && o && a) && {
       "rounded-[30px]": r === "xSmall" || r == "small",
       "rounded-[40px]": r === "medium",
       "rounded-[70px]": r === "large" || r == "xLarge"
     },
-    (c === "squared" || c === "rounded" && n && !t && l && a) && {
+    (c === "squared" || c === "rounded" && n && !t && o && a) && {
       "rounded-[12px]": r === "xSmall" || r == "small",
       "rounded-[16px]": r === "medium",
       "rounded-[28px]": r === "large" || r == "xLarge"
@@ -376,20 +376,20 @@ const je = ({
     },
     !t && [
       e === "standard" && {
-        "state-on-surface-variant": !l,
-        "state-primary": l
+        "state-on-surface-variant": !o,
+        "state-primary": o
       },
       e === "filled" && {
-        "state-primary": !l && !!n,
-        "state-inverse-on-surface": l || !n
+        "state-primary": !o && !!n,
+        "state-inverse-on-surface": o || !n
       },
       e === "tonal" && {
-        "state-on-surface-variant": !l && !!n,
-        "state-on-secondary-container": l || !n
+        "state-on-surface-variant": !o && !!n,
+        "state-on-secondary-container": o || !n
       },
       e === "outlined" && {
-        "state-on-surface-variant": !l,
-        "state-on-primary": l
+        "state-on-surface-variant": !o,
+        "state-on-primary": o
       }
     ]
   ),
@@ -416,16 +416,16 @@ const je = ({
     ],
     !t && [
       e === "standard" && {
-        "text-on-surface-variant": !l,
-        "text-primary": l
+        "text-on-surface-variant": !o,
+        "text-primary": o
       },
       e === "filled" && {
-        "text-primary": !l && !!n,
-        "text-on-primary": l || !n
+        "text-primary": !o && !!n,
+        "text-on-primary": o || !n
       },
       e === "outlined" && {
-        "text-on-surface-variant": !l,
-        "text-inverse-on-surface": l
+        "text-on-surface-variant": !o,
+        "text-inverse-on-surface": o
       }
     ],
     !!t && "text-on-surface/[0.38]"
@@ -597,62 +597,62 @@ const je = ({
   isSelected: e,
   icon: t,
   label: n,
-  variant: l
+  variant: o
 }) => ({
   tab: y(
     "flex-1 group/tab outline-none flex px-4 justify-center items-center cursor-pointer",
     { "z-10": e },
-    !!(t && n) && l === "primary" && "h-16",
-    !(t && n && l === "primary") && "h-12"
+    !!(t && n) && o === "primary" && "h-16",
+    !(t && n && o === "primary") && "h-12"
   ),
   stateLayer: y(
     "absolute w-full h-full overflow-hidden left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2",
-    l === "primary" && {
+    o === "primary" && {
       "group-hover/tab:hover-state-on-surface group-focus-visible/tab:focus-state-on-surface": !e,
       "group-hover/tab:hover-state-primary group-focus-visible/tab:focus-state-primary": e
     },
-    l === "secondary" && "group-hover/tab:hover-state-on-surface group-focus-visible/tab:focus-state-on-surface"
+    o === "secondary" && "group-hover/tab:hover-state-on-surface group-focus-visible/tab:focus-state-on-surface"
   ),
   content: y(
     "flex  gap-0.5 h-full justify-center",
     {
-      relative: l == "primary"
+      relative: o == "primary"
     },
     {
       "": !!(n && !t)
     },
-    l === "primary" && "flex-col items-center",
-    l === "secondary" && {
+    o === "primary" && "flex-col items-center",
+    o === "secondary" && {
       "flex-col items-center": !(n && t),
       "flex-row items-center gap-2": !!(n && t)
     }
   ),
   icon: y(
     "h-6 w-6 p-0.5 !box-border",
-    l === "primary" && {
+    o === "primary" && {
       "text-on-surface-variant": !e,
       "text-primary": e
     },
-    l === "secondary" && {
+    o === "secondary" && {
       "text-on-surface-variant": !e,
       "text-on-surface": e
     }
   ),
   label: y(
     "text-title-small  text-nowrap",
-    l === "primary" && {
+    o === "primary" && {
       "text-on-surface-variant": !e,
       "text-primary": e
     },
-    l === "secondary" && {
+    o === "secondary" && {
       "text-on-surface-variant": !e,
       "text-on-surface": e
     }
   ),
   underline: y(
     "bg-primary  absolute w-full left-0 bottom-0",
-    l === "primary" && "h-[3px] rounded-t",
-    l === "secondary" && "h-0.5"
+    o === "primary" && "h-[3px] rounded-t",
+    o === "secondary" && "h-0.5"
   )
 }), Xn = Q("tab", rt), Pt = J("tab", rt), ot = ({ scrollable: e }) => ({
   tabs: y(
@@ -667,31 +667,31 @@ const je = ({
   disabled: e,
   leadingIcon: t,
   trailingIcon: n,
-  variant: l,
+  variant: o,
   errorText: r,
   isFocused: s,
   value: c,
   suffix: a,
-  textLine: u
+  textLine: i
 }) => ({
   textField: y({
     "opacity-[.38]": e
   }),
   content: y(
     "group/text-field  transition-border duration-200 relative  flex  items-center ",
-    { "h-14": u == "singleLine" },
+    { "h-14": i == "singleLine" },
     {
-      "border-on-surface-variant": !(r != null && r.length) && !s && l == "filled",
-      "border-outline": !(r != null && r.length) && !s && l == "outlined",
+      "border-on-surface-variant": !(r != null && r.length) && !s && o == "filled",
+      "border-outline": !(r != null && r.length) && !s && o == "outlined",
       "border-primary": !(r != null && r.length) && s,
       "border-error": !!(r != null && r.length)
     },
     { "bg-on-surface/[0.04]": e },
-    l == "filled" && [
+    o == "filled" && [
       "rounded-t overflow-hidden border-b",
       { "bg-surface-container-highest": !e }
     ],
-    l == "outlined" && [
+    o == "outlined" && [
       "border rounded box-border",
       {
         "border-[3px]": s
@@ -701,7 +701,7 @@ const je = ({
   stateLayer: y(
     "absolute -z-10 w-full h-full top-0 left-0",
     {
-      hidden: l == "outlined"
+      hidden: o == "outlined"
     },
     {
       "group-state-on-surface": !e,
@@ -724,12 +724,12 @@ const je = ({
     {
       "pr-0": !!a
     },
-    l == "filled" && " pb-2 pt-6",
-    l == "outlined" && "py-4 relative z-10"
+    o == "filled" && " pb-2 pt-6",
+    o == "outlined" && "py-4 relative z-10"
   ),
   activeIndicator: y(
     "absolute w-0 inset-x-0 border-rounded mx-auto bottom-0",
-    l == "filled" && [
+    o == "filled" && [
       "h-[2px] transition-all duration-300",
       { "bg-primary": !(r != null && r.length) },
       { "bg-error": !!(r != null && r.length) },
@@ -752,8 +752,8 @@ const je = ({
   }),
   suffix: y(
     "text-on-surface-variant pl-0 pr-4",
-    l == "filled" && " pb-2 pt-6",
-    l == "outlined" && "py-4 relative z-10"
+    o == "filled" && " pb-2 pt-6",
+    o == "outlined" && "py-4 relative z-10"
   )
 }), qn = Q(
   "textField",
@@ -794,11 +794,11 @@ const je = ({
   at
 ), ie = ({ icon: e, colors: t = [], className: n }) => {
   if (typeof e == "string") {
-    let o = e;
-    return t[0] && (o = o.replace(
+    let l = e;
+    return t[0] && (l = l.replace(
       /<svg([^>]*)>/,
       `<svg$1 fill="${t[0]}" color="${t[0]}">`
-    ), o = o.replace(
+    ), l = l.replace(
       /<path([^>]*?)>/g,
       '<path$1 fill="currentColor">'
     )), /* @__PURE__ */ m(
@@ -809,18 +809,18 @@ const je = ({
           n
         ),
         style: { color: t[0] || "inherit" },
-        dangerouslySetInnerHTML: { __html: o }
+        dangerouslySetInnerHTML: { __html: l }
       }
     );
   }
   if (e && typeof e == "object" && "src" in e) {
-    const o = e;
+    const l = e;
     return /* @__PURE__ */ m(
       "img",
       {
-        src: o.src,
-        width: o.width,
-        height: o.height,
+        src: l.src,
+        width: l.width,
+        height: l.height,
         className: y("size-5 box-content", n),
         style: {
           filter: t[0] ? "brightness(0) saturate(100%) invert(1)" : void 0
@@ -830,18 +830,18 @@ const je = ({
       }
     );
   }
-  const l = e;
-  if (!(l != null && l.prefix))
+  const o = e;
+  if (!(o != null && o.prefix))
     throw new Error(`Invalid icon type: ${typeof e}`);
-  const { icon: r } = l, [s, c, , , a] = r || [], u = (o) => {
-    switch (o.length) {
+  const { icon: r } = o, [s, c, , , a] = r || [], i = (l) => {
+    switch (l.length) {
       case 2:
         return {
-          "--fa-primary-color": o[0] || "inherit",
-          "--fa-secondary-color": o[1] || "inherit"
+          "--fa-primary-color": l[0] || "inherit",
+          "--fa-secondary-color": l[1] || "inherit"
         };
       case 1:
-        return { color: o[0] };
+        return { color: l[0] };
       default:
         return {};
     }
@@ -850,36 +850,36 @@ const je = ({
     "svg",
     {
       className: y("size-5 box-content", n),
-      style: { ...u(t) },
+      style: { ...i(t) },
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: `0 0 ${s} ${c}`,
       role: "img",
       "aria-hidden": "true",
-      children: typeof a == "string" ? /* @__PURE__ */ m("path", { className: "fill-current", d: a }) : a.map((o, p) => /* @__PURE__ */ m("path", { d: o }, p))
+      children: typeof a == "string" ? /* @__PURE__ */ m("path", { className: "fill-current", d: a }) : a.map((l, h) => /* @__PURE__ */ m("path", { d: l }, h))
     }
   );
 }, Vt = ({
   variant: e = "linear-determinate",
   value: t = 0,
   transitionDuration: n = 1e3,
-  className: l,
+  className: o,
   ...r
 }) => {
-  const [s, c] = $(t), [a] = $(1.5);
-  R(() => {
+  const [s, c] = M(t), [a] = M(1.5);
+  $(() => {
     t > 100 && (t = 100), t < 0 && (t = 0), c(t);
   }, [t]);
-  const [u, o] = $(!0), p = () => u ? a : a * 0.5;
-  R(() => {
+  const [i, l] = M(!0), h = () => i ? a : a * 0.5;
+  $(() => {
     if ((e === "circular-indeterminate" || e === "linear-indeterminate") && s !== 100) {
       const d = setInterval(() => {
-        c(u ? 10 : 90), o(!u);
-      }, p() * 1e3);
+        c(i ? 10 : 90), l(!i);
+      }, h() * 1e3);
       return () => clearInterval(d);
     }
-  }, [e, u, s]);
-  const [v, f] = $(!1);
-  R(() => {
+  }, [e, i, s]);
+  const [v, f] = M(!1);
+  $(() => {
     if (s >= 100) {
       const d = setTimeout(() => {
         f(!1);
@@ -890,15 +890,15 @@ const je = ({
     } else
       f(!0);
   }, [s, n]);
-  const i = Rt({
-    className: l,
+  const u = Rt({
+    className: o,
     variant: e,
     value: t,
     transitionDuration: n,
     isVisible: v
   });
   return /* @__PURE__ */ Y(me, { children: [
-    (e === "linear-determinate" || e == "linear-indeterminate") && /* @__PURE__ */ Y("div", { className: i.progressIndicator, ...r, children: [
+    (e === "linear-determinate" || e == "linear-indeterminate") && /* @__PURE__ */ Y("div", { className: u.progressIndicator, ...r, children: [
       /* @__PURE__ */ m(
         "div",
         {
@@ -906,7 +906,7 @@ const je = ({
             width: `${s}%`,
             transition: `width ${n}ms ease-in-out ${s == 100 ? ", max-height 200ms 0.5s ease-in-out" : ""}`
           },
-          className: i.track
+          className: u.track
         }
       ),
       /* @__PURE__ */ m(
@@ -916,7 +916,7 @@ const je = ({
             marginLeft: s != 100 ? "6px" : "0px",
             transition: `width ${n}ms ease-in-out ${s == 100 ? `, max-height 200ms 0.5s ease-in-out, margin-left ${n}ms ${n / 1.5}ms` : ""}`
           },
-          className: i.activeIndicator
+          className: u.activeIndicator
         }
       ),
       /* @__PURE__ */ m(
@@ -926,7 +926,7 @@ const je = ({
             width: "4 px",
             transition: `width ${n}ms ease-in-out, max-height 200ms 0.5s ease-in-out`
           },
-          className: i.stop
+          className: u.stop
         }
       )
     ] }),
@@ -940,10 +940,10 @@ const je = ({
         animate: { rotate: 270 },
         transition: {
           repeat: 1 / 0,
-          duration: p(),
+          duration: h(),
           ease: "linear"
         },
-        className: i.progressIndicator,
+        className: u.progressIndicator,
         ...r,
         children: /* @__PURE__ */ m(
           q.circle,
@@ -956,27 +956,27 @@ const je = ({
             },
             initial: "hidden",
             animate: "visible",
-            className: i.activeIndicator,
+            className: u.activeIndicator,
             variants: {
               hidden: {
-                pathLength: u ? 10 / 100 : 90 / 100
+                pathLength: i ? 10 / 100 : 90 / 100
               },
               visible: {
-                pathLength: u ? 90 / 100 : 10 / 100
+                pathLength: i ? 90 / 100 : 10 / 100
               }
             },
             transition: {
               pathLength: {
                 type: "tween",
                 ease: "linear",
-                duration: p(),
+                duration: h(),
                 bounce: 0
               }
             }
           }
         )
       },
-      u + ""
+      i + ""
     )
   ] });
 }, Yt = ({
@@ -1002,27 +1002,27 @@ const je = ({
         duration: 0.3
       }
     }
-  }, [l, r] = $(!0), [s, c] = $(!1), [a, u] = $({ x: 50, y: 50 });
-  R(() => {
+  }, [o, r] = M(!0), [s, c] = M(!1), [a, i] = M({ x: 50, y: 50 });
+  $(() => {
     s && (r(!0), r(!1));
-  }, [s]), R(() => {
+  }, [s]), $(() => {
     const d = t == null ? void 0 : t.current;
     if (d)
-      return d.addEventListener("mousedown", o), d.addEventListener("mouseup", v), d.addEventListener("mouseleave", p), () => {
-        d.removeEventListener("mousedown", o), d.removeEventListener("mouseup", v), d.removeEventListener("mouseleave", p);
+      return d.addEventListener("mousedown", l), d.addEventListener("mouseup", v), d.addEventListener("mouseleave", h), () => {
+        d.removeEventListener("mousedown", l), d.removeEventListener("mouseup", v), d.removeEventListener("mouseleave", h);
       };
   }, [t]);
-  const o = (d) => {
-    const h = t == null ? void 0 : t.current, w = h.getBoundingClientRect();
-    c(!0), u({
-      x: (d.clientX - w.left) / h.clientWidth * 100,
-      y: (d.clientY - w.top) / h.clientHeight * 100
+  const l = (d) => {
+    const p = t == null ? void 0 : t.current, w = p.getBoundingClientRect();
+    c(!0), i({
+      x: (d.clientX - w.left) / p.clientWidth * 100,
+      y: (d.clientY - w.top) / p.clientHeight * 100
     });
-  }, p = (d) => {
+  }, h = (d) => {
     c(!1);
   }, v = (d) => {
     c(!1);
-  }, f = `color-mix(in srgb, var(--state-color,_var(--color-${e})) 10%, transparent)`, i = {
+  }, f = `color-mix(in srgb, var(--state-color,_var(--color-${e})) 10%, transparent)`, u = {
     position: "absolute",
     inset: 0,
     width: "100%",
@@ -1035,10 +1035,10 @@ const je = ({
     background: `radial-gradient(ellipse at var(--x) var(--y), ${f} var(--r), transparent calc(var(--r) * 2))`,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ m(se, { mode: "wait", children: (s || !s && !l) && /* @__PURE__ */ m(
+  return /* @__PURE__ */ m(se, { mode: "wait", children: (s || !s && !o) && /* @__PURE__ */ m(
     q.div,
     {
-      style: i,
+      style: u,
       variants: n,
       initial: "initial",
       animate: "animate",
@@ -1076,221 +1076,221 @@ const je = ({
   })
 );
 function Xt(e, t) {
-  let n = 0, l = null, r = null;
+  let n = 0, o = null, r = null;
   const s = (c, a) => {
     n = Date.now(), t(c, a);
   };
   return (c, a) => {
-    const u = Date.now(), o = e - (u - n);
-    o <= 0 ? (l && (clearTimeout(l), l = null), s(c, a)) : (r = { v: c, o: a }, l || (l = setTimeout(() => {
-      l = null;
-      const p = r;
-      r = null, p && s(p.v, p.o);
-    }, o)));
+    const i = Date.now(), l = e - (i - n);
+    l <= 0 ? (o && (clearTimeout(o), o = null), s(c, a)) : (r = { v: c, o: a }, o || (o = setTimeout(() => {
+      o = null;
+      const h = r;
+      r = null, h && s(h.v, h.o);
+    }, l)));
   };
 }
 const jt = ({
   children: e,
   orientation: t = "vertical",
   scrollSize: n,
-  onScroll: l,
+  onScroll: o,
   className: r,
   draggable: s = !1,
   throttleDuration: c = 75,
   scroll: a,
-  setScroll: u
+  setScroll: i
 }) => {
   var le, ue;
-  const o = W(null), p = W(null), [v, f] = $({
+  const l = W(null), h = W(null), [v, f] = M({
     width: null,
     height: null
   });
-  R(() => {
-    if (!o.current) return;
-    const C = new ResizeObserver((N) => {
-      for (const D of N)
-        D.target === o.current && f({
+  $(() => {
+    if (!l.current) return;
+    const C = new ResizeObserver((L) => {
+      for (const D of L)
+        D.target === l.current && f({
           width: D.contentRect.width,
           height: D.contentRect.height
           // On observe aussi la hauteur maintenant
         });
     });
-    return C.observe(o.current), () => {
+    return C.observe(l.current), () => {
       C.disconnect();
     };
-  }, [o]);
-  const i = W(null), d = W(null), h = () => {
-    const C = p.current;
+  }, [l]);
+  const u = W(null), d = W(null), p = () => {
+    const C = h.current;
     return C ? {
       width: n ?? C.scrollWidth,
       height: n ?? C.scrollHeight
     } : null;
   }, w = () => {
-    const C = o.current;
+    const C = l.current;
     return C ? {
       width: C.clientWidth,
       height: C.clientHeight
       // Correction ici pour retourner la bonne hauteur
     } : null;
-  }, { scrollYProgress: b, scrollXProgress: g } = mt({
-    container: o
-  }), I = W(null);
-  I.current || (I.current = Xt(
+  }, { scrollYProgress: E, scrollXProgress: g } = mt({
+    container: l
+  }), b = W(null);
+  b.current || (b.current = Xt(
     c,
-    (C, N) => {
-      !d.current || !i.current || !o.current || (N === (t === "horizontal" ? "x" : "y") && (u == null || u(C)), l && (t === "horizontal" && N === "x" && l({
+    (C, L) => {
+      !d.current || !u.current || !l.current || (L === (t === "horizontal" ? "x" : "y") && (i == null || i(C)), o && (t === "horizontal" && L === "x" && o({
         scrollProgress: C,
-        scroll: C * (i.current.width - o.current.clientWidth),
-        scrollTotal: i.current.width - o.current.clientWidth,
+        scroll: C * (u.current.width - l.current.clientWidth),
+        scrollTotal: u.current.width - l.current.clientWidth,
         scrollVisible: d.current.width
-      }), t === "vertical" && N === "y" && l({
+      }), t === "vertical" && L === "y" && o({
         scrollProgress: C,
-        scroll: C * (i.current.height - o.current.clientHeight),
-        scrollTotal: i.current.height - o.current.clientHeight,
+        scroll: C * (u.current.height - l.current.clientHeight),
+        scrollTotal: u.current.height - l.current.clientHeight,
         scrollVisible: d.current.height
       })));
     }
   ));
-  const E = (C, N) => {
-    I.current && I.current(C, N);
+  const R = (C, L) => {
+    b.current && b.current(C, L);
   };
-  R(() => {
-    v.width && E(g.get(), "x"), v.height && E(b.get(), "y");
-  }, [v]), R(() => {
-    const C = o.current, N = p.current;
-    if (!C || !N || typeof a != "number") return;
-    const D = (F, j, X) => Math.min(X, Math.max(j, F));
+  $(() => {
+    v.width && R(g.get(), "x"), v.height && R(E.get(), "y");
+  }, [v]), $(() => {
+    const C = l.current, L = h.current;
+    if (!C || !L || typeof a != "number") return;
+    const D = (H, j, X) => Math.min(X, Math.max(j, H));
     if (t === "horizontal") {
-      const F = Math.max(0, (n ?? N.scrollWidth) - C.clientWidth);
-      C.scrollLeft = D(a * F, 0, F);
+      const H = Math.max(0, (n ?? L.scrollWidth) - C.clientWidth);
+      C.scrollLeft = D(a * H, 0, H);
     } else {
-      const F = Math.max(0, (n ?? N.scrollHeight) - C.clientHeight);
-      C.scrollTop = D(a * F, 0, F);
+      const H = Math.max(0, (n ?? L.scrollHeight) - C.clientHeight);
+      C.scrollTop = D(a * H, 0, H);
     }
   }, [a, t, n]), Be(g, "change", (C) => {
-    E(C, "x");
-  }), Be(b, "change", (C) => {
-    E(C, "y");
+    R(C, "x");
+  }), Be(E, "change", (C) => {
+    R(C, "y");
   });
-  const [A, L] = $(!1);
+  const [A, N] = M(!1);
   Ve(() => {
-    A || !d.current || !i.current || !l || (l({
+    A || !d.current || !u.current || !o || (o({
       scrollProgress: 0,
       scroll: 0,
-      scrollTotal: t == "vertical" ? i.current.height : i.current.width,
+      scrollTotal: t == "vertical" ? u.current.height : u.current.width,
       scrollVisible: t == "vertical" ? d.current.height : d.current.width
-    }), L(!0));
-  }, [d, i, l]), i.current = h(), d.current = w();
-  const [V, H] = $(!1), M = Ut({
-    isDragging: V,
+    }), N(!0));
+  }, [d, u, o]), u.current = p(), d.current = w();
+  const [F, O] = M(!1), I = Ut({
+    isDragging: F,
     children: e,
     className: r,
-    onScroll: l,
+    onScroll: o,
     orientation: t,
     scrollSize: n,
     draggable: s,
     throttleDuration: c
-  }), [x, S] = $(0), [O, G] = $(0), te = (C) => {
+  }), [x, S] = M(0), [V, G] = M(0), te = (C) => {
     if (!s) return;
-    const N = o.current;
-    if (!N || x == null) return;
-    const F = (C.pageX - N.offsetLeft - x) * 1.5;
-    N.scrollLeft = O - F;
+    const L = l.current;
+    if (!L || x == null) return;
+    const H = (C.pageX - L.offsetLeft - x) * 1.5;
+    L.scrollLeft = V - H;
   }, _ = (C) => {
-    const N = o.current;
-    N && (H(!0), S(C.pageX - N.offsetLeft), G(N.scrollLeft));
+    const L = l.current;
+    L && (O(!0), S(C.pageX - L.offsetLeft), G(L.scrollLeft));
   }, ne = (C) => {
-    V && (C.preventDefault(), te(C));
+    F && (C.preventDefault(), te(C));
   }, B = () => {
-    H(!1);
+    O(!1);
   }, k = () => {
-    H(!1);
+    O(!1);
   }, U = (C) => {
     C.preventDefault();
   }, K = W(null);
-  return R(() => () => {
+  return $(() => () => {
     K.current && clearTimeout(K.current);
-  }, []), R(() => {
-    const C = o.current;
+  }, []), $(() => {
+    const C = l.current;
     if (!C) return;
-    const N = (D) => {
+    const L = (D) => {
       var re, ae, de, ce;
-      const F = D.detail, j = o.current;
-      if (!j || !F) return;
-      const X = F.orientation ?? t;
-      if (typeof F.progress == "number")
+      const H = D.detail, j = l.current;
+      if (!j || !H) return;
+      const X = H.orientation ?? t;
+      if (typeof H.progress == "number")
         if (X === "horizontal") {
           const oe = Math.max(
             0,
-            (((re = i.current) == null ? void 0 : re.width) ?? 0) - j.clientWidth
+            (((re = u.current) == null ? void 0 : re.width) ?? 0) - j.clientWidth
           );
-          j.scrollLeft = Math.min(oe, Math.max(0, F.progress * oe));
+          j.scrollLeft = Math.min(oe, Math.max(0, H.progress * oe));
         } else {
           const oe = Math.max(
             0,
-            (((ae = i.current) == null ? void 0 : ae.height) ?? 0) - j.clientHeight
+            (((ae = u.current) == null ? void 0 : ae.height) ?? 0) - j.clientHeight
           );
-          j.scrollTop = Math.min(oe, Math.max(0, F.progress * oe));
+          j.scrollTop = Math.min(oe, Math.max(0, H.progress * oe));
         }
-      else if (typeof F.scroll == "number")
+      else if (typeof H.scroll == "number")
         if (X === "horizontal") {
           const oe = Math.max(
             0,
-            (((de = i.current) == null ? void 0 : de.width) ?? 0) - j.clientWidth
+            (((de = u.current) == null ? void 0 : de.width) ?? 0) - j.clientWidth
           );
-          j.scrollLeft = Math.min(oe, Math.max(0, F.scroll));
+          j.scrollLeft = Math.min(oe, Math.max(0, H.scroll));
         } else {
           const oe = Math.max(
             0,
-            (((ce = i.current) == null ? void 0 : ce.height) ?? 0) - j.clientHeight
+            (((ce = u.current) == null ? void 0 : ce.height) ?? 0) - j.clientHeight
           );
-          j.scrollTop = Math.min(oe, Math.max(0, F.scroll));
+          j.scrollTop = Math.min(oe, Math.max(0, H.scroll));
         }
     };
-    return C.addEventListener("udx:customScroll:set", N), () => {
-      C.removeEventListener("udx:customScroll:set", N);
+    return C.addEventListener("udx:customScroll:set", L), () => {
+      C.removeEventListener("udx:customScroll:set", L);
     };
   }, [t]), /* @__PURE__ */ Y(
     "div",
     {
-      className: M.customScroll,
-      ref: o,
+      className: I.customScroll,
+      ref: l,
       onMouseDown: _,
       onMouseMove: ne,
       onMouseUp: B,
       onMouseLeave: k,
       onDragStart: U,
       onScroll: (C) => {
-        V || (S(null), H(!0), K.current && clearTimeout(K.current), K.current = setTimeout(() => {
-          H(!1);
+        F || (S(null), O(!0), K.current && clearTimeout(K.current), K.current = setTimeout(() => {
+          O(!1);
         }, 1e3));
       },
       children: [
         /* @__PURE__ */ m(
           "div",
           {
-            ref: p,
+            ref: h,
             style: t === "vertical" ? { height: ((le = d == null ? void 0 : d.current) == null ? void 0 : le.height) ?? "100%" } : { width: ((ue = d == null ? void 0 : d.current) == null ? void 0 : ue.width) ?? "100%" },
-            className: M.track,
+            className: I.track,
             children: e
           }
         ),
-        d.current && i.current && /* @__PURE__ */ Y(me, { children: [
-          t === "vertical" && i.current.height > d.current.height && /* @__PURE__ */ m(
+        d.current && u.current && /* @__PURE__ */ Y(me, { children: [
+          t === "vertical" && u.current.height > d.current.height && /* @__PURE__ */ m(
             q.div,
             {
               className: "flex-none",
               style: {
-                height: i.current.height - d.current.height
+                height: u.current.height - d.current.height
               }
             }
           ),
-          t === "horizontal" && i.current.width > d.current.width && /* @__PURE__ */ m(
+          t === "horizontal" && u.current.width > d.current.width && /* @__PURE__ */ m(
             q.div,
             {
               className: "flex-none",
               style: {
-                width: i.current.width - d.current.width
+                width: u.current.width - d.current.width
               }
             }
           )
@@ -1303,68 +1303,68 @@ const jt = ({
   el: t,
   touch: n = !0
 }) => {
-  const l = W(null), r = W(0), s = W(0);
-  R(() => {
+  const o = W(null), r = W(0), s = W(0);
+  $(() => {
     if (!t) return;
     r.current = t.scrollTop, s.current = t.scrollLeft;
-    const c = (i) => {
-      e == null || e(i);
-    }, a = (i) => {
-      let d = i;
+    const c = (u) => {
+      e == null || e(u);
+    }, a = (u) => {
+      let d = u;
       for (; d && d !== document.body && d !== document.documentElement; ) {
-        const h = window.getComputedStyle(d), w = h.overflowY || h.overflow;
+        const p = window.getComputedStyle(d), w = p.overflowY || p.overflow;
         if ((w === "auto" || w === "scroll") && d.scrollHeight > d.clientHeight) return d;
         d = d.parentElement;
       }
       return null;
-    }, u = (i) => {
-      const d = i.target, h = a(d);
-      if (h && h !== t) {
-        const w = h.scrollTop < h.scrollHeight - h.clientHeight, b = h.scrollTop > 0;
-        if (i.deltaY > 0 && w || i.deltaY < 0 && b)
+    }, i = (u) => {
+      const d = u.target, p = a(d);
+      if (p && p !== t) {
+        const w = p.scrollTop < p.scrollHeight - p.clientHeight, E = p.scrollTop > 0;
+        if (u.deltaY > 0 && w || u.deltaY < 0 && E)
           return;
       }
-      i.preventDefault(), c({
+      u.preventDefault(), c({
         type: "intent",
         source: "wheel",
-        deltaX: i.deltaX,
-        deltaY: i.deltaY,
-        originalEvent: i
+        deltaX: u.deltaX,
+        deltaY: u.deltaY,
+        originalEvent: u
       });
-    }, o = (i) => {
+    }, l = (u) => {
       if (!n) return;
-      const d = i.touches[0];
-      d && (l.current = { x: d.clientX, y: d.clientY });
-    }, p = (i) => {
+      const d = u.touches[0];
+      d && (o.current = { x: d.clientX, y: d.clientY });
+    }, h = (u) => {
       if (!n) return;
-      const d = i.touches[0];
-      if (!d || !l.current) return;
-      const h = l.current.x - d.clientX, w = l.current.y - d.clientY, b = i.target, g = a(b);
+      const d = u.touches[0];
+      if (!d || !o.current) return;
+      const p = o.current.x - d.clientX, w = o.current.y - d.clientY, E = u.target, g = a(E);
       if (g && g !== t) {
-        const I = g.scrollTop < g.scrollHeight - g.clientHeight, E = g.scrollTop > 0;
-        if (w > 0 && I || w < 0 && E) {
-          l.current = { x: d.clientX, y: d.clientY };
+        const b = g.scrollTop < g.scrollHeight - g.clientHeight, R = g.scrollTop > 0;
+        if (w > 0 && b || w < 0 && R) {
+          o.current = { x: d.clientX, y: d.clientY };
           return;
         }
       }
-      i.preventDefault(), l.current = { x: d.clientX, y: d.clientY }, c({
+      u.preventDefault(), o.current = { x: d.clientX, y: d.clientY }, c({
         type: "intent",
         source: "touch",
-        deltaX: h,
+        deltaX: p,
         deltaY: w,
-        originalEvent: i
+        originalEvent: u
       });
     }, v = () => {
-      n && (l.current = null);
-    }, f = (i) => {
-      const h = t.clientHeight * 0.9;
-      let w = 0, b = 0;
-      switch (i.key) {
+      n && (o.current = null);
+    }, f = (u) => {
+      const p = t.clientHeight * 0.9;
+      let w = 0, E = 0;
+      switch (u.key) {
         case "ArrowDown":
-          b = 40;
+          E = 40;
           break;
         case "ArrowUp":
-          b = -40;
+          E = -40;
           break;
         case "ArrowRight":
           w = 40;
@@ -1373,33 +1373,33 @@ const jt = ({
           w = -40;
           break;
         case "PageDown":
-          b = h;
+          E = p;
           break;
         case "PageUp":
-          b = -h;
+          E = -p;
           break;
         case "Home":
-          b = Number.NEGATIVE_INFINITY;
+          E = Number.NEGATIVE_INFINITY;
           break;
         case "End":
-          b = Number.POSITIVE_INFINITY;
+          E = Number.POSITIVE_INFINITY;
           break;
         case " ":
-          b = i.shiftKey ? -h : h;
+          E = u.shiftKey ? -p : p;
           break;
         default:
           return;
       }
-      i.preventDefault(), c({
+      u.preventDefault(), c({
         type: "intent",
         source: "keyboard",
         deltaX: w,
-        deltaY: b,
-        originalEvent: i
+        deltaY: E,
+        originalEvent: u
       });
     };
-    return t.addEventListener("wheel", u, { passive: !1 }), t.addEventListener("touchstart", o, { passive: !0 }), t.addEventListener("touchmove", p, { passive: !1 }), t.addEventListener("touchend", v, { passive: !0 }), t.addEventListener("keydown", f), () => {
-      t.removeEventListener("wheel", u), t.removeEventListener("touchstart", o), t.removeEventListener("touchmove", p), t.removeEventListener("touchend", v), t.removeEventListener("keydown", f);
+    return t.addEventListener("wheel", i, { passive: !1 }), t.addEventListener("touchstart", l, { passive: !0 }), t.addEventListener("touchmove", h, { passive: !1 }), t.addEventListener("touchend", v, { passive: !0 }), t.addEventListener("keydown", f), () => {
+      t.removeEventListener("wheel", i), t.removeEventListener("touchstart", l), t.removeEventListener("touchmove", h), t.removeEventListener("touchend", v), t.removeEventListener("keydown", f);
     };
   }, [e]);
 }, Kn = ({
@@ -1407,52 +1407,52 @@ const jt = ({
   orientation: t = "vertical",
   throttleDuration: n = 25
 }) => {
-  const [l, r] = $(0), [s, c] = $(), a = W(!1), u = W(), o = W(0);
-  R(() => {
+  const [o, r] = M(0), [s, c] = M(), a = W(!1), i = W(), l = W(0);
+  $(() => {
     c(document);
     const f = document.documentElement.scrollTop;
-    r(f), o.current = f;
-  }, []), R(() => {
+    r(f), l.current = f;
+  }, []), $(() => {
     const f = () => {
       a.current || r(document.documentElement.scrollTop);
     };
     return s == null || s.addEventListener("scroll", f), () => {
-      u.current && clearTimeout(u.current), s == null || s.removeEventListener("scroll", f);
+      i.current && clearTimeout(i.current), s == null || s.removeEventListener("scroll", f);
     };
   }, [s]);
-  const p = W(), v = W(null);
-  return R(() => {
-    const f = l;
+  const h = W(), v = W(null);
+  return $(() => {
+    const f = o;
     if (v.current && (v.current.stop(), v.current = null), !a.current) {
-      p.current = f;
+      h.current = f;
       return;
     }
-    return v.current = pt(p.current ?? f, f, {
+    return v.current = pt(h.current ?? f, f, {
       duration: ((e == null ? void 0 : e.duration) ?? 500) / 1e3,
       ease: (e == null ? void 0 : e.ease) ?? "easeOut",
-      onUpdate: (i) => {
-        u.current && clearTimeout(u.current), p.current = i;
-        const d = document.documentElement, h = Math.round(i * 1e3) / 1e3, w = o.current;
-        Math.abs(h - w) < 0.1 || (o.current = h, a.current && d.scrollTo({ top: h }));
+      onUpdate: (u) => {
+        i.current && clearTimeout(i.current), h.current = u;
+        const d = document.documentElement, p = Math.round(u * 1e3) / 1e3, w = l.current;
+        Math.abs(p - w) < 0.1 || (l.current = p, a.current && d.scrollTo({ top: p }));
       },
       onComplete: () => {
-        u.current = setTimeout(() => {
+        i.current = setTimeout(() => {
           a.current = !1;
         }, 300), v.current = null;
       }
     }), () => {
       v.current && (v.current.stop(), v.current = null);
     };
-  }, [l]), s ? /* @__PURE__ */ m(
+  }, [o]), s ? /* @__PURE__ */ m(
     qt,
     {
       touch: !1,
       el: s,
       onScroll: (f) => {
-        if ("deltaY" in f && f.deltaY !== 0 && s && l !== null) {
-          let i = l + f.deltaY;
+        if ("deltaY" in f && f.deltaY !== 0 && s && o !== null) {
+          let u = o + f.deltaY;
           const d = s.querySelector("html");
-          d && (i = Math.min(i, d.scrollHeight - d.clientHeight)), i = Math.max(i, 0), r(i), a.current = !0;
+          d && (u = Math.min(u, d.scrollHeight - d.clientHeight)), u = Math.max(u, 0), r(u), a.current = !0;
         }
       }
     }
@@ -1461,27 +1461,27 @@ const jt = ({
   style: e,
   colorName: t,
   stateClassName: n = "state-ripple-group",
-  className: l
+  className: o
 }) => {
-  const r = W(null), s = W(null), [c, a] = $(!1), u = Kt({
+  const r = W(null), s = W(null), [c, a] = M(!1), i = Kt({
     isClient: c,
     stateClassName: n,
-    className: l,
+    className: o,
     colorName: t
   });
-  return R(() => {
+  return $(() => {
     if (r.current && n !== "state-layer") {
-      const o = n.includes("[") ? n.split("[")[1].split("]")[0] : "group", p = r.current.closest(
-        `.${o}:not(.${o} .${o})`
+      const l = n.includes("[") ? n.split("[")[1].split("]")[0] : "group", h = r.current.closest(
+        `.${l}:not(.${l} .${l})`
       );
-      s.current = p;
+      s.current = h;
     }
     a(!0);
   }, []), /* @__PURE__ */ m(
     "div",
     {
       ref: r,
-      className: u.stateLayer,
+      className: i.stateLayer,
       style: {
         "--state-color": `var(--default-color, var(--color-${t}))`,
         ...e
@@ -1504,11 +1504,11 @@ const jt = ({
   targetRef: e,
   children: t
 }) => {
-  const [n, l] = $(null), r = W(null), s = () => {
+  const [n, o] = M(null), r = W(null), s = () => {
     const c = e.current;
     if (!c) return;
     const a = c.getBoundingClientRect();
-    l({
+    o({
       position: "fixed",
       top: a.top,
       left: a.left,
@@ -1520,7 +1520,7 @@ const jt = ({
       // personnalise si besoin
     });
   };
-  return R(() => {
+  return $(() => {
     const c = e.current;
     if (c)
       return s(), window.addEventListener("scroll", s, !0), window.addEventListener("resize", s), r.current = new ResizeObserver(s), r.current.observe(c), () => {
@@ -1537,33 +1537,33 @@ const Gn = ({
   throttleDelay: t = 100,
   // Délai par défaut de 300ms
   onLoad: n,
-  loadTheme: l = !1
+  loadTheme: o = !1
 }) => {
-  const [r, s] = $(null);
-  R(() => {
+  const [r, s] = M(null);
+  $(() => {
     (async () => {
-      const f = await yt(e, l);
+      const f = await yt(e, o);
       s(f);
     })();
   }, []);
-  const [c, a] = $(null), u = W(null), o = W(0), p = W(null);
-  R(() => {
+  const [c, a] = M(null), i = W(null), l = W(0), h = W(null);
+  $(() => {
     if (!r) return;
     const f = {
       ...e,
       // Assurer la compatibilité avec l'API qui attend sourceColorHex
       sourceColor: e.sourceColor
-    }, i = Date.now(), d = i - o.current, h = async (w) => {
+    }, u = Date.now(), d = u - l.current, p = async (w) => {
       await v(w);
     };
-    if (o.current === 0 || d >= t)
-      u.current && (clearTimeout(u.current), u.current = null), p.current = null, o.current = i, h(f);
-    else if (p.current = f, !u.current) {
+    if (l.current === 0 || d >= t)
+      i.current && (clearTimeout(i.current), i.current = null), h.current = null, l.current = u, p(f);
+    else if (h.current = f, !i.current) {
       const w = Math.max(0, t - d);
-      u.current = setTimeout(async () => {
-        u.current = null;
-        const b = p.current;
-        p.current = null, b && (o.current = Date.now(), await h(b));
+      i.current = setTimeout(async () => {
+        i.current = null;
+        const E = h.current;
+        h.current = null, E && (l.current = Date.now(), await p(E));
       }, w);
     }
     return () => {
@@ -1575,11 +1575,11 @@ const Gn = ({
     if (!r)
       return;
     r.context.update(f), await r.load();
-    const i = r == null ? void 0 : r.plugins.getPlugin(Ue).getInstance().outputCss;
-    a(i), n == null || n(r);
+    const u = r == null ? void 0 : r.plugins.getPlugin(Ue).getInstance().outputCss;
+    a(u), n == null || n(r);
   };
-  return R(() => () => {
-    u.current && (clearTimeout(u.current), u.current = null);
+  return $(() => () => {
+    i.current && (clearTimeout(i.current), i.current = null);
   }, []), c ? /* @__PURE__ */ m("style", { dangerouslySetInnerHTML: { __html: c } }) : null;
 };
 function Zt() {
@@ -1615,8 +1615,8 @@ function Se(e, t) {
   }
   const n = e.getAttribute(`data-${t}-start`);
   n && e.style.setProperty(`--${t}-range-start`, n);
-  const l = e.getAttribute(`data-${t}-end`);
-  l && e.style.setProperty(`--${t}-range-end`, l);
+  const o = e.getAttribute(`data-${t}-end`);
+  o && e.style.setProperty(`--${t}-range-end`, o);
   const r = e.hasAttribute(`data-${t}-paused`) || e.classList.contains(`${t}-paused`), s = e.hasAttribute(`data-${t}-run`) || e.classList.contains(`${t}-run`);
   !r && !s && e.setAttribute(`data-${t}-run`, "");
 }
@@ -1625,12 +1625,12 @@ function Ie(e = document, t) {
     e.querySelectorAll(
       `[class*="${t}-"][class*="-scroll"]`
     )
-  ).filter((l) => Re(l));
+  ).filter((o) => Re(o));
 }
 function Tt(e = document, t) {
   const n = Array.from(
     e.querySelectorAll(`[class*="${t}-"]`)
-  ), l = /* @__PURE__ */ new Set([
+  ), o = /* @__PURE__ */ new Set([
     `${t}-run`,
     `${t}-in`,
     `${t}-out`,
@@ -1648,7 +1648,7 @@ function Tt(e = document, t) {
     if (!(r instanceof HTMLElement)) return !1;
     const s = r.classList;
     return s.contains(`${t}-in`) || s.contains(`${t}-out`) || Array.from(s).some(
-      (u) => u.startsWith(`${t}-`) && !u.includes("scroll") && !l.has(u)
+      (i) => i.startsWith(`${t}-`) && !i.includes("scroll") && !o.has(i)
     ) ? !0 : !Re(r);
   });
 }
@@ -1661,8 +1661,8 @@ function We(e, t, n) {
   e.setAttribute(`data-${t}-run`, ""), e.setAttribute(`data-${t}-${n}-run`, "");
 }
 function Ae(e, t, n) {
-  const l = e.style.animationName;
-  e.style.animationName = "none", e.removeAttribute(`data-${t}-run`), n ? e.removeAttribute(`data-${t}-${n}-run`) : (e.removeAttribute(`data-${t}-in-run`), e.removeAttribute(`data-${t}-out-run`)), e.offsetWidth, e.style.animationName = l;
+  const o = e.style.animationName;
+  e.style.animationName = "none", e.removeAttribute(`data-${t}-run`), n ? e.removeAttribute(`data-${t}-${n}-run`) : (e.removeAttribute(`data-${t}-in-run`), e.removeAttribute(`data-${t}-out-run`)), e.offsetWidth, e.style.animationName = o;
 }
 const en = [0, 0.2], Pe = /* @__PURE__ */ new WeakSet();
 function He(e, t) {
@@ -1670,58 +1670,58 @@ function He(e, t) {
   Pe.add(e);
   const n = (r) => {
     r.target === e && (e.hasAttribute(`data-${t}-in-run`) || e.hasAttribute(`data-${t}-out-run`)) && e.setAttribute(`data-${t}-animating`, "");
-  }, l = (r) => {
+  }, o = (r) => {
     r.target === e && e.removeAttribute(`data-${t}-animating`);
   };
-  e.addEventListener("animationstart", n), e.addEventListener("animationend", l), e.addEventListener("animationcancel", l);
+  e.addEventListener("animationstart", n), e.addEventListener("animationend", o), e.addEventListener("animationcancel", o);
 }
 function st(e = {}) {
   const { prefix: t = "anim", once: n = !0 } = e;
   if (Qt())
     return () => {
     };
-  const l = Zt(), r = /* @__PURE__ */ new WeakSet();
+  const o = Zt(), r = /* @__PURE__ */ new WeakSet();
   let s = typeof window < "u" && (window.pageYOffset || window.scrollY) || 0, c = !0;
   const a = () => {
-    const i = window.pageYOffset || window.scrollY || 0;
-    c = i >= s, s = i;
+    const u = window.pageYOffset || window.scrollY || 0;
+    c = u >= s, s = u;
   };
   typeof window < "u" && window.addEventListener("scroll", a, { passive: !0 });
-  const u = new IntersectionObserver(
-    (i) => {
-      for (const d of i) {
-        const h = d.target;
-        if (!De(h) || h.hasAttribute(`data-${t}-animating`)) continue;
-        const w = zt(h.classList, t);
-        d.isIntersecting ? (w && Ae(h, t, "out"), We(h, t, "in"), n && u.unobserve(h)) : n || (c || Ae(h, t, "in"), w && We(h, t, "out"));
+  const i = new IntersectionObserver(
+    (u) => {
+      for (const d of u) {
+        const p = d.target;
+        if (!De(p) || p.hasAttribute(`data-${t}-animating`)) continue;
+        const w = zt(p.classList, t);
+        d.isIntersecting ? (w && Ae(p, t, "out"), We(p, t, "in"), n && i.unobserve(p)) : n || (c || Ae(p, t, "in"), w && We(p, t, "out"));
       }
     },
     { threshold: en }
-  ), o = (i) => {
-    const d = Tt(i || document, t);
-    for (const h of d)
-      r.has(h) || (r.add(h), u.observe(h), He(h, t));
+  ), l = (u) => {
+    const d = Tt(u || document, t);
+    for (const p of d)
+      r.has(p) || (r.add(p), i.observe(p), He(p, t));
   };
-  o();
-  let p, v = null, f = null;
-  if (l)
+  l();
+  let h, v = null, f = null;
+  if (o)
     (() => {
       f == null && (f = requestAnimationFrame(() => {
         f = null;
         const d = Ie(void 0, t);
-        for (const h of d) Se(h, t);
+        for (const p of d) Se(p, t);
       }));
     })(), v = new MutationObserver((d) => {
-      for (const h of d)
-        if (h.type === "attributes") {
-          const w = h.target;
-          w instanceof HTMLElement && (Se(w, t), De(w) && (r.has(w) || (r.add(w), u.observe(w), He(w, t))));
-        } else if (h.type === "childList" && h.addedNodes && h.addedNodes.length) {
-          for (const w of Array.from(h.addedNodes))
+      for (const p of d)
+        if (p.type === "attributes") {
+          const w = p.target;
+          w instanceof HTMLElement && (Se(w, t), De(w) && (r.has(w) || (r.add(w), i.observe(w), He(w, t))));
+        } else if (p.type === "childList" && p.addedNodes && p.addedNodes.length) {
+          for (const w of Array.from(p.addedNodes))
             if (w instanceof HTMLElement) {
-              const b = Ie(w, t);
-              for (const g of b) Se(g, t);
-              o(w);
+              const E = Ie(w, t);
+              for (const g of E) Se(g, t);
+              l(w);
             }
         }
     }), v.observe(document.documentElement, {
@@ -1736,19 +1736,19 @@ function st(e = {}) {
         `data-${t}-paused`,
         `data-${t}-run`
       ]
-    }), p = () => {
+    }), h = () => {
       f != null && cancelAnimationFrame(f), v && v.disconnect();
     };
   else {
-    let i;
-    Ie(void 0, t).length > 0 && import("./scrollDriven-AP2yWhzi.js").then((h) => {
-      i = h.initScrollViewFallback({ once: n });
-    }), p = () => {
-      typeof i == "function" && i();
+    let u;
+    Ie(void 0, t).length > 0 && import("./scrollDriven-AP2yWhzi.js").then((p) => {
+      u = p.initScrollViewFallback({ once: n });
+    }), h = () => {
+      typeof u == "function" && u();
     };
   }
   return () => {
-    p && p(), typeof window < "u" && window.removeEventListener("scroll", a), u.disconnect();
+    h && h(), typeof window < "u" && window.removeEventListener("scroll", a), i.disconnect();
   };
 }
 const Jn = st, Zn = st;
@@ -1763,93 +1763,93 @@ const ct = ({
   variant: e = "filled",
   disabled: t = !1,
   icon: n,
-  href: l,
+  href: o,
   label: r,
   disableTextMargins: s,
   className: c,
   iconPosition: a = "left",
-  loading: u = !1,
-  shape: o = "rounded",
-  onClick: p,
+  loading: i = !1,
+  shape: l = "rounded",
+  onClick: h,
   onToggle: v,
   activated: f,
-  ref: i,
+  ref: u,
   size: d = "medium",
-  allowShapeTransformation: h = !0,
+  allowShapeTransformation: p = !0,
   transition: w,
-  children: b,
+  children: E,
   ...g
 }) => {
-  if (b && (r = b), !r)
+  if (E && (r = E), !r)
     throw new Error(
       "Button component requires either a label prop or children content"
     );
   e = tn(e);
-  const I = l ? "a" : "button", E = W(null), A = i || E, [L, V] = Z.useState(f);
-  R(() => {
-    V(f);
+  const b = o ? "a" : "button", R = W(null), A = u || R, [N, F] = Z.useState(f);
+  $(() => {
+    F(f);
   }, [f]), w = { duration: 0.3, ...w };
-  let H;
-  v ? v && (H = (S) => {
+  let O;
+  v ? v && (O = (S) => {
     t && S.preventDefault();
-    const O = !L;
-    V(O), v(O);
-  }) : H = (S) => {
-    t && S.preventDefault(), p && p(S);
+    const V = !N;
+    F(V), v(V);
+  }) : O = (S) => {
+    t && S.preventDefault(), h && h(S);
   };
-  const M = Nt({
-    allowShapeTransformation: h,
+  const I = Nt({
+    allowShapeTransformation: p,
     size: d,
     disableTextMargins: s,
-    shape: o,
-    href: l,
+    shape: l,
+    href: o,
     disabled: t,
     icon: n,
     iconPosition: a,
-    loading: u,
+    loading: i,
     variant: e,
     transition: w,
     className: c,
-    isActive: L ?? !1,
+    isActive: N ?? !1,
     onToggle: v,
-    activated: L,
+    activated: N,
     label: r,
     children: r
-  }), x = n ? /* @__PURE__ */ m(ie, { icon: n, className: M.icon }) : /* @__PURE__ */ m(me, {});
+  }), x = n ? /* @__PURE__ */ m(ie, { icon: n, className: I.icon }) : /* @__PURE__ */ m(me, {});
   return /* @__PURE__ */ Y(
-    I,
+    b,
     {
       ref: A,
-      href: l,
-      className: M.button,
+      href: o,
+      className: I.button,
       ...g,
-      onClick: H,
+      onClick: O,
       disabled: t,
-      "aria-pressed": v ? L : void 0,
+      "aria-pressed": v ? N : void 0,
       style: { transition: w.duration + "s" },
       children: [
-        /* @__PURE__ */ m("div", { className: M.touchTarget }),
+        /* @__PURE__ */ m("div", { className: I.touchTarget }),
         /* @__PURE__ */ m(
           ye,
           {
             style: { transition: w.duration + "s" },
-            className: M.stateLayer,
+            className: I.stateLayer,
             colorName: y(
               e === "filled" && {
-                "on-surface-variant": !L && !!v,
-                "on-primary": L || !v
+                "on-surface-variant": !N && !!v,
+                "on-primary": N || !v
               },
               e === "elevated" && {
-                "on-primary": L && !!v,
-                primary: !L || !v
+                "on-primary": N && !!v,
+                primary: !N || !v
               },
               e === "tonal" && {
-                "on-secondary": L && !!v,
-                "on-secondary-container": !L || !v
+                "on-secondary": N && !!v,
+                "on-secondary-container": !N || !v
               },
               e === "outlined" && {
-                "inverse-on-surface": L && !!v,
-                "on-surface-variant": !L || !v
+                "inverse-on-surface": N && !!v,
+                "on-surface-variant": !N || !v
               },
               e === "text" && "primary"
             ),
@@ -1857,7 +1857,7 @@ const ct = ({
           }
         ),
         a === "left" && x,
-        u && /* @__PURE__ */ m(
+        i && /* @__PURE__ */ m(
           "div",
           {
             className: "!absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2",
@@ -1894,7 +1894,7 @@ const ct = ({
             )
           }
         ),
-        /* @__PURE__ */ m("span", { className: M.label, children: r }),
+        /* @__PURE__ */ m("span", { className: I.label, children: r }),
         a === "right" && x
       ]
     }
@@ -1903,13 +1903,13 @@ const ct = ({
   variant: e = "outlined",
   className: t,
   children: n,
-  isInteractive: l = !1,
+  isInteractive: o = !1,
   ref: r,
   ...s
 }) => {
-  const c = Et({ className: t, isInteractive: l, variant: e, children: n }), a = W(null);
+  const c = Et({ className: t, isInteractive: o, variant: e, children: n }), a = W(null);
   return /* @__PURE__ */ Y("div", { ...s, ref: r || a, className: c.card, children: [
-    l && /* @__PURE__ */ m(
+    o && /* @__PURE__ */ m(
       ye,
       {
         className: c.stateLayer,
@@ -1920,20 +1920,20 @@ const ct = ({
     n
   ] });
 }, he = (e, t, n = [0, 1]) => {
-  const [l, r] = t, [s, c] = n, u = (Math.max(l, Math.min(e, r)) - l) / (r - l);
-  return s + u * (c - s);
+  const [o, r] = t, [s, c] = n, i = (Math.max(o, Math.min(e, r)) - o) / (r - o);
+  return s + i * (c - s);
 }, nn = ({
   className: e,
   children: t,
   width: n,
-  index: l = 0,
+  index: o = 0,
   outputRange: r,
   ref: s,
   ...c
 }) => {
-  const a = W(null), u = s || a, o = St({
+  const a = W(null), i = s || a, l = St({
     className: e,
-    index: l,
+    index: o,
     width: n,
     children: t,
     outputRange: r
@@ -1941,7 +1941,7 @@ const ct = ({
   return /* @__PURE__ */ m(
     "div",
     {
-      ref: u,
+      ref: i,
       style: {
         width: n + "px",
         maxWidth: r[1] + "px",
@@ -1952,7 +1952,7 @@ const ct = ({
         duration: 0.5,
         ease: "linear"
       },
-      className: o.carouselItem,
+      className: l.carouselItem,
       ...c,
       children: t
     }
@@ -1961,38 +1961,38 @@ const ct = ({
   variant: e = "hero",
   className: t,
   children: n,
-  ref: l,
+  ref: o,
   marginPourcent: r = 0,
   inputRange: s = [0.21, 0.65],
   outputRange: c = [42, 300],
   gap: a = 8,
-  onChange: u,
-  onMetricsChange: o,
-  index: p,
+  onChange: i,
+  onMetricsChange: l,
+  index: h,
   scrollSensitivity: v = 1.25,
   ...f
 }) => {
-  const i = W(null), d = l || i, [h, w] = $(0), b = It({
-    index: p,
+  const u = W(null), d = o || u, [p, w] = M(0), E = It({
+    index: h,
     className: t,
     children: n,
     variant: e,
     inputRange: s,
     outputRange: c,
     marginPourcent: r,
-    onChange: u,
+    onChange: i,
     gap: a,
     scrollSensitivity: v,
-    onMetricsChange: o
+    onMetricsChange: l
   }), g = Z.Children.toArray(n).filter(
-    (N) => Z.isValidElement(N) && N.type === nn
-  ), I = W(null), [E, A] = $(
+    (L) => Z.isValidElement(L) && L.type === nn
+  ), b = W(null), [R, A] = M(
     {}
-  ), [L, V] = $(null), H = W(0), M = W(null), x = () => {
+  ), [N, F] = M(null), O = W(0), I = W(null), x = () => {
     var fe, we;
-    if (!I.current || !d.current || (L == null ? void 0 : L.scrollProgress) === void 0)
+    if (!b.current || !d.current || (N == null ? void 0 : N.scrollProgress) === void 0)
       return [];
-    const N = (L == null ? void 0 : L.scrollVisible) ?? ((fe = d.current) == null ? void 0 : fe.clientWidth) ?? 0;
+    const L = (N == null ? void 0 : N.scrollVisible) ?? ((fe = d.current) == null ? void 0 : fe.clientWidth) ?? 0;
     function D(P, T) {
       return P.map((ee, ve) => {
         const Ee = (ee - T) / Math.abs(P[1] - P[0]);
@@ -2004,15 +2004,15 @@ const ct = ({
         };
       });
     }
-    const F = g.map((P, T) => {
-      if (!S[T].current || !I.current) return 0;
+    const H = g.map((P, T) => {
+      if (!S[T].current || !b.current) return 0;
       const ve = T / (g.length - 1);
       return he(ve, [0, 1], [0, 1]);
     }), j = D(
-      F,
-      (L == null ? void 0 : L.scrollProgress) ?? 0
+      H,
+      (N == null ? void 0 : N.scrollProgress) ?? 0
     ).sort((P, T) => P.index - T.index);
-    let X = (((we = d.current) == null ? void 0 : we.clientWidth) ?? N) + a + c[0] + a;
+    let X = (((we = d.current) == null ? void 0 : we.clientWidth) ?? L) + a + c[0] + a;
     const re = j.sort((P, T) => Math.abs(P.relativeIndex) - Math.abs(T.relativeIndex)).map((P, T) => {
       if (!(X <= 0)) {
         if (T == 0 && G(P.index), P.width = he(
@@ -2049,26 +2049,26 @@ const ct = ({
     return w(Ne), Object.fromEntries(
       re.map((P) => [P.index, P.width])
     );
-  }, S = W([]).current, [O, G] = $(0);
-  R(() => {
-    u && u(O);
-  }, [O]), R(() => {
-    typeof p == "number" && g.length > 0 && p !== O && ne(p);
-  }, [p, g.length]), R(() => {
-    _(O);
-  }, [O]), S.length !== g.length && g.forEach((N, D) => {
+  }, S = W([]).current, [V, G] = M(0);
+  $(() => {
+    i && i(V);
+  }, [V]), $(() => {
+    typeof h == "number" && g.length > 0 && h !== V && ne(h);
+  }, [h, g.length]), $(() => {
+    _(V);
+  }, [V]), S.length !== g.length && g.forEach((L, D) => {
     S[D] || (S[D] = Z.createRef());
   });
-  const [te, _] = $(0), ne = (N, D = {}) => {
+  const [te, _] = M(0), ne = (L, D = {}) => {
     if (!g.length) return 0;
-    const F = S[N];
-    if (!F || !F.current || !I.current) return 0;
+    const H = S[L];
+    if (!H || !H.current || !b.current) return 0;
     const j = he(
-      N / Math.max(1, g.length - 1),
+      L / Math.max(1, g.length - 1),
       [0, 1],
       [0, 1]
     );
-    return _(N), I.current.dispatchEvent(
+    return _(L), b.current.dispatchEvent(
       new CustomEvent("udx:customScroll:set", {
         bubbles: !0,
         detail: {
@@ -2078,32 +2078,32 @@ const ct = ({
         }
       })
     ), j;
-  }, B = g.map((N, D) => {
+  }, B = g.map((L, D) => {
     var re;
-    const F = (re = N.props) == null ? void 0 : re.onClick, j = (ae) => {
-      F == null || F(ae);
+    const H = (re = L.props) == null ? void 0 : re.onClick, j = (ae) => {
+      H == null || H(ae);
     }, X = () => _(D);
     return Z.cloneElement(
-      N,
+      L,
       {
-        width: E[D],
+        width: R[D],
         outputRange: c,
         ref: S[D],
         key: D,
         index: D,
         role: "option",
-        "aria-selected": O === D,
-        tabIndex: O === D ? 0 : -1,
+        "aria-selected": V === D,
+        tabIndex: V === D ? 0 : -1,
         onClick: j,
         onFocus: X
       }
     );
-  }), k = (N) => {
+  }), k = (L) => {
     var D;
-    if (N.scrollTotal > 0) {
-      (D = M.current) == null || D.stop();
-      const F = H.current ?? 0, j = N.scrollProgress ?? 0;
-      M.current = ht(F, j, {
+    if (L.scrollTotal > 0) {
+      (D = I.current) == null || D.stop();
+      const H = O.current ?? 0, j = L.scrollProgress ?? 0;
+      I.current = ht(H, j, {
         // Spring tuning to add a bit of inertia and smoothness
         type: "spring",
         stiffness: 260,
@@ -2111,28 +2111,28 @@ const ct = ({
         mass: 0.6,
         restDelta: 5e-4,
         onUpdate: (X) => {
-          H.current = X, V({ ...N, scrollProgress: X });
+          O.current = X, F({ ...L, scrollProgress: X });
         }
       });
     }
   };
-  R(() => {
-    const N = x();
-    A(N);
-  }, [L]);
-  const U = W(o);
-  R(() => {
-    U.current = o;
-  }, [o]);
+  $(() => {
+    const L = x();
+    A(L);
+  }, [N]);
+  const U = W(l);
+  $(() => {
+    U.current = l;
+  }, [l]);
   const K = W(null);
-  R(() => {
+  $(() => {
     var T;
-    const N = U.current;
-    if (!N || !(d != null && d.current)) return;
+    const L = U.current;
+    if (!L || !(d != null && d.current)) return;
     const D = g.length;
     if (D <= 0) return;
-    const F = ((T = d.current) == null ? void 0 : T.clientWidth) ?? 0, j = c[1], X = H.current ?? (L == null ? void 0 : L.scrollProgress) ?? 0, re = (F + a) / (j + a), ae = Math.max(1, Math.floor(re)), de = Math.max(1, Math.round(ae * (2 / 3))), ce = Math.min(
-      Math.max(0, O),
+    const H = ((T = d.current) == null ? void 0 : T.clientWidth) ?? 0, j = c[1], X = O.current ?? (N == null ? void 0 : N.scrollProgress) ?? 0, re = (H + a) / (j + a), ae = Math.max(1, Math.floor(re)), de = Math.max(1, Math.round(ae * (2 / 3))), ce = Math.min(
+      Math.max(0, V),
       Math.max(0, D - 1)
     ), oe = ce > 0, Ne = ce < D - 1, fe = {
       total: D,
@@ -2143,7 +2143,7 @@ const ct = ({
       canPrev: oe,
       canNext: Ne,
       scrollProgress: X,
-      viewportWidth: F,
+      viewportWidth: H,
       itemMaxWidth: j,
       gap: a
     }, we = K.current;
@@ -2155,49 +2155,49 @@ const ct = ({
           break;
         }
     }
-    P && (K.current = fe, N(fe));
-  }, [d, g.length, O, L, a, c]), R(() => () => {
-    var N;
-    (N = M.current) == null || N.stop();
+    P && (K.current = fe, L(fe));
+  }, [d, g.length, V, N, a, c]), $(() => () => {
+    var L;
+    (L = I.current) == null || L.stop();
   }, []);
-  const [le, ue] = $(0);
+  const [le, ue] = M(0);
   Ve(() => {
-    let N = c[1];
-    L && N > L.scrollVisible && (N = L.scrollVisible);
-    const D = (N + a) * B.length / v;
+    let L = c[1];
+    N && L > N.scrollVisible && (L = N.scrollVisible);
+    const D = (L + a) * B.length / v;
     ue(D);
-  }, [d, S, L]);
-  const C = (N) => {
+  }, [d, S, N]);
+  const C = (L) => {
     if (!g.length) return;
-    const D = te ?? O;
-    switch (N.key) {
+    const D = te ?? V;
+    switch (L.key) {
       case "ArrowLeft":
-        N.preventDefault(), ne(Math.max(0, D - 1));
+        L.preventDefault(), ne(Math.max(0, D - 1));
         break;
       case "ArrowRight":
-        N.preventDefault(), ne(Math.min(g.length - 1, D + 1));
+        L.preventDefault(), ne(Math.min(g.length - 1, D + 1));
         break;
       case "Home":
-        N.preventDefault(), ne(0);
+        L.preventDefault(), ne(0);
         break;
       case "End":
-        N.preventDefault(), ne(g.length - 1);
+        L.preventDefault(), ne(g.length - 1);
         break;
       case "Enter":
       case " ":
-        N.preventDefault(), ne(D);
+        L.preventDefault(), ne(D);
         break;
     }
   };
-  return R(() => {
-    const N = d.current;
-    if (!N) return;
-    const D = (F) => {
-      const j = F.detail;
+  return $(() => {
+    const L = d.current;
+    if (!L) return;
+    const D = (H) => {
+      const j = H.detail;
       j && typeof j.index == "number" && ne(j.index);
     };
-    return N.addEventListener("udx:carousel:centerIndex", D), () => {
-      N.removeEventListener(
+    return L.addEventListener("udx:carousel:centerIndex", D), () => {
+      L.removeEventListener(
         "udx:carousel:centerIndex",
         D
       );
@@ -2205,7 +2205,7 @@ const ct = ({
   }, [d, g.length]), /* @__PURE__ */ m(
     "div",
     {
-      className: b.carousel,
+      className: E.carousel,
       ref: d,
       role: "listbox",
       "aria-orientation": "horizontal",
@@ -2221,11 +2221,11 @@ const ct = ({
           children: /* @__PURE__ */ m(
             "div",
             {
-              className: b.track,
-              ref: I,
+              className: E.track,
+              ref: b,
               style: {
                 gap: `${a}px`,
-                translate: h,
+                translate: p,
                 willChange: "translate"
               },
               children: B
@@ -2240,8 +2240,8 @@ const ct = ({
   className: t,
   ...n
 }) => {
-  const l = kt({ orientation: e, className: t });
-  return /* @__PURE__ */ m("hr", { className: l.divider, ...n });
+  const o = kt({ orientation: e, className: t });
+  return /* @__PURE__ */ m("hr", { className: o.divider, ...n });
 }, z = [];
 for (let e = 0; e < 256; ++e)
   z.push((e + 256).toString(16).slice(1));
@@ -2264,29 +2264,29 @@ function ge(e, t, n) {
   if (Fe.randomUUID && !e)
     return Fe.randomUUID();
   e = e || {};
-  const l = e.random ?? ((r = e.rng) == null ? void 0 : r.call(e)) ?? an();
-  if (l.length < 16)
+  const o = e.random ?? ((r = e.rng) == null ? void 0 : r.call(e)) ?? an();
+  if (o.length < 16)
     throw new Error("Random bytes length must be >= 16");
-  return l[6] = l[6] & 15 | 64, l[8] = l[8] & 63 | 128, on(l);
+  return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, on(o);
 }
 const it = ({
   variant: e = "plain",
   buttons: t,
   className: n,
-  children: l,
+  children: o,
   title: r,
   text: s,
   position: c,
   targetRef: a,
-  ref: u,
-  trigger: o = ["hover", "focus"],
-  ...p
+  ref: i,
+  trigger: l = ["hover", "focus"],
+  ...h
 }) => {
-  if (!l && !a)
+  if (!o && !a)
     throw new Error("ToolTip must have a child or a targetRef");
-  Array.isArray(o) || (o = [o]), t && !Array.isArray(t) && (t = [t]);
-  const v = W(null), f = a || v, [i, d] = $(null), [h] = $(ge()), [w, b] = $(!1), g = W(null);
-  R(() => {
+  Array.isArray(l) || (l = [l]), t && !Array.isArray(t) && (t = [t]);
+  const v = W(null), f = a || v, [u, d] = M(null), [p] = M(ge()), [w, E] = M(!1), g = W(null);
+  $(() => {
     const x = (S) => {
       d(S.detail);
     };
@@ -2296,80 +2296,80 @@ const it = ({
         x
       );
     };
-  }, []), R(() => {
-    g.current && clearTimeout(g.current), i ? b(i === h) : g.current = setTimeout(() => {
-      b(!1);
+  }, []), $(() => {
+    g.current && clearTimeout(g.current), u ? E(u === p) : g.current = setTimeout(() => {
+      E(!1);
     }, 1200);
-  }, [i, h]);
-  const I = () => {
-    if (o.includes("hover")) {
-      const x = new CustomEvent("tooltip-update", { detail: h });
+  }, [u, p]);
+  const b = () => {
+    if (l.includes("hover")) {
+      const x = new CustomEvent("tooltip-update", { detail: p });
       document.dispatchEvent(x);
     }
-  }, E = () => {
-    if (o.includes("hover")) {
+  }, R = () => {
+    if (l.includes("hover")) {
       const x = new CustomEvent("tooltip-update", { detail: null });
       document.dispatchEvent(x);
     }
   }, A = () => {
-    if (o.includes("click")) {
+    if (l.includes("click")) {
       const x = new CustomEvent("tooltip-update", {
-        detail: w ? null : h
+        detail: w ? null : p
       });
       document.dispatchEvent(x);
     }
-  }, L = () => {
-    if (o.includes("focus")) {
-      const x = new CustomEvent("tooltip-update", { detail: h });
+  }, N = () => {
+    if (l.includes("focus")) {
+      const x = new CustomEvent("tooltip-update", { detail: p });
       document.dispatchEvent(x);
     }
-  }, V = () => {
-    if (o.includes("focus")) {
+  }, F = () => {
+    if (l.includes("focus")) {
       const x = new CustomEvent("tooltip-update", { detail: null });
       document.dispatchEvent(x);
     }
   };
-  R(() => {
+  $(() => {
     if (f != null && f.current) {
       const x = f.current;
-      return x.addEventListener("mouseenter", I), x.addEventListener("mouseleave", E), x.addEventListener("click", A), x.addEventListener("focus", L), x.addEventListener("blur", V), () => {
-        x.removeEventListener("mouseenter", I), x.removeEventListener("mouseleave", E), x.removeEventListener("click", A), x.removeEventListener("focus", L), x.removeEventListener("blur", V);
+      return x.addEventListener("mouseenter", b), x.addEventListener("mouseleave", R), x.addEventListener("click", A), x.addEventListener("focus", N), x.addEventListener("blur", F), () => {
+        x.removeEventListener("mouseenter", b), x.removeEventListener("mouseleave", R), x.removeEventListener("click", A), x.removeEventListener("focus", N), x.removeEventListener("blur", F);
       };
     }
-  }, [f, o, h, w]);
-  const H = !a && pe(l) ? xe(l, { ref: v }) : l;
+  }, [f, l, p, w]);
+  const O = !a && pe(o) ? xe(o, { ref: v }) : o;
   if (!c && typeof window < "u" && f != null && f.current && !c) {
-    const x = f.current.getBoundingClientRect(), S = window.innerWidth, O = window.innerHeight, G = x.left / S, te = x.top / O;
+    const x = f.current.getBoundingClientRect(), S = window.innerWidth, V = window.innerHeight, G = x.left / S, te = x.top / V;
     e === "plain" ? G < 1 / 3 ? c = "right" : G > 2 / 3 ? c = "left" : c = te > 0.5 ? "top" : "bottom" : G < 1 / 2 && te < 1 / 2 ? c = "bottom-right" : G > 1 / 2 && te < 1 / 2 ? c = "bottom-left" : G > 1 / 2 && te > 1 / 2 ? c = "top-left" : G < 1 / 2 && te > 1 / 2 && (c = "top-right");
   }
-  const M = Ot({
+  const I = Ot({
     variant: e,
     buttons: t,
     className: n,
     title: r,
     text: s,
     position: c,
-    trigger: o,
+    trigger: l,
     targetRef: a,
-    children: l
+    children: o
   });
   return /* @__PURE__ */ Y(me, { children: [
-    H,
+    O,
     /* @__PURE__ */ m(se, { children: w && /* @__PURE__ */ m(Gt, { targetRef: f, children: /* @__PURE__ */ m(
       q.div,
       {
-        initial: { opacity: i ? 1 : 0 },
+        initial: { opacity: u ? 1 : 0 },
         animate: { opacity: 1 },
-        transition: { duration: i ? 0 : 0.3 },
-        exit: { opacity: i ? 1 : 0 },
-        className: M.toolTip,
-        ...p,
-        onMouseEnter: I,
-        onMouseLeave: E,
+        transition: { duration: u ? 0 : 0.3 },
+        exit: { opacity: u ? 1 : 0 },
+        className: I.toolTip,
+        ...h,
+        onMouseEnter: b,
+        onMouseLeave: R,
         children: /* @__PURE__ */ Y(
           q.div,
           {
-            className: M.container,
+            className: I.container,
             layoutId: "tool-tip",
             transition: {
               type: "spring",
@@ -2377,9 +2377,9 @@ const it = ({
               damping: 20
             },
             children: [
-              r && /* @__PURE__ */ m("div", { className: M.subHead, children: r }),
-              /* @__PURE__ */ m("div", { className: M.supportingText, children: s }),
-              t && /* @__PURE__ */ m("div", { className: M.actions, children: Array.isArray(t) && t.map((x, S) => /* @__PURE__ */ m(
+              r && /* @__PURE__ */ m("div", { className: I.subHead, children: r }),
+              /* @__PURE__ */ m("div", { className: I.supportingText, children: s }),
+              t && /* @__PURE__ */ m("div", { className: I.actions, children: Array.isArray(t) && t.map((x, S) => /* @__PURE__ */ m(
                 ct,
                 {
                   size: "small",
@@ -2398,42 +2398,42 @@ const it = ({
   className: e,
   label: t,
   variant: n = "primary",
-  size: l = "medium",
+  size: o = "medium",
   href: r,
   type: s,
   icon: c,
   extended: a = !1,
-  ref: u,
-  transition: o,
-  children: p,
+  ref: i,
+  transition: l,
+  children: h,
   ...v
 }) => {
-  if (p && (t = p), !t)
+  if (h && (t = h), !t)
     throw new Error(
       "FAB component requires either a label prop or children content"
     );
-  const f = r ? "a" : "button", i = Ct({
+  const f = r ? "a" : "button", u = Ct({
     href: r,
     icon: c,
     extended: a,
     label: t,
-    size: l,
+    size: o,
     variant: n,
     className: e,
-    transition: o,
+    transition: l,
     children: t
   });
-  o = { duration: 0.3, ...o };
-  const d = W(null), h = u || d, w = {
+  l = { duration: 0.3, ...l };
+  const d = W(null), p = i || d, w = {
     visible: {
       width: "auto",
       marginLeft: 12,
       opacity: 1,
       transition: {
-        ...o,
+        ...l,
         opacity: {
-          duration: o.duration / 2,
-          delay: o.duration - o.duration / 2
+          duration: l.duration / 2,
+          delay: l.duration - l.duration / 2
         }
       }
     },
@@ -2442,10 +2442,10 @@ const it = ({
       marginLeft: 0,
       opacity: 0,
       transition: {
-        ...o,
+        ...l,
         marginLeft: {
-          duration: o.duration / 2,
-          delay: o.duration - o.duration / 2
+          duration: l.duration / 2,
+          delay: l.duration - l.duration / 2
         }
       }
     }
@@ -2454,24 +2454,24 @@ const it = ({
     f,
     {
       ...v,
-      ref: h,
+      ref: p,
       href: r,
       "aria-label": a ? void 0 : t,
-      className: i.fab,
+      className: u.fab,
       children: [
         /* @__PURE__ */ m(
           it,
           {
             trigger: a ? null : void 0,
             text: t,
-            targetRef: h
+            targetRef: p
           }
         ),
         /* @__PURE__ */ m(
           ye,
           {
-            style: { transition: o.duration + "s" },
-            className: i.stateLayer,
+            style: { transition: l.duration + "s" },
+            className: u.stateLayer,
             colorName: y({
               "on-primary": n == "primary",
               "on-secondary": n == "secondary",
@@ -2483,7 +2483,7 @@ const it = ({
             stateClassName: "state-ripple-group-[fab]"
           }
         ),
-        /* @__PURE__ */ m(ie, { icon: c, className: i.icon }),
+        /* @__PURE__ */ m(ie, { icon: c, className: u.icon }),
         /* @__PURE__ */ m(se, { children: a && /* @__PURE__ */ m(
           q.span,
           {
@@ -2491,7 +2491,7 @@ const it = ({
             initial: "hidden",
             animate: "visible",
             exit: "hidden",
-            className: i.label,
+            className: u.label,
             children: t
           }
         ) })
@@ -2502,106 +2502,105 @@ const it = ({
   variant: e = "standard",
   href: t,
   disabled: n = !1,
-  type: l = "button",
-  title: r,
-  label: s,
-  onToggle: c,
-  activated: a = !1,
-  onClick: u,
-  icon: o,
-  size: p = "medium",
-  iconSelected: v,
-  className: f,
-  ref: i,
-  width: d = "default",
-  shape: h = "rounded",
-  allowShapeTransformation: w = !0,
-  transition: b,
-  children: g,
-  ...I
+  title: o,
+  label: r,
+  onToggle: s,
+  activated: c = !1,
+  onClick: a,
+  icon: i,
+  size: l = "medium",
+  iconSelected: h,
+  className: v,
+  ref: f,
+  width: u = "default",
+  shape: d = "rounded",
+  allowShapeTransformation: p = !0,
+  transition: w,
+  children: E,
+  ...g
 }) => {
-  if (g && (s = g), !s)
+  if (E && (r = E), !r)
     throw new Error(
       "IconButton component requires either a label prop or children content to provide an accessible aria-label"
     );
-  r || (r = s);
-  const [E, A] = Z.useState(a);
-  let L;
-  c ? c && (L = (S) => {
-    n && S.preventDefault(), A(!E), c(!!E);
-  }, o = E && v || o) : L = (S) => {
-    n && S.preventDefault(), u && u(S);
-  }, R(() => {
-    A(a);
-  }, [a]);
-  const V = t ? "a" : "button", H = $t({
-    transition: b,
-    shape: h,
-    allowShapeTransformation: w,
-    width: d,
+  o || (o = r);
+  const [b, R] = Z.useState(c);
+  let A;
+  s ? s && (A = (x) => {
+    n && x.preventDefault(), R(!b), s(!!b);
+  }, i = b && h || i) : A = (x) => {
+    n && x.preventDefault(), a && a(x);
+  }, $(() => {
+    R(c);
+  }, [c]);
+  const N = t ? "a" : "button", F = $t({
+    transition: w,
+    shape: d,
+    allowShapeTransformation: p,
+    width: u,
     href: t,
-    activated: E,
-    label: s,
-    iconSelected: v,
-    isActive: E,
-    onToggle: c,
+    activated: b,
+    label: r,
+    iconSelected: h,
+    isActive: b,
+    onToggle: s,
     disabled: n,
-    icon: o,
+    icon: i,
     variant: e,
-    className: f,
-    size: p,
-    children: s,
-    ...I
-  }), M = W(null), x = i || M;
-  return b = { duration: 0.3, ...b }, /* @__PURE__ */ Y(
-    V,
+    className: v,
+    size: l,
+    children: r,
+    ...g
+  }), O = W(null), I = f || O;
+  return w = { duration: 0.3, ...w }, /* @__PURE__ */ Y(
+    N,
     {
       disabled: n,
       href: t,
-      style: { transition: b.duration + "s" },
-      className: H.iconButton,
-      "aria-label": s,
-      ...I,
+      style: { transition: w.duration + "s" },
+      className: F.iconButton,
+      "aria-label": r,
+      ...g,
       title: void 0,
-      onClick: L,
-      ref: x,
+      onClick: A,
+      ref: I,
       children: [
         /* @__PURE__ */ m(
           it,
           {
-            targetRef: x,
+            targetRef: I,
             trigger: n ? null : void 0,
-            text: r
+            text: o
           }
         ),
-        /* @__PURE__ */ m("div", { className: H.touchTarget }),
+        /* @__PURE__ */ m("div", { className: F.touchTarget }),
         /* @__PURE__ */ m(
           ye,
           {
-            style: { transition: b.duration + "s" },
-            className: H.stateLayer,
+            style: { transition: w.duration + "s" },
+            className: F.stateLayer,
             colorName: y(
               e === "standard" && {
-                "on-surface-variant": !E,
-                "on-primary": E
+                "on-surface-variant": !b,
+                "on-primary": b
               },
               e === "filled" && {
-                "on-surface-variant": !E && !!c,
-                "on-primary": E || !c
+                "on-surface-variant": !b && !!s,
+                "on-primary": b || !s
               },
               e === "tonal" && {
-                "on-secondary": E && !!c,
-                "on-secondary-container": !E || !c
+                "on-secondary": b && !!s,
+                "on-secondary-container": !b || !s
               },
               e === "outlined" && {
-                "inverse-on-surface": E && !!c,
-                "on-surface-variant": !E || !c
+                "inverse-on-surface": b && !!s,
+                "on-surface-variant": !b || !s
               }
             ),
             stateClassName: "state-ripple-group-[icon-button]"
           }
         ),
-        o && /* @__PURE__ */ m(ie, { icon: o, className: H.icon })
+        i && /* @__PURE__ */ m(ie, { icon: i, className: F.icon })
       ]
     }
   );
@@ -2628,71 +2627,71 @@ const zn = ({
   className: e,
   label: t,
   variant: n = "primary",
-  size: l = "medium",
+  size: o = "medium",
   href: r,
   icon: s,
   extended: c = !1,
   ref: a,
-  transition: u,
-  children: o,
-  open: p,
+  transition: i,
+  children: l,
+  open: h,
   defaultOpen: v = !1,
   onOpenChange: f,
-  ...i
+  ...u
 }) => {
-  u = { duration: 0.3, ease: "easeInOut", ...u };
-  const d = W(null), h = a || d, w = typeof p == "boolean", [b, g] = $(v), I = w ? p : b, E = (S) => {
+  i = { duration: 0.3, ease: "easeInOut", ...i };
+  const d = W(null), p = a || d, w = typeof h == "boolean", [E, g] = M(v), b = w ? h : E, R = (S) => {
     w || g(S), f == null || f(S);
-  }, A = Z.Children.toArray(o).filter(
+  }, A = Z.Children.toArray(l).filter(
     (S) => Z.isValidElement(S) && S.type === ct
-  ), L = Mt({
+  ), N = Mt({
     href: r,
     icon: s,
     extended: c,
     label: t,
-    size: l,
+    size: o,
     variant: n,
     className: e,
-    transition: u,
+    transition: i,
     children: t,
-    open: I
-  }), V = q.create(Ce), H = q.create(be), M = (S) => /* @__PURE__ */ m(
-    V,
+    open: b
+  }), F = q.create(Ce), O = q.create(be), I = (S) => /* @__PURE__ */ m(
+    F,
     {
       icon: s,
       extended: c,
       label: t,
       variant: n + "Container",
-      size: l,
-      className: L.fab + " " + (e ?? ""),
-      "aria-expanded": I,
-      onClick: () => E(!0),
+      size: o,
+      className: N.fab + " " + (e ?? ""),
+      "aria-expanded": b,
+      onClick: () => R(!0),
       style: { transition: "border-radius 0.3s ease-in-out" },
       transition: {
-        duration: u.duration,
+        duration: i.duration,
         ease: "easeInOut",
-        borderRadius: { duration: u.duration, ease: "easeInOut" },
-        background: { duration: u.duration, ease: "easeInOut" },
-        ...u
+        borderRadius: { duration: i.duration, ease: "easeInOut" },
+        background: { duration: i.duration, ease: "easeInOut" },
+        ...i
       },
       ...S
     }
-  ), [x] = $(ge());
-  return /* @__PURE__ */ Y("div", { className: L.fabMenu, ref: h, ...i, children: [
-    /* @__PURE__ */ m(se, { children: I && /* @__PURE__ */ m("div", { className: L.actions, role: "menu", "aria-hidden": !I, children: (() => {
+  ), [x] = M(ge());
+  return /* @__PURE__ */ Y("div", { className: N.fabMenu, ref: p, ...u, children: [
+    /* @__PURE__ */ m(se, { children: b && /* @__PURE__ */ m("div", { className: N.actions, role: "menu", "aria-hidden": !b, children: (() => {
       const S = A.length;
-      return A.map((O, G) => {
-        O.props;
-        const te = S - 1 - G, _ = ((u == null ? void 0 : u.delay) ?? 0) + te * 0.06, ne = {
+      return A.map((V, G) => {
+        V.props;
+        const te = S - 1 - G, _ = ((i == null ? void 0 : i.delay) ?? 0) + te * 0.06, ne = {
           open: {
             overflow: "visible",
             opacity: 1,
             width: "auto",
             transition: {
-              ...u,
+              ...i,
               delay: _,
               opacity: {
-                delay: (u == null ? void 0 : u.duration) / 2 + _
+                delay: (i == null ? void 0 : i.duration) / 2 + _
               }
             }
           },
@@ -2701,10 +2700,10 @@ const zn = ({
             opacity: 0,
             width: 0,
             transition: {
-              ...u,
+              ...i,
               delay: _,
               opacity: {
-                duration: (u == null ? void 0 : u.duration) / 1.5
+                duration: (i == null ? void 0 : i.duration) / 1.5
               }
             }
           }
@@ -2715,17 +2714,17 @@ const zn = ({
             initial: "close",
             animate: "open",
             variants: ne,
-            transition: u,
+            transition: i,
             exit: "close",
             children: Z.cloneElement(
-              O,
+              V,
               {
                 key: G,
                 shape: "rounded",
                 variant: "filled",
                 className: () => ({
                   button: y("max-w-full overflow-hidden", {
-                    "px-0": !I,
+                    "px-0": !b,
                     "bg-primary-container text-on-primary-container ": n === "primary",
                     "bg-secondary-container text-on-secondary-container": n === "secondary",
                     "bg-tertiary-container text-on-tertiary-container": n === "tertiary"
@@ -2742,17 +2741,17 @@ const zn = ({
         );
       });
     })() }) }),
-    M({
+    I({
       className: "invisible pointer-events-none"
     }),
     /* @__PURE__ */ Y("div", { className: "absolute right-0 top-0", children: [
-      !I && M({
+      !b && I({
         className: "",
         layout: !0,
         layoutId: "fab-menu" + x
       }),
-      I && /* @__PURE__ */ m(me, { children: /* @__PURE__ */ m(
-        H,
+      b && /* @__PURE__ */ m(me, { children: /* @__PURE__ */ m(
+        O,
         {
           layout: !0,
           layoutId: "fab-menu" + x,
@@ -2771,20 +2770,20 @@ const zn = ({
           }),
           style: { transition: "border-radius 0.3s ease-in-out" },
           transition: {
-            duration: u.duration,
+            duration: i.duration,
             ease: "easeInOut",
             borderRadius: {
-              duration: u.duration,
+              duration: i.duration,
               ease: "easeInOut"
             },
             background: {
-              duration: u.duration,
+              duration: i.duration,
               ease: "easeInOut"
             },
-            ...u
+            ...i
           },
           icon: un,
-          onClick: () => E(!1),
+          onClick: () => R(!1),
           children: "Close"
         }
       ) })
@@ -2794,7 +2793,7 @@ const zn = ({
   className: e,
   valueFormatter: t,
   step: n = 10,
-  name: l,
+  name: o,
   value: r = 0,
   min: s = 0,
   max: c = 100,
@@ -2808,36 +2807,36 @@ const zn = ({
       label: "100"
     }
   ],
-  ref: u,
-  onChange: o,
-  ...p
+  ref: i,
+  onChange: l,
+  ...h
 }) => {
   const v = (B) => {
-    const k = i(), U = f();
+    const k = u(), U = f();
     return B === 1 / 0 ? 100 : B === -1 / 0 ? 0 : (B - k) / (U - k) * 100;
-  }, f = (B = !1) => B ? c : c == 1 / 0 ? a[(a == null ? void 0 : a.length) - 1].value : c, i = (B = !1) => B ? s : s == -1 / 0 ? a[0].value : s, d = (B) => {
-    const k = i(!1);
+  }, f = (B = !1) => B ? c : c == 1 / 0 ? a[(a == null ? void 0 : a.length) - 1].value : c, u = (B = !1) => B ? s : s == -1 / 0 ? a[0].value : s, d = (B) => {
+    const k = u(!1);
     return (f(!1) - k) * B / 100 + k;
-  }, [h, w] = $(!1), b = W(null), g = u || b, [I, E] = $(r), [A, L] = $(v(r)), [V, H] = $(!1), M = (B) => {
-    H(!0), w(!0), O(B);
+  }, [p, w] = M(!1), E = W(null), g = i || E, [b, R] = M(r), [A, N] = M(v(r)), [F, O] = M(!1), I = (B) => {
+    O(!0), w(!0), V(B);
   }, x = () => {
-    H(!1), w(!1);
+    O(!1), w(!1);
   };
-  R(() => (V ? (window.addEventListener("mouseup", x), window.addEventListener("mousemove", O), window.addEventListener("touchend", x), window.addEventListener("touchmove", O)) : (window.removeEventListener("mouseup", x), window.removeEventListener("mousemove", O), window.removeEventListener("touchend", x), window.removeEventListener("touchmove", O)), () => {
-    window.removeEventListener("mouseup", x), window.removeEventListener("mousemove", O), window.removeEventListener("touchend", x), window.removeEventListener("touchmove", O);
-  }), [V]);
+  $(() => (F ? (window.addEventListener("mouseup", x), window.addEventListener("mousemove", V), window.addEventListener("touchend", x), window.addEventListener("touchmove", V)) : (window.removeEventListener("mouseup", x), window.removeEventListener("mousemove", V), window.removeEventListener("touchend", x), window.removeEventListener("touchmove", V)), () => {
+    window.removeEventListener("mouseup", x), window.removeEventListener("mousemove", V), window.removeEventListener("touchend", x), window.removeEventListener("touchmove", V);
+  }), [F]);
   const S = Dt({
     className: e,
-    isChanging: h,
+    isChanging: p,
     marks: a,
     max: c,
     min: s,
-    name: l,
+    name: o,
     step: n,
-    value: I,
+    value: b,
     valueFormatter: t,
-    onChange: o
-  }), O = (B) => {
+    onChange: l
+  }), V = (B) => {
     const k = g == null ? void 0 : g.current;
     if (k) {
       const U = k.getBoundingClientRect().left, le = ((B.type === "touchmove" || B.type === "touchstart" ? B.touches[0].clientX : B.clientX) - U) / k.offsetWidth * 100;
@@ -2849,32 +2848,32 @@ const zn = ({
   }) => {
     if (B) {
       if (B >= 100) {
-        E(f(!0)), L(100);
+        R(f(!0)), N(100);
         return;
       }
       if (B <= 0) {
-        E(i(!0)), L(0);
+        R(u(!0)), N(0);
         return;
       }
-      k = d(B), k == i() && (k = i(!0)), k == f() && (k = f(!0));
+      k = d(B), k == u() && (k = u(!0)), k == f() && (k = f(!0));
     } else if (k != null) {
       if (k >= f()) {
-        E(f(!0)), L(100);
+        R(f(!0)), N(100);
         return;
       }
-      if (k <= i()) {
-        E(i(!0)), L(0);
+      if (k <= u()) {
+        R(u(!0)), N(0);
         return;
       }
       B = v(k);
     } else
       return;
-    n != null ? k = Math.round((k - i()) / n) * n + i() : a && (k = a.reduce((U, K, le) => {
-      let ue = K.value === 1 / 0 ? f() : K.value === -1 / 0 ? i() : K.value, C = U.value === 1 / 0 ? f() : U.value === -1 / 0 ? i() : U.value;
+    n != null ? k = Math.round((k - u()) / n) * n + u() : a && (k = a.reduce((U, K, le) => {
+      let ue = K.value === 1 / 0 ? f() : K.value === -1 / 0 ? u() : K.value, C = U.value === 1 / 0 ? f() : U.value === -1 / 0 ? u() : U.value;
       return ue = Math.abs(ue - k), C = Math.abs(C - k), ue < C ? K : U;
-    }).value), k >= f() && (k = f(!0)), k <= i() && (k = i(!0)), B = v(k), E(k), L(B), o && o(k);
-  }, [te, _] = $(0);
-  return R(() => {
+    }).value), k >= f() && (k = f(!0)), k <= u() && (k = u(!0)), B = v(k), R(k), N(B), l && l(k);
+  }, [te, _] = M(0);
+  return $(() => {
     const B = () => {
       g.current && _(g.current.offsetWidth);
     };
@@ -2889,17 +2888,17 @@ const zn = ({
         switch (B.key) {
           case "ArrowRight":
             if (n)
-              G({ value: I + n });
+              G({ value: b + n });
             else if (a) {
-              const k = a.find((U) => U.value > I);
+              const k = a.find((U) => U.value > b);
               k && G({ value: k.value });
             }
             break;
           case "ArrowLeft":
             if (n)
-              G({ value: I - n });
+              G({ value: b - n });
             else if (a) {
-              const k = a.slice(0).reverse().find((U, K, le) => I === 1 / 0 ? K === 1 : U.value < I);
+              const k = a.slice(0).reverse().find((U, K, le) => b === 1 / 0 ? K === 1 : U.value < b);
               k && G({ value: k.value });
             }
             break;
@@ -2908,21 +2907,21 @@ const zn = ({
         }
       },
       role: "slider",
-      "aria-valuemin": i(!0),
+      "aria-valuemin": u(!0),
       "aria-valuemax": f(!0),
-      "aria-valuenow": I,
-      "aria-valuetext": I.toString(),
+      "aria-valuenow": b,
+      "aria-valuetext": b.toString(),
       className: S.slider,
-      onMouseDown: M,
-      onClick: O,
+      onMouseDown: I,
+      onClick: V,
       ref: g,
-      onTouchStart: M,
+      onTouchStart: I,
       onDragStart: (B) => B.preventDefault(),
-      ...p,
+      ...h,
       children: [
-        /* @__PURE__ */ m("input", { type: "hidden", name: l, value: I }),
+        /* @__PURE__ */ m("input", { type: "hidden", name: o, value: b }),
         /* @__PURE__ */ m("div", { className: S.activeTrack, style: { flex: A / 100 } }),
-        /* @__PURE__ */ m("div", { className: S.handle, children: /* @__PURE__ */ m(se, { children: h && /* @__PURE__ */ m(
+        /* @__PURE__ */ m("div", { className: S.handle, children: /* @__PURE__ */ m(se, { children: p && /* @__PURE__ */ m(
           q.div,
           {
             className: S.valueIndicator,
@@ -2939,7 +2938,7 @@ const zn = ({
               hidden: { opacity: 1, scale: 0 }
             },
             transition: { duration: 0.1 },
-            children: t ? t(I) : I
+            children: t ? t(b) : b
           }
         ) }) }),
         /* @__PURE__ */ m(
@@ -2955,7 +2954,7 @@ const zn = ({
             className: "w-[calc(100%-12px)] h-full absolute -translate-x-1/2 transform left-1/2",
             children: a && a.map((B, k) => {
               let U = null;
-              const K = (h ? 9 : 10) / te * 100, le = v(B.value);
+              const K = (p ? 9 : 10) / te * 100, le = v(B.value);
               return le <= A - K ? U = !0 : le >= A + K && (U = !1), /* @__PURE__ */ m(
                 "div",
                 {
@@ -2979,21 +2978,21 @@ const zn = ({
   variant: e = "standard",
   className: t,
   children: n,
-  title: l,
+  title: o,
   position: r = "right",
   extended: s,
   divider: c,
   onExtendedChange: a,
-  closeIcon: u = Le,
-  transition: o,
-  ...p
+  closeIcon: i = Le,
+  transition: l,
+  ...h
 }) => {
-  o = { duration: 0.3, ...o };
-  const [v, f] = $(s ?? !0), i = Bt({
-    transition: o,
-    title: l,
+  l = { duration: 0.3, ...l };
+  const [v, f] = M(s ?? !0), u = Bt({
+    transition: l,
+    title: o,
     position: r,
-    closeIcon: u,
+    closeIcon: i,
     className: t,
     children: n,
     onExtendedChange: a,
@@ -3002,9 +3001,9 @@ const zn = ({
     extended: v,
     variant: e
   });
-  R(() => {
+  $(() => {
     a == null || a(v ?? !1);
-  }, [v]), R(() => {
+  }, [v]), $(() => {
     s != null && f(s);
   }, [s]);
   const d = {
@@ -3014,24 +3013,24 @@ const zn = ({
     open: {
       width: "auto"
     }
-  }, h = () => /* @__PURE__ */ Y(me, { children: [
+  }, p = () => /* @__PURE__ */ Y(me, { children: [
     /* @__PURE__ */ m(se, { children: e == "modal" && v && /* @__PURE__ */ m(
       q.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        transition: o,
+        transition: l,
         onClick: () => f(!1),
-        className: i.overlay
+        className: u.overlay
       }
     ) }),
     /* @__PURE__ */ m(se, { children: v && /* @__PURE__ */ Y(
       "div",
       {
-        ...p,
-        className: i.sideSheet,
-        style: { transition: o.duration + "s" },
+        ...h,
+        className: u.sideSheet,
+        style: { transition: l.duration + "s" },
         children: [
           /* @__PURE__ */ Y(
             q.div,
@@ -3040,60 +3039,60 @@ const zn = ({
               initial: s === !1 ? "open" : "close",
               animate: "open",
               exit: "close",
-              className: i.container,
+              className: u.container,
               children: [
-                /* @__PURE__ */ Y("div", { className: i.header, children: [
-                  l && /* @__PURE__ */ m("p", { className: i.title, children: l }),
+                /* @__PURE__ */ Y("div", { className: u.header, children: [
+                  o && /* @__PURE__ */ m("p", { className: u.title, children: o }),
                   /* @__PURE__ */ m(
                     be,
                     {
                       size: "small",
                       label: "close",
-                      icon: u,
+                      icon: i,
                       onClick: () => f(!1),
-                      className: i.closeButton
+                      className: u.closeButton
                     }
                   )
                 ] }),
                 /* @__PURE__ */ m(
                   "div",
                   {
-                    className: i.content,
-                    style: { transition: o.duration + "s" },
+                    className: u.content,
+                    style: { transition: l.duration + "s" },
                     children: n
                   }
                 )
               ]
             }
           ),
-          (c == null && e == "standard" ? !0 : c) && /* @__PURE__ */ m(rn, { className: i.divider, orientation: "vertical" })
+          (c == null && e == "standard" ? !0 : c) && /* @__PURE__ */ m(rn, { className: u.divider, orientation: "vertical" })
         ]
       }
     ) })
   ] });
-  return e == "modal" ? Ye(h(), document.body) : h();
+  return e == "modal" ? Ye(p(), document.body) : p();
 }, nr = ({
   message: e,
   className: t,
   duration: n,
-  closeIcon: l = Le,
+  closeIcon: o = Le,
   onClose: r,
   ...s
 }) => {
-  const [c, a] = $(!0), u = Wt({
+  const [c, a] = M(!0), i = Wt({
     className: t,
-    closeIcon: l,
+    closeIcon: o,
     duration: n,
     isVisible: c,
     onClose: r,
     message: e
   });
-  R(() => {
+  $(() => {
     n && setTimeout(() => {
-      o();
+      l();
     }, n);
   }, [n]);
-  const o = () => {
+  const l = () => {
     a(!1), r == null || r();
   };
   return /* @__PURE__ */ m(se, { children: c && /* @__PURE__ */ m(
@@ -3103,16 +3102,16 @@ const zn = ({
       animate: { height: "auto" },
       exit: { height: 0 },
       transition: { duration: 0.1 },
-      className: u.snackbar,
+      className: i.snackbar,
       ...s,
-      children: /* @__PURE__ */ Y("div", { className: u.container, children: [
-        /* @__PURE__ */ m("p", { className: u.supportingText, children: e }),
+      children: /* @__PURE__ */ Y("div", { className: i.container, children: [
+        /* @__PURE__ */ m("p", { className: i.supportingText, children: e }),
         /* @__PURE__ */ m(
           be,
           {
-            onClick: () => o(),
-            className: u.icon,
-            icon: l,
+            onClick: () => l(),
+            className: i.icon,
+            icon: o,
             label: "close the snackbar"
           }
         )
@@ -3123,62 +3122,62 @@ const zn = ({
   selected: e = !1,
   className: t,
   activeIcon: n,
-  disabled: l = !1,
+  disabled: o = !1,
   inactiveIcon: r,
   onChange: s,
   onClick: c,
   onKeyDown: a,
-  ref: u,
-  ...o
+  ref: i,
+  ...l
 }) => {
-  const [p, v] = $(e), f = (g) => {
-    l || (d(), c && c(g));
-  }, i = (g) => {
-    l || ((g.key === " " || g.key === "Enter") && (g.preventDefault(), d()), a && a(g));
+  const [h, v] = M(e), f = (g) => {
+    o || (d(), c && c(g));
+  }, u = (g) => {
+    o || ((g.key === " " || g.key === "Enter") && (g.preventDefault(), d()), a && a(g));
   }, d = () => {
-    v(!p), s == null || s(!p);
-  }, h = At({
+    v(!h), s == null || s(!h);
+  }, p = At({
     className: t,
-    isSelected: p,
+    isSelected: h,
     activeIcon: n,
     inactiveIcon: r,
-    disabled: l,
-    selected: p,
+    disabled: o,
+    selected: h,
     onChange: s
-  }), w = W(null), b = u || w;
+  }), w = W(null), E = i || w;
   return /* @__PURE__ */ Y(
     q.div,
     {
       role: "switch",
-      "aria-checked": p,
-      tabIndex: l ? -1 : 0,
-      onKeyDown: i,
+      "aria-checked": h,
+      tabIndex: o ? -1 : 0,
+      onKeyDown: u,
       onClick: f,
-      ref: b,
-      className: h.switch,
-      ...o,
+      ref: E,
+      className: p.switch,
+      ...l,
       children: [
-        /* @__PURE__ */ m("input", { type: "hidden", value: p ? "1" : "0" }),
+        /* @__PURE__ */ m("input", { type: "hidden", value: h ? "1" : "0" }),
         /* @__PURE__ */ Y(
           q.div,
           {
             layout: !0,
-            style: { translate: p ? "50%" : "-50%" },
+            style: { translate: h ? "50%" : "-50%" },
             transition: {
               type: "spring",
               stiffness: 700,
               damping: 30
             },
-            className: h.handleContainer,
+            className: p.handleContainer,
             children: [
-              /* @__PURE__ */ m("div", { className: h.handle, children: (p ? n : r) && /* @__PURE__ */ m(
+              /* @__PURE__ */ m("div", { className: p.handle, children: (h ? n : r) && /* @__PURE__ */ m(
                 ie,
                 {
-                  className: h.icon,
-                  icon: p ? n : r
+                  className: p.icon,
+                  icon: h ? n : r
                 }
               ) }),
-              /* @__PURE__ */ m("div", { className: h.handleStateLayer })
+              /* @__PURE__ */ m("div", { className: p.handleStateLayer })
             ]
           }
         )
@@ -3189,57 +3188,57 @@ const zn = ({
   className: e,
   onClick: t,
   label: n,
-  variant: l = "primary",
+  variant: o = "primary",
   href: r,
   icon: s,
   selectedTab: c,
   setSelectedTab: a,
-  tabsId: u,
-  index: o,
-  onTabSelected: p,
+  tabsId: i,
+  index: l,
+  onTabSelected: h,
   scrollable: v = !1,
   selected: f = !1,
-  ref: i,
+  ref: u,
   ...d
 }) => {
-  const h = W(null), w = i || h, [b, g] = $(f);
-  R(() => {
-    f && c == null ? g(!0) : g(c == o && o != null);
-  }, [c]), R(() => {
-    c == o && p && p({
+  const p = W(null), w = u || p, [E, g] = M(f);
+  $(() => {
+    f && c == null ? g(!0) : g(c == l && l != null);
+  }, [c]), $(() => {
+    c == l && h && h({
       ref: w,
-      index: o || 0,
+      index: l || 0,
       label: n,
       icon: s
     });
   }, [c]);
-  const I = r ? "a" : "button", E = (L) => {
-    a && a(o ?? null), t && t(L);
+  const b = r ? "a" : "button", R = (N) => {
+    a && a(l ?? null), t && t(N);
   }, A = Pt({
     className: e,
-    onTabSelected: p,
+    onTabSelected: h,
     scrollable: v,
     selectedTab: c,
-    index: o,
-    tabsId: u,
-    selected: b,
-    variant: l,
+    index: l,
+    tabsId: i,
+    selected: E,
+    variant: o,
     icon: s,
     label: n,
-    isSelected: b,
+    isSelected: E,
     setSelectedTab: a,
     href: r
   });
   return /* @__PURE__ */ Y(
-    I,
+    b,
     {
       ...d,
       role: "tab",
-      "aria-selected": b,
+      "aria-selected": E,
       ref: w,
       href: r,
       className: A.tab,
-      onClick: E,
+      onClick: R,
       ...d,
       children: [
         /* @__PURE__ */ m(
@@ -3247,17 +3246,17 @@ const zn = ({
           {
             style: { transition: 0.3 + "s" },
             className: A.stateLayer,
-            colorName: l === "primary" && b ? "primary" : "on-surface",
+            colorName: o === "primary" && E ? "primary" : "on-surface",
             stateClassName: "state-ripple-group-[tab]"
           }
         ),
         /* @__PURE__ */ Y("span", { className: A.content, children: [
           s && /* @__PURE__ */ m(ie, { icon: s, className: A.icon }),
           /* @__PURE__ */ m("span", { className: A.label, children: n }),
-          b && /* @__PURE__ */ m(
+          E && /* @__PURE__ */ m(
             q.span,
             {
-              layoutId: `underline-${u}`,
+              layoutId: `underline-${i}`,
               className: A.underline,
               transition: { duration: 0.3 }
             }
@@ -3270,107 +3269,107 @@ const zn = ({
   variant: e = "primary",
   onTabSelected: t,
   children: n,
-  className: l,
+  className: o,
   selectedTab: r,
   setSelectedTab: s,
   scrollable: c = !1
 }) => {
-  const [a, u] = $(
+  const [a, i] = M(
     null
   );
-  let o;
-  r == 0 || r != null ? o = r : o = a;
-  const p = s || u, v = Z.Children.toArray(n).filter(
+  let l;
+  r == 0 || r != null ? l = r : l = a;
+  const h = s || i, v = Z.Children.toArray(n).filter(
     (w) => Z.isValidElement(w) && w.type === fn
-  ), f = Z.useRef(null), i = (w) => {
+  ), f = Z.useRef(null), u = (w) => {
     if (t == null || t(w), c) {
-      const b = f.current, g = w.ref.current;
-      if (b && g) {
-        const I = g.offsetLeft + g.offsetWidth / 2 - b.offsetWidth / 2;
-        b.scrollTo({ left: I, behavior: "smooth" });
+      const E = f.current, g = w.ref.current;
+      if (E && g) {
+        const b = g.offsetLeft + g.offsetWidth / 2 - E.offsetWidth / 2;
+        E.scrollTo({ left: b, behavior: "smooth" });
       }
     }
-  }, d = Me(() => ge(), []), h = Ht({
+  }, d = Me(() => ge(), []), p = Ht({
     children: n,
     onTabSelected: t,
     scrollable: c,
-    selectedTab: o,
-    setSelectedTab: p,
-    className: l,
+    selectedTab: l,
+    setSelectedTab: h,
+    className: o,
     variant: e
   });
-  return /* @__PURE__ */ m("div", { ref: f, role: "tablist", className: h.tabs, children: v.map((w, b) => Z.cloneElement(w, {
-    key: b,
-    index: b,
+  return /* @__PURE__ */ m("div", { ref: f, role: "tablist", className: p.tabs, children: v.map((w, E) => Z.cloneElement(w, {
+    key: E,
+    index: E,
     variant: e,
-    selectedTab: o,
-    setSelectedTab: p,
+    selectedTab: l,
+    setSelectedTab: h,
     tabsId: d,
-    onTabSelected: i,
+    onTabSelected: u,
     scrollable: c
   })) });
 }, lr = ({
   variant: e = "filled",
   disabled: t = !1,
   errorText: n,
-  placeholder: l,
+  placeholder: o,
   suffix: r,
   name: s,
   label: c,
   className: a,
-  supportingText: u,
-  trailingIcon: o,
-  leadingIcon: p,
+  supportingText: i,
+  trailingIcon: l,
+  leadingIcon: h,
   type: v = "text",
   textLine: f = "singleLine",
-  autoComplete: i = "on",
+  autoComplete: u = "on",
   onChange: d,
-  value: h,
+  value: p,
   showSupportingText: w = !1,
-  ...b
+  ...E
 }) => {
-  const [g, I] = $(h ?? ""), [E, A] = $(!1), [L, V] = $(!1), [H, M] = $(
+  const [g, b] = M(p ?? ""), [R, A] = M(!1), [N, F] = M(!1), [O, I] = M(
     w
   );
-  R(() => {
-    I(h ?? "");
-  }, [h]), R(() => {
-    n != null && n.length ? V(!0) : V(!1);
-  }, [n]), R(() => {
-    w ? M(w) : u != null && u.length ? M(!0) : M(!1);
-  }, [H, u]), R(() => {
-    E && V(!1);
-  }, [E]);
+  $(() => {
+    b(p ?? "");
+  }, [p]), $(() => {
+    n != null && n.length ? F(!0) : F(!1);
+  }, [n]), $(() => {
+    w ? I(w) : i != null && i.length ? I(!0) : I(!1);
+  }, [O, i]), $(() => {
+    R && F(!1);
+  }, [R]);
   const x = Z.useRef(null), S = () => {
-    x.current && !E && x.current.focus();
-  }, O = () => {
+    x.current && !R && x.current.focus();
+  }, V = () => {
     A(!0);
   }, G = (U) => {
     const K = U.target.value;
-    I(K), V(!1), typeof d == "function" && d(K);
+    b(K), F(!1), typeof d == "function" && d(K);
   }, te = () => {
     A(!1);
   }, _ = Ft({
-    showSupportingText: H,
-    isFocused: E,
-    showErrorIcon: L,
+    showSupportingText: O,
+    isFocused: R,
+    showErrorIcon: N,
     disabled: t,
     name: s,
     label: c,
-    autoComplete: i,
+    autoComplete: u,
     className: a,
     onChange: d,
-    placeholder: l,
-    supportingText: u,
+    placeholder: o,
+    supportingText: i,
     type: v,
-    leadingIcon: p,
-    trailingIcon: o,
+    leadingIcon: h,
+    trailingIcon: l,
     variant: e,
     errorText: n,
     value: g,
     suffix: r,
     textLine: f
-  }), [ne] = $(ge());
+  }), [ne] = M(ge());
   let B, k;
   switch (f) {
     case "multiLine":
@@ -3384,11 +3383,11 @@ const zn = ({
       k = "input", B = { type: v };
       break;
   }
-  return /* @__PURE__ */ Y("div", { className: _.textField, ...b, children: [
+  return /* @__PURE__ */ Y("div", { className: _.textField, ...E, children: [
     /* @__PURE__ */ Y("fieldset", { onClick: S, className: _.content, children: [
       /* @__PURE__ */ m("div", { className: _.stateLayer }),
-      p && /* @__PURE__ */ m("div", { className: _.leadingIcon, children: Z.isValidElement(p) ? p : /* @__PURE__ */ m(ie, { className: "w-5 h-5", icon: p }) }),
-      !(!E && !g.length || e == "filled") && /* @__PURE__ */ m(
+      h && /* @__PURE__ */ m("div", { className: _.leadingIcon, children: Z.isValidElement(h) ? h : /* @__PURE__ */ m(ie, { className: "w-5 h-5", icon: h }) }),
+      !(!R && !g.length || e == "filled") && /* @__PURE__ */ m(
         q.legend,
         {
           variants: {
@@ -3396,7 +3395,7 @@ const zn = ({
             visible: { width: "auto", padding: "0 8px" }
           },
           initial: "hidden",
-          animate: !E && !g.length ? "hidden" : "visible",
+          animate: !R && !g.length ? "hidden" : "visible",
           className: "max-w-full ml-2 px-2 text-body-small h-0",
           transition: { duration: 0.2 },
           children: /* @__PURE__ */ m("span", { className: "transform inline-flex -translate-y-1/2", children: /* @__PURE__ */ m(
@@ -3411,15 +3410,15 @@ const zn = ({
         }
       ),
       /* @__PURE__ */ Y("div", { className: "flex-1 relative", children: [
-        (!E && !g.length || e == "filled") && /* @__PURE__ */ m(
+        (!R && !g.length || e == "filled") && /* @__PURE__ */ m(
           q.label,
           {
             htmlFor: s,
             className: y(
               "absolute left-4  transition-all duration-300",
               {
-                "text-body-small top-2": e == "filled" && !(!E && !g.length),
-                "text-body-large top-1/2 transform -translate-y-1/2": !(e == "filled" && !(!E && !g.length))
+                "text-body-small top-2": e == "filled" && !(!R && !g.length),
+                "text-body-large top-1/2 transform -translate-y-1/2": !(e == "filled" && !(!R && !g.length))
               }
             ),
             transition: { duration: 0.3 },
@@ -3443,11 +3442,11 @@ const zn = ({
             className: _.input,
             id: s,
             name: s,
-            placeholder: E ? l ?? void 0 : "",
-            onFocus: O,
+            placeholder: R ? o ?? void 0 : "",
+            onFocus: V,
             onBlur: te,
             disabled: t,
-            autoComplete: i,
+            autoComplete: u,
             "aria-invalid": !!(n != null && n.length),
             "aria-label": c,
             ...B
@@ -3455,24 +3454,24 @@ const zn = ({
         )
       ] }),
       /* @__PURE__ */ m("div", { className: _.activeIndicator }),
-      !L && /* @__PURE__ */ Y(me, { children: [
-        o && /* @__PURE__ */ m(
+      !N && /* @__PURE__ */ Y(me, { children: [
+        l && /* @__PURE__ */ m(
           "div",
           {
             onClick: (U) => {
               U.stopPropagation();
             },
             className: _.trailingIcon,
-            children: Z.isValidElement(o) ? o : /* @__PURE__ */ m(ie, { className: "h-5", icon: o })
+            children: Z.isValidElement(l) ? l : /* @__PURE__ */ m(ie, { className: "h-5", icon: l })
           }
         ),
-        !o && r && /* @__PURE__ */ m("span", { className: _.suffix, children: r })
+        !l && r && /* @__PURE__ */ m("span", { className: _.suffix, children: r })
       ] }),
-      L && /* @__PURE__ */ m(
+      N && /* @__PURE__ */ m(
         "div",
         {
           className: y(_.trailingIcon, {
-            " absolute right-0": !o
+            " absolute right-0": !l
           }),
           children: /* @__PURE__ */ m(
             ie,
@@ -3484,39 +3483,39 @@ const zn = ({
         }
       )
     ] }),
-    H && /* @__PURE__ */ m("p", { className: _.supportingText, children: n != null && n.length ? n : u != null && u.length ? u : " " })
+    O && /* @__PURE__ */ m("p", { className: _.supportingText, children: n != null && n.length ? n : i != null && i.length ? i : " " })
   ] });
-}, mn = ({ isSelected: e, icon: t, label: n, variant: l }) => ({
+}, mn = ({ isSelected: e, icon: t, label: n, variant: o }) => ({
   navigationRailItem: y(
     " group/navigation-rail-item flex flex-col  pt-1 pb-1.5 cursor-pointer",
     {
       "text-on-surface-variant": !e,
       "text-on-secondary-container": e,
-      "gap-2  h-[68px]": l == "vertical",
-      "gap-0  h-[66px]": l == "horizontal"
+      "gap-2  h-[68px]": o == "vertical",
+      "gap-0  h-[66px]": o == "horizontal"
     }
   ),
   container: y(
     " w-fit flex justify-center  relative rounded-full items-center mx-5",
     {
       "bg-secondary-container overflow-hidden": e,
-      "gap-2 ": l == "horizontal",
-      "gap-0 ": l == "vertical",
+      "gap-2 ": o == "horizontal",
+      "gap-0 ": o == "vertical",
       "p-4": !n
     },
     n && [
       "px-4",
       {
-        "py-1 ": l == "vertical",
-        "py-4 ": l == "horizontal"
+        "py-1 ": o == "vertical",
+        "py-4 ": o == "horizontal"
       }
     ]
   ),
   stateLayer: y("rounded-full"),
   icon: y("size-6 flex"),
   label: y("w-fit mx-auto text-nowrap", {
-    "text-label-large ": l == "horizontal",
-    "text-label-medium": l == "vertical"
+    "text-label-large ": o == "horizontal",
+    "text-label-medium": o == "vertical"
   })
 }), hn = J(
   "navigationRailItem",
@@ -3525,47 +3524,47 @@ const zn = ({
   className: e,
   onClick: t,
   label: n,
-  variant: l = "vertical",
+  variant: o = "vertical",
   href: r,
   icon: s,
   selectedItem: c,
   setSelectedItem: a,
-  index: u,
-  onItemSelected: o,
-  selected: p = !1,
+  index: i,
+  onItemSelected: l,
+  selected: h = !1,
   ref: v,
   transition: f,
-  isExtended: i,
+  isExtended: u,
   iconSelected: d,
-  style: h,
+  style: p,
   extendedOnly: w,
-  children: b,
+  children: E,
   ...g
 }) => {
-  b && (n = b);
-  const I = W(null), E = v || I, [A, L] = $(p);
-  R(() => {
-    p && c == null ? L(!0) : L(c == u && u != null);
-  }, [c]), R(() => {
-    c == u && o && o({
-      ref: E,
-      index: u || 0,
+  E && (n = E);
+  const b = W(null), R = v || b, [A, N] = M(h);
+  $(() => {
+    h && c == null ? N(!0) : N(c == i && i != null);
+  }, [c]), $(() => {
+    c == i && l && l({
+      ref: R,
+      index: i || 0,
       label: n,
       icon: s
     });
   }, [c]);
-  const V = r ? "a" : "button", H = (x) => {
-    a && a(u ?? null), t && t(x);
-  }, M = hn({
-    isExtended: i,
+  const F = r ? "a" : "button", O = (x) => {
+    a && a(i ?? null), t && t(x);
+  }, I = hn({
+    isExtended: u,
     extendedOnly: w,
     className: e,
-    onItemSelected: o,
+    onItemSelected: l,
     selectedItem: c,
-    index: u,
+    index: i,
     transition: f,
     selected: A,
-    variant: l,
+    variant: o,
     icon: s,
     label: n,
     isSelected: A,
@@ -3574,35 +3573,35 @@ const zn = ({
     children: n,
     iconSelected: d
   });
-  return f = { duration: 0.3, ...f }, w && !i ? null : (
+  return f = { duration: 0.3, ...f }, w && !u ? null : (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     /* @__PURE__ */ Y(
-      V,
+      F,
       {
         ...g,
         role: "tab",
         "aria-selected": A,
-        ref: E,
+        ref: R,
         href: r,
-        className: M.navigationRailItem,
-        onClick: H,
-        style: { transition: f.duration + "s", ...h },
+        className: I.navigationRailItem,
+        onClick: O,
+        style: { transition: f.duration + "s", ...p },
         children: [
           /* @__PURE__ */ Y(
             q.div,
             {
               style: {
-                transition: l == "horizontal" ? f.duration + `s, gap ${f.duration / 2}s ${f.duration - f.duration / 2}s` : f.duration + `s, gap ${f.duration / 3}s ${f.duration - f.duration / 3}s`
+                transition: o == "horizontal" ? f.duration + `s, gap ${f.duration / 2}s ${f.duration - f.duration / 2}s` : f.duration + `s, gap ${f.duration / 3}s ${f.duration - f.duration / 3}s`
               },
               transition: f,
-              className: M.container,
+              className: I.container,
               children: [
                 /* @__PURE__ */ m(
                   ye,
                   {
                     style: { transition: f.duration + "s" },
-                    className: M.stateLayer,
+                    className: I.stateLayer,
                     colorName: y({
                       "on-surface": !A,
                       "on-secondary-container": A
@@ -3614,10 +3613,10 @@ const zn = ({
                   ie,
                   {
                     icon: A ? d : s,
-                    className: M.icon
+                    className: I.icon
                   }
                 ),
-                /* @__PURE__ */ m(se, { children: l == "horizontal" && (() => {
+                /* @__PURE__ */ m(se, { children: o == "horizontal" && (() => {
                   const x = {
                     width: 0,
                     opacity: 0,
@@ -3641,7 +3640,7 @@ const zn = ({
                       initial: x,
                       animate: S,
                       exit: x,
-                      className: M.label,
+                      className: I.label,
                       children: n
                     }
                   );
@@ -3649,7 +3648,7 @@ const zn = ({
               ]
             }
           ),
-          /* @__PURE__ */ m(se, { children: l == "vertical" && (() => {
+          /* @__PURE__ */ m(se, { children: o == "vertical" && (() => {
             const x = {
               height: 0,
               opacity: 0,
@@ -3676,7 +3675,7 @@ const zn = ({
                 initial: S,
                 animate: S,
                 exit: x,
-                className: M.label,
+                className: I.label,
                 transition: f,
                 children: n
               }
@@ -3709,7 +3708,7 @@ const zn = ({
   variant: e = "standard",
   onItemSelected: t,
   children: n,
-  className: l,
+  className: o,
   selectedItem: r,
   extended: s,
   alignment: c = "top",
@@ -3723,83 +3722,83 @@ const zn = ({
       label: "Close menu"
     }
   },
-  style: u,
-  onExtendedChange: o,
-  transition: p,
+  style: i,
+  onExtendedChange: l,
+  transition: h,
   setSelectedItem: v
 }) => {
-  const [f, i] = $(null), [d, h] = $(s);
+  const [f, u] = M(null), [d, p] = M(s);
   let w;
   r == 0 || r != null ? w = r : w = f;
-  const b = v || i, g = W(null), I = (M) => {
-    t == null || t(M);
+  const E = v || u, g = W(null), b = (I) => {
+    t == null || t(I);
   };
-  function E(M) {
+  function R(I) {
     const x = [];
-    return dt.forEach(M, (S) => {
-      pe(S) && S.type === ft ? x.push(...E(S.props.children)) : x.push(S);
+    return dt.forEach(I, (S) => {
+      pe(S) && S.type === ft ? x.push(...R(S.props.children)) : x.push(S);
     }), x;
   }
-  const A = E(n), L = A.filter(
-    (M) => pe(M) && M.type === Ce
-  ), V = vn({
+  const A = R(n), N = A.filter(
+    (I) => pe(I) && I.type === Ce
+  ), F = vn({
     children: n,
     onItemSelected: t,
     selectedItem: w,
-    setSelectedItem: b,
-    className: l,
+    setSelectedItem: E,
+    className: o,
     variant: e,
     extended: d,
     isExtended: d,
     alignment: c,
     menu: a,
-    transition: p,
-    onExtendedChange: o
+    transition: h,
+    onExtendedChange: l
   });
-  p = { duration: 0.3, ...p };
-  const H = W(!1);
-  return H.current = !1, R(() => {
-    o == null || o(d ?? !1);
+  h = { duration: 0.3, ...h };
+  const O = W(!1);
+  return O.current = !1, $(() => {
+    l == null || l(d ?? !1);
   }, [d]), /* @__PURE__ */ Y(
     "div",
     {
-      style: { transition: p.duration + "s", ...u },
+      style: { transition: h.duration + "s", ...i },
       ref: g,
-      className: V.navigationRail,
+      className: F.navigationRail,
       children: [
-        /* @__PURE__ */ Y("div", { className: V.header, children: [
+        /* @__PURE__ */ Y("div", { className: F.header, children: [
           /* @__PURE__ */ m(
             be,
             {
-              onClick: () => h(!d),
+              onClick: () => p(!d),
               label: d ? a == null ? void 0 : a.opened.label : a == null ? void 0 : a.closed.label,
-              className: V.menuIcon,
+              className: F.menuIcon,
               icon: d ? a.opened.icon : a == null ? void 0 : a.closed.icon
             }
           ),
-          L.length > 0 && xe(L[0], {
-            transition: p,
+          N.length > 0 && xe(N[0], {
+            transition: h,
             isExtended: d,
-            className: "!shadow-none mx-5 " + L[0].props.className
+            className: "!shadow-none mx-5 " + N[0].props.className
           })
         ] }),
-        /* @__PURE__ */ m("div", { className: V.segments, children: (() => {
-          let M = 0;
+        /* @__PURE__ */ m("div", { className: F.segments, children: (() => {
+          let I = 0;
           return A.map((x) => pe(x) && x.type === yn ? xe(
             x,
             {
-              key: M,
-              index: M++,
+              key: I,
+              index: I++,
               // Utilise et incrémente le compteur dédié
               variant: d ? "horizontal" : "vertical",
               selectedItem: w,
-              setSelectedItem: b,
-              onItemSelected: I,
-              transition: p,
-              extendedOnly: H.current,
+              setSelectedItem: E,
+              onItemSelected: b,
+              transition: h,
+              extendedOnly: O.current,
               isExtended: d
             }
-          ) : pe(x) && x.type === Ce ? null : pe(x) && x.type === pn ? (H.current = !0, d ? xe(x, {}) : null) : x);
+          ) : pe(x) && x.type === Ce ? null : pe(x) && x.type === pn ? (O.current = !0, d ? xe(x, {}) : null) : x);
         })() }),
         /* @__PURE__ */ m("div", { className: "flex-1 max-h-[160px]" })
       ]