pds-dev-kit-web-test 0.0.17 → 0.0.19

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

@@ -47,8 +47,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var desktop_1 = require("../../../../../desktop");
-var hybrid_1 = require("../../../../../hybrid");
+var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 function Item(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -62,25 +61,28 @@ function Item(_a) {
         typeof navigationHandler === 'function' &&
             navigationHandler(props.properties.linkType, props.properties.linkSrc);
     };
-    return (react_1.default.createElement(S_Item, { isClickable: isItemClickable, onClick: isItemClickable ? handleClickButton : undefined }, children));
+    return (react_1.default.createElement(S_Item, { "x-dlayout-section-element-name": "Item", isClickable: isItemClickable, onClick: isItemClickable ? handleClickButton : undefined }, children));
 }
 var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (_a) {
     var isClickable = _a.isClickable;
     return isClickable && 'cursor : pointer;';
 });
 function Title(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color },
-        react_1.default.createElement(desktop_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight },
+        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n  }\n"])), function (_a) {
+var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
 });
 function Description(_a) {
     var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color },
-        react_1.default.createElement(desktop_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps))));
+    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-item-element-name": "Description", color: color },
+        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps))));
 }
 var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -88,7 +90,7 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3
 });
 function Image(_a) {
     var imageViewProps = __rest(_a, []);
-    return react_1.default.createElement(hybrid_1.ImageView, __assign({ scaleType: "cover" }, imageViewProps));
+    return react_1.default.createElement(pdsOriginal_1.ImageView, __assign({ "x-dlayout-item-element-name": "Image", scaleType: "cover" }, imageViewProps));
 }
 function Button(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;
@@ -104,32 +106,32 @@ function Button(_a) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     switch (buttonType) {
         case 'A':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'B':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'C':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'D':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'E':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'F':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'G':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'H':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'I':
             return (react_1.default.createElement(S_TextButtonBox, { color: textColor, state: state },
-                react_1.default.createElement(desktop_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
+                react_1.default.createElement(pdsOriginal_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
         default:
             return react_1.default.createElement("button", { type: "button" }, "wrong type");
     }
@@ -170,6 +172,7 @@ var S_TextButtonBox = styled_components_1.default.div(templateObject_5 || (templ
 });
 function HTMLReader(_a) {
     var data = _a.data, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'body2Bold' : _b, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'sysTextPrimary' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, color = _a.color;
+    var isPreview = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).isPreview;
     var contentRef = (0, react_1.useRef)(null);
     /**
       @when : data변경시
@@ -183,11 +186,14 @@ function HTMLReader(_a) {
             contentRef.current.innerHTML = doc.documentElement.innerHTML;
         }
     }, [data]);
-    return (react_1.default.createElement(S_Content, { ref: contentRef, styleTheme: styleTheme, colorTheme: colorTheme, color: color, textAlign: textAlign }));
+    return (react_1.default.createElement(S_Content, { ref: contentRef, styleTheme: styleTheme, colorTheme: colorTheme, color: color, textAlign: textAlign, isPreview: isPreview }));
 }
-var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  text-align: ", ";\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  text-align: ", ";\n"])), function (_a) {
+var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  text-align: ", ";\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  text-align: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_temp_grey_01;
+}, function (_a) {
+    var isPreview = _a.isPreview;
+    return isPreview && 'pointer-events: none;';
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_papp_post_notice_link;

package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TextLabelProps } from '../../../../../desktop/components/TextLabel/TextLabel';
-import { ImageViewProps } from '../../../../../hybrid/components/ImageView/ImageView';
+import { TextLabelProps } from '../../../common/components/pdsOriginal/desktop/TextLabel/TextLabel';
+import { ImageViewProps } from '../../../common/components/pdsOriginal/hybrid/ImageView/ImageView';
 import { ISection, ISectionTitle, ISectionDescription, ISectionButton } from '../../../types';
 declare function Section({ children, ...props }: ISection & {
     children?: React.ReactNode;
@@ -9,7 +9,9 @@ declare namespace Section {
     var Title: ({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
         lineHeight?: number | undefined;
     }) => JSX.Element;
-    var Description: ({ text, color, ...textLabelProps }: ISectionDescription & TextLabelProps) => JSX.Element;
+    var Description: ({ text, color, fontWeight, ...textLabelProps }: ISectionDescription & TextLabelProps & {
+        fontWeight?: string | undefined;
+    }) => JSX.Element;
     var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
     var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, state, borderColor }: ISectionButton) => JSX.Element;
     var context: React.Context<ISection | null>;

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

@@ -50,8 +50,7 @@ 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 desktop_1 = require("../../../../../desktop");
-var hybrid_1 = require("../../../../../hybrid");
+var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 var YouTubeIframe_1 = __importDefault(require("../common/YouTubeIframe"));
 // SECTION
@@ -86,16 +85,10 @@ function Background() {
             height: backgroundWrapper.offsetHeight
         };
         var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
-        var isOverRatio = isHorizontal
-            ? backgroundSize.width / backgroundSize.height > 16 / 9
-            : backgroundSize.width / backgroundSize.height < 9 / 16;
-        var youtubeSize = isHorizontal
-            ? isOverRatio
-                ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
-                : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height }
-            : isOverRatio
-                ? { width: backgroundSize.height * (9 / 16), height: backgroundSize.height }
-                : { width: backgroundSize.width, height: backgroundSize.width * (16 / 9) };
+        var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
+        var youtubeSize = isHorizontal && isOverRatio
+            ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
+            : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
         return youtubeSize;
     };
     (0, react_1.useEffect)(function () {
@@ -112,7 +105,7 @@ function Background() {
     var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
-                return (react_1.default.createElement(hybrid_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
+                return (react_1.default.createElement(pdsOriginal_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
             // case 'VIDEO':
             //   // NOTE VIDEO타입 배경은 최초 scope에서 제외
             //   return <></>;
@@ -145,8 +138,8 @@ var S_YoutubeContainer = styled_components_1.default.div(templateObject_5 || (te
 // TITLE
 function Title(_a) {
     var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.3 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color, lineHeight: lineHeight },
-        react_1.default.createElement(desktop_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-section-element-name": "Title", color: color, lineHeight: lineHeight },
+        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
 var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -157,18 +150,21 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
 });
 // DESCRIPTION
 function Description(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color },
-        react_1.default.createElement(desktop_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
+    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight },
+        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n  }\n"])), function (_a) {
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight : " + fontWeight + ";";
 });
 // IMAGE
 function Image(_a) {
     var imageViewProps = __rest(_a, []);
-    return react_1.default.createElement(hybrid_1.ImageView, __assign({}, imageViewProps, { scaleType: "cover" }));
+    return react_1.default.createElement(pdsOriginal_1.ImageView, __assign({ "x-dlayout-section-element-name": "Image" }, imageViewProps, { scaleType: "cover" }));
 }
 // BUTTON
 function Button(_a) {
@@ -183,32 +179,32 @@ function Button(_a) {
     };
     switch (buttonType) {
         case 'A':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'B':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'C':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'D':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'E':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'F':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'G':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'H':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(desktop_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'I':
             return (react_1.default.createElement(S_TextButtonBox, { color: textColor, state: state },
-                react_1.default.createElement(desktop_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
+                react_1.default.createElement(pdsOriginal_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
         default:
             return react_1.default.createElement("button", { type: "button" }, "wrong type");
     }

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

@@ -30,7 +30,7 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var swiper_1 = require("swiper");
 var react_2 = require("swiper/react");
-var desktop_1 = require("../../../../../desktop");
+var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var swiper_style_1 = __importDefault(require("./swiper.style"));
 function Carousel(_a) {
     var children = _a.children, spaceBetween = _a.spaceBetween, slidesPerView = _a.slidesPerView, slidesPerGroup = _a.slidesPerGroup, breakpoints = _a.breakpoints, _b = _a.mode, mode = _b === void 0 ? 'normal' : _b, _c = _a.autoplayDelay, autoplayDelay = _c === void 0 ? 3 : _c, buttonSpacing = _a.buttonSpacing;
@@ -112,7 +112,7 @@ var PrevButton = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.buttonSpacing, buttonSpacing = _b === void 0 ? '0' : _b, isBeginning = _a.isBeginning, isLocked = _a.isLocked;
     var swiper = ref.current;
     return (react_1.default.createElement(S_ButtonWrapper, { left: buttonSpacing, isLocked: isLocked },
-        react_1.default.createElement(desktop_1.D_IconButton, { fillType: "line", shapeType: "circular", baseSize: "large", iconName: "ic_arrow_left", onClick: function () {
+        react_1.default.createElement(pdsOriginal_1.D_IconButton, { fillType: "line", shapeType: "circular", baseSize: "large", iconName: "ic_arrow_left", onClick: function () {
                 swiper === null || swiper === void 0 ? void 0 : swiper.slidePrev();
             }, state: isBeginning ? 'disabled' : 'normal' })));
 });
@@ -121,7 +121,7 @@ var NextButton = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.buttonSpacing, buttonSpacing = _b === void 0 ? '0' : _b, isEnd = _a.isEnd, isLocked = _a.isLocked;
     var swiper = ref.current;
     return (react_1.default.createElement(S_ButtonWrapper, { right: buttonSpacing, isLocked: isLocked },
-        react_1.default.createElement(desktop_1.D_IconButton, { fillType: "line", shapeType: "circular", baseSize: "large", iconName: "ic_arrow_right", onClick: function () {
+        react_1.default.createElement(pdsOriginal_1.D_IconButton, { fillType: "line", shapeType: "circular", baseSize: "large", iconName: "ic_arrow_right", onClick: function () {
                 swiper === null || swiper === void 0 ? void 0 : swiper.slideNext();
             }, state: isEnd ? 'disabled' : 'normal' })));
 });

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

@@ -28,22 +28,89 @@ 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 YouTubeIframeHelper_1 = require("../../../../utils/YouTubeIframeHelper");
+var TouTubeLinkParser_1 = __importDefault(require("../../../common/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 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 () {
-        YouTubeIframeHelper_1.YouTubeIframeHelper.getReady();
-        YouTubeIframeHelper_1.YouTubeIframeHelper.registerPlayer(PLAYER_ID, src);
-        return function () { return YouTubeIframeHelper_1.YouTubeIframeHelper.cleanUp(); };
-    }, [id, src]);
+        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() {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var player = new window.YT.Player(PLAYER_ID, {
+                videoId: TouTubeLinkParser_1.default.getId(src),
+                playerVars: {
+                    playsinline: 1,
+                    autoplay: 1,
+                    controls: 0
+                },
+                events: {
+                    onReady: onPlayerReady,
+                    onStateChange: onPlayerStateChange
+                }
+            });
+        }
+        catch (error) {
+            // 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);
+        }
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
+        isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
         react_1.default.createElement(S_IframeWrapper, null,
             react_1.default.createElement("div", { id: PLAYER_ID }))));
 }
-var S_IframeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  background-color: ", ";\n\n  iframe {\n    border: 0;\n    height: 100%;\n    margin-left: -100%;\n    width: 300%;\n  }\n"], ["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  background-color: ", ";\n\n  iframe {\n    border: 0;\n    height: 100%;\n    margin-left: -100%;\n    width: 300%;\n  }\n"])), function (_a) {
+var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
     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"])));
 exports.default = YouTubeIframe;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/ContentsCarouselSection.js

@@ -30,7 +30,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsCarouselSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(components_1.Section, __assign({}, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "ContentsCarousel" }, props),
         react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template })));
 }
 function TemplateMatcher(_a) {

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

@@ -62,7 +62,7 @@ function TemplateA() {
             title && (react_1.default.createElement(S_SectionTitleBox, null,
                 react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
             description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-                react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
+                react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
             buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
                 react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
             filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
@@ -83,7 +83,7 @@ function TemplateA() {
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
                         itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                             react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
-                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
+                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                             react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                         itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +116,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
  */
 var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;

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

@@ -62,7 +62,7 @@ function TemplateB() {
             title && (react_1.default.createElement(S_SectionTitleBox, null,
                 react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
             description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-                react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
+                react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
             buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
                 react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
             filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
@@ -83,7 +83,7 @@ function TemplateB() {
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
                         itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                             react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
-                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
+                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                             react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                         itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +116,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
  */
 var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/ContentsSection.js

@@ -30,7 +30,7 @@ var Section_1 = require("../../components/Section");
 var templates_1 = require("./templates");
 function ContentsSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.Section, __assign({}, props),
+    return (react_1.default.createElement(Section_1.Section, __assign({ "x-dlayout-section-type": "Contents" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {

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

@@ -41,7 +41,7 @@ function TemplateA() {
             react_1.default.createElement(S_ContentsBodyWrapper, null,
                 title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
+                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))))));
 }

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

@@ -39,7 +39,7 @@ function TemplateB() {
             react_1.default.createElement(S_ContentsBodyWrapper, null,
                 title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
+                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))),
             sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,

package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/FooterSection.js

@@ -30,7 +30,7 @@ var Section_1 = __importDefault(require("../../components/Section/Section"));
 var templates_1 = require("./templates");
 function FooterSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.default, __assign({}, props),
+    return (react_1.default.createElement(Section_1.default, __assign({ "x-dlayout-section-type": "Footer" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {

package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/InfoBoxSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ISection } from '../../../types';
-declare function ContentsSection({ ...props }: ISection): JSX.Element;
-export default ContentsSection;
+declare function InfoBoxSection({ ...props }: ISection): JSX.Element;
+export default InfoBoxSection;

package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/InfoBoxSection.js

@@ -28,9 +28,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var Section_1 = require("../../components/Section");
 var templates_1 = require("./templates");
-function ContentsSection(_a) {
+function InfoBoxSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.Section, __assign({}, props),
+    return (react_1.default.createElement(Section_1.Section, __assign({ "x-dlayout-section-type": "InfoBox" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {
@@ -42,4 +42,4 @@ function TemplateMather(_a) {
             return react_1.default.createElement("div", null, "wrong template type");
     }
 }
-exports.default = ContentsSection;
+exports.default = InfoBoxSection;

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

@@ -56,7 +56,7 @@ function TemplateA() {
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
         title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
         filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredItems.length }, filteredItems.map(function (item, index, self) {
             var id = item.id;
             var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
@@ -65,7 +65,7 @@ function TemplateA() {
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                         react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "cover" }))),
                     react_1.default.createElement(S_ItemBodyWrapper, null,
-                        itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold" })),
+                        itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
                             react_1.default.createElement(S_CustomDividerBox, null,
                                 react_1.default.createElement(S_CustomWidthDivider, null)),
@@ -104,7 +104,7 @@ var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templat
 });
 var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " auto;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " auto;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_ItemBodyWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
 var S_CustomDividerBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {

package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/IntroSection.js

@@ -30,7 +30,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function IntroSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(components_1.Section, __assign({}, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "Intro" }, props),
         react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template })));
 }
 function TemplateMatcher(_a) {