import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import Checkbox from "./checkbox.styled";
export default {
    title: "DesignSystem/Checkbox",
    component: Checkbox,
};
const Wrapper = styled.div `
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 20px 48px;
  padding: 20px;
  border: 1px dashed #7b61ff;
  border-radius: 5px;
  width: 310px;
`;
const Template = (args) => {
    const [active, setActive] = React.useState(false);
    return (_jsx(_Fragment, { children: _jsxs(Wrapper, { children: [_jsx(Checkbox, { active: true }), _jsx(Checkbox, { active: true, children: "Checkbox on" }), _jsx(Checkbox, {}), _jsx(Checkbox, { children: "Checkbox off" }), _jsx(Checkbox, { disable: true }), _jsx(Checkbox, { disable: true, children: "Checkbox always on" }), _jsx(Checkbox, { onClick: () => setActive((active) => !active), active: active, children: "Interactive" })] }) }));
};
export const Basic = Template.bind({});
Basic.args = {};
//# sourceMappingURL=checkbox.stories.js.map