pds-dev-kit-web 1.9.0-beta.2 → 1.9.0-beta.4

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    UIColor: UIColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default
+    PaletteColor_light: PaletteColor_light_json_1.default,
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -695,4 +695,19 @@ export interface UITheme {
     ui_editor_rightside_title_tabbar_base: string;
     ui_editor_preview_base: string;
     ui_editor_preview_divice_area_border: string;
+    ui_editor_preview_background: string;
+    ui_editor_leftside_base: string;
+    ui_cpnt_sidebar_label_text: string;
+    ui_cpnt_dropdown_base_hover_darktheme: string;
+    ui_cpnt_dropdown_base_pressed_darktheme: string;
+    ui_cpnt_dropdown_base_hover_white: string;
+    ui_cpnt_dropdown_base_pressed_white: string;
+    ui_cpnt_textfield_base_hover_darktheme: string;
+    ui_cpnt_textfield_base_pressed_darktheme: string;
+    ui_cpnt_select_base_hover_darktheme: string;
+    ui_cpnt_select_base_pressed_darktheme: string;
+    ui_cpnt_textfield_base_hover_transparent: string;
+    ui_cpnt_textfield_base_pressed_transparent: string;
+    ui_cpnt_reactionbutton_base_02: string;
+    ui_create_ch_step_prev: string;
 }

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

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

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

@@ -10,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -35,30 +24,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
+var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
-var sections_1 = require("./sections");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, onClickEditSection = _a.onClickEditSection;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
-    return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } }, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section))); })));
-}
-function SectionMatcher(_a) {
-    var props = __rest(_a, []);
-    var schema = props.manifest.schema;
-    switch (schema) {
-        case 'BASE_INTRO':
-            return react_1.default.createElement(sections_1.IntroSection, __assign({}, props));
-        case 'BASE_CONTENTS':
-            return react_1.default.createElement(sections_1.ContentsSection, __assign({}, props));
-        case 'BASE_CONTENTS_CAROUSEL':
-            return react_1.default.createElement(sections_1.ContentsCarouselSection, __assign({}, props));
-        case 'BASE_FOOTER':
-            return react_1.default.createElement(sections_1.FooterSection, __assign({}, props));
-        case 'BASE_INFO_BOX':
-            return react_1.default.createElement(sections_1.InfoBoxSection, __assign({}, props));
-        default:
-            return react_1.default.createElement(react_1.default.Fragment, null);
-    }
+    return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
+        mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
+        mode !== 'EDIT' &&
+            filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)); })));
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ISection } from '../../types';
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
+    filteredSortedSection: ISection[];
+    scrollDownTargetSectionId?: number;
+    editingSectionId?: number;
+    onClickEditSection: (section: ISection) => void;
+}): JSX.Element;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SectionMatcher_1 = require("../SectionMatcher");
+var SectionBox_1 = __importDefault(require("./SectionBox"));
+function EditModeSectionMatcher(_a) {
+    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
+    return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox_1.default, { isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
+        react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)))); })));
+}
+exports.default = EditModeSectionMatcher;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    zIndex: number;
+};
+declare function OverlayBorders({ zIndex }: Props): JSX.Element;
+export default OverlayBorders;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js

@@ -0,0 +1,49 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function OverlayBorders(_a) {
+    var zIndex = _a.zIndex;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Absolute_Border_Top, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Left, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Right, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Bottom, { zIndex: zIndex })));
+}
+exports.default = OverlayBorders;
+var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function SectionBox({ scrollIntoThisSection, isEditing, children, onClick }: {
+    scrollIntoThisSection: boolean;
+    isEditing: boolean;
+    children: React.ReactNode;
+    onClick: () => void;
+}): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js

@@ -0,0 +1,86 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var desktop_1 = require("../../../../desktop");
+var useLazyUnmount_1 = require("../../hooks/useLazyUnmount");
+var OverlayBorders_1 = __importDefault(require("./OverlayBorders"));
+function SectionBox(_a) {
+    var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, onClick = _a.onClick;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var sectionRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(false), isHover = _b[0], setIsHover = _b[1];
+    var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, 200);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!sectionRef) {
+            return;
+        }
+        if (scrollIntoThisSection) {
+            (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [scrollIntoThisSection]);
+    var onMouseEnter = function () {
+        setIsHover(true);
+    };
+    return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
+        isEditing && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(OverlayBorders_1.default, { zIndex: 1 }),
+            react_1.default.createElement(TopRightAbsoluteBox, null,
+                react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
+        isHover && !isEditing && (react_1.default.createElement(DimmedEditOverlay, null,
+            react_1.default.createElement(S_EditButton, null,
+                react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
+        children));
+}
+exports.default = SectionBox;
+var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n"], ["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+});
+var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background-color: transparent;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  background-color: transparent;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_pages_section_dimmed;
+});
+var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"], ["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_71;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_72;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_73;
+}, DimmedEditOverlay);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/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.EditModeSectionMatcher = void 0;
+var EditModeSectionMatcher_1 = require("./EditModeSectionMatcher");
+Object.defineProperty(exports, "EditModeSectionMatcher", { enumerable: true, get: function () { return __importDefault(EditModeSectionMatcher_1).default; } });

package/dist/src/sub/DynamicLayout/components/SectionMatcher/SectionMatcher.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ISection } from '../../types';
+export default function SectionMatcher({ ...props }: ISection): JSX.Element;

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

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var sections_1 = require("../../sections");
+function SectionMatcher(_a) {
+    var props = __rest(_a, []);
+    var schema = props.manifest.schema;
+    switch (schema) {
+        case 'BASE_INTRO':
+            return react_1.default.createElement(sections_1.IntroSection, __assign({}, props));
+        case 'BASE_CONTENTS':
+            return react_1.default.createElement(sections_1.ContentsSection, __assign({}, props));
+        case 'BASE_CONTENTS_CAROUSEL':
+            return react_1.default.createElement(sections_1.ContentsCarouselSection, __assign({}, props));
+        case 'BASE_FOOTER':
+            return react_1.default.createElement(sections_1.FooterSection, __assign({}, props));
+        case 'BASE_INFO_BOX':
+            return react_1.default.createElement(sections_1.InfoBoxSection, __assign({}, props));
+        default:
+            return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+}
+exports.default = SectionMatcher;

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

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

package/dist/src/sub/DynamicLayout/components/SectionMatcher/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.SectionMatcher = void 0;
+var SectionMatcher_1 = require("./SectionMatcher");
+Object.defineProperty(exports, "SectionMatcher", { enumerable: true, get: function () { return __importDefault(SectionMatcher_1).default; } });

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/index.d.ts

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

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/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.useLazyUnmount = void 0;
+var useLazyUnmount_1 = require("./useLazyUnmount");
+Object.defineProperty(exports, "useLazyUnmount", { enumerable: true, get: function () { return __importDefault(useLazyUnmount_1).default; } });

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/useLazyUnmount.d.ts

@@ -0,0 +1,5 @@
+declare type Options = {
+    doUnmount: () => void;
+};
+export default function useLazyUnmount({ doUnmount }: Options, delayTime: number): () => Promise<void>;
+export {};

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

@@ -0,0 +1,61 @@
+"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 (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// NOTE: promise의 delay time은 정확하지 않기때문에, transition 딜레이보다 짧게 가는것이 보기 좋습니다.
+function useLazyUnmount(_a, delayTime) {
+    var doUnmount = _a.doUnmount;
+    function lazyUnmountAsync() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, new Promise(function (resolve) {
+                            setTimeout(function () {
+                                doUnmount();
+                                resolve(true);
+                            }, delayTime);
+                        })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    return lazyUnmountAsync;
+}
+exports.default = useLazyUnmount;

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;