@orioncactuscorp/ui 1.8.0 → 1.9.0

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,93 +1,98 @@
 'use client';
-import { jsx as w, jsxs as Lt } from "react/jsx-runtime";
-import { useRef as m, useSyncExternalStore as mt, useState as rt, useCallback as h, useMemo as Mt, useEffect as ot, useLayoutEffect as ft, useContext as Pt } from "react";
-import pt from "../Interaction/Interaction.js";
-import { ScrollAreaContext as vt } from "./contexts.js";
-import T from "./ScrollArea.module.scss.js";
-const ct = "oc-scroll-area-container-style", it = "oc-scroll-area-root-style";
-let O = 0, V = 0;
-function gt() {
+import { jsx as w, jsxs as kt } from "react/jsx-runtime";
+import { useRef as p, useSyncExternalStore as wt, useState as X, useCallback as s, useMemo as At, useEffect as it, useLayoutEffect as vt, useContext as Nt } from "react";
+import bt from "../Interaction/Interaction.js";
+import { ScrollAreaContext as Tt } from "./contexts.js";
+import b from "./ScrollArea.module.scss.js";
+import { useScrollAreaGeometryStabilizer as Ot } from "./useScrollAreaGeometryStabilizer.js";
+const lt = "oc-scroll-area-container-style", at = "oc-scroll-area-root-style";
+let F = 0, q = 0;
+function Et() {
   return () => {
   };
 }
-function Dt() {
+function $t() {
   return !0;
 }
-function wt() {
+function Rt() {
   return !1;
 }
-function xt() {
+function Vt() {
   return typeof window < "u" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
 }
-function W(d) {
-  return d.preventDefault(), !1;
+function C(m) {
+  return m.preventDefault(), !1;
 }
-function Bt(d, e) {
+function Ut(m, e) {
   let E = !1;
   return () => {
-    E || (d(), E = !0, window.setTimeout(() => {
+    E || (m(), E = !0, window.setTimeout(() => {
       E = !1;
     }, e));
   };
 }
-function bt(d, e) {
-  typeof d == "function" ? d(e) : d && (d.current = e);
+function yt(m, e) {
+  typeof m == "function" ? m(e) : m && (m.current = e);
 }
-function R(d, e) {
-  d && (d.dataset.state = e, d.dataset.ocState = e);
+function T(m, e) {
+  m && (m.dataset.state = e, m.dataset.ocState = e);
 }
-function kt({
-  as: d,
+function Qt({
+  as: m,
   root: e = !1,
   children: E,
   className: L = "",
-  ref: Y,
-  "data-oc-component": I = "scroll-area",
-  ...X
+  ref: k,
+  "data-oc-component": A = "scroll-area",
+  ...N
 }) {
-  const M = d ?? "div", U = m(null), v = mt(
-    gt,
-    Dt,
-    wt
-  ), S = mt(
-    gt,
-    xt,
-    wt
-  ), [o, Tt] = rt(null), [_, Et] = rt(!1), [j, Rt] = rt(!1), F = m(null), f = m(null), a = m(null), q = m(null), g = m(null), s = m(null), P = m(!1), D = m(!1), G = m(0), J = m(0), H = m(null), y = m(null), z = m(null), A = m(null), lt = h(
+  const M = m ?? "div", P = p(null), v = wt(
+    Et,
+    $t,
+    Rt
+  ), y = wt(
+    Et,
+    Vt,
+    Rt
+  ), [o, St] = X(null), [J, Ht] = X(!1), [K, Wt] = X(!1), B = p(null), f = p(null), u = p(null), D = p(null), g = p(null), d = p(null), [O, Ct] = X(null), [$, Lt] = X(null), x = p(!1), Y = p(!1), Q = p(0), Z = p(0), H = p(null), S = p(null), V = p(null), U = p(null), st = s(
     (t) => {
-      U.current = t, bt(Y, t);
+      P.current = t, yt(k, t);
     },
-    [Y]
-  ), at = h((t) => {
-    Tt(t);
-  }, []), St = Mt(
-    () => ({ isRoot: e, setContainerRef: at }),
-    [e, at]
+    [k]
+  ), ut = s((t) => {
+    St(t);
+  }, []), Mt = s((t) => {
+    f.current = t, Ct(t);
+  }, []), Pt = s((t) => {
+    g.current = t, Lt(t);
+  }, []), Bt = At(
+    () => ({ isRoot: e, setContainerRef: ut }),
+    [e, ut]
   );
-  ot(() => {
-    if (!(!v || S || typeof document > "u")) {
-      if (O += 1, e && (V += 1), !document.getElementById(ct)) {
+  it(() => {
+    if (!(!v || y || typeof document > "u")) {
+      if (F += 1, e && (q += 1), !document.getElementById(lt)) {
         const t = document.createElement("style");
-        t.id = ct, t.textContent = `
+        t.id = lt, t.textContent = `
         [data-oc-scroll-container]::-webkit-scrollbar { display: none; }
         [data-oc-scroll-container] { scrollbar-width: none; }
       `, document.head.appendChild(t);
       }
-      if (e && !document.getElementById(it)) {
+      if (e && !document.getElementById(at)) {
         const t = document.createElement("style");
-        t.id = it, t.textContent = `
+        t.id = at, t.textContent = `
         ::-webkit-scrollbar { display: none; }
         body { scrollbar-width: none; }
       `, document.head.appendChild(t);
       }
       return () => {
-        O = Math.max(0, O - 1), e && (V = Math.max(
+        F = Math.max(0, F - 1), e && (q = Math.max(
           0,
-          V - 1
-        )), V === 0 && document.getElementById(it)?.remove(), O === 0 && document.getElementById(ct)?.remove();
+          q - 1
+        )), q === 0 && document.getElementById(at)?.remove(), F === 0 && document.getElementById(lt)?.remove();
       };
     }
-  }, [v, e, S]), ot(() => {
+  }, [v, e, y]), it(() => {
     if (!v || !e || typeof document > "u")
       return;
     const t = document.body.style.overflow;
@@ -101,7 +106,7 @@ function kt({
       }, 1), window.clearTimeout(n);
     };
   }, [v, e]);
-  const C = h(() => {
+  const dt = s(() => {
     const t = o;
     if (t) {
       if (f.current) {
@@ -119,105 +124,123 @@ function kt({
         );
       }
     }
-  }, [o, e]), b = h(() => {
+  }, [o, e]), R = s(() => {
     const t = o;
     if (t) {
-      if (f.current && a.current)
+      if (f.current && u.current)
         if (e) {
           const n = window.scrollY || document.documentElement.scrollTop, r = window.innerHeight, c = document.documentElement.scrollHeight;
           if (c > r) {
-            const i = f.current.getBoundingClientRect().height - a.current.clientHeight, l = c - r;
-            let p = n, u = 0;
-            n > l ? (u = n - l, p = l) : n < 0 && (u = n, p = 0);
-            const et = p / l * i + u;
-            a.current.style.transform = `translateY(${et}px)`;
+            const i = f.current.getBoundingClientRect().height - u.current.clientHeight, a = c - r;
+            let l = n, h = 0;
+            n > a ? (h = n - a, l = a) : n < 0 && (h = n, l = 0);
+            const ot = l / a * i + h;
+            u.current.style.transform = `translateY(${ot}px)`;
           }
         } else {
           const { scrollTop: n, clientHeight: r, scrollHeight: c } = t;
           if (c > r) {
-            const i = f.current.getBoundingClientRect().height - a.current.clientHeight, l = n / (c - r) * i;
-            a.current.style.transform = `translateY(${l}px)`;
+            const i = f.current.getBoundingClientRect().height - u.current.clientHeight, a = n / (c - r) * i;
+            u.current.style.transform = `translateY(${a}px)`;
           }
         }
-      if (g.current && s.current) {
+      if (g.current && d.current) {
         const n = e ? window.scrollX || document.documentElement.scrollLeft : t.scrollLeft, r = e ? window.innerWidth : t.clientWidth, c = e ? document.documentElement.scrollWidth : t.scrollWidth;
         if (c > r) {
-          const i = g.current.getBoundingClientRect().width - s.current.clientWidth, l = n / (c - r) * i;
-          s.current.style.transform = `translateX(${l}px)`;
+          const i = g.current.getBoundingClientRect().width - d.current.clientWidth, a = n / (c - r) * i;
+          d.current.style.transform = `translateX(${a}px)`;
         }
       }
     }
-  }, [o, e]), st = h(() => {
-    R(F.current, "active"), R(q.current, "active"), H.current !== null && window.clearTimeout(H.current), H.current = window.setTimeout(() => {
-      R(F.current, "hidden"), R(q.current, "hidden"), H.current = null;
+  }, [o, e]), ht = s(() => {
+    T(B.current, "active"), T(D.current, "active"), H.current !== null && window.clearTimeout(H.current), H.current = window.setTimeout(() => {
+      T(B.current, "hidden"), T(D.current, "hidden"), H.current = null;
     }, 1e3);
-  }, []), K = h(() => {
-    b(), st();
-  }, [st, b]), N = h(() => {
+  }, []), tt = s(() => {
+    R(), ht();
+  }, [ht, R]), mt = s(() => {
     const t = o;
     if (!t) return;
     const n = e ? window.innerHeight : t.clientHeight, r = e ? window.innerWidth : t.clientWidth;
-    Et(t.scrollHeight > n), Rt(t.scrollWidth > r);
-  }, [o, e]), yt = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), !f.current || !a.current || !o) return;
-    P.current = !0, a.current.dataset.state = "dragging", a.current.dataset.ocState = "dragging";
-    const n = e ? window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) : o.scrollTop / (o.scrollHeight - o.clientHeight), r = f.current.getBoundingClientRect().height - a.current.clientHeight;
-    G.current = t.clientY - n * r, document.addEventListener("selectstart", W), document.addEventListener("dragstart", W);
-  }, Ht = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), !g.current || !s.current || !o) return;
-    D.current = !0, s.current.dataset.state = "dragging", s.current.dataset.ocState = "dragging";
-    const n = e ? window.scrollX / (document.documentElement.scrollWidth - window.innerWidth) : o.scrollLeft / (o.scrollWidth - o.clientWidth), r = g.current.getBoundingClientRect().width - s.current.clientWidth;
-    J.current = t.clientX - n * r, document.addEventListener("selectstart", W), document.addEventListener("dragstart", W);
-  }, Q = h(
+    Ht(t.scrollHeight > n), Wt(t.scrollWidth > r);
+  }, [o, e]), Dt = s(() => {
+    const t = o;
+    if (!t) return "";
+    const n = f.current?.getBoundingClientRect().height ?? 0, r = g.current?.getBoundingClientRect().width ?? 0;
+    return [
+      t.clientWidth,
+      t.clientHeight,
+      t.scrollWidth,
+      t.scrollHeight,
+      n,
+      r
+    ].join(":");
+  }, [o]), xt = s(() => {
+    mt(), dt(), R();
+  }, [mt, dt, R]), { cancelGeometryUpdate: _, scheduleGeometryUpdate: W } = Ot({
+    enabled: v && !!o && !y,
+    getGeometrySignature: Dt,
+    updateGeometry: xt
+  }), Yt = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), !f.current || !u.current || !o) return;
+    x.current = !0, u.current.dataset.state = "dragging", u.current.dataset.ocState = "dragging";
+    const n = e ? window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) : o.scrollTop / (o.scrollHeight - o.clientHeight), r = f.current.getBoundingClientRect().height - u.current.clientHeight;
+    Q.current = t.clientY - n * r, document.addEventListener("selectstart", C), document.addEventListener("dragstart", C);
+  }, It = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), !g.current || !d.current || !o) return;
+    Y.current = !0, d.current.dataset.state = "dragging", d.current.dataset.ocState = "dragging";
+    const n = e ? window.scrollX / (document.documentElement.scrollWidth - window.innerWidth) : o.scrollLeft / (o.scrollWidth - o.clientWidth), r = g.current.getBoundingClientRect().width - d.current.clientWidth;
+    Z.current = t.clientX - n * r, document.addEventListener("selectstart", C), document.addEventListener("dragstart", C);
+  }, et = s(
     (t, n, r) => {
-      const c = t === "vertical" ? f.current : g.current, i = t === "vertical" ? a.current : s.current;
+      const c = t === "vertical" ? f.current : g.current, i = t === "vertical" ? u.current : d.current;
       if (!c || !i) return;
-      const l = t === "vertical" ? window.innerHeight : window.innerWidth, p = t === "vertical" ? document.documentElement.scrollHeight : document.documentElement.scrollWidth, u = t === "vertical" ? c.getBoundingClientRect().height : c.getBoundingClientRect().width, et = t === "vertical" ? i.clientHeight : i.clientWidth, nt = u - et;
-      if (nt <= 0) return;
-      const ht = Math.max(
+      const a = t === "vertical" ? window.innerHeight : window.innerWidth, l = t === "vertical" ? document.documentElement.scrollHeight : document.documentElement.scrollWidth, h = t === "vertical" ? c.getBoundingClientRect().height : c.getBoundingClientRect().width, ot = t === "vertical" ? i.clientHeight : i.clientWidth, ct = h - ot;
+      if (ct <= 0) return;
+      const gt = Math.max(
         0,
-        Math.min(n - r.current, nt)
-      ) / nt;
-      t === "vertical" ? document.documentElement.scrollTop = ht * (p - l) : document.documentElement.scrollLeft = ht * (p - l);
+        Math.min(n - r.current, ct)
+      ) / ct;
+      t === "vertical" ? document.documentElement.scrollTop = gt * (l - a) : document.documentElement.scrollLeft = gt * (l - a);
     },
     []
-  ), Z = h(
+  ), nt = s(
     (t) => {
       if (!o) return;
       let n = !1;
       if (e) {
         const r = document.documentElement.style.scrollBehavior;
-        document.documentElement.style.scrollBehavior = "auto", P.current && (t.preventDefault(), t.stopPropagation(), Q("vertical", t.clientY, G), n = !0), D.current && (t.preventDefault(), t.stopPropagation(), Q("horizontal", t.clientX, J), n = !0), document.documentElement.style.scrollBehavior = r;
+        document.documentElement.style.scrollBehavior = "auto", x.current && (t.preventDefault(), t.stopPropagation(), et("vertical", t.clientY, Q), n = !0), Y.current && (t.preventDefault(), t.stopPropagation(), et("horizontal", t.clientX, Z), n = !0), document.documentElement.style.scrollBehavior = r;
       } else {
-        if (P.current && f.current && a.current) {
+        if (x.current && f.current && u.current) {
           t.preventDefault(), t.stopPropagation();
-          const r = f.current.getBoundingClientRect().height - a.current.clientHeight;
+          const r = f.current.getBoundingClientRect().height - u.current.clientHeight;
           if (r > 0) {
             const i = Math.max(
               0,
-              Math.min(t.clientY - G.current, r)
+              Math.min(t.clientY - Q.current, r)
             ) / r * (o.scrollHeight - o.clientHeight);
             o.scrollTo({ top: i, behavior: "auto" }), n = !0;
           }
         }
-        if (D.current && g.current && s.current) {
+        if (Y.current && g.current && d.current) {
           t.preventDefault(), t.stopPropagation();
-          const r = g.current.getBoundingClientRect().width - s.current.clientWidth;
+          const r = g.current.getBoundingClientRect().width - d.current.clientWidth;
           if (r > 0) {
             const i = Math.max(
               0,
-              Math.min(t.clientX - J.current, r)
+              Math.min(t.clientX - Z.current, r)
             ) / r * (o.scrollWidth - o.clientWidth);
             o.scrollTo({ left: i, behavior: "auto" }), n = !0;
           }
         }
       }
-      n && b();
+      n && R();
     },
-    [o, e, Q, b]
-  ), tt = h(() => {
-    P.current = !1, D.current = !1, a.current && (a.current.dataset.state = "hidden", a.current.dataset.ocState = "hidden"), s.current && (s.current.dataset.state = "hidden", s.current.dataset.ocState = "hidden"), document.removeEventListener("selectstart", W), document.removeEventListener("dragstart", W);
-  }, []), ut = (t) => {
+    [o, e, et, R]
+  ), rt = s(() => {
+    x.current = !1, Y.current = !1, u.current && (u.current.dataset.state = "hidden", u.current.dataset.ocState = "hidden"), d.current && (d.current.dataset.state = "hidden", d.current.dataset.ocState = "hidden"), document.removeEventListener("selectstart", C), document.removeEventListener("dragstart", C);
+  }, []), ft = (t) => {
     t.preventDefault();
     const n = t.currentTarget.dataset.ocOrientation ?? t.currentTarget.dataset.orientation;
     if (e) {
@@ -234,133 +257,137 @@ function kt({
       top: o.scrollTop + t.deltaY,
       behavior: "auto"
     }));
-  }, k = h(() => {
-    y.current !== null && (window.clearTimeout(y.current), y.current = null);
-  }, []), dt = h(() => {
-    k(), y.current = window.setTimeout(() => {
-      R(f.current, "hidden"), R(g.current, "hidden"), y.current = null;
+  }, G = s(() => {
+    S.current !== null && (window.clearTimeout(S.current), S.current = null);
+  }, []), pt = s(() => {
+    G(), S.current = window.setTimeout(() => {
+      T(f.current, "hidden"), T(g.current, "hidden"), S.current = null;
     }, 200);
-  }, [k]), $ = h(
+  }, [G]), j = s(
     (t) => {
-      t ? (R(f.current, "active"), R(g.current, "active"), k()) : !P.current && !D.current && dt();
+      t ? (T(f.current, "active"), T(g.current, "active"), G()) : !x.current && !Y.current && pt();
     },
-    [k, dt]
-  ), x = h(() => {
-    z.current !== null && (window.clearInterval(z.current), z.current = null);
-  }, []), B = h(() => {
-    A.current !== null && (window.clearInterval(A.current), A.current = null);
-  }, []), Ct = (t) => {
-    if (t.target !== t.currentTarget || !o || !a.current)
+    [G, pt]
+  ), I = s(() => {
+    V.current !== null && (window.clearInterval(V.current), V.current = null);
+  }, []), z = s(() => {
+    U.current !== null && (window.clearInterval(U.current), U.current = null);
+  }, []), zt = (t) => {
+    if (t.target !== t.currentTarget || !o || !u.current)
       return;
-    const n = t.clientY, r = a.current.getBoundingClientRect(), c = n < r.top ? "up" : n > r.bottom ? "down" : null;
+    const n = t.clientY, r = u.current.getBoundingClientRect(), c = n < r.top ? "up" : n > r.bottom ? "down" : null;
     if (!c) return;
-    const i = e ? window.innerHeight : o.clientHeight, l = () => {
-      const p = a.current?.getBoundingClientRect();
-      if (p && n >= p.top && n <= p.bottom) {
-        x();
+    const i = e ? window.innerHeight : o.clientHeight, a = () => {
+      const l = u.current?.getBoundingClientRect();
+      if (l && n >= l.top && n <= l.bottom) {
+        I();
         return;
       }
       if (e) {
-        const u = window.scrollY || document.documentElement.scrollTop;
+        const h = window.scrollY || document.documentElement.scrollTop;
         window.scrollTo({
-          top: c === "up" ? u - i : u + i,
+          top: c === "up" ? h - i : h + i,
           behavior: "smooth"
         });
       } else {
-        const u = o.scrollTop;
+        const h = o.scrollTop;
         o.scrollTo({
-          top: c === "up" ? u - i : u + i,
+          top: c === "up" ? h - i : h + i,
           behavior: "smooth"
         });
       }
-      b();
+      R();
     };
-    l(), z.current = window.setInterval(l, 300);
-  }, Wt = (t) => {
-    if (t.target !== t.currentTarget || !o || !s.current)
+    a(), V.current = window.setInterval(a, 300);
+  }, Xt = (t) => {
+    if (t.target !== t.currentTarget || !o || !d.current)
       return;
-    const n = t.clientX, r = s.current.getBoundingClientRect(), c = n < r.left ? "left" : n > r.right ? "right" : null;
+    const n = t.clientX, r = d.current.getBoundingClientRect(), c = n < r.left ? "left" : n > r.right ? "right" : null;
     if (!c) return;
-    const i = e ? window.innerWidth : o.clientWidth, l = () => {
-      const p = s.current?.getBoundingClientRect();
-      if (p && n >= p.left && n <= p.right) {
-        B();
+    const i = e ? window.innerWidth : o.clientWidth, a = () => {
+      const l = d.current?.getBoundingClientRect();
+      if (l && n >= l.left && n <= l.right) {
+        z();
         return;
       }
       if (e) {
-        const u = window.scrollX || document.documentElement.scrollLeft;
+        const h = window.scrollX || document.documentElement.scrollLeft;
         window.scrollTo({
-          left: c === "left" ? u - i : u + i,
+          left: c === "left" ? h - i : h + i,
           behavior: "smooth"
         });
       } else {
-        const u = o.scrollLeft;
+        const h = o.scrollLeft;
         o.scrollTo({
-          left: c === "left" ? u - i : u + i,
+          left: c === "left" ? h - i : h + i,
           behavior: "smooth"
         });
       }
-      b();
+      R();
     };
-    l(), A.current = window.setInterval(l, 300);
+    a(), U.current = window.setInterval(a, 300);
   };
-  return ft(() => {
+  return vt(() => {
     const t = o;
-    if (!v || !t || S) return;
-    const n = window.requestAnimationFrame(() => {
-      N(), C(), b();
-    }), r = e ? window : t;
-    r.addEventListener("scroll", K, {
+    if (!v || !t || y) return;
+    const n = window.requestAnimationFrame(W), r = e ? window : t;
+    r.addEventListener("scroll", tt, {
       passive: !0
     });
     const c = () => {
-      N(), C(), b();
+      W();
     };
-    window.addEventListener("resize", c), document.addEventListener("mousemove", Z), document.addEventListener("mouseup", tt);
-    const i = Bt(() => {
-      C(), b(), N();
-    }, 100), l = new MutationObserver(i);
-    return l.observe(t, {
+    window.addEventListener("resize", c), document.addEventListener("mousemove", nt), document.addEventListener("mouseup", rt);
+    const i = Ut(() => {
+      W();
+    }, 100), a = new MutationObserver(i);
+    a.observe(t, {
       attributes: !0,
       characterData: !0,
       childList: !0,
       subtree: !0
-    }), () => {
-      r.removeEventListener("scroll", K), window.removeEventListener("resize", c), document.removeEventListener("mousemove", Z), document.removeEventListener("mouseup", tt), window.cancelAnimationFrame(n), l.disconnect();
+    });
+    const l = typeof ResizeObserver > "u" ? null : new ResizeObserver(i);
+    return l && (l.observe(t), P.current && l.observe(P.current), t.firstElementChild instanceof HTMLElement && l.observe(t.firstElementChild), B.current && l.observe(B.current), O && l.observe(O), D.current && l.observe(D.current), $ && l.observe($)), () => {
+      r.removeEventListener("scroll", tt), window.removeEventListener("resize", c), document.removeEventListener("mousemove", nt), document.removeEventListener("mouseup", rt), window.cancelAnimationFrame(n), _(), a.disconnect(), l?.disconnect();
     };
   }, [
-    N,
+    _,
     o,
+    W,
     v,
-    K,
-    Z,
     tt,
+    nt,
+    rt,
     e,
-    S,
-    C,
-    b
-  ]), ft(() => {
-    !v || !o || S || !_ && !j || (C(), b());
+    K,
+    J,
+    $,
+    y,
+    O
+  ]), vt(() => {
+    W();
   }, [
     o,
     v,
-    j,
-    _,
-    S,
-    C,
-    b
-  ]), ot(
+    K,
+    J,
+    $,
+    W,
+    y,
+    O
+  ]), it(
     () => () => {
-      H.current !== null && window.clearTimeout(H.current), y.current !== null && window.clearTimeout(y.current), x(), B();
+      H.current !== null && window.clearTimeout(H.current), S.current !== null && window.clearTimeout(S.current), I(), z(), _();
     },
-    [B, x]
-  ), !v || S ? /* @__PURE__ */ w(
+    [_, z, I]
+  ), !v || y ? /* @__PURE__ */ w(
     M,
     {
-      ref: lt,
-      className: `${T.scrollArea} ${L}`.trim(),
-      ...X,
-      "data-oc-component": I,
+      ref: st,
+      className: `${b.scrollArea} ${L}`.trim(),
+      ...N,
+      "data-oc-component": A,
       "data-root": e ? "" : void 0,
       "data-oc-scroll-root": e ? "true" : void 0,
       "data-scroll": "",
@@ -369,13 +396,13 @@ function kt({
       "data-oc-scroll-label": e ? "root" : void 0,
       children: E
     }
-  ) : /* @__PURE__ */ w(vt.Provider, { value: St, children: /* @__PURE__ */ Lt(
+  ) : /* @__PURE__ */ w(Tt.Provider, { value: Bt, children: /* @__PURE__ */ kt(
     M,
     {
-      ref: lt,
-      className: `${T.scrollArea} ${L}`.trim(),
-      ...X,
-      "data-oc-component": I,
+      ref: st,
+      className: `${b.scrollArea} ${L}`.trim(),
+      ...N,
+      "data-oc-component": A,
       "data-root": e ? "" : void 0,
       "data-oc-scroll-root": e ? "true" : void 0,
       "data-scroll": "",
@@ -384,42 +411,42 @@ function kt({
       "data-oc-scroll-label": e ? "root" : void 0,
       children: [
         E,
-        _ ? /* @__PURE__ */ w(
+        J ? /* @__PURE__ */ w(
           "div",
           {
-            ref: F,
-            className: T.scrollbar,
+            ref: B,
+            className: b.scrollbar,
             "data-oc-part": "scrollbar-vertical",
             "data-orientation": "vertical",
             "data-oc-orientation": "vertical",
             "data-state": "hidden",
             "data-oc-state": "hidden",
-            onWheel: ut,
+            onWheel: ft,
             children: /* @__PURE__ */ w(
               "div",
               {
-                ref: f,
-                className: T.wrapper,
+                ref: Mt,
+                className: b.wrapper,
                 "data-oc-part": "scrollbar-track",
                 "data-state": "hidden",
                 "data-oc-state": "hidden",
                 role: "presentation",
-                onMouseDown: Ct,
-                onMouseEnter: () => $(!0),
+                onMouseDown: zt,
+                onMouseEnter: () => j(!0),
                 onMouseLeave: () => {
-                  x(), $(!1);
+                  I(), j(!1);
                 },
-                onMouseUp: x,
+                onMouseUp: I,
                 children: /* @__PURE__ */ w(
                   "div",
                   {
-                    ref: a,
-                    className: T.thumb,
+                    ref: u,
+                    className: b.thumb,
                     "data-oc-part": "thumb",
                     "data-state": "hidden",
                     "data-oc-state": "hidden",
                     role: "presentation",
-                    onMouseDown: yt,
+                    onMouseDown: Yt,
                     onPointerDownCapture: (t) => {
                       t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
                     },
@@ -432,9 +459,9 @@ function kt({
                     children: /* @__PURE__ */ w(
                       "div",
                       {
-                        className: T.background,
+                        className: b.background,
                         "data-oc-part": "thumb-background",
-                        children: /* @__PURE__ */ w(pt, { variant: "light", self: !0 })
+                        children: /* @__PURE__ */ w(bt, { variant: "light", self: !0 })
                       }
                     )
                   }
@@ -443,42 +470,42 @@ function kt({
             )
           }
         ) : null,
-        j ? /* @__PURE__ */ w(
+        K ? /* @__PURE__ */ w(
           "div",
           {
-            ref: q,
-            className: T.scrollbar,
+            ref: D,
+            className: b.scrollbar,
             "data-oc-part": "scrollbar-horizontal",
             "data-orientation": "horizontal",
             "data-oc-orientation": "horizontal",
             "data-state": "hidden",
             "data-oc-state": "hidden",
-            onWheel: ut,
+            onWheel: ft,
             children: /* @__PURE__ */ w(
               "div",
               {
-                ref: g,
-                className: T.wrapper,
+                ref: Pt,
+                className: b.wrapper,
                 "data-oc-part": "scrollbar-track",
                 "data-state": "hidden",
                 "data-oc-state": "hidden",
                 role: "presentation",
-                onMouseDown: Wt,
-                onMouseEnter: () => $(!0),
+                onMouseDown: Xt,
+                onMouseEnter: () => j(!0),
                 onMouseLeave: () => {
-                  B(), $(!1);
+                  z(), j(!1);
                 },
-                onMouseUp: B,
+                onMouseUp: z,
                 children: /* @__PURE__ */ w(
                   "div",
                   {
-                    ref: s,
-                    className: T.thumb,
+                    ref: d,
+                    className: b.thumb,
                     "data-oc-part": "thumb",
                     "data-state": "hidden",
                     "data-oc-state": "hidden",
                     role: "presentation",
-                    onMouseDown: Ht,
+                    onMouseDown: It,
                     onPointerDownCapture: (t) => {
                       t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
                     },
@@ -491,9 +518,9 @@ function kt({
                     children: /* @__PURE__ */ w(
                       "div",
                       {
-                        className: T.background,
+                        className: b.background,
                         "data-oc-part": "thumb-background",
-                        children: /* @__PURE__ */ w(pt, { variant: "light", self: !0 })
+                        children: /* @__PURE__ */ w(bt, { variant: "light", self: !0 })
                       }
                     )
                   }
@@ -506,28 +533,28 @@ function kt({
     }
   ) });
 }
-function $t({
-  as: d,
+function Zt({
+  as: m,
   children: e,
   className: E = "",
   ref: L,
-  "data-oc-component": Y = "scroll-area-container",
-  ...I
+  "data-oc-component": k = "scroll-area-container",
+  ...A
 }) {
-  const X = d ?? "div", M = Pt(vt), U = h(
+  const N = m ?? "div", M = Nt(Tt), P = s(
     (v) => {
-      M?.setContainerRef(v), bt(L, v);
+      M?.setContainerRef(v), yt(L, v);
     },
     [M, L]
   );
   return /* @__PURE__ */ w(
-    X,
+    N,
     {
-      ref: U,
-      className: `${T.container} ${E}`.trim(),
-      ...I,
+      ref: P,
+      className: `${b.container} ${E}`.trim(),
+      ...A,
       "data-oc-part": "scroll-area-container",
-      "data-oc-component": Y,
+      "data-oc-component": k,
       "data-scroll-container": "",
       "data-oc-scroll-container": "",
       children: e
@@ -535,7 +562,7 @@ function $t({
   );
 }
 export {
-  kt as ScrollArea,
-  $t as ScrollAreaContainer,
-  kt as default
+  Qt as ScrollArea,
+  Zt as ScrollAreaContainer,
+  Qt as default
 };