import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './Typography.scss';
const Typography = () => {
    return (_jsxs("div", { className: "typography-container", children: [_jsxs("div", { className: "typography-header", children: [_jsx("div", { children: "_Typography" }), _jsx("span", { children: "Our design system leverages a purposeful set of typography styles. We'he stress-tested this typographic scale across dozens of projects to make sure it's robust enough to use across (almost) any project, while remaining as accessible as possible for everyone." })] }), _jsx("div", { className: "font-display", children: _jsxs("div", { className: "font-row", children: [_jsxs("div", { className: "font-left", children: [_jsx("div", { className: "font-name", children: "Poppins" }), _jsx("div", { className: "font-sample", children: "Aa" }), _jsxs("div", { className: "font-characters", children: ["ABCDEFGHIJKLMNOPQRSTUVWXYZ", _jsx("br", {}), "abcdefghijklmnopqrstuvwxyz", _jsx("br", {}), "0123456789", _jsx("br", {}), "!@#$%^&*()"] })] }), _jsxs("div", { className: "font-right", children: [_jsxs("div", { className: "font-right-section bold", children: [_jsx("div", { className: "font-sample-large", children: "Aa" }), _jsxs("div", { className: "font-info", children: [_jsx("span", { children: "Bold" }), _jsx("div", { className: "font-size", children: "font size: 12px = 0.75rem" })] })] }), _jsxs("div", { className: "font-right-section semi-bold", children: [_jsx("div", { className: "font-sample-large", children: "Aa" }), _jsxs("div", { className: "font-info", children: [_jsx("span", { children: "SemiBold" }), _jsx("div", { className: "font-size", children: "font size: 12px = 0.75rem" })] })] }), _jsxs("div", { className: "font-right-section regular", children: [_jsx("div", { className: "font-sample-large", children: "Aa" }), _jsxs("div", { className: "font-info", children: [_jsx("span", { children: "Regular" }), _jsx("div", { className: "font-size", children: "font size: 12px = 0.75rem" })] })] })] })] }) })] }));
};
export default Typography;
//# sourceMappingURL=Typography.js.map