@orioncactuscorp/ui 1.9.2 → 1.11.0

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,84 +1,80 @@
 'use client';
-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 { 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 { 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 Et() {
+function Rt() {
   return () => {
   };
 }
 function $t() {
   return !0;
 }
-function Rt() {
+function Tt() {
   return !1;
 }
 function Vt() {
   return typeof window < "u" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
 }
-function C(m) {
-  return m.preventDefault(), !1;
+function C(w) {
+  return w.preventDefault(), !1;
 }
-function Ut(m, e) {
+function Ut(w, n) {
   let E = !1;
   return () => {
-    E || (m(), E = !0, window.setTimeout(() => {
+    E || (w(), E = !0, window.setTimeout(() => {
       E = !1;
-    }, e));
+    }, n));
   };
 }
-function yt(m, e) {
-  typeof m == "function" ? m(e) : m && (m.current = e);
+function T(w, n) {
+  w && (w.dataset.state = n, w.dataset.ocState = n);
 }
-function T(m, e) {
-  m && (m.dataset.state = e, m.dataset.ocState = e);
-}
-function Qt({
-  as: m,
-  root: e = !1,
+function Zt({
+  as: w,
+  root: n = !1,
   children: E,
   className: L = "",
   ref: k,
   "data-oc-component": A = "scroll-area",
   ...N
 }) {
-  const M = m ?? "div", P = p(null), v = wt(
-    Et,
+  const M = w ?? "div", P = f(null), b = vt(
+    Rt,
     $t,
-    Rt
-  ), y = wt(
-    Et,
+    Tt
+  ), y = vt(
+    Rt,
     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) => {
-      P.current = t, yt(k, t);
-    },
+    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),
     [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]
+  ), 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]
   );
   it(() => {
-    if (!(!v || y || typeof document > "u")) {
-      if (F += 1, e && (q += 1), !document.getElementById(lt)) {
+    if (!(!b || y || typeof document > "u")) {
+      if (F += 1, n && (q += 1), !document.getElementById(lt)) {
         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; }
       `, document.head.appendChild(t);
       }
-      if (e && !document.getElementById(at)) {
+      if (n && !document.getElementById(at)) {
         const t = document.createElement("style");
         t.id = at, t.textContent = `
         ::-webkit-scrollbar { display: none; }
@@ -86,204 +82,204 @@ function Qt({
       `, document.head.appendChild(t);
       }
       return () => {
-        F = Math.max(0, F - 1), e && (q = Math.max(
+        F = Math.max(0, F - 1), n && (q = Math.max(
           0,
           q - 1
         )), q === 0 && document.getElementById(at)?.remove(), F === 0 && document.getElementById(lt)?.remove();
       };
     }
-  }, [v, e, y]), it(() => {
-    if (!v || !e || typeof document > "u")
+  }, [b, n, y]), it(() => {
+    if (!b || !n || typeof document > "u")
       return;
     const t = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const n = window.setTimeout(() => {
+    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(n);
+      }, 1), window.clearTimeout(e);
     };
-  }, [v, e]);
-  const dt = s(() => {
+  }, [b, n]);
+  const ht = u(() => {
     const t = o;
     if (t) {
-      if (f.current) {
-        const n = f.current.getBoundingClientRect().height, r = e ? window.innerHeight : t.clientHeight, c = t.scrollHeight, i = c <= r ? n : r / c * n;
-        f.current.style.setProperty(
+      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;
+        m.current.style.setProperty(
           "--oc-scroll-area-thumb-height",
           `${i}px`
         );
       }
-      if (g.current) {
-        const n = g.current.getBoundingClientRect().width, r = e ? window.innerWidth : t.clientWidth, c = t.scrollWidth, i = c <= r ? n : r / c * n;
-        g.current.style.setProperty(
+      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;
+        p.current.style.setProperty(
           "--oc-scroll-area-thumb-width",
           `${i}px`
         );
       }
     }
-  }, [o, e]), R = s(() => {
+  }, [o, n]), R = u(() => {
     const t = o;
     if (t) {
-      if (f.current && u.current)
-        if (e) {
-          const n = window.scrollY || document.documentElement.scrollTop, r = window.innerHeight, c = document.documentElement.scrollHeight;
+      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 = 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 i = m.current.getBoundingClientRect().height - s.current.clientHeight, a = 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;
-            u.current.style.transform = `translateY(${ot}px)`;
+            s.current.style.transform = `translateY(${ot}px)`;
           }
         } else {
-          const { scrollTop: n, clientHeight: r, scrollHeight: c } = t;
+          const { scrollTop: e, clientHeight: r, scrollHeight: c } = t;
           if (c > r) {
-            const i = f.current.getBoundingClientRect().height - u.current.clientHeight, a = n / (c - r) * i;
-            u.current.style.transform = `translateY(${a}px)`;
+            const i = m.current.getBoundingClientRect().height - s.current.clientHeight, a = e / (c - r) * i;
+            s.current.style.transform = `translateY(${a}px)`;
           }
         }
-      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 (p.current && d.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 = g.current.getBoundingClientRect().width - d.current.clientWidth, a = n / (c - r) * i;
+          const i = p.current.getBoundingClientRect().width - d.current.clientWidth, a = e / (c - r) * i;
           d.current.style.transform = `translateX(${a}px)`;
         }
       }
     }
-  }, [o, e]), ht = s(() => {
+  }, [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;
     }, 1e3);
-  }, []), tt = s(() => {
-    R(), ht();
-  }, [ht, R]), mt = s(() => {
+  }, []), tt = u(() => {
+    R(), mt();
+  }, [mt, R]), ft = u(() => {
     const t = o;
     if (!t) return;
-    const n = e ? window.innerHeight : t.clientHeight, r = e ? window.innerWidth : t.clientWidth;
-    Ht(t.scrollHeight > n), Wt(t.scrollWidth > r);
-  }, [o, e]), Dt = s(() => {
+    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(() => {
     const t = o;
     if (!t) return "";
-    const n = f.current?.getBoundingClientRect().height ?? 0, r = g.current?.getBoundingClientRect().width ?? 0;
+    const e = m.current?.getBoundingClientRect().height ?? 0, r = p.current?.getBoundingClientRect().width ?? 0;
     return [
       t.clientWidth,
       t.clientHeight,
       t.scrollWidth,
       t.scrollHeight,
-      n,
+      e,
       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;
+  }, [o]), Yt = u(() => {
+    ft(), ht(), R();
+  }, [ft, ht, R]), { cancelGeometryUpdate: _, scheduleGeometryUpdate: W } = Ot({
+    enabled: b && !!o && !y,
+    getGeometrySignature: xt,
+    updateGeometry: Yt
+  }), It = (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";
+    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 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" ? u.current : d.current;
+    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(
+    (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 gt = Math.max(
+      const wt = Math.max(
         0,
-        Math.min(n - r.current, ct)
+        Math.min(e - r.current, ct)
       ) / ct;
-      t === "vertical" ? document.documentElement.scrollTop = gt * (l - a) : document.documentElement.scrollLeft = gt * (l - a);
+      t === "vertical" ? document.documentElement.scrollTop = wt * (l - a) : document.documentElement.scrollLeft = wt * (l - a);
     },
     []
-  ), nt = s(
+  ), nt = u(
     (t) => {
       if (!o) return;
-      let n = !1;
-      if (e) {
+      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), n = !0), Y.current && (t.preventDefault(), t.stopPropagation(), et("horizontal", t.clientX, Z), n = !0), document.documentElement.style.scrollBehavior = r;
+        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;
       } else {
-        if (x.current && f.current && u.current) {
+        if (x.current && m.current && s.current) {
           t.preventDefault(), t.stopPropagation();
-          const r = f.current.getBoundingClientRect().height - u.current.clientHeight;
+          const r = m.current.getBoundingClientRect().height - s.current.clientHeight;
           if (r > 0) {
             const i = Math.max(
               0,
               Math.min(t.clientY - Q.current, r)
             ) / r * (o.scrollHeight - o.clientHeight);
-            o.scrollTo({ top: i, behavior: "auto" }), n = !0;
+            o.scrollTo({ top: i, behavior: "auto" }), e = !0;
           }
         }
-        if (Y.current && g.current && d.current) {
+        if (Y.current && p.current && d.current) {
           t.preventDefault(), t.stopPropagation();
-          const r = g.current.getBoundingClientRect().width - d.current.clientWidth;
+          const r = p.current.getBoundingClientRect().width - d.current.clientWidth;
           if (r > 0) {
             const i = Math.max(
               0,
               Math.min(t.clientX - Z.current, r)
             ) / r * (o.scrollWidth - o.clientWidth);
-            o.scrollTo({ left: i, behavior: "auto" }), n = !0;
+            o.scrollTo({ left: i, behavior: "auto" }), e = !0;
           }
         }
       }
-      n && R();
+      e && R();
     },
-    [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) => {
+    [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) => {
     t.preventDefault();
-    const n = t.currentTarget.dataset.ocOrientation ?? t.currentTarget.dataset.orientation;
-    if (e) {
-      n === "horizontal" ? window.scrollBy({
+    const e = t.currentTarget.dataset.ocOrientation ?? t.currentTarget.dataset.orientation;
+    if (n) {
+      e === "horizontal" ? window.scrollBy({
         left: t.deltaY || t.deltaX,
         behavior: "auto"
       }) : window.scrollBy({ top: t.deltaY, behavior: "auto" });
       return;
     }
-    o && (n === "horizontal" ? o.scrollTo({
+    o && (e === "horizontal" ? o.scrollTo({
       left: o.scrollLeft + (t.deltaY || t.deltaX),
       behavior: "auto"
     }) : o.scrollTo({
       top: o.scrollTop + t.deltaY,
       behavior: "auto"
     }));
-  }, G = s(() => {
+  }, G = u(() => {
     S.current !== null && (window.clearTimeout(S.current), S.current = null);
-  }, []), pt = s(() => {
+  }, []), gt = u(() => {
     G(), S.current = window.setTimeout(() => {
-      T(f.current, "hidden"), T(g.current, "hidden"), S.current = null;
+      T(m.current, "hidden"), T(p.current, "hidden"), S.current = null;
     }, 200);
-  }, [G]), j = s(
+  }, [G]), j = u(
     (t) => {
-      t ? (T(f.current, "active"), T(g.current, "active"), G()) : !x.current && !Y.current && pt();
+      t ? (T(m.current, "active"), T(p.current, "active"), G()) : !x.current && !Y.current && gt();
     },
-    [G, pt]
-  ), I = s(() => {
+    [G, gt]
+  ), I = u(() => {
     V.current !== null && (window.clearInterval(V.current), V.current = null);
-  }, []), z = s(() => {
+  }, []), z = u(() => {
     U.current !== null && (window.clearInterval(U.current), U.current = null);
-  }, []), zt = (t) => {
-    if (t.target !== t.currentTarget || !o || !u.current)
+  }, []), Xt = (t) => {
+    if (t.target !== t.currentTarget || !o || !s.current)
       return;
-    const n = t.clientY, r = u.current.getBoundingClientRect(), c = n < r.top ? "up" : n > r.bottom ? "down" : null;
+    const e = t.clientY, r = s.current.getBoundingClientRect(), c = e < r.top ? "up" : e > r.bottom ? "down" : null;
     if (!c) return;
-    const i = e ? window.innerHeight : o.clientHeight, a = () => {
-      const l = u.current?.getBoundingClientRect();
-      if (l && n >= l.top && n <= l.bottom) {
+    const i = n ? window.innerHeight : o.clientHeight, a = () => {
+      const l = s.current?.getBoundingClientRect();
+      if (l && e >= l.top && e <= l.bottom) {
         I();
         return;
       }
-      if (e) {
+      if (n) {
         const h = window.scrollY || document.documentElement.scrollTop;
         window.scrollTo({
           top: c === "up" ? h - i : h + i,
@@ -299,18 +295,18 @@ function Qt({
       R();
     };
     a(), V.current = window.setInterval(a, 300);
-  }, Xt = (t) => {
+  }, kt = (t) => {
     if (t.target !== t.currentTarget || !o || !d.current)
       return;
-    const n = t.clientX, r = d.current.getBoundingClientRect(), c = n < r.left ? "left" : n > r.right ? "right" : null;
+    const e = t.clientX, r = d.current.getBoundingClientRect(), c = e < r.left ? "left" : e > r.right ? "right" : null;
     if (!c) return;
-    const i = e ? window.innerWidth : o.clientWidth, a = () => {
+    const i = n ? window.innerWidth : o.clientWidth, a = () => {
       const l = d.current?.getBoundingClientRect();
-      if (l && n >= l.left && n <= l.right) {
+      if (l && e >= l.left && e <= l.right) {
         z();
         return;
       }
-      if (e) {
+      if (n) {
         const h = window.scrollX || document.documentElement.scrollLeft;
         window.scrollTo({
           left: c === "left" ? h - i : h + i,
@@ -327,10 +323,10 @@ function Qt({
     };
     a(), U.current = window.setInterval(a, 300);
   };
-  return vt(() => {
+  return bt(() => {
     const t = o;
-    if (!v || !t || y) return;
-    const n = window.requestAnimationFrame(W), r = e ? window : t;
+    if (!b || !t || y) return;
+    const e = window.requestAnimationFrame(W), r = n ? window : t;
     r.addEventListener("scroll", tt, {
       passive: !0
     });
@@ -349,27 +345,27 @@ function Qt({
     });
     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();
+      r.removeEventListener("scroll", tt), window.removeEventListener("resize", c), document.removeEventListener("mousemove", nt), document.removeEventListener("mouseup", rt), window.cancelAnimationFrame(e), _(), a.disconnect(), l?.disconnect();
     };
   }, [
     _,
     o,
     W,
-    v,
+    b,
     tt,
     nt,
     rt,
-    e,
+    n,
     K,
     J,
     $,
     y,
     O
-  ]), vt(() => {
+  ]), bt(() => {
     W();
   }, [
     o,
-    v,
+    b,
     K,
     J,
     $,
@@ -381,72 +377,72 @@ function Qt({
       H.current !== null && window.clearTimeout(H.current), S.current !== null && window.clearTimeout(S.current), I(), z(), _();
     },
     [_, z, I]
-  ), !v || y ? /* @__PURE__ */ w(
+  ), !b || y ? /* @__PURE__ */ g(
     M,
     {
-      ref: st,
-      className: `${b.scrollArea} ${L}`.trim(),
+      ref: ut,
+      className: `${v.scrollArea} ${L}`.trim(),
       ...N,
       "data-oc-component": A,
-      "data-root": e ? "" : void 0,
-      "data-oc-scroll-root": e ? "true" : void 0,
+      "data-root": n ? "" : void 0,
+      "data-oc-scroll-root": n ? "true" : void 0,
       "data-scroll": "",
       "data-oc-scroll": "",
-      "data-scroll-label": e ? "root" : void 0,
-      "data-oc-scroll-label": e ? "root" : void 0,
+      "data-scroll-label": n ? "root" : void 0,
+      "data-oc-scroll-label": n ? "root" : void 0,
       children: E
     }
-  ) : /* @__PURE__ */ w(Tt.Provider, { value: Bt, children: /* @__PURE__ */ kt(
+  ) : /* @__PURE__ */ g(St.Provider, { value: Dt, children: /* @__PURE__ */ At(
     M,
     {
-      ref: st,
-      className: `${b.scrollArea} ${L}`.trim(),
+      ref: ut,
+      className: `${v.scrollArea} ${L}`.trim(),
       ...N,
       "data-oc-component": A,
-      "data-root": e ? "" : void 0,
-      "data-oc-scroll-root": e ? "true" : void 0,
+      "data-root": n ? "" : void 0,
+      "data-oc-scroll-root": n ? "true" : void 0,
       "data-scroll": "",
       "data-oc-scroll": "",
-      "data-scroll-label": e ? "root" : void 0,
-      "data-oc-scroll-label": e ? "root" : void 0,
+      "data-scroll-label": n ? "root" : void 0,
+      "data-oc-scroll-label": n ? "root" : void 0,
       children: [
         E,
-        J ? /* @__PURE__ */ w(
+        J ? /* @__PURE__ */ g(
           "div",
           {
             ref: B,
-            className: b.scrollbar,
+            className: v.scrollbar,
             "data-oc-part": "scrollbar-vertical",
             "data-orientation": "vertical",
             "data-oc-orientation": "vertical",
             "data-state": "hidden",
             "data-oc-state": "hidden",
-            onWheel: ft,
-            children: /* @__PURE__ */ w(
+            onWheel: pt,
+            children: /* @__PURE__ */ g(
               "div",
               {
-                ref: Mt,
-                className: b.wrapper,
+                ref: Pt,
+                className: v.wrapper,
                 "data-oc-part": "scrollbar-track",
                 "data-state": "hidden",
                 "data-oc-state": "hidden",
                 role: "presentation",
-                onMouseDown: zt,
+                onMouseDown: Xt,
                 onMouseEnter: () => j(!0),
                 onMouseLeave: () => {
                   I(), j(!1);
                 },
                 onMouseUp: I,
-                children: /* @__PURE__ */ w(
+                children: /* @__PURE__ */ g(
                   "div",
                   {
-                    ref: u,
-                    className: b.thumb,
+                    ref: s,
+                    className: v.thumb,
                     "data-oc-part": "thumb",
                     "data-state": "hidden",
                     "data-oc-state": "hidden",
                     role: "presentation",
-                    onMouseDown: Yt,
+                    onMouseDown: It,
                     onPointerDownCapture: (t) => {
                       t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
                     },
@@ -456,12 +452,12 @@ function Qt({
                     onPointerUpCapture: (t) => {
                       t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
                     },
-                    children: /* @__PURE__ */ w(
+                    children: /* @__PURE__ */ g(
                       "div",
                       {
-                        className: b.background,
+                        className: v.background,
                         "data-oc-part": "thumb-background",
-                        children: /* @__PURE__ */ w(bt, { variant: "light", self: !0 })
+                        children: /* @__PURE__ */ g(Et, { variant: "light", self: !0 })
                       }
                     )
                   }
@@ -470,42 +466,42 @@ function Qt({
             )
           }
         ) : null,
-        K ? /* @__PURE__ */ w(
+        K ? /* @__PURE__ */ g(
           "div",
           {
             ref: D,
-            className: b.scrollbar,
+            className: v.scrollbar,
             "data-oc-part": "scrollbar-horizontal",
             "data-orientation": "horizontal",
             "data-oc-orientation": "horizontal",
             "data-state": "hidden",
             "data-oc-state": "hidden",
-            onWheel: ft,
-            children: /* @__PURE__ */ w(
+            onWheel: pt,
+            children: /* @__PURE__ */ g(
               "div",
               {
-                ref: Pt,
-                className: b.wrapper,
+                ref: Bt,
+                className: v.wrapper,
                 "data-oc-part": "scrollbar-track",
                 "data-state": "hidden",
                 "data-oc-state": "hidden",
                 role: "presentation",
-                onMouseDown: Xt,
+                onMouseDown: kt,
                 onMouseEnter: () => j(!0),
                 onMouseLeave: () => {
                   z(), j(!1);
                 },
                 onMouseUp: z,
-                children: /* @__PURE__ */ w(
+                children: /* @__PURE__ */ g(
                   "div",
                   {
                     ref: d,
-                    className: b.thumb,
+                    className: v.thumb,
                     "data-oc-part": "thumb",
                     "data-state": "hidden",
                     "data-oc-state": "hidden",
                     role: "presentation",
-                    onMouseDown: It,
+                    onMouseDown: zt,
                     onPointerDownCapture: (t) => {
                       t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
                     },
@@ -515,12 +511,12 @@ function Qt({
                     onPointerUpCapture: (t) => {
                       t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
                     },
-                    children: /* @__PURE__ */ w(
+                    children: /* @__PURE__ */ g(
                       "div",
                       {
-                        className: b.background,
+                        className: v.background,
                         "data-oc-part": "thumb-background",
-                        children: /* @__PURE__ */ w(bt, { variant: "light", self: !0 })
+                        children: /* @__PURE__ */ g(Et, { variant: "light", self: !0 })
                       }
                     )
                   }
@@ -533,36 +529,37 @@ function Qt({
     }
   ) });
 }
-function Zt({
-  as: m,
-  children: e,
+function te({
+  as: w,
+  children: n,
   className: E = "",
   ref: L,
   "data-oc-component": k = "scroll-area-container",
   ...A
 }) {
-  const N = m ?? "div", M = Nt(Tt), P = s(
-    (v) => {
-      M?.setContainerRef(v), yt(L, v);
-    },
+  const N = w ?? "div", M = Nt(St), P = st(
+    () => yt(
+      M?.setContainerRef,
+      L
+    ),
     [M, L]
   );
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ g(
     N,
     {
       ref: P,
-      className: `${b.container} ${E}`.trim(),
+      className: `${v.container} ${E}`.trim(),
       ...A,
       "data-oc-part": "scroll-area-container",
       "data-oc-component": k,
       "data-scroll-container": "",
       "data-oc-scroll-container": "",
-      children: e
+      children: n
     }
   );
 }
 export {
-  Qt as ScrollArea,
-  Zt as ScrollAreaContainer,
-  Qt as default
+  Zt as ScrollArea,
+  te as ScrollAreaContainer,
+  Zt as default
 };