pds-dev-kit-web 1.6.14 → 1.7.0

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

@@ -50,7 +50,7 @@ function UploadTextButton(_a) {
         }
         e.target.value = '';
     };
-    return (react_1.default.createElement(S_UploadTextButton, { 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": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
         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" })));
 }

package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js

@@ -70,7 +70,7 @@ function UserDesktopNavBar(_a) {
             onClickLoginInfo();
         }
     };
-    return (react_1.default.createElement(S_UserDesktopNavBar, null,
+    return (react_1.default.createElement(S_UserDesktopNavBar, { "x-pds-name": "UserDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(S_NavBar, null,
             logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' })) : (react_1.default.createElement(S_TextWrapper, { onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", styleTheme: "headingBold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 }))),

package/dist/src/desktop/components/UserDesktopSideTab/UserDesktopSideTab.js

@@ -17,7 +17,7 @@ function UserDesktopSideTab(_a) {
             item.onClick(e);
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null, itemArray.map(function (item, index) {
+    return (react_1.default.createElement("div", { "x-pds-name": "UserDesktopSideTab", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, itemArray.map(function (item, index) {
         return (react_1.default.createElement(S_TabWrapper, { key: index, onClick: function (e) { return handleClickTabItem(item, e); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, lineLimit: 1, ellipsisMode: "use", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use", wordBreak: "break_all" })));
     })));

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js

@@ -40,7 +40,7 @@ function UserDesktopTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } },
+        return (react_1.default.createElement(S_TabBar, { "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
     }
     if (textArray) {
@@ -49,7 +49,7 @@ function UserDesktopTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
+        return (react_1.default.createElement(S_TabBar, { "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
                 handleClick_1(item);
             } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -13,11 +13,11 @@ var components_1 = require("../../../../../../common/components");
 var WFA = function (_a) {
     var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(S_SideArea, { areaColor: areaColor },
-                react_1.default.createElement(S_StepContent, null, stepContent)),
-            react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-                react_1.default.createElement(S_Content1, null, content1)))))));
+        react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(S_StepArea, { "x-pds-name": "StepArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", areaColor: areaColor },
+                react_1.default.createElement(S_StepContent, { "x-pds-name": "StepContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, stepContent)),
+            react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", areaColor: areaColor },
+                react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, content1)))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -26,7 +26,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
+var S_StepArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js

@@ -12,12 +12,12 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFB = function (_a) {
     var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_SideArea, { areaColor: areaColor },
-            react_1.default.createElement(S_StepContent, null, stepContent)),
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1),
-            react_1.default.createElement(S_Content2, null, content2))))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_StepArea, { "x-pds-name": "StepArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", areaColor: areaColor },
+            react_1.default.createElement(S_StepContent, { "x-pds-name": "StepContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, stepContent)),
+        react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, content1),
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, content2))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -26,7 +26,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
+var S_StepArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFC.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFC = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFD.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFD = function (_a) {
     var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-        react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js

@@ -12,11 +12,11 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFE = function (_a) {
     var layoutType = _a.layoutType, stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_SideArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_StepContent, { layoutType: layoutType }, stepContent)),
-        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_StepArea, { "x-pds-name": "StepArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_StepContent, { "x-pds-name": "StepContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType }, stepContent)),
+        react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType }, content1))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -31,7 +31,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_StepArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFE_1: 'height: 100%;',

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFF.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFF = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFG.js

@@ -13,10 +13,10 @@ var components_1 = require("../../../../../../common/components");
 var WFG = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFH.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFH = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFI.js

@@ -13,10 +13,10 @@ var components_1 = require("../../../../../../common/components");
 var WFI = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFJ.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFJ = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFK.js

@@ -13,10 +13,10 @@ var components_1 = require("../../../../../../common/components");
 var WFK = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { areaColor: areaColor },
-            react_1.default.createElement(S_Content2, null, content2))))));
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK" }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK" }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/PageMenu.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var PageMenu = function (_a) {
     var pageMenuContent = _a.pageMenuContent;
-    return (react_1.default.createElement(S_PageMenuContainer, null,
-        react_1.default.createElement(S_PageMenuArea, null,
-            react_1.default.createElement(S_PageMenuContent, null, pageMenuContent))));
+    return (react_1.default.createElement(S_PageMenuContainer, { "x-pds-name": "PageMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+        react_1.default.createElement(S_PageMenuArea, { "x-pds-name": "PageMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_PageMenuContent, { "x-pds-name": "PageMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, pageMenuContent))));
 };
 var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/SubMenuContainer/variation/LeftSubMenu.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var LeftSubMenu = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_LeftSubMenuContainer, null,
-        react_1.default.createElement(S_LeftSubMenuArea, null,
-            react_1.default.createElement(S_LeftSubMenuContent, null, children))));
+    return (react_1.default.createElement(S_LeftSubMenuContainer, { "x-pds-name": "SubMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+        react_1.default.createElement(S_LeftSubMenuArea, { "x-pds-name": "SubMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_LeftSubMenuContent, { "x-pds-name": "SubMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children))));
 };
 var S_LeftSubMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/TabMenuContainer/variation/TabMenu.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var TabMenu = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_TabMenuContainer, null,
-        react_1.default.createElement(S_TabMenuArea, null,
-            react_1.default.createElement(S_TabMenuContent, null, children))));
+    return (react_1.default.createElement(S_TabMenuContainer, { "x-pds-name": "TabMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+        react_1.default.createElement(S_TabMenuArea, { "x-pds-name": "TabMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_TabMenuContent, { "x-pds-name": "TabMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children))));
 };
 var S_TabMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/LayoutWF.js

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var LayoutWF = function (_a) {
     var children = _a.children;
-    return react_1.default.createElement(S_LayoutWF, null, children);
+    return (react_1.default.createElement(S_LayoutWF, { "x-pds-name": "LayoutWF", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children));
 };
 var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"])));
 exports.default = LayoutWF;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WSA = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSA", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSA", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSA" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSB.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WSB = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSB", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSB", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSB" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 960px;\n  overflow: hidden;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 960px;\n  overflow: hidden;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSC.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WSC = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSC", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSC", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSC" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WSD = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSD", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSD", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSD" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js

@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WSE = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1),
-        react_1.default.createElement(S_Content2, null, content2)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSE", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSE", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSE" }, content1),
+        react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSE" }, content2)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.js

@@ -13,10 +13,10 @@ var components_1 = require("../../../../../../common/components");
 var WSF = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSF", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSF", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSF", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSF", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSF", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSF", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.js

@@ -13,10 +13,10 @@ var components_1 = require("../../../../../../common/components");
 var WSG = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSG", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSG", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSG", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSG", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSG", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSG", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSH.js

@@ -13,10 +13,10 @@ var components_1 = require("../../../../../../common/components");
 var WSH = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSH", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSH", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSH", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSH", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSH", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSH", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  flex-grow: 1;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  flex-grow: 1;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWS/Containers/GlobalMenuContainer/variation/GlobalMenu.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var GlobalMenu = function (_a) {
     var globalMenuContent = _a.globalMenuContent;
-    return (react_1.default.createElement(S_GlobalMenuContainer, null,
-        react_1.default.createElement(S_GlobalMenuArea, null,
-            react_1.default.createElement(S_GlobalMenuContent, null, globalMenuContent))));
+    return (react_1.default.createElement(S_GlobalMenuContainer, { "x-pds-name": "GlobalMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+        react_1.default.createElement(S_GlobalMenuArea, { "x-pds-name": "GlobalMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_GlobalMenuContent, { "x-pds-name": "GlobalMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, globalMenuContent))));
 };
 var S_GlobalMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  background-color: ", ";\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/PageMenuContainer/variation/PageMenu.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var PageMenu = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_PageMenuContainer, null,
-        react_1.default.createElement(S_PageMenuArea, null,
-            react_1.default.createElement(S_PageMenuBarContent, null, children))));
+    return (react_1.default.createElement(S_PageMenuContainer, { "x-pds-name": "PageMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+        react_1.default.createElement(S_PageMenuArea, { "x-pds-name": "PageMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_PageMenuBarContent, { "x-pds-name": "PageMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children))));
 };
 var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/LayoutWS.js

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var LayoutWS = function (_a) {
     var globalMenuContainer = _a.globalMenuContainer, children = _a.children;
-    return (react_1.default.createElement(S_LayoutWS, null,
+    return (react_1.default.createElement(S_LayoutWS, { "x-pds-name": "LayoutWS", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
         react_1.default.createElement(S_LeftWrapper, null, globalMenuContainer),
         react_1.default.createElement(S_RightWrapper, null, children)));
 };

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTA.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WTA = function (_a) {
     var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA", layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTB.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WTB = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTB", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTB", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTB" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTC.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WTC = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTC", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTC", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTC" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;