import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Tooltip, { Marker } from "./index";
import { Box, Row } from "../../grid";
import Space from "../space";
import { ThemeProvider } from "styled-components";
import genshiroTheme from "../theme/genshiro.theme";
import equilibriumTheme from "../theme/equilibrium.theme";
export default {
    title: "New/Tooltip",
    component: Tooltip,
};
const Content = () => {
    return (_jsx(Box, { mt: "100px", p: "0 20px", children: _jsxs(Row, { children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: ["On click:", _jsx(Tooltip, { as: "span", openOn: "click", content: _jsx("div", { style: { whiteSpace: "nowrap" }, children: "top right" }), right: true, children: _jsx(Marker.Info, {}) })] }), _jsx(Space, { width: 40, widthMobile: 40 }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: ["On hover:", _jsx(Tooltip, { as: "span", openOn: "hover", content: _jsx("div", { children: "bottom left" }), bottom: true, children: _jsx(Marker.Question, {}) })] }), _jsx(Space, { width: 40, widthMobile: 40 }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: ["Custom:", _jsx(Tooltip, { as: "span", openOn: "hover", content: _jsx("div", { children: "bottom left" }), bottom: true, backgroundColor: "#ffffd6", borderColor: "violet", contentPadding: "10px 64px", children: _jsx(Marker.Question, {}) })] })] }) }));
};
export const Genshiro = () => {
    return (_jsx(ThemeProvider, { theme: genshiroTheme, children: _jsx(Content, {}) }));
};
export const Equilibrium = () => {
    return (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsx(Content, {}) }));
};
//# sourceMappingURL=tooltip.stories.js.map