pds-dev-kit-web-test 0.1.1 → 0.1.2

package/dist/src/desktop/panels/DesktopTutorialModal/Components/SideTab/index.d.ts

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

package/dist/src/desktop/panels/DesktopTutorialModal/Components/SideTab/index.js

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

package/dist/src/desktop/panels/DesktopTutorialModal/Components/index.d.ts

@@ -0,0 +1,2 @@
+import { SideTab } from './SideTab';
+export { SideTab };

package/dist/src/desktop/panels/DesktopTutorialModal/Components/index.js

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

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PDSTextType } from '../../../common';
+export declare type DesktopTutorialModalInfoType = {
+    sideTabTitleText: PDSTextType;
+    infoTitleText?: PDSTextType;
+    infoDescText?: PDSTextType;
+    imageSrc?: string;
+    btnMode?: 'none' | 'btn_amount1';
+    btn1Text?: PDSTextType;
+    onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare type DesktopTutorialModalProps = {
+    modalTitleText: PDSTextType;
+    infoArray: DesktopTutorialModalInfoType[];
+    onClose: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function DesktopTutorialModal({ modalTitleText, infoArray, onClose }: DesktopTutorialModalProps): React.ReactPortal;
+export default DesktopTutorialModal;

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.js

@@ -0,0 +1,153 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var hybrid_1 = require("../../../hybrid");
+var components_1 = require("../../components");
+var Components_1 = require("./Components");
+function DesktopTutorialModal(_a) {
+    var modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, onClose = _a.onClose;
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'DesktopTutorialModal');
+        return modalRoot;
+    })[0];
+    (0, react_1.useLayoutEffect)(function () {
+        var root = document.getElementById('root');
+        if (!root) {
+            return;
+        }
+        root.appendChild(container);
+        return function () {
+            root.removeChild(container);
+        };
+    }, []);
+    var handleClickCloseBtn = function (e) {
+        if (onClose) {
+            onClose(e);
+        }
+    };
+    var _b = (0, react_1.useState)(infoArray[0].sideTabTitleText + "0"), selectedItem = _b[0], setSelectedItem = _b[1];
+    var sideTabTitleArray = infoArray.map(function (data, index) {
+        return {
+            title: data.sideTabTitleText,
+            isActive: selectedItem === "" + data.sideTabTitleText + index,
+            onClick: function () { return setSelectedItem("" + data.sideTabTitleText + index); }
+        };
+    });
+    return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ModalOverlay, null),
+        react_1.default.createElement(S_ModalWrapper, { "x-pds-name": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_LeftPanel, null,
+                react_1.default.createElement(S_Header, null,
+                    react_1.default.createElement(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" })),
+                react_1.default.createElement(S_SideTabWrapper, null,
+                    react_1.default.createElement(Components_1.SideTab, { itemArray: sideTabTitleArray }),
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_i" }))),
+            react_1.default.createElement(S_RightPanel, null, infoArray
+                .filter(function (data, index) { return selectedItem === "" + data.sideTabTitleText + index; })
+                .map(function (data) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }),
+                react_1.default.createElement(S_InfoBox, null,
+                    react_1.default.createElement(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "subTitleBold" }),
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+                    react_1.default.createElement(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })),
+                data.btnMode === 'btn_amount1' && (react_1.default.createElement(S_Footer, null,
+                    react_1.default.createElement(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }))))); })),
+            react_1.default.createElement(S_IconButtonWrapper, null,
+                react_1.default.createElement(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn })))), container);
+}
+var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_dimmed;
+}, animationStyle_1.modalOverlayOnAni);
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  min-height: 560px;\n  height: 80vh;\n  max-height: 720px;\n  min-width: 960px;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 50vw;\n  overflow: hidden;\n  display: flex;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  min-height: 560px;\n  height: 80vh;\n  max-height: 720px;\n  min-width: 960px;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 50vw;\n  overflow: hidden;\n  display: flex;\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation5;
+}, animationStyle_1.modalOnAni);
+var S_LeftPanel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 360px;\n  display: flex;\n  flex-direction: column;\n"], ["\n  width: 360px;\n  display: flex;\n  flex-direction: column;\n"])));
+var S_Header = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_SideTabWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-y: auto;\n  flex: 1;\n"], ["\n  overflow-y: auto;\n  flex: 1;\n"])));
+var S_RightPanel = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 360px);\n  background-color: ", ";\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 360px);\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tutorialmodal_info_base;
+});
+var S_InfoBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-y: overlay;\n  flex: 1;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  ", "\n"], ["\n  box-sizing: border-box;\n  overflow-y: overlay;\n  flex: 1;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, scrollbarStyle_1.scrollbarStyle);
+var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  min-height: 88px;\n  height: 88px;\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  min-height: 88px;\n  height: 88px;\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+});
+var S_IconButtonWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n"], ["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = DesktopTutorialModal;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/desktop/panels/DesktopTutorialModal/index.d.ts

@@ -0,0 +1,3 @@
+import { DesktopTutorialModalInfoType } from './DesktopTutorialModal';
+export { default as DesktopTutorialModal } from './DesktopTutorialModal';
+export { DesktopTutorialModalInfoType };

package/dist/src/desktop/panels/DesktopTutorialModal/index.js

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

package/dist/src/desktop/panels/index.d.ts

@@ -2,5 +2,7 @@ import { AnnotationSheet } from './AnnotationSheet';
 import { ContentSheet } from './ContentSheet';
 import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopHeadlessModal } from './DesktopHeadlessModal';
+import { DesktopTutorialModal, DesktopTutorialModalInfoType } from './DesktopTutorialModal';
 import { SectionSheet } from './SectionSheet';
-export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopHeadlessModal, SectionSheet };
+export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopHeadlessModal, DesktopTutorialModal, SectionSheet };
+export { DesktopTutorialModalInfoType };

package/dist/src/desktop/panels/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionSheet = exports.DesktopHeadlessModal = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+exports.SectionSheet = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
 var AnnotationSheet_1 = require("./AnnotationSheet");
 Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
 var ContentSheet_1 = require("./ContentSheet");
@@ -9,5 +9,7 @@ var DesktopBasicModal_1 = require("./DesktopBasicModal");
 Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
 var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
 Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
+var DesktopTutorialModal_1 = require("./DesktopTutorialModal");
+Object.defineProperty(exports, "DesktopTutorialModal", { enumerable: true, get: function () { return DesktopTutorialModal_1.DesktopTutorialModal; } });
 var SectionSheet_1 = require("./SectionSheet");
 Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -88,7 +88,9 @@ function TextFieldBase(_a) {
         // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
         if (textLineType === 'single' && preventBlankMode === 'all') {
             var value = e.target.value;
-            e.target.value = value.replace(/ /g, '');
+            if (value != null) {
+                e.target.value = value.replace(/ /g, '');
+            }
         }
         if (onChange) {
             onChange(e);
@@ -98,7 +100,9 @@ function TextFieldBase(_a) {
         // NOTE: preventBlankMode는 input에만 적용 가능
         // NOTE: preventBlankMode === 'trim'일 경우에는 무조건 onBlur 시점에 적용
         if (textLineType === 'single' && preventBlankMode === 'trim') {
-            setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
+            if (e.target.value != null) {
+                setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
+            }
         }
         if (onBlur && onTarget) {
             var relatedTarget = e.relatedTarget;

package/dist/src/mobile/components/TextButton/TextButton.d.ts

@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;

package/dist/src/mobile/components/TextButton/TextButton.js

@@ -63,7 +63,8 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
-    white: 'sysTextWhite'
+    white: 'sysTextWhite',
+    white2: 'sysTextWhite'
 };
 function TextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
@@ -82,11 +83,32 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme === 'white'
-        ? theme.ui_cpnt_button_white_base_pressed
-        : theme.ui_cpnt_button_line_base_pressed;
+var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+});
+var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_pressed;
+});
+var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
+});
+var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+        case 'red':
+        case 'grey_01':
+            return colorThemeDefault;
+        case 'white':
+            return colorThemeWhite;
+        case 'white2':
+            return colorThemeWhite2;
+        default:
+            return colorThemeDefault;
+    }
 }, function (_a) {
     var size = _a.size;
     return size &&
@@ -109,4 +131,4 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = TextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/mobile/components/TextField/TextField.d.ts

@@ -35,7 +35,8 @@ export declare type TextFieldProps = {
     onClickIBtn2?: () => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

package/dist/src/mobile/components/TextField/TextField.js

@@ -32,7 +32,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
     var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -80,6 +80,11 @@ function TextField(_a) {
             onKeyUp(e);
         }
     }
+    function handleKeyDown(e) {
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+    }
     function handleChange(e) {
         if (validationPoint === 'onChange') {
             validateOnChange(e);
@@ -100,10 +105,10 @@ function TextField(_a) {
     }
     var S_TextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'single') {
             var deleteIconColor = 'ui_cpnt_button_icon_disabled';
@@ -118,7 +123,7 @@ function TextField(_a) {
                 }
             }
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
+                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }),
                 react_1.default.createElement(S_IconBox, null,
                     iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                             {

package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js

@@ -41,7 +41,8 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
-    white: 'sysTextWhite'
+    white: 'sysTextWhite',
+    white2: 'sysTextWhite'
 };
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
@@ -51,7 +52,7 @@ function UploadTextButton(_a) {
         }
         e.target.value = '';
     };
-    return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
+    return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
@@ -62,12 +63,35 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+});
+var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_pressed;
+});
+var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
+});
+var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+        case 'red':
+        case 'grey_01':
+            return colorThemeDefault;
+        case 'white':
+            return colorThemeWhite;
+        case 'white2':
+            return colorThemeWhite2;
+        default:
+            return colorThemeDefault;
+    }
 }, function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
@@ -90,4 +114,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadTextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -86,7 +86,7 @@ function Background() {
         if (backgroundMediaType !== 'YOUTUBE')
             return;
         setYoutubeSize(getResponsiveYoutubeSize());
-    }, [getResponsiveYoutubeSize]);
+    }, [getResponsiveYoutubeSize, backgroundMediaSrc]);
     (0, react_1.useEffect)(function () {
         if (backgroundMediaType !== 'YOUTUBE')
             return;

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

@@ -85,6 +85,13 @@ function YouTubeIframe(_a) {
         });
         (_a = event.target) === null || _a === void 0 ? void 0 : _a.destroy();
     }, []);
+    var handleCrossOriginError = (0, react_1.useCallback)(function () {
+        if (!playerRef.current)
+            return;
+        playerRef.current.destroy();
+        setError(null);
+        onYouTubeIframeAPIReady();
+    }, [playerRef.current, setError]);
     var onYouTubeIframeAPIReady = (0, react_1.useCallback)(function () {
         if (!videoId || !PLAYER_ID) {
             return;
@@ -147,22 +154,32 @@ function YouTubeIframe(_a) {
         if (!playerRef.current)
             return;
         if (!videoId) {
-            (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.stopVideo();
+            try {
+                (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.stopVideo();
+            }
+            catch (_b) {
+                handleCrossOriginError();
+            }
             return;
         }
         if (videoId !== prevVideoId) {
-            playerRef.current.loadVideoById({
-                videoId: videoId,
-                playerVars: {
-                    playsinline: 1,
-                    autoplay: 1,
-                    controls: 0,
-                    iv_load_policy: 3,
-                    listType: 'playlist',
-                    playlist: videoId,
-                    loop: 1
-                }
-            });
+            try {
+                playerRef.current.loadVideoById({
+                    videoId: videoId,
+                    playerVars: {
+                        playsinline: 1,
+                        autoplay: 1,
+                        controls: 0,
+                        iv_load_policy: 3,
+                        listType: 'playlist',
+                        playlist: videoId,
+                        loop: 1
+                    }
+                });
+            }
+            catch (_c) {
+                handleCrossOriginError();
+            }
         }
     }, [playerRef, videoId, prevVideoId, onYouTubeIframeAPIReady]);
     /**

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

@@ -5,6 +5,7 @@ exports.samplePageIntroSection = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 8,
+    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBE',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -276,6 +277,7 @@ exports.samplePageContentsCarouselSection = {
         }
     ],
     id: 9,
+    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBF',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -369,6 +371,7 @@ exports.samplePageIntroSection2 = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 10,
+    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBG',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -465,6 +468,7 @@ exports.samplePageContentsSection = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 11,
+    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBH',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -640,6 +644,7 @@ exports.samplePageInfoBoxSection = {
         }
     ],
     id: 12,
+    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBI',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -726,6 +731,7 @@ exports.samplePageIntroSection3 = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 13,
+    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBJ',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -845,6 +851,7 @@ exports.samplePageFooterSection = {
         }
     ],
     id: 14,
+    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBK',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: ['title', 'description'],

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

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

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

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