@epilot/volt-ui-experimental-griffel 0.3.0 → 0.3.1

package/dist/components/scroll-overflow/scroll-overflow.js

@@ -1,149 +1,101 @@
-import { j as l } from "../../vendor/react/jsx-dev-runtime.js";
-import * as f from "react";
-import { Root as A, Viewport as B, Scrollbar as I, Thumb as L } from "../../vendor/@radix-ui/react-scroll-area/dist/index.js";
-import { shorthands as u } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as T } from "../../styles/make-styles.js";
-import { radiusMd as M, radiusSm as O, grayA8 as y, accentA8 as F, grayA12 as W, gray1 as G } from "../../tokens/index.js";
-function z() {
+import { jsxs as E, jsx as l } from "react/jsx-runtime";
+import * as d from "react";
+import { Root as N, Viewport as T, Scrollbar as M, Thumb as O } from "../../vendor/@radix-ui/react-scroll-area/dist/index.js";
+import { shorthands as w } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as s } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as F } from "../../styles/make-styles.js";
+import { radiusMd as W, radiusSm as j, grayA8 as A, accentA8 as G, grayA12 as K, gray1 as Z } from "../../tokens/index.js";
+function B() {
   return typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
 }
-function K(n = {}) {
-  const { scrollStep: x = 200, orientation: S = "horizontal" } = n, m = f.useRef(null), [N, w] = f.useState(!1), [h, b] = f.useState(!1), [g, C] = f.useState(!1), s = S === "horizontal", p = f.useCallback(() => {
-    const e = m.current;
-    if (e)
-      if (s) {
-        const t = Math.round(e.scrollLeft), a = e.scrollWidth, c = e.clientWidth;
-        w(a > c), b(t > 0), C(t + c < a - 1);
+function $(c = {}) {
+  const { scrollStep: m = 200, orientation: H = "horizontal" } = c, f = d.useRef(null), [g, p] = d.useState(!1), [b, x] = d.useState(!1), [C, S] = d.useState(!1), a = H === "horizontal", u = d.useCallback(() => {
+    const r = f.current;
+    if (r)
+      if (a) {
+        const e = Math.round(r.scrollLeft), n = r.scrollWidth, i = r.clientWidth;
+        p(n > i), x(e > 0), S(e + i < n - 1);
       } else {
-        const t = Math.round(e.scrollTop), a = e.scrollHeight, c = e.clientHeight;
-        w(a > c), b(t > 0), C(t + c < a - 1);
+        const e = Math.round(r.scrollTop), n = r.scrollHeight, i = r.clientHeight;
+        p(n > i), x(e > 0), S(e + i < n - 1);
       }
-  }, [s]);
-  f.useEffect(() => {
-    const e = m.current;
-    if (!e) return;
-    p();
-    let t = null;
+  }, [a]);
+  d.useEffect(() => {
+    const r = f.current;
+    if (!r) return;
+    u();
+    let e = null;
     if (typeof ResizeObserver < "u") {
-      t = new ResizeObserver(() => {
-        p();
-      }), t.observe(e);
-      for (const a of e.children)
-        t.observe(a);
+      e = new ResizeObserver(() => {
+        u();
+      }), e.observe(r);
+      for (const n of r.children)
+        e.observe(n);
     }
-    return e.addEventListener("scroll", p, { passive: !0 }), () => {
-      t == null || t.disconnect(), e.removeEventListener("scroll", p);
+    return r.addEventListener("scroll", u, { passive: !0 }), () => {
+      e == null || e.disconnect(), r.removeEventListener("scroll", u);
     };
-  }, [p]);
-  const V = f.useCallback(() => {
-    var e;
-    (e = m.current) == null || e.scrollBy({
-      [s ? "left" : "top"]: -x,
-      behavior: z()
+  }, [u]);
+  const y = d.useCallback(() => {
+    var r;
+    (r = f.current) == null || r.scrollBy({
+      [a ? "left" : "top"]: -m,
+      behavior: B()
     });
-  }, [x, s]), o = f.useCallback(() => {
-    var e;
-    (e = m.current) == null || e.scrollBy({
-      [s ? "left" : "top"]: x,
-      behavior: z()
+  }, [m, a]), o = d.useCallback(() => {
+    var r;
+    (r = f.current) == null || r.scrollBy({
+      [a ? "left" : "top"]: m,
+      behavior: B()
     });
-  }, [x, s]);
+  }, [m, a]);
   return {
-    scrollRef: m,
-    hasOverflow: N,
-    canScrollStart: h,
-    canScrollEnd: g,
-    scrollToStart: V,
+    scrollRef: f,
+    hasOverflow: g,
+    canScrollStart: b,
+    canScrollEnd: C,
+    scrollToStart: y,
     scrollToEnd: o
   };
 }
-const Z = (n) => /* @__PURE__ */ l.jsxDEV(
+const U = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ l.jsxDEV("path", { d: "M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z" }, void 0, !1, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-      lineNumber: 128,
-      columnNumber: 5
-    }, void 0)
-  },
-  void 0,
-  !1,
-  {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-    lineNumber: 122,
-    columnNumber: 3
-  },
-  void 0
-), $ = (n) => /* @__PURE__ */ l.jsxDEV(
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z" })
+  }
+), P = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ l.jsxDEV("path", { d: "M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z" }, void 0, !1, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-      lineNumber: 139,
-      columnNumber: 5
-    }, void 0)
-  },
-  void 0,
-  !1,
-  {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-    lineNumber: 133,
-    columnNumber: 3
-  },
-  void 0
-), P = (n) => /* @__PURE__ */ l.jsxDEV(
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z" })
+  }
+), Q = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ l.jsxDEV("path", { d: "M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z" }, void 0, !1, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-      lineNumber: 150,
-      columnNumber: 5
-    }, void 0)
-  },
-  void 0,
-  !1,
-  {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-    lineNumber: 144,
-    columnNumber: 3
-  },
-  void 0
-), Q = (n) => /* @__PURE__ */ l.jsxDEV(
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z" })
+  }
+), _ = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ l.jsxDEV("path", { d: "M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z" }, void 0, !1, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-      lineNumber: 161,
-      columnNumber: 5
-    }, void 0)
-  },
-  void 0,
-  !1,
-  {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-    lineNumber: 155,
-    columnNumber: 3
-  },
-  void 0
-), _ = T({
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z" })
+  }
+), q = F({
   container: {
     position: "relative",
     display: "flex"
@@ -199,9 +151,9 @@ const Z = (n) => /* @__PURE__ */ l.jsxDEV(
     justifyContent: "center",
     cursor: "pointer",
     backgroundColor: "transparent",
-    ...u.borderStyle("none"),
-    ...u.borderWidth(0),
-    ...u.padding(0)
+    ...w.borderStyle("none"),
+    ...w.borderWidth(0),
+    ...w.padding(0)
   },
   arrowHorizontalStart: {
     left: 0,
@@ -231,12 +183,12 @@ const Z = (n) => /* @__PURE__ */ l.jsxDEV(
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: y,
-    ...u.borderRadius(O),
+    backgroundColor: A,
+    ...w.borderRadius(j),
     backdropFilter: "blur(4px)",
-    color: G,
+    color: Z,
     ":hover": {
-      backgroundColor: W
+      backgroundColor: K
     }
   },
   arrowIcon: {
@@ -244,7 +196,7 @@ const Z = (n) => /* @__PURE__ */ l.jsxDEV(
     height: "1rem"
   },
   scrollAreaRoot: {
-    ...u.overflow("hidden"),
+    ...w.overflow("hidden"),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%"
@@ -266,12 +218,12 @@ const Z = (n) => /* @__PURE__ */ l.jsxDEV(
     flexDirection: "row"
   },
   viewport: {
-    ...u.borderRadius(M),
+    ...w.borderRadius(W),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
       outlineStyle: "solid",
-      outlineColor: F
+      outlineColor: G
     }
   },
   viewportHorizontal: {
@@ -296,7 +248,7 @@ const Z = (n) => /* @__PURE__ */ l.jsxDEV(
     display: "flex",
     touchAction: "none",
     userSelect: "none",
-    ...u.padding("1px"),
+    ...w.padding("1px"),
     transitionProperty: "color, background-color, border-color",
     transitionDuration: "150ms"
   },
@@ -316,322 +268,218 @@ const Z = (n) => /* @__PURE__ */ l.jsxDEV(
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
-    ...u.borderRadius("9999px"),
-    backgroundColor: y
+    ...w.borderRadius("9999px"),
+    backgroundColor: A
   }
-}), lo = f.forwardRef(function({
-  className: x,
-  children: S,
-  arrows: m = !1,
-  gradients: N = !0,
-  gradientWidth: w = 40,
-  gradientColor: h = "var(--volt-body)",
-  shadow: b = !0,
-  scrollbar: g = !1,
-  scrollStep: C,
-  orientation: s = "horizontal",
-  ...p
-}, V) {
-  const o = _(), {
-    scrollRef: e,
-    hasOverflow: t,
-    canScrollStart: a,
-    canScrollEnd: c,
-    scrollToStart: k,
-    scrollToEnd: E
-  } = K({ scrollStep: C, orientation: s }), r = s === "horizontal", j = (v) => {
-    var D, H;
+}), eo = d.forwardRef(function({
+  className: m,
+  children: H,
+  arrows: f = !1,
+  gradients: g = !0,
+  gradientWidth: p = 40,
+  gradientColor: b = "var(--volt-body)",
+  shadow: x = !0,
+  scrollbar: C = !1,
+  scrollStep: S,
+  orientation: a = "horizontal",
+  ...u
+}, y) {
+  const o = q(), {
+    scrollRef: r,
+    hasOverflow: e,
+    canScrollStart: n,
+    canScrollEnd: i,
+    scrollToStart: z,
+    scrollToEnd: V
+  } = $({ scrollStep: S, orientation: a }), t = a === "horizontal", I = (v) => {
+    var k, R;
     if (v.target !== v.currentTarget) return;
-    const R = r ? "ArrowLeft" : "ArrowUp", U = r ? "ArrowRight" : "ArrowDown";
+    const D = t ? "ArrowLeft" : "ArrowUp", L = t ? "ArrowRight" : "ArrowDown";
     switch (v.key) {
-      case R:
-        v.preventDefault(), k();
+      case D:
+        v.preventDefault(), z();
         break;
-      case U:
-        v.preventDefault(), E();
+      case L:
+        v.preventDefault(), V();
         break;
       case "Home":
-        v.preventDefault(), (D = e.current) == null || D.scrollTo({
-          [r ? "left" : "top"]: 0,
+        v.preventDefault(), (k = r.current) == null || k.scrollTo({
+          [t ? "left" : "top"]: 0,
           behavior: "smooth"
         });
         break;
       case "End":
-        v.preventDefault(), (H = e.current) == null || H.scrollTo({
-          [r ? "left" : "top"]: r ? e.current.scrollWidth : e.current.scrollHeight,
+        v.preventDefault(), (R = r.current) == null || R.scrollTo({
+          [t ? "left" : "top"]: t ? r.current.scrollWidth : r.current.scrollHeight,
           behavior: "smooth"
         });
         break;
     }
   };
-  return /* @__PURE__ */ l.jsxDEV(
+  return /* @__PURE__ */ E(
     "div",
     {
-      ref: V,
+      ref: y,
       "data-slot": "scroll-overflow",
-      [i]: "scroll-overflow",
-      "data-orientation": s,
-      "data-has-overflow": t || void 0,
-      "data-can-scroll-start": a || void 0,
-      "data-can-scroll-end": c || void 0,
-      className: d(
+      [s]: "scroll-overflow",
+      "data-orientation": a,
+      "data-has-overflow": e || void 0,
+      "data-can-scroll-start": n || void 0,
+      "data-can-scroll-end": i || void 0,
+      className: h(
         o.container,
-        r ? o.containerHorizontal : o.containerVertical,
-        x
+        t ? o.containerHorizontal : o.containerVertical,
+        m
       ),
       children: [
-        N && a && /* @__PURE__ */ l.jsxDEV(
+        g && n && /* @__PURE__ */ l(
           "div",
           {
             "data-slot": "scroll-overflow-fade-start",
-            [i]: "scroll-overflow-fade-start",
+            [s]: "scroll-overflow-fade-start",
             "aria-hidden": "true",
-            className: d(
+            className: h(
               o.fade,
-              r ? o.fadeHorizontalStart : o.fadeVerticalStart,
-              b && (r ? o.shadowHorizontalStart : o.shadowVerticalStart)
+              t ? o.fadeHorizontalStart : o.fadeVerticalStart,
+              x && (t ? o.shadowHorizontalStart : o.shadowVerticalStart)
             ),
-            style: r ? {
-              width: w,
-              background: `linear-gradient(to right, ${h}, transparent)`
+            style: t ? {
+              width: p,
+              background: `linear-gradient(to right, ${b}, transparent)`
             } : {
-              height: w,
-              background: `linear-gradient(to bottom, ${h}, transparent)`
+              height: p,
+              background: `linear-gradient(to bottom, ${b}, transparent)`
             }
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-            lineNumber: 444,
-            columnNumber: 9
-          },
-          this
+          }
         ),
-        m && a && /* @__PURE__ */ l.jsxDEV(
+        f && n && /* @__PURE__ */ l(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-start",
-            [i]: "scroll-overflow-arrow-start",
+            [s]: "scroll-overflow-arrow-start",
             type: "button",
             tabIndex: -1,
-            "aria-label": r ? "Scroll left" : "Scroll up",
-            onClick: k,
-            className: d(
+            "aria-label": t ? "Scroll left" : "Scroll up",
+            onClick: z,
+            className: h(
               o.arrowButton,
-              r ? o.arrowHorizontalStart : o.arrowVerticalStart
+              t ? o.arrowHorizontalStart : o.arrowVerticalStart
             ),
-            children: /* @__PURE__ */ l.jsxDEV(
+            children: /* @__PURE__ */ l(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
-                [i]: "scroll-overflow-arrow-icon",
+                [s]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: r ? /* @__PURE__ */ l.jsxDEV(Z, { className: o.arrowIcon }, void 0, !1, {
-                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                  lineNumber: 494,
-                  columnNumber: 15
-                }, this) : /* @__PURE__ */ l.jsxDEV(P, { className: o.arrowIcon }, void 0, !1, {
-                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                  lineNumber: 496,
-                  columnNumber: 15
-                }, this)
-              },
-              void 0,
-              !1,
-              {
-                fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                lineNumber: 488,
-                columnNumber: 11
-              },
-              this
+                children: t ? /* @__PURE__ */ l(U, { className: o.arrowIcon }) : /* @__PURE__ */ l(Q, { className: o.arrowIcon })
+              }
             )
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-            lineNumber: 474,
-            columnNumber: 9
-          },
-          this
+          }
         ),
-        /* @__PURE__ */ l.jsxDEV(
-          A,
+        /* @__PURE__ */ E(
+          N,
           {
             "data-slot": "scroll-overflow-root",
             type: "scroll",
-            [i]: "scroll-overflow-root",
-            className: d(
+            [s]: "scroll-overflow-root",
+            className: h(
               o.scrollAreaRoot,
-              r ? o.scrollAreaRootHorizontal : o.scrollAreaRootVertical,
-              g && (r ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
+              t ? o.scrollAreaRootHorizontal : o.scrollAreaRootVertical,
+              C && (t ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
             ),
-            ...p,
+            ...u,
             children: [
-              /* @__PURE__ */ l.jsxDEV(
-                B,
+              /* @__PURE__ */ l(
+                T,
                 {
-                  ref: e,
+                  ref: r,
                   "data-slot": "scroll-overflow-viewport",
-                  [i]: "scroll-overflow-viewport",
-                  tabIndex: t ? 0 : void 0,
-                  onKeyDown: j,
-                  className: d(
+                  [s]: "scroll-overflow-viewport",
+                  tabIndex: e ? 0 : void 0,
+                  onKeyDown: I,
+                  className: h(
                     o.viewport,
-                    r && o.viewportHorizontal,
-                    g && o.viewportFlex,
-                    !r && o.viewportVertical
+                    t && o.viewportHorizontal,
+                    C && o.viewportFlex,
+                    !t && o.viewportVertical
                   ),
-                  children: S
-                },
-                void 0,
-                !1,
-                {
-                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                  lineNumber: 519,
-                  columnNumber: 9
-                },
-                this
+                  children: H
+                }
               ),
-              /* @__PURE__ */ l.jsxDEV(
-                I,
+              /* @__PURE__ */ l(
+                M,
                 {
                   forceMount: !0,
-                  orientation: s,
+                  orientation: a,
                   "data-slot": "scroll-overflow-scrollbar",
-                  [i]: "scroll-overflow-scrollbar",
-                  className: d(
-                    g ? o.scrollbar : o.scrollbarHidden,
-                    r ? o.scrollbarHorizontal : o.scrollbarVertical
+                  [s]: "scroll-overflow-scrollbar",
+                  className: h(
+                    C ? o.scrollbar : o.scrollbarHidden,
+                    t ? o.scrollbarHorizontal : o.scrollbarVertical
                   ),
-                  children: /* @__PURE__ */ l.jsxDEV(
-                    L,
+                  children: /* @__PURE__ */ l(
+                    O,
                     {
                       "data-slot": "scroll-overflow-thumb",
-                      [i]: "scroll-overflow-thumb",
+                      [s]: "scroll-overflow-thumb",
                       className: o.thumb
-                    },
-                    void 0,
-                    !1,
-                    {
-                      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                      lineNumber: 545,
-                      columnNumber: 11
-                    },
-                    this
+                    }
                   )
-                },
-                void 0,
-                !1,
-                {
-                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                  lineNumber: 535,
-                  columnNumber: 9
-                },
-                this
+                }
               )
             ]
-          },
-          void 0,
-          !0,
-          {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-            lineNumber: 503,
-            columnNumber: 7
-          },
-          this
+          }
         ),
-        N && c && /* @__PURE__ */ l.jsxDEV(
+        g && i && /* @__PURE__ */ l(
           "div",
           {
             "data-slot": "scroll-overflow-fade-end",
-            [i]: "scroll-overflow-fade-end",
+            [s]: "scroll-overflow-fade-end",
             "aria-hidden": "true",
-            className: d(
+            className: h(
               o.fade,
-              r ? o.fadeHorizontalEnd : o.fadeVerticalEnd,
-              b && (r ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
+              t ? o.fadeHorizontalEnd : o.fadeVerticalEnd,
+              x && (t ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
             ),
-            style: r ? {
-              width: w,
-              background: `linear-gradient(to left, ${h}, transparent)`
+            style: t ? {
+              width: p,
+              background: `linear-gradient(to left, ${b}, transparent)`
             } : {
-              height: w,
-              background: `linear-gradient(to top, ${h}, transparent)`
+              height: p,
+              background: `linear-gradient(to top, ${b}, transparent)`
             }
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-            lineNumber: 555,
-            columnNumber: 9
-          },
-          this
+          }
         ),
-        m && c && /* @__PURE__ */ l.jsxDEV(
+        f && i && /* @__PURE__ */ l(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-end",
-            [i]: "scroll-overflow-arrow-end",
+            [s]: "scroll-overflow-arrow-end",
             type: "button",
             tabIndex: -1,
-            "aria-label": r ? "Scroll right" : "Scroll down",
-            onClick: E,
-            className: d(
+            "aria-label": t ? "Scroll right" : "Scroll down",
+            onClick: V,
+            className: h(
               o.arrowButton,
-              r ? o.arrowHorizontalEnd : o.arrowVerticalEnd
+              t ? o.arrowHorizontalEnd : o.arrowVerticalEnd
             ),
-            children: /* @__PURE__ */ l.jsxDEV(
+            children: /* @__PURE__ */ l(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
-                [i]: "scroll-overflow-arrow-icon",
+                [s]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: r ? /* @__PURE__ */ l.jsxDEV($, { className: o.arrowIcon }, void 0, !1, {
-                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                  lineNumber: 601,
-                  columnNumber: 15
-                }, this) : /* @__PURE__ */ l.jsxDEV(Q, { className: o.arrowIcon }, void 0, !1, {
-                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                  lineNumber: 603,
-                  columnNumber: 15
-                }, this)
-              },
-              void 0,
-              !1,
-              {
-                fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-                lineNumber: 595,
-                columnNumber: 11
-              },
-              this
+                children: t ? /* @__PURE__ */ l(P, { className: o.arrowIcon }) : /* @__PURE__ */ l(_, { className: o.arrowIcon })
+              }
             )
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-            lineNumber: 583,
-            columnNumber: 9
-          },
-          this
+          }
         )
       ]
-    },
-    void 0,
-    !0,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/scroll-overflow/scroll-overflow.tsx",
-      lineNumber: 428,
-      columnNumber: 5
-    },
-    this
+    }
   );
 });
 export {
-  lo as ScrollOverflow,
-  K as useScrollOverflow
+  eo as ScrollOverflow,
+  $ as useScrollOverflow
 };
 //# sourceMappingURL=scroll-overflow.js.map