@orioncactuscorp/ui 1.15.0 → 1.16.0

package/dist/components/ScrollArea/ScrollArea.js

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