import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { ThemeProvider } from "styled-components";
import T from "./typography";
import equilibriumTheme from "../theme/equilibrium.theme";
import equilibriumV2Theme from "../theme/equilibrium-v2.theme";
import genshiroTheme from "../theme/genshiro.theme";
export default {
    title: "New/Typography",
};
const Wrapper = styled.div `
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .delimiter {
    margin-top: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #00244533;
  }
`;
export const Equilibrium = () => {
    return (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsxs(Wrapper, { children: [_jsx(T.H1, { className: "delimiter", children: "Headers" }), _jsx(T.H1, { children: "H1 or T.H1 24/28" }), _jsx(T.H2, { children: "H2 or T.H2 20/24" }), _jsx(T.H3, { children: "H3 or T.H3 16/20" }), _jsx(T.H4, { children: "H4 or T.H4 14/18" }), _jsx(T.H1, { className: "delimiter", children: "Text" }), _jsx(T, { children: "T (default) 14/18" }), _jsx(T.T12, { children: "T12 or T.T12 12/16" }), _jsx(T.T10, { children: "T10 or T.T10 10/14" }), _jsx(T.H1, { className: "delimiter", children: "Bold" }), _jsx(T.B14, { children: "B14 or T.B14 14/18" }), _jsx(T.B12, { children: "B12 or T.B12 12/16" }), _jsx(T.H1, { className: "delimiter", children: "Error" }), _jsx(T.E12, { children: "E12 or T.E12 12/16" }), _jsx(T.H1, { className: "delimiter", children: "Grey" }), _jsx(T.G10, { children: "G10 or T.G10 10/14" })] }) }));
};
export const EquilibriumV2 = () => {
    return (_jsx(ThemeProvider, { theme: equilibriumV2Theme, children: _jsxs(Wrapper, { children: [_jsx(T, { variant: "h1", className: "delimiter", children: "Headers" }), _jsx(T, { variant: "h1", children: "Particles fly with peace at the galactic planet!" }), _jsx(T, { variant: "h2", children: "Extums peregrinatione in lentia!" }), _jsx(T, { variant: "h3", children: "Not upstairs or heavens, experience the satori." }), _jsx(T, { variant: "h4", children: "Eheu, bassus competition!" }), _jsx(T, { variant: "p-xxl", className: "delimiter", children: "Paragraph" }), _jsx(T, { variant: "p-xxl", children: "Vae, neuter accentor!" }), _jsx(T, { variant: "p-xl", children: "Vae, neuter accentor!" }), _jsx(T, { variant: "p-lg", children: "Vae, neuter accentor!" }), _jsx(T, { variant: "p-md", children: "Vae, neuter accentor!" }), _jsx(T, { variant: "p-sm", children: "Vae, neuter accentor!" }), _jsx(T, { variant: "p-xs", children: "Vae, neuter accentor!" }), _jsx(T, { variant: "button-lg", className: "delimiter", children: "Button" }), _jsx(T, { variant: "button-lg", children: "Button" }), _jsx(T, { variant: "button-md", children: "Button" }), _jsx(T, { variant: "button-sm", children: "Button" }), _jsx(T, { variant: "link-lg", className: "delimiter", children: "Link" }), _jsx(T, { variant: "link-lg", children: "Humani generis velums, tanquam varius adelphis." }), _jsx(T, { variant: "link-md", children: "The shore sings riddle like an evil grog." }), _jsx(T, { variant: "link-sm", children: "Malaria, life, and hunger." }), _jsx(T, { variant: "p-xxl", className: "delimiter", bold: true, children: "Bold attr" }), _jsx(T, { variant: "p-xl", bold: true, children: "Taste me biscuit eater, ye addled parrot!" }), _jsx(T, { variant: "p-lg", className: "delimiter", error: true, children: "Error attr" }), _jsx(T, { variant: "p-md", error: true, children: "Taste me biscuit eater, ye addled parrot!" }), _jsx(T, { variant: "p-lg", className: "delimiter", gray: true, children: "Gray attr" }), _jsx(T, { variant: "p-md", gray: true, children: "Taste me biscuit eater, ye addled parrot!" })] }) }));
};
export const Genshiro = () => {
    return (_jsx(ThemeProvider, { theme: genshiroTheme, children: _jsxs(Wrapper, { children: [_jsx(T.H1, { className: "delimiter", children: "Headers" }), _jsx(T.H1, { children: "H1 or T.H1 24/28" }), _jsx(T.H2, { children: "H2 or T.H2 20/24" }), _jsx(T.H3, { children: "H3 or T.H3 16/20" }), _jsx(T.H4, { children: "H4 or T.H4 14/18" }), _jsx(T.H1, { className: "delimiter", children: "Text" }), _jsx(T, { children: "T (default) 14/18" }), _jsx(T.T12, { children: "T12 or T.T12 12/16" }), _jsx(T.T10, { children: "T10 or T.T10 10/14" }), _jsx(T.H1, { className: "delimiter", children: "Bold" }), _jsx(T.B14, { children: "B14 or T.B14 14/18" }), _jsx(T.B12, { children: "B12 or T.B12 12/16" }), _jsx(T.H1, { className: "delimiter", children: "Error" }), _jsx(T.E12, { children: "E12 or T.E12 12/16" }), _jsx(T.H1, { className: "delimiter", children: "Grey" }), _jsx(T.G10, { children: "G10 or T.G10 10/14" })] }) }));
};
//# sourceMappingURL=typography.stories.js.map