pds-dev-kit-web-test 0.0.22 → 0.0.24

package/dist/src/sub/DynamicLayout/components/{desktop/common → YouTubeIframe}/YouTubeIframe.js

@@ -28,48 +28,75 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var TouTubeLinkParser_1 = __importDefault(require("../../../utils/TouTubeLinkParser"));
+var TouTubeLinkParser_1 = __importDefault(require("../../utils/TouTubeLinkParser"));
 function YouTubeIframe(_a) {
     var id = _a.id, src = _a.src;
     var _b = (0, react_1.useState)(true), isYoutubeLoading = _b[0], setIsYoutubeLoading = _b[1];
+    var _c = (0, react_1.useState)(null), error = _c[0], setError = _c[1];
     var PLAYER_ID = "PLAYER_" + id;
     var YOUTUBE_SCRIPT_ID = "YOUTUBE_SCRIPT_" + id;
     var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
-    (0, react_1.useLayoutEffect)(function () {
+    var onPlayerReady = (0, react_1.useCallback)(function (event) {
+        event.target.mute();
+        event.target.playVideo();
+    }, []);
+    var onPlayerStateChange = (0, react_1.useCallback)(function (event) {
+        try {
+            var UNSTARTED = -1;
+            var ENDED = 0;
+            var PLAYING = 1;
+            var PAUSED = 2;
+            var BUFFERING = 3;
+            var CUED = 5;
+            var stateCode = event.data;
+            switch (stateCode) {
+                case UNSTARTED:
+                case BUFFERING:
+                case CUED:
+                    setIsYoutubeLoading(true);
+                    break;
+                case ENDED:
+                case PAUSED:
+                    setIsYoutubeLoading(true);
+                    event.target.playVideo();
+                    break;
+                case PLAYING:
+                    setTimeout(function () {
+                        setIsYoutubeLoading(false);
+                    }, 100);
+                    break;
+            }
+        }
+        catch (err) {
+            setIsYoutubeLoading(true);
+        }
+    }, []);
+    var onPlayerError = (0, react_1.useCallback)(function (event) {
         var _a;
-        var youtubeScript = document.createElement('script');
-        youtubeScript.id = YOUTUBE_SCRIPT_ID;
-        youtubeScript.src = YOUTUBE_SCRIPT_SRC;
-        var firstScript = document.getElementsByTagName('script')[0];
-        (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(youtubeScript, firstScript);
-        youtubeScript.onload = function () {
-            var YT = window.YT;
-            YT.ready(function () {
-                onYouTubeIframeAPIReady();
-            });
-        };
-        return function () {
-            var youtubeScript = document.getElementById(YOUTUBE_SCRIPT_ID);
-            youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
-        };
-    }, [src]);
-    function onYouTubeIframeAPIReady() {
+        // eslint-disable-next-line no-console
+        console.log('error >> ', event);
+        setError({});
+        (_a = event.target) === null || _a === void 0 ? void 0 : _a.destroy();
+    }, []);
+    var onYouTubeIframeAPIReady = (0, react_1.useCallback)(function () {
+        var videoId = TouTubeLinkParser_1.default.getId(src);
         try {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             var player = new window.YT.Player(PLAYER_ID, {
-                videoId: TouTubeLinkParser_1.default.getId(src),
+                videoId: videoId,
                 playerVars: {
                     playsinline: 1,
                     autoplay: 1,
                     controls: 0,
                     iv_load_policy: 3,
                     listType: 'playlist',
-                    playlist: TouTubeLinkParser_1.default.getId(src),
+                    playlist: videoId,
                     loop: 1
                 },
                 events: {
                     onReady: onPlayerReady,
-                    onStateChange: onPlayerStateChange
+                    onStateChange: onPlayerStateChange,
+                    onError: onPlayerError
                 }
             });
         }
@@ -77,35 +104,53 @@ function YouTubeIframe(_a) {
             // eslint-disable-next-line no-console
             console.error(error);
         }
-    }
-    function onPlayerReady(event) {
-        event.target.mute();
-        event.target.playVideo();
-    }
-    function onPlayerStateChange(event) {
-        try {
-            var ENDED = 0;
-            var PLAYING = 1;
-            var TEMP_STOP = 2;
-            var BUFFERING = 3;
-            var data = event.data;
-            if (data === PLAYING) {
-                setTimeout(function () {
-                    setIsYoutubeLoading(false);
-                }, 100);
-            }
-            if (data === BUFFERING) {
-                setIsYoutubeLoading(true);
-            }
-            if (data === ENDED || data === TEMP_STOP) {
-                setIsYoutubeLoading(true);
-                event.target.playVideo();
-            }
-        }
-        catch (err) {
-            setIsYoutubeLoading(true);
+    }, [PLAYER_ID, src, onPlayerReady, onPlayerStateChange, onPlayerError]);
+    var loadYouTubeIFrameApi = (0, react_1.useCallback)(function () {
+        var _a;
+        var youtubeScript = document.createElement('script');
+        youtubeScript.id = YOUTUBE_SCRIPT_ID;
+        youtubeScript.src = YOUTUBE_SCRIPT_SRC;
+        var firstScript = document.getElementsByTagName('script')[0];
+        (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(youtubeScript, firstScript);
+        youtubeScript.onload = function () {
+            var YT = window.YT;
+            YT.ready(function () {
+                onYouTubeIframeAPIReady();
+            });
+        };
+    }, [YOUTUBE_SCRIPT_ID, onYouTubeIframeAPIReady]);
+    /**
+      @when : YouTubeIframe이 마운트될 때,
+      @expected : YouTubeIframe script를 불러옵니다.
+      @clear : -
+    */
+    (0, react_1.useLayoutEffect)(function () {
+        loadYouTubeIFrameApi();
+    }, [loadYouTubeIFrameApi]);
+    /**
+      @when : error객체가 발행될 때,
+      @expected : player를 다시 생성하고, error를 초기화합니다.
+      @clear : -
+    */
+    (0, react_1.useEffect)(function () {
+        if (error) {
+            // eslint-disable-next-line no-console
+            console.log('recreatePlayer');
+            onYouTubeIframeAPIReady();
         }
-    }
+        setError(null);
+    }, [error, onYouTubeIframeAPIReady]);
+    /**
+      @when : YouTubeIframe이 언마운트될 때,
+      @expected :
+      @clear : YouTubeIframe script를 제거합니다.
+    */
+    (0, react_1.useEffect)(function () {
+        return function () {
+            var youtubeScript = document.getElementById(YOUTUBE_SCRIPT_ID);
+            youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
+        };
+    }, []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
         react_1.default.createElement(S_IframeWrapper, null,
@@ -115,6 +160,6 @@ var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.ui_62;
 });
-var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"], ["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"])));
+var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: 300%;\n    margin-left: -100%;\n  }\n"], ["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: 300%;\n    margin-left: -100%;\n  }\n"])));
 exports.default = YouTubeIframe;
 var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/index.d.ts

@@ -0,0 +1 @@
+export { default as YouTubeIframe } from './YouTubeIframe';

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YouTubeIframe = void 0;
+var YouTubeIframe_1 = require("./YouTubeIframe");
+Object.defineProperty(exports, "YouTubeIframe", { enumerable: true, get: function () { return __importDefault(YouTubeIframe_1).default; } });

package/dist/src/sub/DynamicLayout/components/desktop/common/index.d.ts

@@ -1,2 +1 @@
 export { default as Carousel } from './Carousel';
-export { default as YouTubeIframe } from './YouTubeIframe';

package/dist/src/sub/DynamicLayout/components/desktop/common/index.js

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

package/dist/src/sub/DynamicLayout/components/mobile/common/index.d.ts

@@ -1,2 +1 @@
 export { default as Carousel } from './Carousel';
-export { default as YouTubeIframe } from './YouTubeIframe';

package/dist/src/sub/DynamicLayout/components/mobile/common/index.js

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

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -96,7 +96,7 @@ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObj
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/desktop/D_TemplateB.js

@@ -96,7 +96,7 @@ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObj
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -67,7 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.js

@@ -67,7 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;

package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -57,7 +57,7 @@ function TemplateA() {
             react_1.default.createElement(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingH;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateB/desktop/D_TemplateB.js

@@ -57,7 +57,7 @@ function TemplateB() {
             react_1.default.createElement(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingH;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -73,7 +73,7 @@ function TemplateA() {
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && "margin: 0";
 });

package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -48,7 +48,7 @@ function TemplateA() {
                     buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
 var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateB/desktop/D_TemplateB.js

@@ -48,7 +48,7 @@ function TemplateB() {
                     buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
 var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px 0 13vh;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px 0 13vh;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px 0 13vh;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px 0 13vh;\n"])));
 var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 800px;\n"], ["\n  max-width: 800px;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;

package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateC/desktop/D_TemplateC.js

@@ -48,7 +48,7 @@ function TemplateC() {
                     buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
 var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 80vh;\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  min-height: 80vh;\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n  margin: 160px 0;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n  margin: 160px 0;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n  margin: 160px 0;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n  margin: 160px 0;\n"])));
 var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 800px;\n"], ["\n  max-width: 800px;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;

package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateD/desktop/D_TemplateD.js

@@ -48,7 +48,7 @@ function TemplateD() {
                     buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
 var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 80vh;\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: 80vh;\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

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

@@ -166,10 +166,12 @@ export interface IItemDescription extends IDescription {
 export declare type DynamicLayoutProps = {
     device: 'DESKTOP' | 'MOBILE';
     /** @default 'NORMAL */
-    mode?: 'NORMAL' | 'PREVIEW';
+    mode?: 'NORMAL' | 'PREVIEW' | 'EDIT';
     /** @deprecated use 'mode' instead */
     isPreview?: boolean;
     sections: ISection[];
     navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
+    scrollDownTargetSectionId?: number;
+    onClickEditSection?: (section: ISection) => void;
 };
 export {};

package/dist/storybook-static/{0.bd0d6a01.iframe.bundle.js → 0.1e64cc00.iframe.bundle.js}

@@ -1,4 +1,4 @@
-(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 1783: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
+(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2157: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
             return !0; if (a && b && "object" == typeof a && "object" == typeof b) {
             if (a.constructor !== b.constructor)
                 return !1;
@@ -62,15 +62,15 @@
             if ((error.message || "").match(/stack|recursion/i))
                 return console.warn("react-fast-compare cannot handle circular refs"), !1;
             throw error;
-        } }; }, 1784: function (module, exports, __webpack_require__) {
+        } }; }, 2158: function (module, exports, __webpack_require__) {
             "use strict";
             var warning = function () { };
             module.exports = warning;
-        }, 670: function (module, __webpack_exports__, __webpack_require__) {
+        }, 700: function (module, __webpack_exports__, __webpack_require__) {
             "use strict";
             __webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, "WithTooltipPure", (function () { return WithTooltip_WithTooltipPure; })), __webpack_require__.d(__webpack_exports__, "WithToolTipState", (function () { return WithTooltip_WithToolTipState; })), __webpack_require__.d(__webpack_exports__, "WithTooltip", (function () { return WithTooltip_WithToolTipState; }));
             __webpack_require__(16), __webpack_require__(43), __webpack_require__(26), __webpack_require__(7), __webpack_require__(19), __webpack_require__(12), __webpack_require__(10), __webpack_require__(21), __webpack_require__(15), __webpack_require__(17), __webpack_require__(9), __webpack_require__(30), __webpack_require__(18), __webpack_require__(51);
-            var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(111), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(57), react_dom = __webpack_require__(60), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
+            var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(114), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(58), react_dom = __webpack_require__(61), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
             function Manager(_ref) { var children = _ref.children, _React$useState = react.useState(null), referenceNode = _React$useState[0], setReferenceNode = _React$useState[1], hasUnmounted = react.useRef(!1); react.useEffect((function () { return function () { hasUnmounted.current = !0; }; }), []); var handleSetReferenceNode = react.useCallback((function (node) { hasUnmounted.current || setReferenceNode(node); }), []); return react.createElement(ManagerReferenceNodeContext.Provider, { value: referenceNode }, react.createElement(ManagerReferenceNodeSetterContext.Provider, { value: handleSetReferenceNode }, children)); }
             var unwrapArray = function unwrapArray(arg) { return Array.isArray(arg) ? arg[0] : arg; }, safeInvoke = function safeInvoke(fn) { if ("function" == typeof fn) {
                 for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++)
@@ -227,12 +227,12 @@
                         } }, requiresIfExists: ["offset"] }, { name: "arrow", enabled: !0, phase: "main", fn: function arrow(_ref) { var _state$modifiersData$, state = _ref.state, name = _ref.name, options = _ref.options, arrowElement = state.elements.arrow, popperOffsets = state.modifiersData.popperOffsets, basePlacement = getBasePlacement(state.placement), axis = getMainAxisFromPlacement(basePlacement), len = [left, right].indexOf(basePlacement) >= 0 ? "height" : "width"; if (arrowElement && popperOffsets) {
                             var paddingObject = function toPaddingObject(padding, state) { return mergePaddingObject("number" != typeof (padding = "function" == typeof padding ? padding(Object.assign({}, state.rects, { placement: state.placement })) : padding) ? padding : expandToHashMap(padding, basePlacements)); }(options.padding, state), arrowRect = getLayoutRect(arrowElement), minProp = "y" === axis ? enums_top : left, maxProp = "y" === axis ? bottom : right, endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len], startDiff = popperOffsets[axis] - state.rects.reference[axis], arrowOffsetParent = getOffsetParent(arrowElement), clientSize = arrowOffsetParent ? "y" === axis ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0, centerToReference = endDiff / 2 - startDiff / 2, min = paddingObject[minProp], max = clientSize - arrowRect[len] - paddingObject[maxProp], center = clientSize / 2 - arrowRect[len] / 2 + centerToReference, offset = within(min, center, max), axisProp = axis;
                             state.modifiersData[name] = ((_state$modifiersData$ = {})[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
-                        } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(1783), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
+                        } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2157), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
             function Popper(_ref) { var _ref$placement = _ref.placement, placement = void 0 === _ref$placement ? "bottom" : _ref$placement, _ref$strategy = _ref.strategy, strategy = void 0 === _ref$strategy ? "absolute" : _ref$strategy, _ref$modifiers = _ref.modifiers, modifiers = void 0 === _ref$modifiers ? Popper_EMPTY_MODIFIERS : _ref$modifiers, referenceElement = _ref.referenceElement, onFirstUpdate = _ref.onFirstUpdate, innerRef = _ref.innerRef, children = _ref.children, referenceNode = react.useContext(ManagerReferenceNodeContext), _React$useState = react.useState(null), popperElement = _React$useState[0], setPopperElement = _React$useState[1], _React$useState2 = react.useState(null), arrowElement = _React$useState2[0], setArrowElement = _React$useState2[1]; react.useEffect((function () { setRef(innerRef, popperElement); }), [innerRef, popperElement]); var options = react.useMemo((function () { return { placement: placement, strategy: strategy, onFirstUpdate: onFirstUpdate, modifiers: [].concat(modifiers, [{ name: "arrow", enabled: null != arrowElement, options: { element: arrowElement } }]) }; }), [placement, strategy, onFirstUpdate, modifiers, arrowElement]), _usePopper = function usePopper(referenceElement, popperElement, options) { void 0 === options && (options = {}); var prevOptions = react.useRef(null), optionsWithDefaults = { onFirstUpdate: options.onFirstUpdate, placement: options.placement || "bottom", strategy: options.strategy || "absolute", modifiers: options.modifiers || EMPTY_MODIFIERS }, _React$useState = react.useState({ styles: { popper: { position: optionsWithDefaults.strategy, left: "0", top: "0" }, arrow: { position: "absolute" } }, attributes: {} }), state = _React$useState[0], setState = _React$useState[1], updateStateModifier = react.useMemo((function () { return { name: "updateState", enabled: !0, phase: "write", fn: function fn(_ref) { var state = _ref.state, elements = Object.keys(state.elements); setState({ styles: fromEntries(elements.map((function (element) { return [element, state.styles[element] || {}]; }))), attributes: fromEntries(elements.map((function (element) { return [element, state.attributes[element]]; }))) }); }, requires: ["computeStyles"] }; }), []), popperOptions = react.useMemo((function () { var newOptions = { onFirstUpdate: optionsWithDefaults.onFirstUpdate, placement: optionsWithDefaults.placement, strategy: optionsWithDefaults.strategy, modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, { name: "applyStyles", enabled: !1 }]) }; return react_fast_compare_default()(prevOptions.current, newOptions) ? prevOptions.current || newOptions : (prevOptions.current = newOptions, newOptions); }), [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]), popperInstanceRef = react.useRef(); return useIsomorphicLayoutEffect((function () { popperInstanceRef.current && popperInstanceRef.current.setOptions(popperOptions); }), [popperOptions]), useIsomorphicLayoutEffect((function () { if (null != referenceElement && null != popperElement) {
                 var popperInstance = (options.createPopper || popper_createPopper)(referenceElement, popperElement, popperOptions);
                 return popperInstanceRef.current = popperInstance, function () { popperInstance.destroy(), popperInstanceRef.current = null; };
             } }), [referenceElement, popperElement, options.createPopper]), { state: popperInstanceRef.current ? popperInstanceRef.current.state : null, styles: state.styles, attributes: state.attributes, update: popperInstanceRef.current ? popperInstanceRef.current.update : null, forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null }; }(referenceElement || referenceNode, popperElement, options), state = _usePopper.state, styles = _usePopper.styles, forceUpdate = _usePopper.forceUpdate, update = _usePopper.update, childrenProps = react.useMemo((function () { return { ref: setPopperElement, style: styles.popper, placement: state ? state.placement : placement, hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null, isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null, arrowProps: { style: styles.arrow, ref: setArrowElement }, forceUpdate: forceUpdate || NOOP, update: update || NOOP_PROMISE }; }), [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]); return unwrapArray(children)(childrenProps); }
-            var warning = __webpack_require__(1784), warning_default = __webpack_require__.n(warning);
+            var warning = __webpack_require__(2158), warning_default = __webpack_require__.n(warning);
             function Reference(_ref) { var children = _ref.children, innerRef = _ref.innerRef, setReferenceNode = react.useContext(ManagerReferenceNodeSetterContext), refHandler = react.useCallback((function (node) { setRef(innerRef, node), safeInvoke(setReferenceNode, node); }), [innerRef, setReferenceNode]); return react.useEffect((function () { return function () { return setRef(innerRef, null); }; })), react.useEffect((function () { warning_default()(Boolean(setReferenceNode), "`Reference` should not be used outside of a `Manager` component."); }), [setReferenceNode]), unwrapArray(children)({ ref: refHandler }); }
             var TooltipContext = react_default.a.createContext({}), callAll = function callAll() { for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++)
                 fns[_key] = arguments[_key]; return function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++)
@@ -258,7 +258,7 @@
                 style.transform = "translate3d(" + x + "px, " + y + "px, 0";
             } return react_default.a.createElement(react_popper_tooltip_Tooltip, Object(esm_extends.a)({ arrowProps: arrowProps, closeOnReferenceHidden: closeOnReferenceHidden, isReferenceHidden: isReferenceHidden, placement: placement, update: update, style: style, tooltip: tooltip, trigger: trigger, mutationObserverOptions: mutationObserverOptions }, { clearScheduled: _this2.clearScheduled, hideTooltip: _this2.hideTooltip, innerRef: ref })); })); return react_default.a.createElement(Manager, null, react_default.a.createElement(Reference, { innerRef: getTriggerRef }, (function (_ref4) { var ref = _ref4.ref; return children({ getTriggerProps: _this2.getTriggerProps, triggerRef: ref }); })), this.getState() && (usePortal ? Object(react_dom.createPortal)(popper, portalContainer) : popper)); }, _proto.isControlled = function isControlled() { return void 0 !== this.props.tooltipShown; }, _proto.getState = function getState() { return this.isControlled() ? this.props.tooltipShown : this.state.tooltipShown; }, _proto.isTriggeredBy = function isTriggeredBy(event) { var trigger = this.props.trigger; return trigger === event || Array.isArray(trigger) && trigger.includes(event); }, TooltipTrigger; }(react.Component);
             react_popper_tooltip_TooltipTrigger.defaultProps = { closeOnReferenceHidden: !0, defaultTooltipShown: !1, delayHide: 0, delayShow: 0, followCursor: !1, onVisibilityChange: function noop() { }, placement: "right", portalContainer: canUseDOM() ? document.body : null, trigger: "hover", usePortal: canUseDOM(), mutationObserverOptions: { childList: !0, subtree: !0 }, modifiers: [] };
-            var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(82), __webpack_require__(32), __webpack_require__(169), __webpack_require__(24), __webpack_require__(156)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(108);
+            var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(84), __webpack_require__(32), __webpack_require__(176), __webpack_require__(24), __webpack_require__(163)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(110);
             function _extends() { return _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {
                 var source = arguments[i];
                 for (var key in source)