pds-dev-kit-web-test 0.0.11 → 0.0.13

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

@@ -6,50 +6,51 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, container1Ref = _a.container1Ref;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        WTA_1: (react_1.default.createElement(variation_1.WTA, { layoutType: "WTA_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTA_2: (react_1.default.createElement(variation_1.WTA, { layoutType: "WTA_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTA_3: (react_1.default.createElement(variation_1.WTA, { layoutType: "WTA_3", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTB_1: react_1.default.createElement(variation_1.WTB, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WTC_1: react_1.default.createElement(variation_1.WTC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WTD_1: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTD_2: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTD_3: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTD_4: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTD_5: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTD_6: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTE_1: react_1.default.createElement(variation_1.WTE, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WTF_1: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTF_2: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTF_3: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTF_4: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTF_5: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTF_6: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTG_1: react_1.default.createElement(variation_1.WTG, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WTH_1: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTH_2: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTH_3: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_3", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTI_1: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTI_2: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTJ_1: (react_1.default.createElement(variation_1.WTJ, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTK_1: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTK_2: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTK_3: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_3", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTL_1: react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTT_1: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTT_2: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTU_1: (react_1.default.createElement(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        WTA_1: (react_1.default.createElement(variation_1.WTA, { layoutType: "WTA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTA_2: (react_1.default.createElement(variation_1.WTA, { layoutType: "WTA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTA_3: (react_1.default.createElement(variation_1.WTA, { layoutType: "WTA_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTB_1: (react_1.default.createElement(variation_1.WTB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTC_1: (react_1.default.createElement(variation_1.WTC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTD_1: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTD_2: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTD_3: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTD_4: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTD_5: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTD_6: (react_1.default.createElement(variation_1.WTD, { layoutType: "WTD_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTE_1: (react_1.default.createElement(variation_1.WTE, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTF_1: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTF_2: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTF_3: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTF_4: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTF_5: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTF_6: (react_1.default.createElement(variation_1.WTF, { layoutType: "WTF_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTG_1: (react_1.default.createElement(variation_1.WTG, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTH_1: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTH_2: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTH_3: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTI_1: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTI_2: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTJ_1: (react_1.default.createElement(variation_1.WTJ, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTK_1: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
+        WTK_2: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
+        WTK_3: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
+        WTK_4: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_4", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
+        WTL_1: (react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTT_1: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTT_2: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
+        WTU_1: (react_1.default.createElement(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

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

@@ -4,6 +4,7 @@ export declare type WTAProps = {
     layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTA: ({ content1, layoutType, containerColor, areaColor }: WTAProps) => JSX.Element;
+declare const WTA: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1 }: WTAProps) => JSX.Element;
 export default WTA;

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 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;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    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.d.ts

@@ -3,6 +3,7 @@ export declare type WTBProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTB: ({ content1, containerColor, areaColor }: WTBProps) => JSX.Element;
+declare const WTB: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WTBProps) => JSX.Element;
 export default WTB;

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 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;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    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.d.ts

@@ -3,6 +3,7 @@ export declare type WTCProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTC: ({ content1, containerColor, areaColor }: WTCProps) => JSX.Element;
+declare const WTC: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WTCProps) => JSX.Element;
 export default WTC;

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 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;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    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;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTD.d.ts

@@ -5,6 +5,8 @@ export declare type WTDProps = {
     layoutType: 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WTD: ({ content1, content2, layoutType, containerColor, areaColor }: WTDProps) => JSX.Element;
+declare const WTD: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WTDProps) => JSX.Element;
 export default WTD;

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

@@ -9,15 +9,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTD = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    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 },
-            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 },
-            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": "WTD", 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": "WTD", 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": "WTD", 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": "WTD", 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": "WTD", 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": "WTD", 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/LayoutWT/Containers/ContentsContainer/variation/WTE.d.ts

@@ -3,6 +3,7 @@ export declare type WTEProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTE: ({ content1, containerColor, areaColor }: WTEProps) => JSX.Element;
+declare const WTE: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WTEProps) => JSX.Element;
 export default WTE;

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTE = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    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": "WTE", 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": "WTE", 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": "WTE" }, 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/LayoutWT/Containers/ContentsContainer/variation/WTF.d.ts

@@ -5,6 +5,8 @@ export declare type WTFProps = {
     layoutType: 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WTF: ({ content1, content2, layoutType, containerColor, areaColor }: WTFProps) => JSX.Element;
+declare const WTF: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WTFProps) => JSX.Element;
 export default WTF;

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

@@ -9,15 +9,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTF = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    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 },
-            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 },
-            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": "WTF", 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": "WTF", 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": "WTF", 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": "WTF", 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": "WTF", 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": "WTF", 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/LayoutWT/Containers/ContentsContainer/variation/WTG.d.ts

@@ -3,6 +3,7 @@ export declare type WTGProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTG: ({ content1, containerColor, areaColor }: WTGProps) => JSX.Element;
+declare const WTG: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WTGProps) => JSX.Element;
 export default WTG;

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTG = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    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": "WTG", 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": "WTG", 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": "WTG" }, 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/LayoutWT/Containers/ContentsContainer/variation/WTH.d.ts

@@ -4,6 +4,7 @@ export declare type WTHProps = {
     layoutType: 'WTH_1' | 'WTH_2' | 'WTH_3';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTH: ({ content1, layoutType, containerColor, areaColor }: WTHProps) => JSX.Element;
+declare const WTH: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1 }: WTHProps) => JSX.Element;
 export default WTH;

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTH = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    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": "WTH", 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": "WTH", 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": "WTH", layoutType: layoutType }, 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  min-width: 1200px;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTI.d.ts

@@ -4,6 +4,7 @@ export declare type WTIProps = {
     layoutType: 'WTI_1' | 'WTI_2';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTI: ({ content1, containerColor, areaColor, layoutType }: WTIProps) => JSX.Element;
+declare const WTI: ({ content1, containerColor, areaColor, layoutType, isLoadingContainer1 }: WTIProps) => JSX.Element;
 export default WTI;

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTI = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, isLoadingContainer1 = _a.isLoadingContainer1;
+    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": "WTI", 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": "WTI", 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": "WTI" }, 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  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"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTJ.d.ts

@@ -5,6 +5,8 @@ export declare type WTJProps = {
     layoutType?: 'WTJ_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WTJ: ({ content1, content2, layoutType, containerColor, areaColor }: WTJProps) => JSX.Element;
+declare const WTJ: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WTJProps) => JSX.Element;
 export default WTJ;

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

@@ -9,15 +9,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTJ = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTJ_1' : _b, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTJ_1' : _b, 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 },
-            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 },
-            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": "WTJ", 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": "WTJ", 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": "WTJ", 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": "WTJ", 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": "WTJ", 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": "WTJ", 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: 640px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  flex: 1;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 640px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  flex: 1;\n  height: 100%;\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTK.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
 export declare type WTKProps = {
     content1?: JSX.Element;
-    layoutType: 'WTK_1' | 'WTK_2' | 'WTK_3';
+    layoutType: 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTK: ({ content1, layoutType, containerColor, areaColor }: WTKProps) => JSX.Element;
+declare const WTK: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1, container1Ref }: WTKProps) => JSX.Element;
 export default WTK;

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

@@ -3,19 +3,44 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTK = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, container1Ref = _a.container1Ref;
+    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": "WTK", layoutType: layoutType, containerColor: containerColor, ref: container1Ref }, 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": "WTK", 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": "WTK", layoutType: layoutType }, 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 scrollAbleContainer = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var scrollUnableContainer = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var containerWTK_1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: 480px;\n  ", "\n"], ["\n  min-width: 480px;\n  ", "\n"])), scrollAbleContainer);
+var containerWTK_2 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-width: 600px;\n  ", "\n"], ["\n  min-width: 600px;\n  ", "\n"])), scrollAbleContainer);
+var containerWTK_3 = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 768px;\n  ", "\n"], ["\n  min-width: 768px;\n  ", "\n"])), scrollAbleContainer);
+var containerWTK_4 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-width: 480px;\n  ", "\n"], ["\n  min-width: 480px;\n  ", "\n"])), scrollUnableContainer);
+var S_ContentsContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\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\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;
     return theme.ui_contentscontainer_background_wt_m;
 }, function (_a) {
@@ -24,12 +49,13 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
 }, function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WTK_1: 'min-width: 480px;',
-        WTK_2: 'min-width: 600px;',
-        WTK_3: 'min-width: 768px;'
+        WTK_1: containerWTK_1,
+        WTK_2: containerWTK_2,
+        WTK_3: containerWTK_3,
+        WTK_4: containerWTK_4
     }[layoutType]);
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentsarea_background_wt_m;
 }, function (_a) {
@@ -43,12 +69,21 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templa
     return ({
         WTK_1: 'width: 480px;',
         WTK_2: 'width: 600px;',
-        WTK_3: 'width: 768px;'
+        WTK_3: 'width: 768px;',
+        WTK_4: 'width: 480px;'
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  ", ";\n"], ["\n  height: 100%;\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTK_1: '',
+        WTK_2: '',
+        WTK_3: '',
+        WTK_4: 'overflow: hidden;'
+    }[layoutType]);
+});
 exports.default = WTK;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTL.d.ts

@@ -3,6 +3,7 @@ export declare type WTLProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WTL: ({ content1, containerColor, areaColor }: WTLProps) => JSX.Element;
+declare const WTL: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WTLProps) => JSX.Element;
 export default WTL;