import { jsx } from "react/jsx-runtime";
import { useRef } from "react";
import { useTranslation } from "../../../index.mjs";
import { useJoystick } from "../../../built-in/scroll-assistant/useJoystick.mjs";
const ScrollArea = (props)=>{
    const ref = useRef(null);
    const { t } = useTranslation();
    useJoystick(ref);
    return /*#__PURE__*/ jsx("div", {
        ref: ref,
        style: {
            display: 'grid',
            placeItems: 'center',
            minWidth: '150px',
            height: '30px',
            padding: '2px 10px',
            border: '2px dashed rgba(0, 0, 0, 0.2)',
            color: 'rgba(0, 0, 0, 0.2)',
            cursor: 'pointer',
            userSelect: 'none'
        },
        ...props,
        children: t('Horizontal scrolling area')
    });
};
const scroll_area_ScrollArea = ScrollArea;
export { ScrollArea, scroll_area_ScrollArea as default };
