import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { color } from "../../constants";
import Text from "./index";
export default {
    title: "Base/Fonts",
    component: Text,
};
const Wrapper = styled.div `
  height: 100vh;
  width: 100%;
  background: #e5e5e5;
  display: flex;
`;
const TextWrapper = styled.div `
  font-family: Medium;
  font-size: 8px;
  color: ${color.gray};
  * {
    margin: 15px;
  }
`;
const Template = (args) => (_jsx(Text, { ...args, children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla sequi quaerat ipsam nemo deserunt! Sunt dolorem ipsum dolore facilis sequi ullam quisquam tempore assumenda deserunt aliquam adipisci tempora, debitis hic?" }));
export const Basic = Template.bind({});
Basic.args = {
    as: "p",
    fontFamily: "Bold",
    fontSize: 20,
    fontWeight: "400",
    lineHeight: 22,
    color: "black",
    gray: false,
};
export const Presets = () => (_jsxs(Wrapper, { style: { flexDirection: "column" }, children: [_jsxs(TextWrapper, { children: [_jsx("div", { children: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0438" }), _jsx(Text.H1, { children: "H1 - 64/70 Heavy" }), _jsx(Text.H2, { children: "H2 - 24/30 Heavy" }), _jsx(Text.H3, { children: "H3 - 16/20 Bold" })] }), _jsxs(TextWrapper, { children: [_jsx("div", { children: "\u041F\u043E\u0434\u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0438 / \u0442\u0435\u043A\u0441\u0442" }), _jsx(Text.T1, { children: "T1 - 24/30 Med" }), _jsx(Text.T2, { children: "T2 - 20/26 Bold" }), _jsx(Text.T3, { children: "T3 - 18/24 Med" }), _jsx(Text.T4, { children: "T4 - 16/20 Med" })] }), _jsxs(TextWrapper, { children: [_jsx("div", { children: "\u041F\u043E\u0434\u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0438 / \u0442\u0435\u043A\u0441\u0442" }), _jsx(Text.F1, { children: "F1 - 14/20" }), _jsx(Text.F2, { children: "F2 - 12/18" }), _jsx(Text.F3, { children: "F3 - 10/14" }), _jsx(Text.F4, { children: "F4 - 8/12" })] })] }));
//# sourceMappingURL=index.stories.js.map