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

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

@@ -1,101 +1,149 @@
-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() {
+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() {
   return typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
 }
-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);
+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);
       } else {
-        const e = Math.round(r.scrollTop), n = r.scrollHeight, i = r.clientHeight;
-        p(n > i), x(e > 0), S(e + i < n - 1);
+        const t = Math.round(e.scrollTop), a = e.scrollHeight, c = e.clientHeight;
+        w(a > c), b(t > 0), C(t + c < a - 1);
       }
-  }, [a]);
-  d.useEffect(() => {
-    const r = f.current;
-    if (!r) return;
-    u();
-    let e = null;
+  }, [s]);
+  f.useEffect(() => {
+    const e = m.current;
+    if (!e) return;
+    p();
+    let t = null;
     if (typeof ResizeObserver < "u") {
-      e = new ResizeObserver(() => {
-        u();
-      }), e.observe(r);
-      for (const n of r.children)
-        e.observe(n);
+      t = new ResizeObserver(() => {
+        p();
+      }), t.observe(e);
+      for (const a of e.children)
+        t.observe(a);
     }
-    return r.addEventListener("scroll", u, { passive: !0 }), () => {
-      e == null || e.disconnect(), r.removeEventListener("scroll", u);
+    return e.addEventListener("scroll", p, { passive: !0 }), () => {
+      t == null || t.disconnect(), e.removeEventListener("scroll", p);
     };
-  }, [u]);
-  const y = d.useCallback(() => {
-    var r;
-    (r = f.current) == null || r.scrollBy({
-      [a ? "left" : "top"]: -m,
-      behavior: B()
+  }, [p]);
+  const V = 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]), o = f.useCallback(() => {
+    var e;
+    (e = m.current) == null || e.scrollBy({
+      [s ? "left" : "top"]: x,
+      behavior: z()
     });
-  }, [m, a]);
+  }, [x, s]);
   return {
-    scrollRef: f,
-    hasOverflow: g,
-    canScrollStart: b,
-    canScrollEnd: C,
-    scrollToStart: y,
+    scrollRef: m,
+    hasOverflow: N,
+    canScrollStart: h,
+    canScrollEnd: g,
+    scrollToStart: V,
     scrollToEnd: o
   };
 }
-const U = (c) => /* @__PURE__ */ l(
+const Z = (n) => /* @__PURE__ */ l.jsxDEV(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...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(
+    ...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(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...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(
+    ...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(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...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(
+    ...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(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...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({
+    ...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({
   container: {
     position: "relative",
     display: "flex"
@@ -151,9 +199,9 @@ const U = (c) => /* @__PURE__ */ l(
     justifyContent: "center",
     cursor: "pointer",
     backgroundColor: "transparent",
-    ...w.borderStyle("none"),
-    ...w.borderWidth(0),
-    ...w.padding(0)
+    ...u.borderStyle("none"),
+    ...u.borderWidth(0),
+    ...u.padding(0)
   },
   arrowHorizontalStart: {
     left: 0,
@@ -183,12 +231,12 @@ const U = (c) => /* @__PURE__ */ l(
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: A,
-    ...w.borderRadius(j),
+    backgroundColor: y,
+    ...u.borderRadius(O),
     backdropFilter: "blur(4px)",
-    color: Z,
+    color: G,
     ":hover": {
-      backgroundColor: K
+      backgroundColor: W
     }
   },
   arrowIcon: {
@@ -196,7 +244,7 @@ const U = (c) => /* @__PURE__ */ l(
     height: "1rem"
   },
   scrollAreaRoot: {
-    ...w.overflow("hidden"),
+    ...u.overflow("hidden"),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%"
@@ -218,12 +266,12 @@ const U = (c) => /* @__PURE__ */ l(
     flexDirection: "row"
   },
   viewport: {
-    ...w.borderRadius(W),
+    ...u.borderRadius(M),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
       outlineStyle: "solid",
-      outlineColor: G
+      outlineColor: F
     }
   },
   viewportHorizontal: {
@@ -248,7 +296,7 @@ const U = (c) => /* @__PURE__ */ l(
     display: "flex",
     touchAction: "none",
     userSelect: "none",
-    ...w.padding("1px"),
+    ...u.padding("1px"),
     transitionProperty: "color, background-color, border-color",
     transitionDuration: "150ms"
   },
@@ -268,218 +316,322 @@ const U = (c) => /* @__PURE__ */ l(
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
-    ...w.borderRadius("9999px"),
-    backgroundColor: A
+    ...u.borderRadius("9999px"),
+    backgroundColor: y
   }
-}), 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;
+}), 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;
     if (v.target !== v.currentTarget) return;
-    const D = t ? "ArrowLeft" : "ArrowUp", L = t ? "ArrowRight" : "ArrowDown";
+    const R = r ? "ArrowLeft" : "ArrowUp", U = r ? "ArrowRight" : "ArrowDown";
     switch (v.key) {
-      case D:
-        v.preventDefault(), z();
+      case R:
+        v.preventDefault(), k();
         break;
-      case L:
-        v.preventDefault(), V();
+      case U:
+        v.preventDefault(), E();
         break;
       case "Home":
-        v.preventDefault(), (k = r.current) == null || k.scrollTo({
-          [t ? "left" : "top"]: 0,
+        v.preventDefault(), (D = e.current) == null || D.scrollTo({
+          [r ? "left" : "top"]: 0,
           behavior: "smooth"
         });
         break;
       case "End":
-        v.preventDefault(), (R = r.current) == null || R.scrollTo({
-          [t ? "left" : "top"]: t ? r.current.scrollWidth : r.current.scrollHeight,
+        v.preventDefault(), (H = e.current) == null || H.scrollTo({
+          [r ? "left" : "top"]: r ? e.current.scrollWidth : e.current.scrollHeight,
           behavior: "smooth"
         });
         break;
     }
   };
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ l.jsxDEV(
     "div",
     {
-      ref: y,
+      ref: V,
       "data-slot": "scroll-overflow",
-      [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(
+      [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(
         o.container,
-        t ? o.containerHorizontal : o.containerVertical,
-        m
+        r ? o.containerHorizontal : o.containerVertical,
+        x
       ),
       children: [
-        g && n && /* @__PURE__ */ l(
+        N && a && /* @__PURE__ */ l.jsxDEV(
           "div",
           {
             "data-slot": "scroll-overflow-fade-start",
-            [s]: "scroll-overflow-fade-start",
+            [i]: "scroll-overflow-fade-start",
             "aria-hidden": "true",
-            className: h(
+            className: d(
               o.fade,
-              t ? o.fadeHorizontalStart : o.fadeVerticalStart,
-              x && (t ? o.shadowHorizontalStart : o.shadowVerticalStart)
+              r ? o.fadeHorizontalStart : o.fadeVerticalStart,
+              b && (r ? o.shadowHorizontalStart : o.shadowVerticalStart)
             ),
-            style: t ? {
-              width: p,
-              background: `linear-gradient(to right, ${b}, transparent)`
+            style: r ? {
+              width: w,
+              background: `linear-gradient(to right, ${h}, transparent)`
             } : {
-              height: p,
-              background: `linear-gradient(to bottom, ${b}, transparent)`
+              height: w,
+              background: `linear-gradient(to bottom, ${h}, 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
         ),
-        f && n && /* @__PURE__ */ l(
+        m && a && /* @__PURE__ */ l.jsxDEV(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-start",
-            [s]: "scroll-overflow-arrow-start",
+            [i]: "scroll-overflow-arrow-start",
             type: "button",
             tabIndex: -1,
-            "aria-label": t ? "Scroll left" : "Scroll up",
-            onClick: z,
-            className: h(
+            "aria-label": r ? "Scroll left" : "Scroll up",
+            onClick: k,
+            className: d(
               o.arrowButton,
-              t ? o.arrowHorizontalStart : o.arrowVerticalStart
+              r ? o.arrowHorizontalStart : o.arrowVerticalStart
             ),
-            children: /* @__PURE__ */ l(
+            children: /* @__PURE__ */ l.jsxDEV(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
-                [s]: "scroll-overflow-arrow-icon",
+                [i]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: t ? /* @__PURE__ */ l(U, { className: o.arrowIcon }) : /* @__PURE__ */ l(Q, { className: o.arrowIcon })
-              }
+                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
             )
-          }
+          },
+          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__ */ E(
-          N,
+        /* @__PURE__ */ l.jsxDEV(
+          A,
           {
             "data-slot": "scroll-overflow-root",
             type: "scroll",
-            [s]: "scroll-overflow-root",
-            className: h(
+            [i]: "scroll-overflow-root",
+            className: d(
               o.scrollAreaRoot,
-              t ? o.scrollAreaRootHorizontal : o.scrollAreaRootVertical,
-              C && (t ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
+              r ? o.scrollAreaRootHorizontal : o.scrollAreaRootVertical,
+              g && (r ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
             ),
-            ...u,
+            ...p,
             children: [
-              /* @__PURE__ */ l(
-                T,
+              /* @__PURE__ */ l.jsxDEV(
+                B,
                 {
-                  ref: r,
+                  ref: e,
                   "data-slot": "scroll-overflow-viewport",
-                  [s]: "scroll-overflow-viewport",
-                  tabIndex: e ? 0 : void 0,
-                  onKeyDown: I,
-                  className: h(
+                  [i]: "scroll-overflow-viewport",
+                  tabIndex: t ? 0 : void 0,
+                  onKeyDown: j,
+                  className: d(
                     o.viewport,
-                    t && o.viewportHorizontal,
-                    C && o.viewportFlex,
-                    !t && o.viewportVertical
+                    r && o.viewportHorizontal,
+                    g && o.viewportFlex,
+                    !r && o.viewportVertical
                   ),
-                  children: H
-                }
+                  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
               ),
-              /* @__PURE__ */ l(
-                M,
+              /* @__PURE__ */ l.jsxDEV(
+                I,
                 {
                   forceMount: !0,
-                  orientation: a,
+                  orientation: s,
                   "data-slot": "scroll-overflow-scrollbar",
-                  [s]: "scroll-overflow-scrollbar",
-                  className: h(
-                    C ? o.scrollbar : o.scrollbarHidden,
-                    t ? o.scrollbarHorizontal : o.scrollbarVertical
+                  [i]: "scroll-overflow-scrollbar",
+                  className: d(
+                    g ? o.scrollbar : o.scrollbarHidden,
+                    r ? o.scrollbarHorizontal : o.scrollbarVertical
                   ),
-                  children: /* @__PURE__ */ l(
-                    O,
+                  children: /* @__PURE__ */ l.jsxDEV(
+                    L,
                     {
                       "data-slot": "scroll-overflow-thumb",
-                      [s]: "scroll-overflow-thumb",
+                      [i]: "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
         ),
-        g && i && /* @__PURE__ */ l(
+        N && c && /* @__PURE__ */ l.jsxDEV(
           "div",
           {
             "data-slot": "scroll-overflow-fade-end",
-            [s]: "scroll-overflow-fade-end",
+            [i]: "scroll-overflow-fade-end",
             "aria-hidden": "true",
-            className: h(
+            className: d(
               o.fade,
-              t ? o.fadeHorizontalEnd : o.fadeVerticalEnd,
-              x && (t ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
+              r ? o.fadeHorizontalEnd : o.fadeVerticalEnd,
+              b && (r ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
             ),
-            style: t ? {
-              width: p,
-              background: `linear-gradient(to left, ${b}, transparent)`
+            style: r ? {
+              width: w,
+              background: `linear-gradient(to left, ${h}, transparent)`
             } : {
-              height: p,
-              background: `linear-gradient(to top, ${b}, transparent)`
+              height: w,
+              background: `linear-gradient(to top, ${h}, 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
         ),
-        f && i && /* @__PURE__ */ l(
+        m && c && /* @__PURE__ */ l.jsxDEV(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-end",
-            [s]: "scroll-overflow-arrow-end",
+            [i]: "scroll-overflow-arrow-end",
             type: "button",
             tabIndex: -1,
-            "aria-label": t ? "Scroll right" : "Scroll down",
-            onClick: V,
-            className: h(
+            "aria-label": r ? "Scroll right" : "Scroll down",
+            onClick: E,
+            className: d(
               o.arrowButton,
-              t ? o.arrowHorizontalEnd : o.arrowVerticalEnd
+              r ? o.arrowHorizontalEnd : o.arrowVerticalEnd
             ),
-            children: /* @__PURE__ */ l(
+            children: /* @__PURE__ */ l.jsxDEV(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
-                [s]: "scroll-overflow-arrow-icon",
+                [i]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: t ? /* @__PURE__ */ l(P, { className: o.arrowIcon }) : /* @__PURE__ */ l(_, { className: o.arrowIcon })
-              }
+                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
             )
-          }
+          },
+          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 {
-  eo as ScrollOverflow,
-  $ as useScrollOverflow
+  lo as ScrollOverflow,
+  K as useScrollOverflow
 };
 //# sourceMappingURL=scroll-overflow.js.map