pds-dev-kit-web-test 0.2.37 → 0.2.38

package/README.md

@@ -8,5 +8,5 @@ publ design system 프로젝트
 
 ## 참고 문서
 
-해당 패키지 버전은 PDS 문서 2.1 버전을 따르고 있음
-[PDS 2.1 문서 링크](https://design.docs.publ.biz/pds-project/)
+해당 패키지 버전은 PDS 문서 2.2 버전을 따르고 있음
+[PDS 2.2 문서 링크](https://design.docs.publ.biz/pds-project/)

package/dist/src/common/assets/icons/fill/LogoGoogle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const LogoGoogle: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default LogoGoogle;

package/dist/src/common/assets/icons/fill/LogoGoogle.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var LogoGoogle = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M12.0906,11.41 L18.7266,11.41 C18.7646,11.561 18.7966,11.744 18.8216,11.958 C18.8466,12.173 18.8596,12.387 18.8596,12.601 C18.8596,13.471 18.7266,14.291 18.4626,15.059 C18.1976,15.828 17.7816,16.515 17.2146,17.12 C16.6096,17.763 15.8846,18.261 15.0396,18.614 C14.1956,18.967 13.2316,19.143 12.1476,19.143 C11.1636,19.143 10.2376,18.967 9.3676,18.614 C8.4976,18.261 7.7416,17.769 7.0986,17.139 C6.4556,16.509 5.9456,15.762 5.5676,14.898 C5.1896,14.035 4.9996,13.093 4.9996,12.072 C4.9996,11.051 5.1896,10.108 5.5676,9.245 C5.9456,8.382 6.4556,7.635 7.0986,7.005 C7.7416,6.374 8.4976,5.883 9.3676,5.53 C10.2376,5.177 11.1636,5 12.1476,5 C13.2436,5 14.2236,5.189 15.0876,5.567 C15.9506,5.945 16.6916,6.469 17.3096,7.137 L15.5506,8.857 C15.1096,8.391 14.6176,8.035 14.0756,7.789 C13.5336,7.544 12.8846,7.421 12.1286,7.421 C11.5106,7.421 10.9246,7.531 10.3696,7.752 C9.8156,7.972 9.3306,8.284 8.9136,8.687 C8.4976,9.091 8.1676,9.579 7.9216,10.152 C7.6756,10.726 7.5526,11.366 7.5526,12.072 C7.5526,12.778 7.6756,13.418 7.9216,13.991 C8.1676,14.564 8.5006,15.053 8.9236,15.456 C9.3456,15.86 9.8336,16.172 10.3886,16.392 C10.9436,16.613 11.5356,16.723 12.1656,16.723 C12.8846,16.723 13.4926,16.619 13.9906,16.411 C14.4886,16.203 14.9136,15.935 15.2676,15.607 C15.5186,15.381 15.7366,15.094 15.9196,14.747 C16.1016,14.4 16.2436,14.013 16.3446,13.585 L12.0906,13.585 L12.0906,11.41 Z" }) })));
+};
+exports.default = LogoGoogle;

package/dist/src/common/assets/icons/fill/TypefaceSystem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const TypefaceSystem: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default TypefaceSystem;

package/dist/src/common/assets/icons/fill/TypefaceSystem.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TypefaceSystem = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M10.159,13.153 L9.099,9.909 L9.04,9.909 L7.981,13.153 L10.159,13.153 Z M5,16.48 L7.94,8 L10.2,8 L13.128,16.48 L11.242,16.48 L10.604,14.524 L7.535,14.524 L6.897,16.48 L5,16.48 Z M15.943,15.4018 C16.734,15.3958 17.284,14.8808 17.278,14.2078 L17.278,13.7448 C17.015,13.7558 16.271,13.7978 15.978,13.8208 C15.375,13.8738 14.994,14.1608 14.994,14.6518 C14.994,15.1388 15.387,15.3958 15.943,15.4018 M15.697,12.7438 C16.154,12.7138 17.009,12.6738 17.278,12.6618 L17.278,12.1458 C17.272,11.6128 16.909,11.3078 16.259,11.3028 C15.668,11.3078 15.299,11.5728 15.205,12.0058 L13.554,12.0058 C13.659,10.9048 14.619,10.0388 16.306,10.0388 C17.694,10.0388 19.006,10.6588 19.0000205,12.1928 L19.0000205,16.4798 L17.36,16.4798 L17.36,15.6008 L17.313,15.6008 C17.003,16.1868 16.394,16.6028 15.451,16.5968641 C14.233,16.6028 13.337,15.9578 13.331,14.6998 C13.337,13.2818 14.473,12.8188 15.697,12.7438" }) })));
+};
+exports.default = TypefaceSystem;

package/dist/src/common/assets/icons/fill/index.d.ts

@@ -60,6 +60,7 @@ declare const fillIcons: {
     readonly ic_list: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_live: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_login: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_logo_google: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_logo_insta: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_logo_twitter: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_logo_yt: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -107,6 +108,7 @@ declare const fillIcons: {
     readonly ic_toggle_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_trashcan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_typeface_system: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_unavailable: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_upload: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_verified: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/fill/index.js

@@ -63,6 +63,7 @@ var Links_1 = __importDefault(require("./Links"));
 var List_1 = __importDefault(require("./List"));
 var Live_1 = __importDefault(require("./Live"));
 var Login_1 = __importDefault(require("./Login"));
+var LogoGoogle_1 = __importDefault(require("./LogoGoogle"));
 var LogoInsta_1 = __importDefault(require("./LogoInsta"));
 var LogoTwitter_1 = __importDefault(require("./LogoTwitter"));
 var LogoYt_1 = __importDefault(require("./LogoYt"));
@@ -110,6 +111,7 @@ var ThumbUp_1 = __importDefault(require("./ThumbUp"));
 var ToggleDown_1 = __importDefault(require("./ToggleDown"));
 var ToggleUp_1 = __importDefault(require("./ToggleUp"));
 var Trashcan_1 = __importDefault(require("./Trashcan"));
+var TypefaceSystem_1 = __importDefault(require("./TypefaceSystem"));
 var Unavailable_1 = __importDefault(require("./Unavailable"));
 var Upload_1 = __importDefault(require("./Upload"));
 var Verified_1 = __importDefault(require("./Verified"));
@@ -186,6 +188,7 @@ var fillIcons = {
     ic_list: List_1.default,
     ic_live: Live_1.default,
     ic_login: Login_1.default,
+    ic_logo_google: LogoGoogle_1.default,
     ic_logo_insta: LogoInsta_1.default,
     ic_logo_twitter: LogoTwitter_1.default,
     ic_logo_yt: LogoYt_1.default,
@@ -233,6 +236,7 @@ var fillIcons = {
     ic_toggle_down: ToggleDown_1.default,
     ic_toggle_up: ToggleUp_1.default,
     ic_trashcan: Trashcan_1.default,
+    ic_typeface_system: TypefaceSystem_1.default,
     ic_unavailable: Unavailable_1.default,
     ic_upload: Upload_1.default,
     ic_verified: Verified_1.default,

package/dist/src/common/assets/icons/line/LogoGoogle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const LogoGoogle: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default LogoGoogle;

package/dist/src/common/assets/icons/line/LogoGoogle.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var LogoGoogle = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M12.0906,11.41 L18.7266,11.41 C18.7646,11.561 18.7966,11.744 18.8216,11.958 C18.8466,12.173 18.8596,12.387 18.8596,12.601 C18.8596,13.471 18.7266,14.291 18.4626,15.059 C18.1976,15.828 17.7816,16.515 17.2146,17.12 C16.6096,17.763 15.8846,18.261 15.0396,18.614 C14.1956,18.967 13.2316,19.143 12.1476,19.143 C11.1636,19.143 10.2376,18.967 9.3676,18.614 C8.4976,18.261 7.7416,17.769 7.0986,17.139 C6.4556,16.509 5.9456,15.762 5.5676,14.898 C5.1896,14.035 4.9996,13.093 4.9996,12.072 C4.9996,11.051 5.1896,10.108 5.5676,9.245 C5.9456,8.382 6.4556,7.635 7.0986,7.005 C7.7416,6.374 8.4976,5.883 9.3676,5.53 C10.2376,5.177 11.1636,5 12.1476,5 C13.2436,5 14.2236,5.189 15.0876,5.567 C15.9506,5.945 16.6916,6.469 17.3096,7.137 L15.5506,8.857 C15.1096,8.391 14.6176,8.035 14.0756,7.789 C13.5336,7.544 12.8846,7.421 12.1286,7.421 C11.5106,7.421 10.9246,7.531 10.3696,7.752 C9.8156,7.972 9.3306,8.284 8.9136,8.687 C8.4976,9.091 8.1676,9.579 7.9216,10.152 C7.6756,10.726 7.5526,11.366 7.5526,12.072 C7.5526,12.778 7.6756,13.418 7.9216,13.991 C8.1676,14.564 8.5006,15.053 8.9236,15.456 C9.3456,15.86 9.8336,16.172 10.3886,16.392 C10.9436,16.613 11.5356,16.723 12.1656,16.723 C12.8846,16.723 13.4926,16.619 13.9906,16.411 C14.4886,16.203 14.9136,15.935 15.2676,15.607 C15.5186,15.381 15.7366,15.094 15.9196,14.747 C16.1016,14.4 16.2436,14.013 16.3446,13.585 L12.0906,13.585 L12.0906,11.41 Z" }) })));
+};
+exports.default = LogoGoogle;

package/dist/src/common/assets/icons/line/TypefaceSystem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const TypefaceSystem: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default TypefaceSystem;

package/dist/src/common/assets/icons/line/TypefaceSystem.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TypefaceSystem = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M10.159,13.153 L9.099,9.909 L9.04,9.909 L7.981,13.153 L10.159,13.153 Z M5,16.48 L7.94,8 L10.2,8 L13.128,16.48 L11.242,16.48 L10.604,14.524 L7.535,14.524 L6.897,16.48 L5,16.48 Z M15.943,15.4018 C16.734,15.3958 17.284,14.8808 17.278,14.2078 L17.278,13.7448 C17.015,13.7558 16.271,13.7978 15.978,13.8208 C15.375,13.8738 14.994,14.1608 14.994,14.6518 C14.994,15.1388 15.387,15.3958 15.943,15.4018 M15.697,12.7438 C16.154,12.7138 17.009,12.6738 17.278,12.6618 L17.278,12.1458 C17.272,11.6128 16.909,11.3078 16.259,11.3028 C15.668,11.3078 15.299,11.5728 15.205,12.0058 L13.554,12.0058 C13.659,10.9048 14.619,10.0388 16.306,10.0388 C17.694,10.0388 19.006,10.6588 19.0000205,12.1928 L19.0000205,16.4798 L17.36,16.4798 L17.36,15.6008 L17.313,15.6008 C17.003,16.1868 16.394,16.6028 15.451,16.5968641 C14.233,16.6028 13.337,15.9578 13.331,14.6998 C13.337,13.2818 14.473,12.8188 15.697,12.7438" }) })));
+};
+exports.default = TypefaceSystem;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -102,6 +102,7 @@ declare const lineIcons: {
     readonly ic_live_event: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_live_personal: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_lock: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_logo_google: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_mail: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_menu: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_menu_design: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -229,6 +230,7 @@ declare const lineIcons: {
     readonly ic_toggle_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_trashcan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_typeface_system: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_unavailable: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_unlock: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_upload: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -105,6 +105,7 @@ var LiveConcert_1 = __importDefault(require("./LiveConcert"));
 var LiveEvent_1 = __importDefault(require("./LiveEvent"));
 var LivePersonal_1 = __importDefault(require("./LivePersonal"));
 var Lock_1 = __importDefault(require("./Lock"));
+var LogoGoogle_1 = __importDefault(require("./LogoGoogle"));
 var Mail_1 = __importDefault(require("./Mail"));
 var Menu_1 = __importDefault(require("./Menu"));
 var MenuDesign_1 = __importDefault(require("./MenuDesign"));
@@ -232,6 +233,7 @@ var Time_1 = __importDefault(require("./Time"));
 var ToggleDown_1 = __importDefault(require("./ToggleDown"));
 var ToggleUp_1 = __importDefault(require("./ToggleUp"));
 var Trashcan_1 = __importDefault(require("./Trashcan"));
+var TypefaceSystem_1 = __importDefault(require("./TypefaceSystem"));
 var Unavailable_1 = __importDefault(require("./Unavailable"));
 var Unlock_1 = __importDefault(require("./Unlock"));
 var Upload_1 = __importDefault(require("./Upload"));
@@ -357,6 +359,7 @@ var lineIcons = {
     ic_live_event: LiveEvent_1.default,
     ic_live_personal: LivePersonal_1.default,
     ic_lock: Lock_1.default,
+    ic_logo_google: LogoGoogle_1.default,
     ic_mail: Mail_1.default,
     ic_menu: Menu_1.default,
     ic_menu_design: MenuDesign_1.default,
@@ -484,6 +487,7 @@ var lineIcons = {
     ic_toggle_down: ToggleDown_1.default,
     ic_toggle_up: ToggleUp_1.default,
     ic_trashcan: Trashcan_1.default,
+    ic_typeface_system: TypefaceSystem_1.default,
     ic_unavailable: Unavailable_1.default,
     ic_unlock: Unlock_1.default,
     ic_upload: Upload_1.default,

package/dist/src/common/styles/colorSet/UIColor.json

@@ -835,5 +835,6 @@
     "ui_cpnt_modalwithtab_sidetab_hover": "sys_component_base_01",
     "ui_cpnt_modalwithtab_sidetab_pressed": "sys_component_base_04",
     "ui_107": "sys_component_border_white_opacity20",
-    "ui_cpnt_textlabel_sys_white_02": "sys_text_white_02"
+    "ui_cpnt_textlabel_sys_white_02": "sys_text_white_02",
+    "ui_cpnt_headerbar_base_area_transparent": "sys_container_background_04"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -1303,6 +1303,7 @@ declare const colorSet: {
         ui_cpnt_modalwithtab_sidetab_pressed: string;
         ui_107: string;
         ui_cpnt_textlabel_sys_white_02: string;
+        ui_cpnt_headerbar_base_area_transparent: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -836,4 +836,5 @@ export interface UITheme {
     ui_cpnt_modalwithtab_sidetab_pressed: string;
     ui_107: string;
     ui_cpnt_textlabel_sys_white_02: string;
+    ui_cpnt_headerbar_base_area_transparent: string;
 }

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.d.ts

@@ -18,9 +18,11 @@ type Props = {
     iBtn1Type?: 'submit' | 'reset' | 'button';
     iBtn2State?: 'normal' | 'disabled';
     iBtn2Type?: 'submit' | 'reset' | 'button';
+    colorTheme?: ColorTheme;
     onClickLeftBtn?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickIBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickIBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+export type ColorTheme = 'none' | 'transparent_white';
+declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, colorTheme, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default MobileHeaderBar;

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js

@@ -23,8 +23,10 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
+var utils_1 = require("./utils");
 function MobileHeaderBar(_a) {
-    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, _f = _a.iBtn1IconColorKey, iBtn1IconColorKey = _f === void 0 ? 'ui_cpnt_button_icon_enabled' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, _h = _a.iBtn2IconColorKey, iBtn2IconColorKey = _h === void 0 ? 'ui_cpnt_button_icon_enabled' : _h, _j = _a.dividerMode, dividerMode = _j === void 0 ? 'none' : _j, imageSrc = _a.imageSrc, _k = _a.iBtn1State, iBtn1State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn1Type, iBtn1Type = _l === void 0 ? 'button' : _l, _m = _a.iBtn2State, iBtn2State = _m === void 0 ? 'normal' : _m, _o = _a.iBtn2Type, iBtn2Type = _o === void 0 ? 'button' : _o, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _f = _a.iBtn2IconFillType, iBtn2IconFillType = _f === void 0 ? 'line' : _f, iBtn2IconColorKey = _a.iBtn2IconColorKey, _g = _a.dividerMode, dividerMode = _g === void 0 ? 'none' : _g, imageSrc = _a.imageSrc, _h = _a.iBtn1State, iBtn1State = _h === void 0 ? 'normal' : _h, _j = _a.iBtn1Type, iBtn1Type = _j === void 0 ? 'button' : _j, _k = _a.iBtn2State, iBtn2State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn2Type, iBtn2Type = _l === void 0 ? 'button' : _l, _m = _a.colorTheme, colorTheme = _m === void 0 ? 'none' : _m, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var _o = (0, utils_1.getOptionalColorTheme)(colorTheme), titleColor = _o.titleColor, captionColor = _o.captionColor, iconButtonIconColor = _o.iconButtonIconColor, baseColor = _o.baseColor, dividerColor = _o.dividerColor;
     var handleClickLeftBtn = function (e) {
         if (onClickLeftBtn) {
             onClickLeftBtn(e);
@@ -57,18 +59,18 @@ function MobileHeaderBar(_a) {
         if (!iconName) {
             return (0, jsx_runtime_1.jsx)("div", {});
         }
-        return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }));
+        return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }));
     };
     var title = function () {
         switch (titleType) {
             case 'text': {
                 if (captionText) {
-                    return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })] }));
+                    return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: captionColor, styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })] }));
                 }
-                return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }) }));
+                return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }) }));
             }
             case 'profile': {
-                return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }));
+                return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }));
             }
             case 'image': {
                 return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }));
@@ -79,19 +81,19 @@ function MobileHeaderBar(_a) {
         if (displayType === 'none') {
             return (0, jsx_runtime_1.jsx)("div", {});
         }
-        return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))] }));
+        return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey !== null && iBtn2IconColorKey !== void 0 ? iBtn2IconColorKey : iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey !== null && iBtn1IconColorKey !== void 0 ? iBtn1IconColorKey : iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), leftIcon()] }), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), iBtn()] })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', borderColor: dividerColor, hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile', baseColor: baseColor }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), leftIcon()] }), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), iBtn()] })] })));
 }
 var S_MobileHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"])), function (_a) {
     var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
     return expand || hasCaptionText ? 'flex-start' : 'center';
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_headerbar_base_area;
+    var theme = _a.theme, baseColor = _a.baseColor;
+    return theme[baseColor];
 }, function (_a) {
-    var hasBorder = _a.hasBorder, theme = _a.theme;
-    return hasBorder && "1px solid ".concat(theme.ui_cpnt_divider);
+    var hasBorder = _a.hasBorder, theme = _a.theme, borderColor = _a.borderColor;
+    return hasBorder && "1px solid ".concat(theme[borderColor]);
 }, function (_a) {
     var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
     return (expand || hasCaptionText ? 'auto' : '56px');

package/dist/src/mobile/components/MobileHeaderBar/utils.d.ts

@@ -0,0 +1,12 @@
+import type { TextStyleProps } from '../TextLabel/TextLabel';
+import type { ColorTheme } from './MobileHeaderBar';
+import type { UiColors } from '../../../common/index';
+type MobileHeaderbarColorThemeType = {
+    titleColor: TextStyleProps['colorTheme'];
+    captionColor: TextStyleProps['colorTheme'];
+    iconButtonIconColor: UiColors;
+    baseColor: UiColors;
+    dividerColor: UiColors;
+};
+export declare function getOptionalColorTheme(colorTheme: ColorTheme): MobileHeaderbarColorThemeType;
+export {};

package/dist/src/mobile/components/MobileHeaderBar/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOptionalColorTheme = void 0;
+function getOptionalColorTheme(colorTheme) {
+    if (colorTheme === 'transparent_white') {
+        return {
+            titleColor: 'sysTextWhite',
+            captionColor: 'sysTextWhite',
+            iconButtonIconColor: 'ui_cpnt_headerbar_icon_02',
+            baseColor: 'ui_cpnt_headerbar_base_area_transparent',
+            dividerColor: 'ui_cpnt_divider_white_opacity00'
+        };
+    }
+    return {
+        titleColor: 'sysTextPrimary',
+        captionColor: 'sysTextTertiary',
+        iconButtonIconColor: 'ui_cpnt_button_icon_enabled',
+        baseColor: 'ui_cpnt_headerbar_base_area',
+        dividerColor: 'ui_cpnt_divider'
+    };
+}
+exports.getOptionalColorTheme = getOptionalColorTheme;

package/dist/src/sub/GoogleFontkit/GoogleFontApplyExample.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function GoogleFontApplyExample(): JSX.Element;
+export default GoogleFontApplyExample;

package/dist/src/sub/GoogleFontkit/GoogleFontApplyExample.js

@@ -0,0 +1,93 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var getGoogleFontDefaultText_1 = __importDefault(require("./api/getGoogleFontDefaultText"));
+var callGoogleFontCSSAndApply_1 = __importDefault(require("./utils/callGoogleFontCSSAndApply"));
+var GOOGLE_FONT_API_KEY = 'AIzaSyDvOkXcd-jqqD1z1P-RmIBM9RzGpEXRwV0';
+function TextCB(_a) {
+    var text = _a.text, font = _a.font;
+    var _b = (0, react_1.useState)(text), defaultText = _b[0], setDefaultText = _b[1];
+    (0, react_1.useEffect)(function () {
+        (0, callGoogleFontCSSAndApply_1.default)(GOOGLE_FONT_API_KEY, font);
+        (0, getGoogleFontDefaultText_1.default)(font).then(function (data) {
+            setDefaultText(data.sampleText.tester);
+        });
+    }, [font]);
+    return (0, jsx_runtime_1.jsx)("div", __assign({ style: { fontFamily: font } }, { children: defaultText }));
+}
+function GoogleFontApplyExample() {
+    var texts = [
+        {
+            font: 'Dokdo',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Open Sans',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Poppins',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Dokdo',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Lato',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Dokdo',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Dokdo',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Caveat',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Dokdo',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Material Icons Sharp',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Material Symbols Rounded',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Orbitron',
+            text: 'Whereas disregard and contempt for human rights have resulted'
+        },
+        {
+            font: 'Noto Color Emoji',
+            text: 'a'
+        },
+        { font: 'Noto Sans KR', test: '노토산스 한국어' },
+        { font: 'Noto Sans JP', test: '노토산스 일본어' },
+        { font: 'Noto Sans NKo Unjoined', text: '노토산스 외국어' }
+    ];
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: texts.map(function (group) { return ((0, jsx_runtime_1.jsx)(TextCB, { text: group.text, font: group.font }, group.font)); }) }));
+}
+exports.default = GoogleFontApplyExample;

package/dist/src/sub/GoogleFontkit/GoogleFontsListExample.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function GoogleFontsListExample(): JSX.Element;
+export default GoogleFontsListExample;

package/dist/src/sub/GoogleFontkit/GoogleFontsListExample.js

@@ -0,0 +1,57 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var constants_1 = require("./constants");
+var GoogleFontItem_1 = __importDefault(require("./headless/GoogleFontItem"));
+var GoogleFontsList_1 = __importDefault(require("./headless/GoogleFontsList"));
+var GOOGLE_FONT_API_KEY = '문의바람';
+function GoogleFontsListExample() {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(GoogleFontsList_1.default, __assign({ apiKey: GOOGLE_FONT_API_KEY, sort: "trending" }, { children: function (_a) {
+                var isLoading = _a.isLoading, filteredFonts = _a.filteredFonts, filterOptions = _a.filterOptions, changeSort = _a.changeSort, changeFilterOption = _a.changeFilterOption;
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(SFilters, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return changeSort('date'); } }, { children: "change sort" })), (0, jsx_runtime_1.jsx)("input", { type: "text", onChange: function (e) {
+                                        return changeFilterOption({
+                                            name: 'searchQuery',
+                                            value: e.target.value
+                                        });
+                                    } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: { backgroundColor: 'yellow' } }, { children: constants_1.SUBSETS.map(function (eachSubset) {
+                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: eachSubset }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: eachSubset, value: eachSubset, checked: filterOptions.subsets.includes(eachSubset), onClick: function () {
+                                                        return changeFilterOption({
+                                                            name: 'subsets',
+                                                            value: [eachSubset]
+                                                        });
+                                                    } }, eachSubset)] }));
+                                    }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { backgroundColor: 'red' } }, { children: constants_1.CATEGORIES.map(function (category) {
+                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: category }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: category, value: category, checked: filterOptions.categories.includes(category), onClick: function () {
+                                                        return changeFilterOption({
+                                                            name: 'categories',
+                                                            value: [category]
+                                                        });
+                                                    } }, category)] }));
+                                    }) }))] }), isLoading && 'isLoading', filteredFonts.map(function (font) { return ((0, jsx_runtime_1.jsx)(GoogleFontItem_1.default, __assign({ font: font }, { children: function (_a) {
+                                var isFontFamilyLoading = _a.isLoading, ref = _a.ref;
+                                return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: ref }, { children: [isFontFamilyLoading && (0, jsx_runtime_1.jsx)("div", { children: "loading.." }), (0, jsx_runtime_1.jsx)("div", __assign({ style: { fontFamily: font.family } }, { children: font.family }))] })));
+                            } }), font.id)); })] }));
+            } })) }));
+}
+var SFilters = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid black;\n"], ["\n  border: 1px solid black;\n"])));
+exports.default = GoogleFontsListExample;
+var templateObject_1;

package/dist/src/sub/GoogleFontkit/api/getGoogleFontCss.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    family?: string;
+    subset?: string;
+    text?: string;
+    effect?: string;
+    'font-display'?: string;
+    wght?: string;
+};
+declare function getGoogleFontCss(searchParamsObj: Props): Promise<string>;
+export default getGoogleFontCss;