@pfct/purple 1.3.4-rc.0

package/dist/core/TextStyles/index.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.body2 = exports.body1 = exports.title4 = exports.title3 = exports.title2 = exports.title1 = exports.headline6 = exports.headline5 = exports.headline4 = exports.headline3 = exports.headline2 = exports.headline1 = exports.typography = void 0;
+const react_1 = require("@emotion/react");
+const Colors_1 = require("../Colors");
+const DEFAULT_TEXT_COLOR = Colors_1.basicColors.gray900;
+const DEFAULT_HEADLINE_TEXT_FONT_WEIGHT = 600;
+const DEFAULT_TITLE_TEXT_FONT_WEIGHT = 500;
+const DEFAULT_BODY_TEXT_FONT_WEIGHT = 400;
+exports.typography = {
+    h1: (0, react_1.css) `
+		font-size: 41px;
+		line-height: 56px;
+		letter-spacing: -0.8px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h2: (0, react_1.css) `
+		font-size: 29px;
+		line-height: 38px;
+		letter-spacing: -0.4px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h3: (0, react_1.css) `
+		font-size: 23px;
+		line-height: 32px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h4: (0, react_1.css) `
+		font-size: 19px;
+		line-height: 26px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h5: (0, react_1.css) `
+		font-size: 17px;
+		line-height: 24px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h6: (0, react_1.css) `
+		font-size: 15px;
+		line-height: 22px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    title1: (0, react_1.css) `
+		font-size: 19px;
+		line-height: 26px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    title2: (0, react_1.css) `
+		font-size: 17px;
+		line-height: 24px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    title3: (0, react_1.css) `
+		font-size: 15px;
+		line-height: 22px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    title4: (0, react_1.css) `
+		font-size: 13px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    body1: (0, react_1.css) `
+		font-size: 15px;
+		line-height: 22px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+    body2: (0, react_1.css) `
+		font-size: 13px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+};
+const headline1 = (args) => (0, react_1.css) `
+	${exports.typography.h1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline1 = headline1;
+const headline2 = (args) => (0, react_1.css) `
+	${exports.typography.h2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline2 = headline2;
+const headline3 = (args) => (0, react_1.css) `
+	${exports.typography.h3};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline3 = headline3;
+const headline4 = (args) => (0, react_1.css) `
+	${exports.typography.h4};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline4 = headline4;
+const headline5 = (args) => (0, react_1.css) `
+	${exports.typography.h5};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline5 = headline5;
+const headline6 = (args) => (0, react_1.css) `
+	${exports.typography.h6};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline6 = headline6;
+const title1 = (args) => (0, react_1.css) `
+	${exports.typography.title1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title1 = title1;
+const title2 = (args) => (0, react_1.css) `
+	${exports.typography.title2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title2 = title2;
+const title3 = (args) => (0, react_1.css) `
+	${exports.typography.title3};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title3 = title3;
+const title4 = (args) => (0, react_1.css) `
+	${exports.typography.title4};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title4 = title4;
+const body1 = (args) => (0, react_1.css) `
+	${exports.typography.body1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.body1 = body1;
+const body2 = (args) => (0, react_1.css) `
+	${exports.typography.body2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.body2 = body2;

package/dist/core/Theme/index.d.ts

@@ -0,0 +1,13 @@
+declare enum ThemeMode {
+    DARK = "DARK",
+    LIGHT = "LIGHT"
+}
+interface ThemeConfig {
+    mode: ThemeMode;
+}
+declare const Theme: {
+    dark: ThemeConfig;
+    light: ThemeConfig;
+};
+export type { ThemeMode, ThemeConfig };
+export { Theme };

package/dist/core/Theme/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = void 0;
+var ThemeMode;
+(function (ThemeMode) {
+    ThemeMode["DARK"] = "DARK";
+    ThemeMode["LIGHT"] = "LIGHT";
+})(ThemeMode || (ThemeMode = {}));
+const dark = {
+    mode: ThemeMode.DARK,
+};
+const light = {
+    mode: ThemeMode.LIGHT,
+};
+const Theme = {
+    dark,
+    light,
+};
+exports.Theme = Theme;

package/dist/core/Typography/BaseTypography/index.d.ts

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from 'react';
+export type Typo = keyof typeof typographyList;
+export type TypoProps = PropsWithChildren<{
+    lg?: Typo;
+    sm?: Typo;
+    color?: string;
+    textAlign?: string;
+    fontWeight?: string;
+    className?: string;
+    element?: string;
+    'data-element-name'?: string;
+}>;
+export type OwnProps = {
+    md: Typo;
+};
+export type BaseTypographyProps = TypoProps & OwnProps;
+export declare const typographyList: {
+    Headline1: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline2: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline3: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline4: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline5: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline6: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title1: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title2: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title3: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title4: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Body1: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Body2: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+};
+/**
+ * @param lg - pc size typography
+ * @param md - OwnProps 로 분류되어 lg, sm이 공통일 경우 md하나로 사용 가능하다.
+ * @param sm - mobile size typography
+ */
+export declare const BaseTypography: (props: BaseTypographyProps) => React.JSX.Element;

package/dist/core/Typography/BaseTypography/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseTypography = exports.typographyList = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const utils_1 = require("../../../utils");
+const TextStyles_1 = require("../../TextStyles");
+exports.typographyList = {
+    Headline1: TextStyles_1.headline1,
+    Headline2: TextStyles_1.headline2,
+    Headline3: TextStyles_1.headline3,
+    Headline4: TextStyles_1.headline4,
+    Headline5: TextStyles_1.headline5,
+    Headline6: TextStyles_1.headline6,
+    Title1: TextStyles_1.title1,
+    Title2: TextStyles_1.title2,
+    Title3: TextStyles_1.title3,
+    Title4: TextStyles_1.title4,
+    Body1: TextStyles_1.body1,
+    Body2: TextStyles_1.body2,
+};
+const TextElement = styled_1.default.div `
+	text-align: ${(props) => props.textAlign};
+	white-space: pre-wrap;
+	${(props) => exports.typographyList[props.md](props)}
+
+	${(props) => props.sm &&
+    (0, utils_1.Smaller)((0, react_2.css) `
+			 {
+				${exports.typographyList[props.sm](props)}
+			}
+		`)}
+	${(props) => props.lg &&
+    (0, utils_1.Larger)((0, react_2.css) `
+			 {
+				${exports.typographyList[props.lg](props)}
+			}
+		`)}
+`;
+/**
+ * @param lg - pc size typography
+ * @param md - OwnProps 로 분류되어 lg, sm이 공통일 경우 md하나로 사용 가능하다.
+ * @param sm - mobile size typography
+ */
+const BaseTypography = (props) => {
+    const { children } = props;
+    return react_1.default.createElement(TextElement, Object.assign({}, props), children);
+};
+exports.BaseTypography = BaseTypography;

package/dist/core/Typography/Body1.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Body1: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Body1.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Body1 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Body1 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Body1" }), children));
+};
+exports.Body1 = Body1;

package/dist/core/Typography/Body2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Body2: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Body2.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Body2 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Body2 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Body2" }), children));
+};
+exports.Body2 = Body2;

package/dist/core/Typography/Headline1.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Headline1: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Headline1.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headline1 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Headline1 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Headline1" }), children));
+};
+exports.Headline1 = Headline1;

package/dist/core/Typography/Headline2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Headline2: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Headline2.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headline2 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Headline2 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Headline2" }), children));
+};
+exports.Headline2 = Headline2;

package/dist/core/Typography/Headline3.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Headline3: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Headline3.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headline3 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Headline3 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Headline3" }), children));
+};
+exports.Headline3 = Headline3;

package/dist/core/Typography/Headline4.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Headline4: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Headline4.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headline4 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Headline4 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Headline4" }), children));
+};
+exports.Headline4 = Headline4;

package/dist/core/Typography/Headline5.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Headline5: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Headline5.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headline5 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Headline5 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Headline5" }), children));
+};
+exports.Headline5 = Headline5;

package/dist/core/Typography/Headline6.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Headline6: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Headline6.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headline6 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Headline6 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Headline6" }), children));
+};
+exports.Headline6 = Headline6;

package/dist/core/Typography/Title1.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Title1: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Title1.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title1 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Title1 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Title1" }), children));
+};
+exports.Title1 = Title1;

package/dist/core/Typography/Title2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Title2: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Title2.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title2 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Title2 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Title2" }), children));
+};
+exports.Title2 = Title2;

package/dist/core/Typography/Title3.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Title3: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Title3.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title3 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Title3 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Title3" }), children));
+};
+exports.Title3 = Title3;

package/dist/core/Typography/Title4.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TypoProps } from './BaseTypography';
+export declare const Title4: (props: TypoProps) => React.JSX.Element;

package/dist/core/Typography/Title4.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title4 = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseTypography_1 = require("./BaseTypography");
+const Title4 = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(BaseTypography_1.BaseTypography, Object.assign({}, restProps, { md: "Title4" }), children));
+};
+exports.Title4 = Title4;