import React, { forwardRef } from "react";
import { PadButton as Button, PadButtonDotSelector } from "./Button.js";
import { PadMiddle as Middle } from "./Middle.js";
import { StyledLine, StyledPad } from "./Pad.styled.js";
const Pad = forwardRef((props, ref) => {
    return (React.createElement(StyledPad, { className: props.className, ref: ref },
        React.createElement(StyledLine, null,
            React.createElement(Button, { onClick: props.onUpPress })),
        React.createElement(StyledLine, null,
            React.createElement(Button, { onClick: props.onLeftPress }),
            React.createElement(Middle, { onClick: props.onMiddlePress, label: props.middleLabel }),
            React.createElement(Button, { onClick: props.onRightPress })),
        React.createElement(StyledLine, null,
            React.createElement(Button, { onClick: props.onDownPress }))));
});
Pad.displayName = "DirectionPad";
Pad.toString = () => StyledPad.toString();
const DirectionPadLineSelector = StyledLine.toString();
const DirectionPadButtonSelector = Button.toString();
const DirectionPadMiddleSelector = Middle.toString();
export { Pad as DirectionPad, DirectionPadLineSelector, DirectionPadButtonSelector, DirectionPadMiddleSelector, PadButtonDotSelector as DirectionPadButtonDotSelector, };
//# sourceMappingURL=Pad.js.map