import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Toggle } from "./toggle";
export default {
    title: "DesignSystem/Toggle",
    component: Toggle,
};
const Wrapper = styled.div `
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 50px;
  padding: 21px 48px 28px 26px;
  border: 1px dashed #7b61ff;
  border-radius: 5px;
  width: 227px;
  .flex {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.02em;
    color: #233445;
    font-family: "Geometria", "Verdana", sans-serif;
    font-size: 16px;
    font-weight: 500;
  }
`;
const Template = (args) => {
    const [active, setActive] = React.useState(false);
    return (_jsx(_Fragment, { children: _jsxs(Wrapper, { children: [_jsx(Toggle, { active: true }), _jsx(Toggle, { active: true, sm: true }), _jsx(Toggle, {}), _jsx(Toggle, { sm: true }), _jsxs("div", { className: "flex", children: [_jsx(Toggle, { onClick: () => setActive((active) => !active), active: active }), "Interactive"] })] }) }));
};
export const Basic = Template.bind({});
Basic.args = {};
//# sourceMappingURL=toggle.stories.js.map