import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import "clsx";
import { Box } from "../../../core/Box/Box.mjs";
import { useScrollAreaContext } from "../ScrollArea.context.mjs";
import { useMergedRef } from "../../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-merged-ref/use-merged-ref.mjs";
const ScrollAreaViewport = forwardRef(
  ({ children, style, ...others }, ref) => {
    const ctx = useScrollAreaContext();
    const rootRef = useMergedRef(ref, ctx.onViewportChange);
    return /* @__PURE__ */ jsx(
      Box,
      {
        ...others,
        ref: rootRef,
        style: {
          overflowX: ctx.scrollbarXEnabled ? "scroll" : "hidden",
          overflowY: ctx.scrollbarYEnabled ? "scroll" : "hidden",
          ...style
        },
        children: /* @__PURE__ */ jsx("div", { style: { minWidth: "100%", display: "table" }, ref: ctx.onContentChange, children })
      }
    );
  }
);
ScrollAreaViewport.displayName = "@mantine/core/ScrollAreaViewport";
export {
  ScrollAreaViewport
};
