pds-dev-kit-web-test 0.0.16 → 0.0.18

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,7 +61,7 @@ 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;
@@ -70,8 +69,8 @@ var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject
 });
 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))));
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color },
+        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 color = _a.color;
@@ -79,8 +78,8 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
 });
 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 +87,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 +103,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 +169,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 +183,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;

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
@@ -112,7 +111,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 +144,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;
@@ -158,8 +157,8 @@ 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))));
+    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color },
+        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 color = _a.color;
@@ -168,7 +167,7 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7
 // 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 +182,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,12 +28,12 @@ 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 youtubeLinkParser_1 = __importDefault(require("../../../../utils/youtubeLinkParser"));
+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';
+    var YOUTUBE_SCRIPT_ID = "YOUTUBE_SCRIPT_" + id;
     var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
     (0, react_1.useLayoutEffect)(function () {
         var _a;
@@ -57,7 +57,7 @@ function YouTubeIframe(_a) {
         try {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             var player = new window.YT.Player(PLAYER_ID, {
-                videoId: youtubeLinkParser_1.default.getId(src),
+                videoId: TouTubeLinkParser_1.default.getId(src),
                 playerVars: {
                     playsinline: 1,
                     autoplay: 1,

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/TemplateB/TemplateB.js

@@ -77,12 +77,12 @@ function TemplateB() {
                         ? 'autoplay'
                         : carouselInfiniteLoopMode === 'USE'
                             ? 'loop'
-                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-16px" }, filteredItems.map(function (item) {
+                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
                     var id = item.id;
                     var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                     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: 24 }))),
+                            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" })),
                         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" }))),

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/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/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) {

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

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import type { DynamicLayoutType } from './types';
-declare type DynamicLayoutProps = DynamicLayoutType & {
-    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
-};
+import type { DynamicLayoutProps } from './types';
 export declare const dynamicLayoutContext: import("react").Context<Pick<DynamicLayoutProps, "isPreview" | "navigationHandler">>;
-export {};

package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ImageViewProps } from '../../../../../hybrid/components/ImageView/ImageView';
-import { TextLabelProps } from '../../../../../mobile/components/TextLabel/TextLabel';
+import { ImageViewProps } from '../../../common/components/pdsOriginal/hybrid/ImageView/ImageView';
+import { TextLabelProps } from '../../../common/components/pdsOriginal/mobile/TextLabel/TextLabel';
 import { IItemTitle, IItemDescription, IItemButton, IItem } from '../../../types';
 declare function Item({ children, ...props }: IItem & {
     children: React.ReactNode;

package/dist/src/sub/DynamicLayout/mobile/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 hybrid_1 = require("../../../../../hybrid");
-var mobile_1 = require("../../../../../mobile");
+var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 function Item(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -62,13 +61,13 @@ function Item(_a) {
         typeof navigationHandler === 'function' &&
             navigationHandler(props.properties.linkType, props.properties.linkSrc);
     };
-    return react_1.default.createElement(S_Item, { onClick: isItemClickable ? handleClickButton : undefined }, children);
+    return (react_1.default.createElement(S_Item, { "x-dlayout-section-element-name": "Item", onClick: isItemClickable ? handleClickButton : undefined }, children));
 }
 var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 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(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color },
+        react_1.default.createElement(pdsOriginal_1.M_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 color = _a.color;
@@ -76,8 +75,8 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
 });
 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(mobile_1.M_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.M_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;
@@ -85,7 +84,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;
@@ -101,32 +100,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(mobile_1.M_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.M_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(mobile_1.M_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.M_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(mobile_1.M_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.M_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(mobile_1.M_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.M_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(mobile_1.M_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.M_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(mobile_1.M_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.M_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(mobile_1.M_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.M_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(mobile_1.M_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.M_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(mobile_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
+                react_1.default.createElement(pdsOriginal_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
         default:
             return react_1.default.createElement("button", { type: "button" }, "wrong type");
     }
@@ -167,6 +166,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변경시
@@ -180,11 +180,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/mobile/components/Section/Section.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ImageViewProps } from '../../../../../hybrid/components/ImageView/ImageView';
-import { TextLabelProps } from '../../../../../mobile/components/TextLabel/TextLabel';
+import { ImageViewProps } from '../../../common/components/pdsOriginal/hybrid/ImageView/ImageView';
+import { TextLabelProps } from '../../../common/components/pdsOriginal/mobile/TextLabel/TextLabel';
 import { ISection, ISectionTitle, ISectionDescription, ISectionButton } from '../../../types';
 declare function Section({ children, ...props }: ISection & {
     children?: React.ReactNode;