pds-dev-kit-web-test 2.3.3 → 2.3.5

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.d.ts

@@ -5,7 +5,6 @@ type Props = {
     cbProps: ComponentBlock;
     device: Device;
     index: number;
-    id: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device, index, id }: Props): JSX.Element;
+export default function ComponentBlockMatcher({ cbProps, device, index }: Props): JSX.Element;
 export {};

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js

@@ -23,18 +23,18 @@ var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
-var Text_1 = require("./componentBlocks/Text");
+var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(_a) {
-    var cbProps = _a.cbProps, device = _a.device, index = _a.index, id = _a.id;
+    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
     var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
     var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
             return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_TEXT:
-            return (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({}, propsWithValue, { index: index, id: id }));
+            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_RICHTEXT:
             return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_DIVIDER:

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js

@@ -66,7 +66,7 @@ function Button(props) {
         ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
-    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 1 } : {};
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
                     paddingLeft: paddingLeft,
                     paddingRight: paddingRight,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import type { CB_TEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
-type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection & {
-    id: number;
-};
+type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection;
 declare function Text(props: Props): JSX.Element;
 export default Text;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -17,12 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-console */
 /* eslint-disable react/destructuring-assignment */
-// eslint-disable-next-line import/no-extraneous-dependencies
-var lodash_1 = require("lodash");
 var react_1 = require("react");
-var react_measure_1 = __importDefault(require("react-measure"));
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var customSectionContext_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/customSectionContext");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
@@ -60,52 +56,7 @@ function Text(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var _f = (0, customSectionContext_1.useCustomSectionContext)(), setLayouts = _f.setLayouts, rowHeight = _f.rowHeight, sectionActionHandler = _f.sectionActionHandler;
-    var debouncedSectionActionHandler = (0, react_1.useCallback)((0, lodash_1.debounce)(function (payload) {
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/AUTO_RESIZED_TO_FIT_CONTENT',
-                payload: payload
-            });
-    }, 1000), []);
-    var handleResize = function (contentRect) {
-        var _a, _b;
-        var breakpoint = device === 'DESKTOP' ? 'lg' : 'sm';
-        var scrollHeight = (_a = contentRect.scroll) === null || _a === void 0 ? void 0 : _a.height;
-        var clientHeight = (_b = contentRect.client) === null || _b === void 0 ? void 0 : _b.height;
-        if (!scrollHeight || !clientHeight) {
-            return;
-        }
-        if (clientHeight < scrollHeight) {
-            return;
-        }
-        var id = props.id;
-        // setLayouts((prev) => {
-        //   const copy: any = JSON.parse(JSON.stringify(prev));
-        //   const targetIndex = copy[breakpoint].findIndex((each: any) => each.i === id.toString());
-        //   const newH = Math.ceil((clientHeight + 10) / (10 + rowHeight));
-        //   copy[breakpoint][targetIndex].h = newH;
-        //   copy[breakpoint][targetIndex].minH = newH;
-        //   debouncedSectionActionHandler({
-        //     layout: copy[breakpoint],
-        //     cb: {
-        //       i: id,
-        //       h: newH,
-        //       w: copy[breakpoint][targetIndex].w,
-        //       x: copy[breakpoint][targetIndex].x,
-        //       y: copy[breakpoint][targetIndex].y
-        //     }
-        //   });
-        //   // console.log(copy[breakpoint][targetIndex]);
-        //   return copy;
-        // });
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(react_measure_1.default, __assign({ client: true, scroll: true, onResize: handleResize }, { children: function (_a) {
-                        var measureRef = _a.measureRef;
-                        return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: measureRef }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { 
-                                    // width: cbRef.current ? calculateCh(cbRef.current, '1rem') : '100%',
-                                    width: '100%', whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) })));
-                    } })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [
@@ -120,14 +71,4 @@ function getTextStyles(props, device) {
     ];
     return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }
-function calculateCh(element, fontSize) {
-    var zero = document.createElement('span');
-    zero.innerText = '0';
-    zero.style.position = 'absolute';
-    zero.style.fontSize = fontSize;
-    element.appendChild(zero);
-    var chPixels = zero.getBoundingClientRect().width;
-    element.removeChild(zero);
-    return "".concat(320 / chPixels, "ch");
-}
 exports.default = Text;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_Box.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S_CB_Box = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  /* font-size: calc(0.8rem + (2rem - 0.8rem) * ((100vw - 20rem) / (50rem - 20rem))); */\n  font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  /* font-size: calc(0.8rem + (2rem - 0.8rem) * ((100vw - 20rem) / (50rem - 20rem))); */\n  font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
+exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { boxShadow: '' }));
 }, function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/index.d.ts

@@ -1 +1 @@
-export { default as ComponentBlockMatcher } from './ComponentBlockMatcher';
+export { default as ComponentBlock } from './ComponentBlock';

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/index.js

@@ -3,6 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBlockMatcher = void 0;
-var ComponentBlockMatcher_1 = require("./ComponentBlockMatcher");
-Object.defineProperty(exports, "ComponentBlockMatcher", { enumerable: true, get: function () { return __importDefault(ComponentBlockMatcher_1).default; } });
+exports.ComponentBlock = void 0;
+var ComponentBlock_1 = require("./ComponentBlock");
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return __importDefault(ComponentBlock_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/index.d.ts

@@ -1 +1 @@
-export { ComponentBlockMatcher } from './ComponentBlock';
+export { ComponentBlock } from './ComponentBlock';

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

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBlockMatcher = void 0;
+exports.ComponentBlock = void 0;
 var ComponentBlock_1 = require("./ComponentBlock");
-Object.defineProperty(exports, "ComponentBlockMatcher", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlockMatcher; } });
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlock; } });

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

@@ -208,16 +208,5 @@ function getEmFontSize(device, size) {
     if (device === 'DESKTOP') {
         return "".concat((size / 16).toFixed(3), "em");
     }
-    var value = clampBuilder(320, 960, 1, 3);
-    return value;
-    // return `${(size / 16).toFixed(3)}em`;
-}
-function clampBuilder(minWidthPx, maxWidthPx, minFontSize, maxFontSize) {
-    var root = document.querySelector('html');
-    var pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));
-    var minWidth = minWidthPx / pixelsPerRem;
-    var maxWidth = maxWidthPx / pixelsPerRem;
-    var slope = (maxFontSize - minFontSize) / (maxWidth - minWidth);
-    var yAxisIntersection = -minWidth * slope + minFontSize;
-    return "clamp( ".concat(minFontSize, "rem, ").concat(yAxisIntersection, "rem + ").concat(slope * 100, "vw, ").concat(maxFontSize, "rem )");
+    return "".concat((size / 16).toFixed(3), "em");
 }

package/dist/src/sub/SandollFontKit/constants.d.ts

@@ -0,0 +1,9 @@
+import type { SANDOLL_Category, SANDOLL_CategoryIconType, SANDOLL_SortOptionType } from './types';
+export declare const SANDOLL_SORT_OPTIONS: SANDOLL_SortOptionType[];
+export declare const SANDOLL_DEFAULT_SORT: {
+    text: string;
+    value: SANDOLL_SortOptionType;
+};
+export declare const SANDOLL_SORT_OPTION_KEY_MAP: Record<SANDOLL_SortOptionType, string>;
+export declare const SANDOLL_CATEGORIES: SANDOLL_Category[];
+export declare const SANDOLL_CATEGORY_ICONS: SANDOLL_CategoryIconType;

package/dist/src/sub/SandollFontKit/constants.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SANDOLL_CATEGORY_ICONS = exports.SANDOLL_CATEGORIES = exports.SANDOLL_SORT_OPTION_KEY_MAP = exports.SANDOLL_DEFAULT_SORT = exports.SANDOLL_SORT_OPTIONS = void 0;
+exports.SANDOLL_SORT_OPTIONS = ['date', 'alpha'];
+exports.SANDOLL_DEFAULT_SORT = {
+    text: 'str_key_seller_scene_x00001pages_dleditor_modal_fontselect_section_sandoll_filter_viewoption_option_latest',
+    value: 'date'
+};
+exports.SANDOLL_SORT_OPTION_KEY_MAP = {
+    date: 'str_key_seller_scene_x00001pages_dleditor_modal_fontselect_section_sandoll_filter_viewoption_option_latest',
+    alpha: 'str_key_seller_scene_x00001pages_dleditor_modal_fontselect_section_sandoll_filter_viewoption_option_name'
+};
+exports.SANDOLL_CATEGORIES = [
+    'serif',
+    'san-serif',
+    'slab',
+    'blackLetter',
+    'deco',
+    'symbol',
+    'round',
+    'script'
+];
+// NOTE: remove as
+exports.SANDOLL_CATEGORY_ICONS = {
+    serif: 'ic_typeface_sandoll_serif',
+    'san-serif': 'ic_typeface_sandoll_sanserif',
+    slab: 'ic_typeface_sandoll_slab',
+    round: 'ic_typeface_sandoll_round',
+    script: 'ic_typeface_sandoll_script',
+    deco: 'ic_typeface_sandoll_deco',
+    symbol: 'ic_typeface_sandoll_symbol',
+    blackLetter: 'ic_typeface_sandoll_blackletter'
+};

package/dist/src/sub/SandollFontKit/headless/SandollFontItem.d.ts

@@ -0,0 +1,13 @@
+import { type LegacyRef } from 'react';
+import type { SANDOLL_Font } from '../types';
+type HeadlessProps = {
+    isLoading: boolean;
+    isVisible: boolean;
+    ref: LegacyRef<HTMLElement>;
+};
+type Props = {
+    font: SANDOLL_Font;
+    children: (args: HeadlessProps) => JSX.Element;
+};
+declare function SandollFontItem({ font, children }: Props): JSX.Element;
+export default SandollFontItem;

package/dist/src/sub/SandollFontKit/headless/SandollFontItem.js

@@ -0,0 +1,93 @@
+"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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var GoogleFontkit_1 = require("../../GoogleFontkit");
+var delay_1 = __importDefault(require("../utils/delay"));
+function SandollFontItem(_a) {
+    var font = _a.font, children = _a.children;
+    var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
+    var ref = (0, react_1.useRef)(null);
+    var entry = (0, GoogleFontkit_1.useIntersectionObserver)(ref, {});
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    (0, react_1.useEffect)(function () {
+        if (!isVisible) {
+            return;
+        }
+        function getCss() {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setIsLoading(true);
+                            return [4 /*yield*/, (0, delay_1.default)(2000)];
+                        case 1:
+                            _a.sent();
+                            //   const css = await getGoogleFontCss({
+                            //     family: `${font.family}${parseVariants(font.variants, {
+                            //       prefix: ':wght@',
+                            //       separator: ';'
+                            //     })}`,
+                            //     'font-display': 'swap'
+                            //   });
+                            //   const fontStyles = extractFontStyles(css);
+                            //   fillStylesheet(font.id, fontStyles[font.id]);
+                            setIsLoading(false);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        // if (isStylesheetExists(font.id, false)) {
+        //   applyActiveFont(font, '', '');
+        //   setIsLoading(false);
+        // } else if (isStylesheetExists(font.id, true)) {
+        //   setStylesheetType(font.id, false);
+        //   setIsLoading(false);
+        // } else {
+        //   createStylesheet(font.id, false);
+        //   getCss();
+        // }
+        getCss();
+    }, [font, isVisible]);
+    return children({ isLoading: isLoading, isVisible: isVisible, ref: ref });
+}
+exports.default = SandollFontItem;

package/dist/src/sub/SandollFontKit/headless/SandollFontsList.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { SANDOLL_Font, SANDOLL_SortOptionType, SANDOLL_FilterOptionType, SANDOLL_ChangeFilterOptionHandler } from '../types';
+type HeadlessProps = {
+    isLoading: boolean;
+    fonts: SANDOLL_Font[];
+    filteredFonts: SANDOLL_Font[];
+    filterOptions: SANDOLL_FilterOptionType;
+    changeSort: (option: SANDOLL_SortOptionType) => void;
+    changeFilterOption: SANDOLL_ChangeFilterOptionHandler;
+};
+type Props = {
+    apiKey: string;
+    sort: SANDOLL_SortOptionType;
+    children: (args: HeadlessProps) => JSX.Element;
+};
+declare function GoogleFontsList({ apiKey, sort, children }: Props): JSX.Element;
+export default GoogleFontsList;

package/dist/src/sub/SandollFontKit/headless/SandollFontsList.js

@@ -0,0 +1,145 @@
+"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 __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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+// import getGoogleWebFonts from '../api/getGoogleWebFonts';
+// import getFontId from '../utils/getFontId';
+var delay_1 = __importDefault(require("../utils/delay"));
+var DEFAULT_CATEGORIES = ['serif'];
+function GoogleFontsList(_a) {
+    var apiKey = _a.apiKey, sort = _a.sort, children = _a.children;
+    var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = (0, react_1.useState)([]), fonts = _c[0], setFonts = _c[1];
+    var _d = (0, react_1.useState)({
+        searchQuery: '',
+        categories: DEFAULT_CATEGORIES
+    }), filterOptions = _d[0], setFilterOptions = _d[1];
+    (0, react_1.useEffect)(function () {
+        function call() {
+            return __awaiter(this, void 0, void 0, function () {
+                var items;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setIsLoading(true);
+                            return [4 /*yield*/, (0, delay_1.default)(2000)];
+                        case 1:
+                            _a.sent();
+                            items = [
+                                { id: '1', family: 'sandoll-test-1', category: 'san-serif' },
+                                { id: '2', family: 'sandoll-test-2', category: 'deco' },
+                                { id: '3', family: 'sandoll-test-3', category: 'round' }
+                            ];
+                            //   const { items } = await getGoogleWebFonts({
+                            //     key: apiKey,
+                            //     sort
+                            //   });
+                            setFonts(items);
+                            setIsLoading(false);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        call();
+    }, [apiKey, sort]);
+    function changeSort(sortOption) {
+        return __awaiter(this, void 0, void 0, function () {
+            var items;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsLoading(true);
+                        return [4 /*yield*/, (0, delay_1.default)(2000)];
+                    case 1:
+                        _a.sent();
+                        items = [
+                            { id: '4', family: 'sandoll-test-4', category: 'san-serif' },
+                            { id: '5', family: 'sandoll-test-5', category: 'deco' },
+                            { id: '6', family: 'sandoll-test-6', category: 'round' }
+                        ];
+                        setFonts(items);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function changeFilterOption(arg) {
+        var name = arg.name, value = arg.value;
+        setFilterOptions(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
+        });
+    }
+    var filteredFonts = fonts.filter(function (font) {
+        var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery;
+        var isSelectedCategory = categories.includes(font.category);
+        var query = searchQuery.toLocaleLowerCase().trim();
+        var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
+        if (!matchSearchQuery) {
+            return false;
+        }
+        if (isSelectedCategory) {
+            return true;
+        }
+        return false;
+    });
+    return children({
+        isLoading: isLoading,
+        fonts: fonts,
+        filteredFonts: filteredFonts,
+        filterOptions: filterOptions,
+        changeSort: changeSort,
+        changeFilterOption: changeFilterOption
+    });
+}
+exports.default = GoogleFontsList;

package/dist/src/sub/SandollFontKit/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SandollFontItem } from './headless/SandollFontItem';
+export { default as SandollFontsList } from './headless/SandollFontsList';
+export * from './types';
+export * from './constants';

package/dist/src/sub/SandollFontKit/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SandollFontsList = exports.SandollFontItem = void 0;
+var SandollFontItem_1 = require("./headless/SandollFontItem");
+Object.defineProperty(exports, "SandollFontItem", { enumerable: true, get: function () { return __importDefault(SandollFontItem_1).default; } });
+var SandollFontsList_1 = require("./headless/SandollFontsList");
+Object.defineProperty(exports, "SandollFontsList", { enumerable: true, get: function () { return __importDefault(SandollFontsList_1).default; } });
+__exportStar(require("./types"), exports);
+__exportStar(require("./constants"), exports);

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

@@ -0,0 +1,22 @@
+import type { PDSIconType } from '../../common/types';
+export type SANDOLL_Font = {
+    family: string;
+    id: string;
+    category: SANDOLL_CategoryType;
+};
+export type SANDOLL_CategoryType = 'serif' | 'san-serif' | 'slab' | 'round' | 'script' | 'deco' | 'symbol' | 'blackLetter';
+export type SANDOLL_SortOptionType = 'date' | 'alpha';
+export type SANDOLL_CategoryIconType = Record<SANDOLL_Category, PDSIconType>;
+export type SANDOLL_Category = 'serif' | 'san-serif' | 'slab' | 'round' | 'script' | 'deco' | 'symbol' | 'blackLetter';
+export type SANDOLL_FilterOptionHandlerArgType = {
+    name: 'searchQuery';
+    value: string;
+} | {
+    name: 'categories';
+    value: SANDOLL_CategoryType[];
+};
+export type SANDOLL_ChangeFilterOptionHandler = (arg: SANDOLL_FilterOptionHandlerArgType) => void;
+export type SANDOLL_FilterOptionType = {
+    searchQuery: string;
+    categories: SANDOLL_CategoryType[];
+};

package/dist/src/sub/SandollFontKit/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/sub/SandollFontKit/utils/delay.d.ts

@@ -0,0 +1 @@
+export default function delay(ms: number): Promise<unknown>;

package/dist/src/sub/SandollFontKit/utils/delay.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function delay(ms) {
+    return new Promise(function (resolve) { return setTimeout(resolve, ms); });
+}
+exports.default = delay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.3.03",
+  "version": "2.3.5",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -25,7 +25,6 @@
     "publ-echo": "^0.0.45",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
-    "react-measure": "^2.5.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "smoothscroll-polyfill": "^0.4.4",
@@ -86,8 +85,6 @@
     "@storybook/react": "^6.3.12",
     "@types/lodash": "^4.14.175",
     "@types/node": "^16.10.2",
-    "@types/react-grid-layout": "^1.3.5",
-    "@types/react-measure": "^2.0.12",
     "@types/react-router-dom": "^5.3.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/styled-components": "^5.1.9",

package/dist/src/sub/DynamicLayout/sections/CustomSection/NewCustomSection.d.ts

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