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

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/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, customGridRows }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, customGridRows = _a.customGridRows;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -36,8 +36,7 @@ function DynamicLayout(_a) {
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
-            programmedSectionComponents: programmedSectionComponents,
-            customGridRows: customGridRows
+            programmedSectionComponents: programmedSectionComponents
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/RichText.js

@@ -13,7 +13,7 @@ function RichText(_a) {
     var text = _a.text;
     return (0, jsx_runtime_1.jsx)(S_RichText, { dangerouslySetInnerHTML: { __html: text } });
 }
-var S_RichText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"], ["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"])), function (_a) {
+var S_RichText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"], ["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_papp_post_notice_link;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/components/desktop/Item/Item.js

@@ -185,7 +185,7 @@ function HTMLReader(_a) {
     }, [data]);
     return ((0, jsx_runtime_1.jsx)(S_Content, { ref: contentRef, styleTheme: styleTheme, colorTheme: colorTheme, color: color, textAlign: textAlign, isPreview: isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW' }));
 }
-var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_temp_grey_01;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/components/mobile/Item/Item.js

@@ -182,7 +182,7 @@ function HTMLReader(_a) {
     }, [data]);
     return ((0, jsx_runtime_1.jsx)(S_Content, { ref: contentRef, styleTheme: styleTheme, colorTheme: colorTheme, color: color, textAlign: textAlign, isPreview: isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW' }));
 }
-var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_temp_grey_01;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -53,9 +53,13 @@ var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlo
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
 var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
-var GRID_CELL_MIN = 8;
+var GRID_CELL_MIN = 24;
+var DESKTOP_GRID_COLS = 24;
+var MOBILE_GRID_COLS = 8;
+var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
+var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 function CustomSection(props) {
-    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler, customGridRows = _a.customGridRows;
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
     var _b = jsonProperties, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _b.CB_CONTENT_PROP_SECTION;
     var _c = (0, react_1.useState)(null), selectedCB = _c[0], setSelectedCB = _c[1];
@@ -64,19 +68,6 @@ function CustomSection(props) {
     var _e = (0, react_1.useState)(16), baseFontSize = _e[0], setBaseFontSize = _e[1];
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
-    var gridData = (0, react_1.useMemo)(function () {
-        var _a, _b;
-        var desktopCols = (_a = customGridRows === null || customGridRows === void 0 ? void 0 : customGridRows.lg) !== null && _a !== void 0 ? _a : 24;
-        var mobileCols = (_b = customGridRows === null || customGridRows === void 0 ? void 0 : customGridRows.sm) !== null && _b !== void 0 ? _b : 8;
-        var gleMinWidthDesktop = "".concat(GRID_CELL_MIN * desktopCols, "px");
-        var gleMinWidthMobile = "".concat(GRID_CELL_MIN * mobileCols, "px");
-        return {
-            desktopCols: desktopCols,
-            mobileCols: mobileCols,
-            gleMinWidthDesktop: gleMinWidthDesktop,
-            gleMinWidthMobile: gleMinWidthMobile
-        };
-    }, [customGridRows]);
     var _f = (0, react_1.useState)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         return {
@@ -179,15 +170,13 @@ function CustomSection(props) {
         // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
         !!(CB_CONTENT_PROP_SECTION === null || CB_CONTENT_PROP_SECTION === void 0 ? void 0 : CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
         if (device === 'MOBILE') {
-            var cellWidth_1 = width / gridData.mobileCols;
-            // setRowHeight(cellWidth * 0.56);
-            setRowHeight(cellWidth_1);
+            var cellWidth_1 = width / MOBILE_GRID_COLS;
+            setRowHeight(cellWidth_1 * 0.56);
             baseFontSize !== 16 && setBaseFontSize(16);
             return;
         }
-        var cellWidth = width / gridData.desktopCols;
-        // setRowHeight(cellWidth * 0.56);
-        setRowHeight(cellWidth);
+        var cellWidth = width / DESKTOP_GRID_COLS;
+        setRowHeight(cellWidth * 0.56);
         responsiveFontMode ? setBaseFontSize(cellWidth / 2.35) : setBaseFontSize(16);
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
@@ -198,9 +187,9 @@ function CustomSection(props) {
                         paddingBottom: padding.bottom,
                         paddingRight: padding.right,
                         paddingLeft: padding.left
-                    } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: gridData.desktopCols, sm: gridData.mobileCols }, rowHeight: rowHeight, margin: [0, 0], containerPadding: [0, 0], style: {
+                    } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
                             width: customSectionStyles.width,
-                            minWidth: isMobile ? gridData.gleMinWidthMobile : gridData.gleMinWidthDesktop,
+                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                             fontSize: "".concat(baseFontSize, "px")
                         }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                                     width: '100%',

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js

@@ -172,7 +172,7 @@ function getFontName(value) {
         case 'SYSSERIF':
             return 'serif';
         case 'PRETENDARD':
-            return 'Pretendard-Regular, sans-serif';
+            return 'Pretendard JP, sans-serif';
         default:
             return '';
     }

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -224,10 +224,6 @@ export type DynamicLayoutProps = {
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
     width?: number;
-    customGridRows?: {
-        lg: number;
-        sm: number;
-    };
 };
 export type NavHandlerAction = {
     openNewTab: boolean;

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;

package/dist/src/sub/GoogleFontkit/api/getGoogleFontCss.js

@@ -0,0 +1,53 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var GOOGLE_FONTS_CSS_BASE_URL = 'https://fonts.googleapis.com/css2';
+function getGoogleFontCss(searchParamsObj) {
+    return __awaiter(this, void 0, void 0, function () {
+        var url;
+        return __generator(this, function (_a) {
+            url = new URL(GOOGLE_FONTS_CSS_BASE_URL);
+            Object.entries(searchParamsObj).forEach(function (param) {
+                var key = param[0], value = param[1];
+                url.searchParams.append(key, value);
+            });
+            return [2 /*return*/, fetch(url.href).then(function (res) { return res.text(); })];
+        });
+    });
+}
+exports.default = getGoogleFontCss;

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

@@ -0,0 +1,2 @@
+declare function getGoogleFontDefaultText(family: string): Promise<any>;
+export default getGoogleFontDefaultText;

package/dist/src/sub/GoogleFontkit/api/getGoogleFontDefaultText.js

@@ -0,0 +1,55 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var GOOGLE_SAMPLE_TEXT_BASE_URL = 'https://fonts.google.com/sampletext';
+function getGoogleFontDefaultText(family) {
+    return __awaiter(this, void 0, void 0, function () {
+        var url;
+        return __generator(this, function (_a) {
+            url = new URL(GOOGLE_SAMPLE_TEXT_BASE_URL);
+            url.searchParams.append('family', family);
+            return [2 /*return*/, fetch(url.href).then(function (res) {
+                    return res.text().then(function (text) {
+                        var testTexts = JSON.parse(text.substring(5));
+                        return testTexts;
+                    });
+                })];
+        });
+    });
+}
+exports.default = getGoogleFontDefaultText;

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

@@ -0,0 +1,10 @@
+type Props = {
+    key: string;
+    family?: string;
+    sort?: string;
+    subset?: string;
+    category?: string;
+    classification?: string;
+};
+declare function getGoogleWebFonts(searchParamsObj: Props): Promise<any>;
+export default getGoogleWebFonts;