@udixio/ui-react 2.8.1 → 2.8.3

package/dist/index.js

@@ -1,14 +1,14 @@
 import { jsx as m, jsxs as Y, Fragment as me } from "react/jsx-runtime";
-import { clsx as Ve } from "clsx";
+import { clsx as Oe } from "clsx";
 import { extendTailwindMerge as ut } from "tailwind-merge";
-import Z, { useMemo as Me, useState as R, useEffect as $, useRef as W, useLayoutEffect as Ye, 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 De, animate as ht } from "motion/react";
+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 { 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 Ue } from "react-dom";
+import { createPortal as Ye } from "react-dom";
 import { loader as yt, defineConfig as wt, FontPlugin as vt, Variants as xt } from "@udixio/theme";
-import { TailwindPlugin as Xe } from "@udixio/tailwind";
+import { TailwindPlugin as Ue } from "@udixio/tailwind";
 import gt from "react-textarea-autosize";
-const je = ut({
+const Xe = ut({
   override: {
     classGroups: {
       "text-color": [
@@ -34,7 +34,7 @@ const je = ut({
       font: ["font"]
     }
   }
-}), y = (...e) => je(Ve(e)), bt = (...e) => je(Ve(e));
+}), y = (...e) => Xe(Oe(e)), bt = (...e) => Xe(Oe(e));
 function Lt(e) {
   return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -80,7 +80,7 @@ function Mn(e, t, n) {
     [e, t, n]
   );
 }
-const qe = ({
+const je = ({
   variant: e,
   disableTextMargins: t,
   disabled: n,
@@ -193,11 +193,11 @@ const qe = ({
   )
 }), $n = Q(
   "button",
-  qe
+  je
 ), Nt = J(
   "button",
-  qe
-), _e = ({
+  je
+), qe = ({
   variant: e,
   isInteractive: t
 }) => ({
@@ -207,10 +207,10 @@ const qe = ({
     e === "elevated" && "bg-surface-container-low shadow-1",
     e === "filled" && "bg-surface-container-highest"
   )
-}), Rn = Q("card", _e), Et = J(
+}), Rn = Q("card", qe), Et = J(
   "card",
-  _e
-), Ke = ({
+  qe
+), _e = ({
   width: e
 }) => ({
   carouselItem: y("rounded-[28px] overflow-hidden flex-none", {
@@ -219,20 +219,20 @@ const qe = ({
   })
 }), Bn = Q(
   "carouselItem",
-  Ke
+  _e
 ), St = J(
   "carouselItem",
-  Ke
-), Ge = () => ({
+  _e
+), Ke = () => ({
   carousel: y(["w-full h-[400px]"]),
   track: y("flex h-full w-full")
 }), Dn = Q(
   "carousel",
-  Ge
+  Ke
 ), It = J(
   "carousel",
-  Ge
-), Je = ({
+  Ke
+), Ge = ({
   orientation: e
 }) => ({
   divider: y(
@@ -246,11 +246,11 @@ const qe = ({
   )
 }), Wn = Q(
   "divider",
-  Je
+  Ge
 ), kt = J(
   "divider",
-  Je
-), Ze = ({
+  Ge
+), Je = ({
   size: e,
   variant: t,
   extended: n
@@ -283,7 +283,7 @@ const qe = ({
     "text-title-large": e == "medium",
     "text-headline-small": e == "large"
   })
-}), An = Q("fab", Ze), Ct = J("fab", Ze), Qe = ({
+}), An = Q("fab", Je), Ct = J("fab", Je), Ze = ({
   size: e,
   variant: t,
   open: n
@@ -294,11 +294,11 @@ const qe = ({
   )
 }), Pn = Q(
   "fabMenu",
-  Qe
+  Ze
 ), Mt = J(
   "fabMenu",
-  Qe
-), Te = ({
+  Ze
+), Qe = ({
   variant: e,
   disabled: t,
   onToggle: n,
@@ -432,11 +432,11 @@ const qe = ({
   )
 }), Hn = Q(
   "iconButton",
-  Te
+  Qe
 ), $t = J(
   "iconButton",
-  Te
-), ze = ({ variant: e, isVisible: t }) => ({
+  Qe
+), Te = ({ variant: e, isVisible: t }) => ({
   progressIndicator: y(
     (e === "linear-determinate" || e == "linear-indeterminate") && "flex w-full h-1"
   ),
@@ -467,11 +467,11 @@ const qe = ({
   )
 }), Fn = Q(
   "progressIndicator",
-  ze
+  Te
 ), Rt = J(
   "progressIndicator",
-  ze
-), et = ({
+  Te
+), ze = ({
   variant: e,
   position: t
 }) => ({
@@ -498,11 +498,11 @@ const qe = ({
   overlay: y("bg-[black]/[0.32] fixed top-0 left-0 w-screen h-screen")
 }), Bt = Q(
   "sideSheet",
-  et
+  ze
 ), On = J(
   "sideSheet",
-  et
-), tt = ({
+  ze
+), et = ({
   isChanging: e
 }) => ({
   slider: y([
@@ -526,11 +526,11 @@ const qe = ({
   ])
 }), Vn = Q(
   "slider",
-  tt
+  et
 ), Dt = J(
   "slider",
-  tt
-), nt = () => ({
+  et
+), tt = () => ({
   snackbar: y(" rounded bg-inverse-surface "),
   container: y(
     "pl-4 pr-2 max-w-full py-1 flex items-center flex-wrap"
@@ -539,11 +539,11 @@ const qe = ({
   icon: y(" ml-auto mr-0 text-inverse-on-surface block dark")
 }), Yn = Q(
   "snackbar",
-  nt
+  tt
 ), Wt = J(
   "snackbar",
-  nt
-), rt = ({
+  tt
+), nt = ({
   isSelected: e,
   disabled: t,
   inactiveIcon: n
@@ -589,11 +589,11 @@ const qe = ({
   )
 }), Un = Q(
   "switch",
-  rt
+  nt
 ), At = J(
   "switch",
-  rt
-), ot = ({
+  nt
+), rt = ({
   isSelected: e,
   icon: t,
   label: n,
@@ -654,16 +654,16 @@ const qe = ({
     l === "primary" && "h-[3px] rounded-t",
     l === "secondary" && "h-0.5"
   )
-}), Xn = Q("tab", ot), Pt = J("tab", ot), lt = ({ scrollable: e }) => ({
+}), Xn = Q("tab", rt), Pt = J("tab", rt), ot = ({ scrollable: e }) => ({
   tabs: y(
     "border-b border-surface-container-highest bg-surface",
     "flex relative ",
     { "overflow-x-auto": e }
   )
-}), jn = Q("tabs", lt), Ht = J(
+}), jn = Q("tabs", ot), Ht = J(
   "tabs",
-  lt
-), at = ({
+  ot
+), lt = ({
   disabled: e,
   leadingIcon: t,
   trailingIcon: n,
@@ -757,11 +757,11 @@ const qe = ({
   )
 }), qn = Q(
   "textField",
-  at
+  lt
 ), Ft = J(
   "textField",
-  at
-), st = ({
+  lt
+), at = ({
   position: e,
   variant: t
 }) => ({
@@ -788,10 +788,10 @@ const qe = ({
   supportingText: y("")
 }), _n = Q(
   "toolTip",
-  st
+  at
 ), Ot = J(
   "toolTip",
-  st
+  at
 ), ie = ({ icon: e, colors: t = [], className: n }) => {
   if (typeof e == "string") {
     let o = e;
@@ -865,12 +865,12 @@ const qe = ({
   className: l,
   ...r
 }) => {
-  const [s, c] = R(t), [a] = R(1.5);
-  $(() => {
+  const [s, c] = $(t), [a] = $(1.5);
+  R(() => {
     t > 100 && (t = 100), t < 0 && (t = 0), c(t);
   }, [t]);
-  const [u, o] = R(!0), p = () => u ? a : a * 0.5;
-  $(() => {
+  const [u, o] = $(!0), p = () => u ? a : a * 0.5;
+  R(() => {
     if ((e === "circular-indeterminate" || e === "linear-indeterminate") && s !== 100) {
       const d = setInterval(() => {
         c(u ? 10 : 90), o(!u);
@@ -878,8 +878,8 @@ const qe = ({
       return () => clearInterval(d);
     }
   }, [e, u, s]);
-  const [v, f] = R(!1);
-  $(() => {
+  const [v, f] = $(!1);
+  R(() => {
     if (s >= 100) {
       const d = setTimeout(() => {
         f(!1);
@@ -1002,10 +1002,10 @@ const qe = ({
         duration: 0.3
       }
     }
-  }, [l, r] = R(!0), [s, c] = R(!1), [a, u] = R({ x: 50, y: 50 });
-  $(() => {
+  }, [l, r] = $(!0), [s, c] = $(!1), [a, u] = $({ x: 50, y: 50 });
+  R(() => {
     s && (r(!0), r(!1));
-  }, [s]), $(() => {
+  }, [s]), R(() => {
     const d = t == null ? void 0 : t.current;
     if (d)
       return d.addEventListener("mousedown", o), d.addEventListener("mouseup", v), d.addEventListener("mouseleave", p), () => {
@@ -1101,11 +1101,11 @@ const jt = ({
   setScroll: u
 }) => {
   var le, ue;
-  const o = W(null), p = W(null), [v, f] = R({
+  const o = W(null), p = W(null), [v, f] = $({
     width: null,
     height: null
   });
-  $(() => {
+  R(() => {
     if (!o.current) return;
     const C = new ResizeObserver((N) => {
       for (const D of N)
@@ -1134,8 +1134,8 @@ const jt = ({
     } : null;
   }, { scrollYProgress: b, scrollXProgress: g } = mt({
     container: o
-  }), S = W(null);
-  S.current || (S.current = Xt(
+  }), I = W(null);
+  I.current || (I.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({
@@ -1152,11 +1152,11 @@ const jt = ({
     }
   ));
   const E = (C, N) => {
-    S.current && S.current(C, N);
+    I.current && I.current(C, N);
   };
-  $(() => {
+  R(() => {
     v.width && E(g.get(), "x"), v.height && E(b.get(), "y");
-  }, [v]), $(() => {
+  }, [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));
@@ -1167,13 +1167,13 @@ const jt = ({
       const F = Math.max(0, (n ?? N.scrollHeight) - C.clientHeight);
       C.scrollTop = D(a * F, 0, F);
     }
-  }, [a, t, n]), De(g, "change", (C) => {
+  }, [a, t, n]), Be(g, "change", (C) => {
     E(C, "x");
-  }), De(b, "change", (C) => {
+  }), Be(b, "change", (C) => {
     E(C, "y");
   });
-  const [A, L] = R(!1);
-  Ye(() => {
+  const [A, L] = $(!1);
+  Ve(() => {
     A || !d.current || !i.current || !l || (l({
       scrollProgress: 0,
       scroll: 0,
@@ -1181,7 +1181,7 @@ const jt = ({
       scrollVisible: t == "vertical" ? d.current.height : d.current.width
     }), L(!0));
   }, [d, i, l]), i.current = h(), d.current = w();
-  const [V, H] = R(!1), M = Ut({
+  const [V, H] = $(!1), M = Ut({
     isDragging: V,
     children: e,
     className: r,
@@ -1190,7 +1190,7 @@ const jt = ({
     scrollSize: n,
     draggable: s,
     throttleDuration: c
-  }), [x, I] = R(0), [O, G] = R(0), T = (C) => {
+  }), [x, S] = $(0), [O, G] = $(0), te = (C) => {
     if (!s) return;
     const N = o.current;
     if (!N || x == null) return;
@@ -1198,9 +1198,9 @@ const jt = ({
     N.scrollLeft = O - F;
   }, _ = (C) => {
     const N = o.current;
-    N && (H(!0), I(C.pageX - N.offsetLeft), G(N.scrollLeft));
+    N && (H(!0), S(C.pageX - N.offsetLeft), G(N.scrollLeft));
   }, ne = (C) => {
-    V && (C.preventDefault(), T(C));
+    V && (C.preventDefault(), te(C));
   }, B = () => {
     H(!1);
   }, k = () => {
@@ -1208,9 +1208,9 @@ const jt = ({
   }, U = (C) => {
     C.preventDefault();
   }, K = W(null);
-  return $(() => () => {
+  return R(() => () => {
     K.current && clearTimeout(K.current);
-  }, []), $(() => {
+  }, []), R(() => {
     const C = o.current;
     if (!C) return;
     const N = (D) => {
@@ -1261,7 +1261,7 @@ const jt = ({
       onMouseLeave: k,
       onDragStart: U,
       onScroll: (C) => {
-        V || (I(null), H(!0), K.current && clearTimeout(K.current), K.current = setTimeout(() => {
+        V || (S(null), H(!0), K.current && clearTimeout(K.current), K.current = setTimeout(() => {
           H(!1);
         }, 1e3));
       },
@@ -1304,7 +1304,7 @@ const jt = ({
   touch: n = !0
 }) => {
   const l = W(null), r = W(0), s = W(0);
-  $(() => {
+  R(() => {
     if (!t) return;
     r.current = t.scrollTop, s.current = t.scrollLeft;
     const c = (i) => {
@@ -1341,8 +1341,8 @@ const jt = ({
       if (!d || !l.current) return;
       const h = l.current.x - d.clientX, w = l.current.y - d.clientY, b = i.target, g = a(b);
       if (g && g !== t) {
-        const S = g.scrollTop < g.scrollHeight - g.clientHeight, E = g.scrollTop > 0;
-        if (w > 0 && S || w < 0 && E) {
+        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 };
           return;
         }
@@ -1407,12 +1407,12 @@ const jt = ({
   orientation: t = "vertical",
   throttleDuration: n = 25
 }) => {
-  const [l, r] = R(0), [s, c] = R(), a = W(!1), u = W(), o = W(0);
-  $(() => {
+  const [l, r] = $(0), [s, c] = $(), a = W(!1), u = W(), o = W(0);
+  R(() => {
     c(document);
     const f = document.documentElement.scrollTop;
     r(f), o.current = f;
-  }, []), $(() => {
+  }, []), R(() => {
     const f = () => {
       a.current || r(document.documentElement.scrollTop);
     };
@@ -1421,7 +1421,7 @@ const jt = ({
     };
   }, [s]);
   const p = W(), v = W(null);
-  return $(() => {
+  return R(() => {
     const f = l;
     if (v.current && (v.current.stop(), v.current = null), !a.current) {
       p.current = f;
@@ -1463,13 +1463,13 @@ const jt = ({
   stateClassName: n = "state-ripple-group",
   className: l
 }) => {
-  const r = W(null), s = W(null), [c, a] = R(!1), u = Kt({
+  const r = W(null), s = W(null), [c, a] = $(!1), u = Kt({
     isClient: c,
     stateClassName: n,
     className: l,
     colorName: t
   });
-  return $(() => {
+  return R(() => {
     if (r.current && n !== "state-layer") {
       const o = n.includes("[") ? n.split("[")[1].split("]")[0] : "group", p = r.current.closest(
         `.${o}:not(.${o} .${o})`
@@ -1504,7 +1504,7 @@ const jt = ({
   targetRef: e,
   children: t
 }) => {
-  const [n, l] = R(null), r = W(null), s = () => {
+  const [n, l] = $(null), r = W(null), s = () => {
     const c = e.current;
     if (!c) return;
     const a = c.getBoundingClientRect();
@@ -1520,14 +1520,14 @@ const jt = ({
       // personnalise si besoin
     });
   };
-  return $(() => {
+  return R(() => {
     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), () => {
         var a;
         window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s), (a = r.current) == null || a.disconnect();
       };
-  }, [e]), n ? Ue(/* @__PURE__ */ m("div", { style: n, children: t }), document.body) : null;
+  }, [e]), n ? Ye(/* @__PURE__ */ m("div", { style: n, children: t }), document.body) : null;
 };
 function Jt(e) {
   return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(e);
@@ -1539,15 +1539,15 @@ const Gn = ({
   onLoad: n,
   loadTheme: l = !1
 }) => {
-  const [r, s] = R(null);
-  $(() => {
+  const [r, s] = $(null);
+  R(() => {
     (async () => {
       const f = await yt(e, l);
       s(f);
     })();
   }, []);
-  const [c, a] = R(null), u = W(null), o = W(0), p = W(null);
-  $(() => {
+  const [c, a] = $(null), u = W(null), o = W(0), p = W(null);
+  R(() => {
     if (!r) return;
     const f = {
       ...e,
@@ -1575,10 +1575,10 @@ const Gn = ({
     if (!r)
       return;
     r.context.update(f), await r.load();
-    const i = r == null ? void 0 : r.plugins.getPlugin(Xe).getInstance().outputCss;
+    const i = r == null ? void 0 : r.plugins.getPlugin(Ue).getInstance().outputCss;
     a(i), n == null || n(r);
   };
-  return $(() => () => {
+  return R(() => () => {
     u.current && (clearTimeout(u.current), u.current = null);
   }, []), c ? /* @__PURE__ */ m("style", { dangerouslySetInnerHTML: { __html: c } }) : null;
 };
@@ -1602,12 +1602,12 @@ function Re(e) {
     (n) => n.startsWith("anim-") && n.includes("scroll")
   );
 }
-function We(e) {
+function De(e) {
   if (!(e instanceof HTMLElement)) return !1;
   const t = e.classList;
   return Array.from(t).some((n) => n.startsWith("anim-"));
 }
-function Ee(e, t) {
+function Se(e, t) {
   if (!Re(e)) return;
   if (e.hasAttribute(`data-${t}-scroll`)) {
     const c = (e.getAttribute(`data-${t}-scroll`) || "").trim().toLowerCase(), a = c === "x" || c === "inline" ? "inline" : c === "y" || c === "block" ? "block" : "auto";
@@ -1620,7 +1620,7 @@ function Ee(e, t) {
   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`, "");
 }
-function Se(e = document, t) {
+function Ie(e = document, t) {
   return Array.from(
     e.querySelectorAll(
       `[class*="${t}-"][class*="-scroll"]`
@@ -1657,17 +1657,17 @@ function zt(e, t) {
     (n) => n.startsWith(t) && n.includes("-out")
   );
 }
-function Ae(e, t, n) {
+function We(e, t, n) {
   e.setAttribute(`data-${t}-run`, ""), e.setAttribute(`data-${t}-${n}-run`, "");
 }
-function Pe(e, t, n) {
+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 en = [0, 0.2], He = /* @__PURE__ */ new WeakSet();
-function Fe(e, t) {
-  if (He.has(e)) return;
-  He.add(e);
+const en = [0, 0.2], Pe = /* @__PURE__ */ new WeakSet();
+function He(e, t) {
+  if (Pe.has(e)) return;
+  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) => {
@@ -1675,7 +1675,7 @@ function Fe(e, t) {
   };
   e.addEventListener("animationstart", n), e.addEventListener("animationend", l), e.addEventListener("animationcancel", l);
 }
-function ct(e = {}) {
+function st(e = {}) {
   const { prefix: t = "anim", once: n = !0 } = e;
   if (Qt())
     return () => {
@@ -1691,16 +1691,16 @@ function ct(e = {}) {
     (i) => {
       for (const d of i) {
         const h = d.target;
-        if (!We(h) || h.hasAttribute(`data-${t}-animating`)) continue;
+        if (!De(h) || h.hasAttribute(`data-${t}-animating`)) continue;
         const w = zt(h.classList, t);
-        d.isIntersecting ? (w && Pe(h, t, "out"), Ae(h, t, "in"), n && u.unobserve(h)) : n || (c || Pe(h, t, "in"), w && Ae(h, t, "out"));
+        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"));
       }
     },
     { threshold: en }
   ), o = (i) => {
     const d = Tt(i || document, t);
     for (const h of d)
-      r.has(h) || (r.add(h), u.observe(h), Fe(h, t));
+      r.has(h) || (r.add(h), u.observe(h), He(h, t));
   };
   o();
   let p, v = null, f = null;
@@ -1708,19 +1708,19 @@ function ct(e = {}) {
     (() => {
       f == null && (f = requestAnimationFrame(() => {
         f = null;
-        const d = Se(void 0, t);
-        for (const h of d) Ee(h, t);
+        const d = Ie(void 0, t);
+        for (const h of d) Se(h, t);
       }));
     })(), v = new MutationObserver((d) => {
       for (const h of d)
         if (h.type === "attributes") {
           const w = h.target;
-          w instanceof HTMLElement && (Ee(w, t), We(w) && (r.has(w) || (r.add(w), u.observe(w), Fe(w, t))));
+          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))
             if (w instanceof HTMLElement) {
-              const b = Se(w, t);
-              for (const g of b) Ee(g, t);
+              const b = Ie(w, t);
+              for (const g of b) Se(g, t);
               o(w);
             }
         }
@@ -1741,7 +1741,7 @@ function ct(e = {}) {
     };
   else {
     let i;
-    Se(void 0, t).length > 0 && import("./scrollDriven-AP2yWhzi.js").then((h) => {
+    Ie(void 0, t).length > 0 && import("./scrollDriven-AP2yWhzi.js").then((h) => {
       i = h.initScrollViewFallback({ once: n });
     }), p = () => {
       typeof i == "function" && i();
@@ -1751,7 +1751,7 @@ function ct(e = {}) {
     p && p(), typeof window < "u" && window.removeEventListener("scroll", a), u.disconnect();
   };
 }
-const Jn = ct, Zn = ct;
+const Jn = st, Zn = st;
 function tn(e) {
   const t = {
     primary: "filled",
@@ -1759,7 +1759,7 @@ function tn(e) {
   };
   return e && e in t ? t[e] : e || "filled";
 }
-const ke = ({
+const ct = ({
   variant: e = "filled",
   disabled: t = !1,
   icon: n,
@@ -1785,17 +1785,17 @@ const ke = ({
       "Button component requires either a label prop or children content"
     );
   e = tn(e);
-  const S = l ? "a" : "button", E = W(null), A = i || E, [L, V] = Z.useState(f);
-  $(() => {
+  const I = l ? "a" : "button", E = W(null), A = i || E, [L, V] = Z.useState(f);
+  R(() => {
     V(f);
   }, [f]), w = { duration: 0.3, ...w };
   let H;
-  v ? v && (H = (I) => {
-    t && I.preventDefault();
+  v ? v && (H = (S) => {
+    t && S.preventDefault();
     const O = !L;
     V(O), v(O);
-  }) : H = (I) => {
-    t && I.preventDefault(), p && p(I);
+  }) : H = (S) => {
+    t && S.preventDefault(), p && p(S);
   };
   const M = Nt({
     allowShapeTransformation: h,
@@ -1817,7 +1817,7 @@ const ke = ({
     children: r
   }), x = n ? /* @__PURE__ */ m(ie, { icon: n, className: M.icon }) : /* @__PURE__ */ m(me, {});
   return /* @__PURE__ */ Y(
-    S,
+    I,
     {
       ref: A,
       href: l,
@@ -1972,7 +1972,7 @@ const ke = ({
   scrollSensitivity: v = 1.25,
   ...f
 }) => {
-  const i = W(null), d = l || i, [h, w] = R(0), b = It({
+  const i = W(null), d = l || i, [h, w] = $(0), b = It({
     index: p,
     className: t,
     children: n,
@@ -1986,89 +1986,89 @@ const ke = ({
     onMetricsChange: o
   }), g = Z.Children.toArray(n).filter(
     (N) => Z.isValidElement(N) && N.type === nn
-  ), S = W(null), [E, A] = R(
+  ), I = W(null), [E, A] = $(
     {}
-  ), [L, V] = R(null), H = W(0), M = W(null), x = () => {
+  ), [L, V] = $(null), H = W(0), M = W(null), x = () => {
     var fe, we;
-    if (!S.current || !d.current || (L == null ? void 0 : L.scrollProgress) === void 0)
+    if (!I.current || !d.current || (L == null ? void 0 : L.scrollProgress) === void 0)
       return [];
     const N = (L == null ? void 0 : L.scrollVisible) ?? ((fe = d.current) == null ? void 0 : fe.clientWidth) ?? 0;
-    function D(P, z) {
-      return P.map((te, ve) => {
-        const Ne = (te - z) / Math.abs(P[1] - P[0]);
+    function D(P, T) {
+      return P.map((ee, ve) => {
+        const Ee = (ee - T) / Math.abs(P[1] - P[0]);
         return {
-          itemScrollXCenter: te,
-          relativeIndex: Ne,
+          itemScrollXCenter: ee,
+          relativeIndex: Ee,
           index: ve,
           width: 0
         };
       });
     }
-    const F = g.map((P, z) => {
-      if (!I[z].current || !S.current) return 0;
-      const ve = z / (g.length - 1);
+    const F = g.map((P, T) => {
+      if (!S[T].current || !I.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
-    ).sort((P, z) => P.index - z.index);
+    ).sort((P, T) => P.index - T.index);
     let X = (((we = d.current) == null ? void 0 : we.clientWidth) ?? N) + a + c[0] + a;
-    const re = j.sort((P, z) => Math.abs(P.relativeIndex) - Math.abs(z.relativeIndex)).map((P, z) => {
+    const re = j.sort((P, T) => Math.abs(P.relativeIndex) - Math.abs(T.relativeIndex)).map((P, T) => {
       if (!(X <= 0)) {
-        if (z == 0 && G(P.index), P.width = he(
+        if (T == 0 && G(P.index), P.width = he(
           X - a,
           [c[0], c[1]],
           [c[0], c[1]]
         ), X -= P.width + a, X != 0 && X < (c[0] + a) * 2) {
-          const te = P.width - ((c[0] + a) * 2 - X);
-          X += P.width, P.width = te, X -= P.width;
+          const ee = P.width - ((c[0] + a) * 2 - X);
+          X += P.width, P.width = ee, X -= P.width;
         } else if (X == 0 && P.width >= c[0] * 2 + a) {
-          const te = P.width - (c[0] + a - X);
-          X += P.width, P.width = te, X -= P.width;
+          const ee = P.width - (c[0] + a - X);
+          X += P.width, P.width = ee, X -= P.width;
         }
         return P;
       }
     }).filter(Boolean), ae = re.reverse(), de = [...re].sort(
-      (P, z) => Math.abs(P.index) - Math.abs(z.index)
+      (P, T) => Math.abs(P.index) - Math.abs(T.index)
     );
-    ae.forEach((P, z) => {
-      const te = ae[z + 1];
-      if (!te) return;
-      const ve = 1 - (Math.abs(P.relativeIndex) - Math.abs(te == null ? void 0 : te.relativeIndex)), Ne = he(
+    ae.forEach((P, T) => {
+      const ee = ae[T + 1];
+      if (!ee) return;
+      const ve = 1 - (Math.abs(P.relativeIndex) - Math.abs(ee == null ? void 0 : ee.relativeIndex)), Ee = he(
         ve,
         [0, 2],
-        [P.width + X, te.width]
+        [P.width + X, ee.width]
       );
-      X += P.width, P.width = Ne, X -= P.width;
+      X += P.width, P.width = Ee, X -= P.width;
     });
     const ce = re.length / 2, oe = he(
       Math.abs(de[0].relativeIndex),
       [de[0].index == 0 ? 0 : ce - 1, ce],
       [0, 1]
-    ), Le = he(oe, [0, 1], [0, 1]) * -(c[0] + a);
-    return w(Le), Object.fromEntries(
+    ), Ne = he(oe, [0, 1], [0, 1]) * -(c[0] + a);
+    return w(Ne), Object.fromEntries(
       re.map((P) => [P.index, P.width])
     );
-  }, I = W([]).current, [O, G] = R(0);
-  $(() => {
+  }, S = W([]).current, [O, G] = $(0);
+  R(() => {
     u && u(O);
-  }, [O]), $(() => {
+  }, [O]), R(() => {
     typeof p == "number" && g.length > 0 && p !== O && ne(p);
-  }, [p, g.length]), $(() => {
+  }, [p, g.length]), R(() => {
     _(O);
-  }, [O]), I.length !== g.length && g.forEach((N, D) => {
-    I[D] || (I[D] = Z.createRef());
+  }, [O]), S.length !== g.length && g.forEach((N, D) => {
+    S[D] || (S[D] = Z.createRef());
   });
-  const [T, _] = R(0), ne = (N, D = {}) => {
+  const [te, _] = $(0), ne = (N, D = {}) => {
     if (!g.length) return 0;
-    const F = I[N];
-    if (!F || !F.current || !S.current) return 0;
+    const F = S[N];
+    if (!F || !F.current || !I.current) return 0;
     const j = he(
       N / Math.max(1, g.length - 1),
       [0, 1],
       [0, 1]
     );
-    return _(N), S.current.dispatchEvent(
+    return _(N), I.current.dispatchEvent(
       new CustomEvent("udx:customScroll:set", {
         bubbles: !0,
         detail: {
@@ -2088,7 +2088,7 @@ const ke = ({
       {
         width: E[D],
         outputRange: c,
-        ref: I[D],
+        ref: S[D],
         key: D,
         index: D,
         role: "option",
@@ -2116,32 +2116,32 @@ const ke = ({
       });
     }
   };
-  $(() => {
+  R(() => {
     const N = x();
     A(N);
   }, [L]);
   const U = W(o);
-  $(() => {
+  R(() => {
     U.current = o;
   }, [o]);
   const K = W(null);
-  $(() => {
-    var z;
+  R(() => {
+    var T;
     const N = U.current;
     if (!N || !(d != null && d.current)) return;
     const D = g.length;
     if (D <= 0) return;
-    const F = ((z = d.current) == null ? void 0 : z.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(
+    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),
       Math.max(0, D - 1)
-    ), oe = ce > 0, Le = ce < D - 1, fe = {
+    ), oe = ce > 0, Ne = ce < D - 1, fe = {
       total: D,
       selectedIndex: ce,
       visibleApprox: re,
       visibleFull: ae,
       stepHalf: de,
       canPrev: oe,
-      canNext: Le,
+      canNext: Ne,
       scrollProgress: X,
       viewportWidth: F,
       itemMaxWidth: j,
@@ -2149,27 +2149,27 @@ const ke = ({
     }, we = K.current;
     let P = !we;
     if (!P) {
-      for (const te in fe)
-        if (fe[te] !== we[te]) {
+      for (const ee in fe)
+        if (fe[ee] !== we[ee]) {
           P = !0;
           break;
         }
     }
     P && (K.current = fe, N(fe));
-  }, [d, g.length, O, L, a, c]), $(() => () => {
+  }, [d, g.length, O, L, a, c]), R(() => () => {
     var N;
     (N = M.current) == null || N.stop();
   }, []);
-  const [le, ue] = R(0);
-  Ye(() => {
+  const [le, ue] = $(0);
+  Ve(() => {
     let N = c[1];
     L && N > L.scrollVisible && (N = L.scrollVisible);
     const D = (N + a) * B.length / v;
     ue(D);
-  }, [d, I, L]);
+  }, [d, S, L]);
   const C = (N) => {
     if (!g.length) return;
-    const D = T ?? O;
+    const D = te ?? O;
     switch (N.key) {
       case "ArrowLeft":
         N.preventDefault(), ne(Math.max(0, D - 1));
@@ -2189,7 +2189,7 @@ const ke = ({
         break;
     }
   };
-  return $(() => {
+  return R(() => {
     const N = d.current;
     if (!N) return;
     const D = (F) => {
@@ -2222,7 +2222,7 @@ const ke = ({
             "div",
             {
               className: b.track,
-              ref: S,
+              ref: I,
               style: {
                 gap: `${a}px`,
                 translate: h,
@@ -2242,27 +2242,27 @@ const ke = ({
 }) => {
   const l = kt({ orientation: e, className: t });
   return /* @__PURE__ */ m("hr", { className: l.divider, ...n });
-}, ee = [];
+}, z = [];
 for (let e = 0; e < 256; ++e)
-  ee.push((e + 256).toString(16).slice(1));
+  z.push((e + 256).toString(16).slice(1));
 function on(e, t = 0) {
-  return (ee[e[t + 0]] + ee[e[t + 1]] + ee[e[t + 2]] + ee[e[t + 3]] + "-" + ee[e[t + 4]] + ee[e[t + 5]] + "-" + ee[e[t + 6]] + ee[e[t + 7]] + "-" + ee[e[t + 8]] + ee[e[t + 9]] + "-" + ee[e[t + 10]] + ee[e[t + 11]] + ee[e[t + 12]] + ee[e[t + 13]] + ee[e[t + 14]] + ee[e[t + 15]]).toLowerCase();
+  return (z[e[t + 0]] + z[e[t + 1]] + z[e[t + 2]] + z[e[t + 3]] + "-" + z[e[t + 4]] + z[e[t + 5]] + "-" + z[e[t + 6]] + z[e[t + 7]] + "-" + z[e[t + 8]] + z[e[t + 9]] + "-" + z[e[t + 10]] + z[e[t + 11]] + z[e[t + 12]] + z[e[t + 13]] + z[e[t + 14]] + z[e[t + 15]]).toLowerCase();
 }
-let Ie;
+let ke;
 const ln = new Uint8Array(16);
 function an() {
-  if (!Ie) {
+  if (!ke) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    Ie = crypto.getRandomValues.bind(crypto);
+    ke = crypto.getRandomValues.bind(crypto);
   }
-  return Ie(ln);
+  return ke(ln);
 }
-const sn = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Oe = { randomUUID: sn };
-function Be(e, t, n) {
+const sn = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Fe = { randomUUID: sn };
+function ge(e, t, n) {
   var r;
-  if (Oe.randomUUID && !e)
-    return Oe.randomUUID();
+  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)
@@ -2285,10 +2285,10 @@ const it = ({
   if (!l && !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] = R(null), [h] = R(Be()), [w, b] = R(!1), g = W(null);
-  $(() => {
-    const x = (I) => {
-      d(I.detail);
+  const v = W(null), f = a || v, [i, d] = $(null), [h] = $(ge()), [w, b] = $(!1), g = W(null);
+  R(() => {
+    const x = (S) => {
+      d(S.detail);
     };
     return document.addEventListener("tooltip-update", x), () => {
       document.removeEventListener(
@@ -2296,12 +2296,12 @@ const it = ({
         x
       );
     };
-  }, []), $(() => {
+  }, []), R(() => {
     g.current && clearTimeout(g.current), i ? b(i === h) : g.current = setTimeout(() => {
       b(!1);
     }, 1200);
   }, [i, h]);
-  const S = () => {
+  const I = () => {
     if (o.includes("hover")) {
       const x = new CustomEvent("tooltip-update", { detail: h });
       document.dispatchEvent(x);
@@ -2329,18 +2329,18 @@ const it = ({
       document.dispatchEvent(x);
     }
   };
-  $(() => {
+  R(() => {
     if (f != null && f.current) {
       const x = f.current;
-      return x.addEventListener("mouseenter", S), x.addEventListener("mouseleave", E), x.addEventListener("click", A), x.addEventListener("focus", L), x.addEventListener("blur", V), () => {
-        x.removeEventListener("mouseenter", S), x.removeEventListener("mouseleave", E), x.removeEventListener("click", A), x.removeEventListener("focus", L), x.removeEventListener("blur", V);
+      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);
       };
     }
   }, [f, o, h, w]);
   const H = !a && pe(l) ? xe(l, { ref: v }) : l;
   if (!c && typeof window < "u" && f != null && f.current && !c) {
-    const x = f.current.getBoundingClientRect(), I = window.innerWidth, O = window.innerHeight, G = x.left / I, T = x.top / O;
-    e === "plain" ? G < 1 / 3 ? c = "right" : G > 2 / 3 ? c = "left" : c = T > 0.5 ? "top" : "bottom" : G < 1 / 2 && T < 1 / 2 ? c = "bottom-right" : G > 1 / 2 && T < 1 / 2 ? c = "bottom-left" : G > 1 / 2 && T > 1 / 2 ? c = "top-left" : G < 1 / 2 && T > 1 / 2 && (c = "top-right");
+    const x = f.current.getBoundingClientRect(), S = window.innerWidth, O = window.innerHeight, G = x.left / S, te = x.top / O;
+    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({
     variant: e,
@@ -2364,7 +2364,7 @@ const it = ({
         exit: { opacity: i ? 1 : 0 },
         className: M.toolTip,
         ...p,
-        onMouseEnter: S,
+        onMouseEnter: I,
         onMouseLeave: E,
         children: /* @__PURE__ */ Y(
           q.div,
@@ -2379,14 +2379,14 @@ const it = ({
             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, I) => /* @__PURE__ */ m(
-                ke,
+              t && /* @__PURE__ */ m("div", { className: M.actions, children: Array.isArray(t) && t.map((x, S) => /* @__PURE__ */ m(
+                ct,
                 {
                   size: "small",
                   variant: "text",
                   ...x
                 },
-                I
+                S
               )) })
             ]
           }
@@ -2498,7 +2498,7 @@ const it = ({
       ]
     }
   );
-}, ge = ({
+}, be = ({
   variant: e = "standard",
   href: t,
   disabled: n = !1,
@@ -2518,7 +2518,7 @@ const it = ({
   allowShapeTransformation: w = !0,
   transition: b,
   children: g,
-  ...S
+  ...I
 }) => {
   if (g && (s = g), !s)
     throw new Error(
@@ -2527,11 +2527,11 @@ const it = ({
   r || (r = s);
   const [E, A] = Z.useState(a);
   let L;
-  c ? c && (L = (I) => {
-    n && I.preventDefault(), A(!E), c(!!E);
-  }, o = E && v || o) : L = (I) => {
-    n && I.preventDefault(), u && u(I);
-  }, $(() => {
+  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({
@@ -2551,7 +2551,7 @@ const it = ({
     className: f,
     size: p,
     children: s,
-    ...S
+    ...I
   }), M = W(null), x = i || M;
   return b = { duration: 0.3, ...b }, /* @__PURE__ */ Y(
     V,
@@ -2561,7 +2561,7 @@ const it = ({
       style: { transition: b.duration + "s" },
       className: H.iconButton,
       "aria-label": s,
-      ...S,
+      ...I,
       title: void 0,
       onClick: L,
       ref: x,
@@ -2615,11 +2615,11 @@ var cn = {
   prefix: "fas",
   iconName: "circle-exclamation",
   icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
-}, be = {
+}, Le = {
   prefix: "fas",
   iconName: "xmark",
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, un = be, dn = {
+}, un = Le, dn = {
   prefix: "fas",
   iconName: "bars",
   icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]
@@ -2641,10 +2641,10 @@ const zn = ({
   ...i
 }) => {
   u = { duration: 0.3, ease: "easeInOut", ...u };
-  const d = W(null), h = a || d, w = typeof p == "boolean", [b, g] = R(v), S = w ? p : b, E = (x) => {
-    w || g(x), f == null || f(x);
+  const d = W(null), h = a || d, w = typeof p == "boolean", [b, g] = $(v), I = w ? p : b, E = (S) => {
+    w || g(S), f == null || f(S);
   }, A = Z.Children.toArray(o).filter(
-    (x) => Z.isValidElement(x) && x.type === ke
+    (S) => Z.isValidElement(S) && S.type === ct
   ), L = Mt({
     href: r,
     icon: s,
@@ -2655,10 +2655,8 @@ const zn = ({
     className: e,
     transition: u,
     children: t,
-    open: S
-  }), V = q.create(Ce), H = q.create(ge);
-  q.create(ke);
-  const M = (x) => /* @__PURE__ */ m(
+    open: I
+  }), V = q.create(Ce), H = q.create(be), M = (S) => /* @__PURE__ */ m(
     V,
     {
       icon: s,
@@ -2667,7 +2665,7 @@ const zn = ({
       variant: n + "Container",
       size: l,
       className: L.fab + " " + (e ?? ""),
-      "aria-expanded": S,
+      "aria-expanded": I,
       onClick: () => E(!0),
       style: { transition: "border-radius 0.3s ease-in-out" },
       transition: {
@@ -2677,24 +2675,24 @@ const zn = ({
         background: { duration: u.duration, ease: "easeInOut" },
         ...u
       },
-      ...x
+      ...S
     }
-  );
+  ), [x] = $(ge());
   return /* @__PURE__ */ Y("div", { className: L.fabMenu, ref: h, ...i, children: [
-    /* @__PURE__ */ m(se, { children: S && /* @__PURE__ */ m("div", { className: L.actions, role: "menu", "aria-hidden": !S, children: (() => {
-      const x = A.length;
-      return A.map((I, O) => {
-        I.props;
-        const G = x - 1 - O, T = ((u == null ? void 0 : u.delay) ?? 0) + G * 0.06, _ = {
+    /* @__PURE__ */ m(se, { children: I && /* @__PURE__ */ m("div", { className: L.actions, role: "menu", "aria-hidden": !I, 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 = {
           open: {
             overflow: "visible",
             opacity: 1,
             width: "auto",
             transition: {
               ...u,
-              delay: T,
+              delay: _,
               opacity: {
-                delay: (u == null ? void 0 : u.duration) / 2 + T
+                delay: (u == null ? void 0 : u.duration) / 2 + _
               }
             }
           },
@@ -2704,7 +2702,7 @@ const zn = ({
             width: 0,
             transition: {
               ...u,
-              delay: T,
+              delay: _,
               opacity: {
                 duration: (u == null ? void 0 : u.duration) / 1.5
               }
@@ -2716,18 +2714,18 @@ const zn = ({
           {
             initial: "close",
             animate: "open",
-            variants: _,
+            variants: ne,
             transition: u,
             exit: "close",
             children: Z.cloneElement(
-              I,
+              O,
               {
-                key: O,
+                key: G,
                 shape: "rounded",
                 variant: "filled",
                 className: () => ({
                   button: y("max-w-full overflow-hidden", {
-                    "px-0": !S,
+                    "px-0": !I,
                     "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"
@@ -2748,16 +2746,16 @@ const zn = ({
       className: "invisible pointer-events-none"
     }),
     /* @__PURE__ */ Y("div", { className: "absolute right-0 top-0", children: [
-      !S && M({
+      !I && M({
         className: "",
         layout: !0,
-        layoutId: "fab-menu"
+        layoutId: "fab-menu" + x
       }),
-      S && /* @__PURE__ */ m(me, { children: /* @__PURE__ */ m(
+      I && /* @__PURE__ */ m(me, { children: /* @__PURE__ */ m(
         H,
         {
           layout: !0,
-          layoutId: "fab-menu",
+          layoutId: "fab-menu" + x,
           variant: "filled",
           className: () => ({
             iconButton: y("", {
@@ -2820,15 +2818,15 @@ const zn = ({
   }, 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);
     return (f(!1) - k) * B / 100 + k;
-  }, [h, w] = R(!1), b = W(null), g = u || b, [S, E] = R(r), [A, L] = R(v(r)), [V, H] = R(!1), M = (B) => {
+  }, [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);
   }, x = () => {
     H(!1), w(!1);
   };
-  $(() => (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)), () => {
+  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]);
-  const I = Dt({
+  const S = Dt({
     className: e,
     isChanging: h,
     marks: a,
@@ -2836,7 +2834,7 @@ const zn = ({
     min: s,
     name: l,
     step: n,
-    value: S,
+    value: I,
     valueFormatter: t,
     onChange: o
   }), O = (B) => {
@@ -2875,8 +2873,8 @@ const zn = ({
       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;
       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);
-  }, [T, _] = R(0);
-  return $(() => {
+  }, [te, _] = $(0);
+  return R(() => {
     const B = () => {
       g.current && _(g.current.offsetWidth);
     };
@@ -2891,17 +2889,17 @@ const zn = ({
         switch (B.key) {
           case "ArrowRight":
             if (n)
-              G({ value: S + n });
+              G({ value: I + n });
             else if (a) {
-              const k = a.find((U) => U.value > S);
+              const k = a.find((U) => U.value > I);
               k && G({ value: k.value });
             }
             break;
           case "ArrowLeft":
             if (n)
-              G({ value: S - n });
+              G({ value: I - n });
             else if (a) {
-              const k = a.slice(0).reverse().find((U, K, le) => S === 1 / 0 ? K === 1 : U.value < S);
+              const k = a.slice(0).reverse().find((U, K, le) => I === 1 / 0 ? K === 1 : U.value < I);
               k && G({ value: k.value });
             }
             break;
@@ -2912,9 +2910,9 @@ const zn = ({
       role: "slider",
       "aria-valuemin": i(!0),
       "aria-valuemax": f(!0),
-      "aria-valuenow": S,
-      "aria-valuetext": S.toString(),
-      className: I.slider,
+      "aria-valuenow": I,
+      "aria-valuetext": I.toString(),
+      className: S.slider,
       onMouseDown: M,
       onClick: O,
       ref: g,
@@ -2922,12 +2920,12 @@ const zn = ({
       onDragStart: (B) => B.preventDefault(),
       ...p,
       children: [
-        /* @__PURE__ */ m("input", { type: "hidden", name: l, value: S }),
-        /* @__PURE__ */ m("div", { className: I.activeTrack, style: { flex: A / 100 } }),
-        /* @__PURE__ */ m("div", { className: I.handle, children: /* @__PURE__ */ m(se, { children: h && /* @__PURE__ */ m(
+        /* @__PURE__ */ m("input", { type: "hidden", name: l, value: I }),
+        /* @__PURE__ */ m("div", { className: S.activeTrack, style: { flex: A / 100 } }),
+        /* @__PURE__ */ m("div", { className: S.handle, children: /* @__PURE__ */ m(se, { children: h && /* @__PURE__ */ m(
           q.div,
           {
-            className: I.valueIndicator,
+            className: S.valueIndicator,
             initial: "hidden",
             animate: "visible",
             exit: "hidden",
@@ -2941,13 +2939,13 @@ const zn = ({
               hidden: { opacity: 1, scale: 0 }
             },
             transition: { duration: 0.1 },
-            children: t ? t(S) : S
+            children: t ? t(I) : I
           }
         ) }) }),
         /* @__PURE__ */ m(
           "div",
           {
-            className: I.inactiveTrack,
+            className: S.inactiveTrack,
             style: { flex: 1 - A / 100 }
           }
         ),
@@ -2957,11 +2955,11 @@ 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) / T * 100, le = v(B.value);
+              const K = (h ? 9 : 10) / te * 100, le = v(B.value);
               return le <= A - K ? U = !0 : le >= A + K && (U = !1), /* @__PURE__ */ m(
                 "div",
                 {
-                  className: y(I.dot, {
+                  className: y(S.dot, {
                     "bg-primary-container": U != null && U,
                     "bg-primary": U != null && !U
                   }),
@@ -2986,12 +2984,12 @@ const zn = ({
   extended: s,
   divider: c,
   onExtendedChange: a,
-  closeIcon: u = be,
+  closeIcon: u = Le,
   transition: o,
   ...p
 }) => {
   o = { duration: 0.3, ...o };
-  const [v, f] = R(s ?? !0), i = Bt({
+  const [v, f] = $(s ?? !0), i = Bt({
     transition: o,
     title: l,
     position: r,
@@ -3004,9 +3002,9 @@ const zn = ({
     extended: v,
     variant: e
   });
-  $(() => {
+  R(() => {
     a == null || a(v ?? !1);
-  }, [v]), $(() => {
+  }, [v]), R(() => {
     s != null && f(s);
   }, [s]);
   const d = {
@@ -3047,7 +3045,7 @@ const zn = ({
                 /* @__PURE__ */ Y("div", { className: i.header, children: [
                   l && /* @__PURE__ */ m("p", { className: i.title, children: l }),
                   /* @__PURE__ */ m(
-                    ge,
+                    be,
                     {
                       size: "small",
                       label: "close",
@@ -3073,16 +3071,16 @@ const zn = ({
       }
     ) })
   ] });
-  return e == "modal" ? Ue(h(), document.body) : h();
+  return e == "modal" ? Ye(h(), document.body) : h();
 }, nr = ({
   message: e,
   className: t,
   duration: n,
-  closeIcon: l = be,
+  closeIcon: l = Le,
   onClose: r,
   ...s
 }) => {
-  const [c, a] = R(!0), u = Wt({
+  const [c, a] = $(!0), u = Wt({
     className: t,
     closeIcon: l,
     duration: n,
@@ -3090,7 +3088,7 @@ const zn = ({
     onClose: r,
     message: e
   });
-  $(() => {
+  R(() => {
     n && setTimeout(() => {
       o();
     }, n);
@@ -3110,7 +3108,7 @@ const zn = ({
       children: /* @__PURE__ */ Y("div", { className: u.container, children: [
         /* @__PURE__ */ m("p", { className: u.supportingText, children: e }),
         /* @__PURE__ */ m(
-          ge,
+          be,
           {
             onClick: () => o(),
             className: u.icon,
@@ -3133,7 +3131,7 @@ const zn = ({
   ref: u,
   ...o
 }) => {
-  const [p, v] = R(e), f = (g) => {
+  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));
@@ -3204,10 +3202,10 @@ const zn = ({
   ref: i,
   ...d
 }) => {
-  const h = W(null), w = i || h, [b, g] = R(f);
-  $(() => {
+  const h = W(null), w = i || h, [b, g] = $(f);
+  R(() => {
     f && c == null ? g(!0) : g(c == o && o != null);
-  }, [c]), $(() => {
+  }, [c]), R(() => {
     c == o && p && p({
       ref: w,
       index: o || 0,
@@ -3215,7 +3213,7 @@ const zn = ({
       icon: s
     });
   }, [c]);
-  const S = r ? "a" : "button", E = (L) => {
+  const I = r ? "a" : "button", E = (L) => {
     a && a(o ?? null), t && t(L);
   }, A = Pt({
     className: e,
@@ -3233,7 +3231,7 @@ const zn = ({
     href: r
   });
   return /* @__PURE__ */ Y(
-    S,
+    I,
     {
       ...d,
       role: "tab",
@@ -3277,7 +3275,7 @@ const zn = ({
   setSelectedTab: s,
   scrollable: c = !1
 }) => {
-  const [a, u] = R(
+  const [a, u] = $(
     null
   );
   let o;
@@ -3288,11 +3286,11 @@ const zn = ({
     if (t == null || t(w), c) {
       const b = f.current, g = w.ref.current;
       if (b && g) {
-        const S = g.offsetLeft + g.offsetWidth / 2 - b.offsetWidth / 2;
-        b.scrollTo({ left: S, behavior: "smooth" });
+        const I = g.offsetLeft + g.offsetWidth / 2 - b.offsetWidth / 2;
+        b.scrollTo({ left: I, behavior: "smooth" });
       }
     }
-  }, d = Me(() => Be(), []), h = Ht({
+  }, d = Me(() => ge(), []), h = Ht({
     children: n,
     onTabSelected: t,
     scrollable: c,
@@ -3331,26 +3329,26 @@ const zn = ({
   showSupportingText: w = !1,
   ...b
 }) => {
-  const [g, S] = R(h ?? ""), [E, A] = R(!1), [L, V] = R(!1), [H, M] = R(
+  const [g, I] = $(h ?? ""), [E, A] = $(!1), [L, V] = $(!1), [H, M] = $(
     w
   );
-  $(() => {
-    S(h ?? "");
-  }, [h]), $(() => {
+  R(() => {
+    I(h ?? "");
+  }, [h]), R(() => {
     n != null && n.length ? V(!0) : V(!1);
-  }, [n]), $(() => {
+  }, [n]), R(() => {
     w ? M(w) : u != null && u.length ? M(!0) : M(!1);
-  }, [H, u]), $(() => {
+  }, [H, u]), R(() => {
     E && V(!1);
   }, [E]);
-  const x = Z.useRef(null), I = () => {
+  const x = Z.useRef(null), S = () => {
     x.current && !E && x.current.focus();
   }, O = () => {
     A(!0);
   }, G = (U) => {
     const K = U.target.value;
-    S(K), V(!1), typeof d == "function" && d(K);
-  }, T = () => {
+    I(K), V(!1), typeof d == "function" && d(K);
+  }, te = () => {
     A(!1);
   }, _ = Ft({
     showSupportingText: H,
@@ -3372,7 +3370,7 @@ const zn = ({
     value: g,
     suffix: r,
     textLine: f
-  }), [ne] = R(Be());
+  }), [ne] = $(ge());
   let B, k;
   switch (f) {
     case "multiLine":
@@ -3387,7 +3385,7 @@ const zn = ({
       break;
   }
   return /* @__PURE__ */ Y("div", { className: _.textField, ...b, children: [
-    /* @__PURE__ */ Y("fieldset", { onClick: I, className: _.content, 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(
@@ -3447,7 +3445,7 @@ const zn = ({
             name: s,
             placeholder: E ? l ?? void 0 : "",
             onFocus: O,
-            onBlur: T,
+            onBlur: te,
             disabled: t,
             autoComplete: i,
             "aria-invalid": !!(n != null && n.length),
@@ -3545,10 +3543,10 @@ const zn = ({
   ...g
 }) => {
   b && (n = b);
-  const S = W(null), E = v || S, [A, L] = R(p);
-  $(() => {
+  const I = W(null), E = v || I, [A, L] = $(p);
+  R(() => {
     p && c == null ? L(!0) : L(c == u && u != null);
-  }, [c]), $(() => {
+  }, [c]), R(() => {
     c == u && o && o({
       ref: E,
       index: u || 0,
@@ -3626,7 +3624,7 @@ const zn = ({
                     transition: {
                       ...f
                     }
-                  }, I = {
+                  }, S = {
                     width: "auto",
                     opacity: 1,
                     transition: {
@@ -3641,7 +3639,7 @@ const zn = ({
                     q.span,
                     {
                       initial: x,
-                      animate: I,
+                      animate: S,
                       exit: x,
                       className: M.label,
                       children: n
@@ -3661,7 +3659,7 @@ const zn = ({
                   duration: 0
                 }
               }
-            }, I = {
+            }, S = {
               height: "auto",
               opacity: 1,
               transition: {
@@ -3675,8 +3673,8 @@ const zn = ({
             return /* @__PURE__ */ m(
               q.span,
               {
-                initial: I,
-                animate: I,
+                initial: S,
+                animate: S,
                 exit: x,
                 className: M.label,
                 transition: f,
@@ -3721,7 +3719,7 @@ const zn = ({
       label: "Open menu"
     },
     opened: {
-      icon: be,
+      icon: Le,
       label: "Close menu"
     }
   },
@@ -3730,16 +3728,16 @@ const zn = ({
   transition: p,
   setSelectedItem: v
 }) => {
-  const [f, i] = R(null), [d, h] = R(s);
+  const [f, i] = $(null), [d, h] = $(s);
   let w;
   r == 0 || r != null ? w = r : w = f;
-  const b = v || i, g = W(null), S = (M) => {
+  const b = v || i, g = W(null), I = (M) => {
     t == null || t(M);
   };
   function E(M) {
     const x = [];
-    return dt.forEach(M, (I) => {
-      pe(I) && I.type === ft ? x.push(...E(I.props.children)) : x.push(I);
+    return dt.forEach(M, (S) => {
+      pe(S) && S.type === ft ? x.push(...E(S.props.children)) : x.push(S);
     }), x;
   }
   const A = E(n), L = A.filter(
@@ -3760,7 +3758,7 @@ const zn = ({
   });
   p = { duration: 0.3, ...p };
   const H = W(!1);
-  return H.current = !1, $(() => {
+  return H.current = !1, R(() => {
     o == null || o(d ?? !1);
   }, [d]), /* @__PURE__ */ Y(
     "div",
@@ -3771,7 +3769,7 @@ const zn = ({
       children: [
         /* @__PURE__ */ Y("div", { className: V.header, children: [
           /* @__PURE__ */ m(
-            ge,
+            be,
             {
               onClick: () => h(!d),
               label: d ? a == null ? void 0 : a.opened.label : a == null ? void 0 : a.closed.label,
@@ -3796,7 +3794,7 @@ const zn = ({
               variant: d ? "horizontal" : "vertical",
               selectedItem: w,
               setSelectedItem: b,
-              onItemSelected: S,
+              onItemSelected: I,
               transition: p,
               extendedOnly: H.current,
               isExtended: d
@@ -3812,12 +3810,12 @@ function sr(e) {
   return wt({
     variant: xt.Udixio,
     ...e,
-    plugins: [new vt(e), new Xe(e)]
+    plugins: [new vt(e), new Ue(e)]
   });
 }
 export {
   Jn as AnimateOnScrollInit,
-  ke as Button,
+  ct as Button,
   Qn as Card,
   Tn as Carousel,
   nn as CarouselItem,
@@ -3826,7 +3824,7 @@ export {
   Ce as Fab,
   zn as FabMenu,
   ie as Icon,
-  ge as IconButton,
+  be as IconButton,
   ar as NavigationRail,
   yn as NavigationRailItem,
   pn as NavigationRailSection,
@@ -3847,7 +3845,7 @@ export {
   Zn as animateOnScroll,
   $n as buttonStyle,
   Rn as cardStyle,
-  Ke as carouselItemConfig,
+  _e as carouselItemConfig,
   Bn as carouselItemStyle,
   Dn as carouselStyle,
   y as classNames,
@@ -3861,12 +3859,12 @@ export {
   An as fabStyle,
   $e as getClassNames,
   Hn as iconButtonStyle,
-  ct as initAnimateOnScroll,
+  st as initAnimateOnScroll,
   he as normalize,
   Fn as progressIndicatorStyle,
-  et as sideSheetConfig,
+  ze as sideSheetConfig,
   Bt as sideSheetStyle,
-  tt as sliderConfig,
+  et as sliderConfig,
   Vn as sliderStyle,
   Yn as snackbarStyle,
   Un as switchStyle,