import { jsxs as f, jsx as o } from "react/jsx-runtime";
import { useFocusRing as h } from "@react-aria/focus";
import { useRef as g } from "react";
/* empty css                  */
import { useScrollWrapper as x } from "./hooks/useScrollWrapper.es.js";
import { ScrollWrapperDirection as e, scrollWrapperDirections as S } from "./types.es.js";
import { FOCUS_STYLE as E } from "../../utilities/focusStyle.es.js";
import { merge as W } from "../../utilities/merge.es.js";
const s = {
  bottom: "linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)",
  top: "linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)"
}, v = ({
  tabindex: n = 0,
  direction: r = e.Vertical,
  children: d,
  scrollShadows: l = !0,
  "data-test-id": w = "scroll-wrapper"
}) => {
  const t = g(null), [{ showTopShadow: p, showBottomShadow: c }, m] = x(t), { isFocusVisible: u, focusProps: b } = h(), a = r === e.Vertical || r === e.Both, i = t.current ? t.current.clientWidth + 8 : "100%";
  return /* @__PURE__ */ f("div", { "data-test-id": w, className: "tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0", children: [
    a && p && l && /* @__PURE__ */ o(
      "div",
      {
        "data-test-id": "fondue-scrollwrapper-top-shadow",
        className: "tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line",
        style: {
          background: s.top,
          width: i
        }
      }
    ),
    /* @__PURE__ */ o(
      "div",
      {
        "data-test-id": "fondue-scrollwrapper-content",
        ref: t,
        tabIndex: n,
        role: "region",
        "aria-label": "Scrollable dialogue content",
        className: W([
          S[r],
          "tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2",
          u && E
        ]),
        ...m,
        ...b,
        children: d
      }
    ),
    a && c && l && /* @__PURE__ */ o(
      "div",
      {
        "data-test-id": "fondue-scrollwrapper-bottom-shadow",
        className: "tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line",
        style: {
          background: s.bottom,
          width: i
        }
      }
    )
  ] });
};
v.displayName = "FondueScrollWrapper";
export {
  v as ScrollWrapper
};
//# sourceMappingURL=ScrollWrapper.es.js.map
