import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { Counter, Badge } from "./counters";
export default {
    title: "DesignSystem/Counters",
    component: Counter,
};
const Wrapper = styled.div `
  display: grid;
  grid-template-columns: 75px 92px;
  gap: 100px;
  padding: 20px;
`;
const Block = styled.div `
  border: 1px dashed #7b61ff;
  padding: 20px 20px 26px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: fit-content;
`;
const Template = (args) => (_jsx(_Fragment, { children: _jsxs(Wrapper, { children: [_jsxs(Block, { children: [_jsx(Counter, { children: "32" }), _jsx(Counter, { sm: true, children: "32" })] }), _jsxs(Block, { children: [_jsx(Badge, { children: "Badge" }), _jsx(Badge, { sm: true, children: "Badge" })] })] }) }));
export const Basic = Template.bind({});
Basic.args = {};
//# sourceMappingURL=counters.stories.js.map