import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { StepMark, StepColumn, StepLined, StepColumnLine } from "./steper";
export default {
    title: "DesignSystem/Stepers",
    component: StepMark,
};
const Heading = styled.div `
  font-family: "Geometria", "Verdana", sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 30px;
  color: #233445;
  margin-bottom: 30px;
`;
const Wrapper = styled.div `
  display: grid;
  grid-template-columns: 283px 1fr;
  gap: 95px;
  .block + .block {
    margin-top: 50px;
  }
  .block {
    border: 1px dashed #7b61ff;
    border-radius: 5px;
    padding: 20px;
    width: max-content;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 23px;
  }
  .flex {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Geometria", "Verdana", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    &.top {
      align-items: flex-start;
    }
  }
  .gridsteps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 85px;
  }
  .sidegrid {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 90px;
  }
`;
const Template = (args) => {
    const [active, setActive] = React.useState(false);
    return (_jsxs(_Fragment, { children: [_jsx(Heading, { className: "heading", children: "Steper" }), _jsxs(Wrapper, { children: [_jsxs("div", { children: [_jsxs("div", { className: "block row", children: [_jsx(StepMark, { active: true }), _jsx(StepMark, {}), _jsx(StepMark, { checked: true }), _jsx(StepMark, { active: true, children: _jsx("span", { className: "innertext", children: "1" }) }), _jsxs("div", { className: "flex", children: [_jsx(StepMark, { onClick: () => setActive((active) => !active), active: active }), "Interactive"] })] }), _jsx("div", { className: "block", children: _jsxs("div", { className: "gridsteps", children: [_jsxs(StepLined, { active: true, children: [_jsx(StepMark, { active: true }), "Step 1"] }), _jsxs(StepColumn, { children: [_jsx(StepMark, { active: true }), "Step 1"] }), _jsxs(StepLined, { children: [_jsx(StepMark, { checked: true }), "Step 2"] }), _jsxs(StepColumn, { children: [_jsx(StepMark, { checked: true }), "Step 2"] }), _jsxs(StepLined, { disable: true, children: [_jsx(StepMark, {}), "Step 3"] }), _jsxs(StepColumn, { disable: true, children: [_jsx(StepMark, {}), "Step 3"] })] }) })] }), _jsx("div", { children: _jsx("div", { className: "block", children: _jsxs("div", { className: "sidegrid", children: [_jsxs("div", { children: [_jsxs(StepLined, { children: [_jsx(StepMark, { checked: true }), "Step 1"] }), _jsxs(StepLined, { active: true, children: [_jsx(StepMark, { active: true }), "Step 1"] }), _jsxs(StepLined, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepLined, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepLined, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepLined, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepLined, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] })] }), _jsxs("div", { className: "flex top", children: [_jsxs(StepColumnLine, { children: [_jsx(StepMark, { checked: true }), "Step 1"] }), _jsxs(StepColumnLine, { active: true, children: [_jsx(StepMark, { active: true }), "Step 1"] }), _jsxs(StepColumnLine, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepColumnLine, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepColumnLine, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepColumnLine, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] }), _jsxs(StepColumnLine, { disable: true, children: [_jsx(StepMark, {}), "Step 1"] })] })] }) }) })] })] }));
};
export const Basic = Template.bind({});
Basic.args = {};
//# sourceMappingURL=steper.stories.js.map