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

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTL.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 WTL = 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": "WTL", 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": "WTL", 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": "WTL" }, 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/WTM.d.ts

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

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTM.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 WTM = 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": "WTM", 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": "WTM", 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": "WTM", 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/WTN.d.ts

@@ -4,7 +4,8 @@ export declare type WTNProps = {
     layoutType: 'WTN_1' | 'WTN_2' | 'WTN_3';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTN: ({ content1, containerColor, areaColor, layoutType, container1Ref }: WTNProps) => JSX.Element;
+declare const WTN: ({ content1, containerColor, areaColor, layoutType, isLoadingContainer1, container1Ref }: WTNProps) => JSX.Element;
 export default WTN;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.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 WTN = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
-        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, 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": "WTN", 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": "WTN", 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": "WTN" }, 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/WTO.d.ts

@@ -4,7 +4,8 @@ export declare type WTOProps = {
     layoutType: 'WTO_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTO: ({ content1, layoutType, containerColor, areaColor, container1Ref }: WTOProps) => JSX.Element;
+declare const WTO: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1, container1Ref }: WTOProps) => JSX.Element;
 export default WTO;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTO.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 WTO = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
-        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, 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": "WTO", 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": "WTO", 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": "WTO", 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  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\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/WTP.d.ts

@@ -4,7 +4,8 @@ export declare type WTPProps = {
     layoutType: 'WTP_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTP: ({ content1, layoutType, containerColor, areaColor, container1Ref }: WTPProps) => JSX.Element;
+declare const WTP: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1, container1Ref }: WTPProps) => JSX.Element;
 export default WTP;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.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 WTP = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
-        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, 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": "WTP", 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": "WTP", 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": "WTP", 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  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\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/WTQ.d.ts

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

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTQ.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 WTQ = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTQ_1' : _b, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTQ_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": "WTQ", 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": "WTQ", 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": "WTQ", 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": "WTQ", 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": "WTQ", 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": "WTQ", 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  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"])), function (_a) {

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

@@ -5,7 +5,8 @@ export declare type WTSProps = {
     layoutType: 'WTS_1' | 'WTS_2';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTS: ({ content1, content2, containerColor, areaColor, layoutType, container1Ref }: WTSProps) => JSX.Element;
+declare const WTS: ({ content1, content2, containerColor, areaColor, layoutType, isLoadingContainer1, container1Ref }: WTSProps) => JSX.Element;
 export default WTS;

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

@@ -28,15 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var hybrid_1 = require("../../../../../../hybrid");
 var WTS = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
-        react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1)),
+    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, 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": "WTS", layoutType: layoutType, containerColor: containerColor, ref: container1Ref }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, 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": "WTS", 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": "WTS" }, content1)),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
-        react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, null, content2))));
+        react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTS", 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": "WTS" }, content2))))));
 };
 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/WTT.d.ts

@@ -5,7 +5,8 @@ export declare type WTTProps = {
     layoutType: 'WTT_1' | 'WTT_2';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTT: ({ content1, content2, containerColor, areaColor, layoutType, container1Ref }: WTTProps) => JSX.Element;
+declare const WTT: ({ content1, content2, containerColor, areaColor, layoutType, isLoadingContainer1, container1Ref }: WTTProps) => JSX.Element;
 export default WTT;

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

@@ -28,15 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var hybrid_1 = require("../../../../../../hybrid");
 var WTT = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
-        react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1)),
+    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, 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": "WTT", layoutType: layoutType, containerColor: containerColor, ref: container1Ref }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, 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": "WTT", 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": "WTT" }, content1)),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
-        react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, null, content2))));
+        react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTT", 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": "WTT" }, content2))))));
 };
 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/WTU.d.ts

@@ -5,9 +5,11 @@ export declare type WTUProps = {
     layoutType?: 'WTU_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
 export declare type StyleProps = {
     $contentsArea2Width?: number;
 };
-declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor }: WTUProps) => JSX.Element;
+declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WTUProps) => JSX.Element;
 export default WTU;

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

@@ -28,9 +28,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTU = function (_a) {
     var _b, _c;
-    var content1 = _a.content1, content2 = _a.content2, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTU_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var content1 = _a.content1, content2 = _a.content2, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTU_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     var contentsArea2Ref = (0, react_1.useRef)(null);
     var _e = (0, react_1.useState)((_c = (_b = contentsArea2Ref.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 720), contentsArea2Width = _e[0], setContentsArea2Width = _e[1];
     var handleResize = function () {
@@ -51,12 +52,10 @@ var WTU = function (_a) {
         };
     }, []);
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor, "$contentsArea2Width": contentsArea2Width },
-            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, "$contentsArea2Width": contentsArea2Width },
-            react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref },
-                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": "WTU", layoutType: layoutType, containerColor: containerColor, "$contentsArea2Width": contentsArea2Width }, 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": "WTU", 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": "WTU", 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": "WTU", layoutType: layoutType, containerColor: containerColor, "$contentsArea2Width": contentsArea2Width }, 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": "WTU", layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", 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  align-items: flex-start;\n  background-color: ", ";\n  margin: 0;\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: ", ";\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0;\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWT/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 children = _a.children;
-    return (react_1.default.createElement(S_GlobalMenuContainer, null,
-        react_1.default.createElement(S_GlobalMenuArea, null,
-            react_1.default.createElement(S_GlobalMenuContent, null, children))));
+    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" }, children))));
 };
 var S_GlobalMenuContainer = 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/LayoutWT/Containers/PageMenuContainer/variation/LeftPageMenu.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var LeftPageMenu = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_LeftPageMenuContainer, null,
-        react_1.default.createElement(S_LeftPageMenuArea, null,
-            react_1.default.createElement(S_LeftPageMenuContent, null, children))));
+    return (react_1.default.createElement(S_LeftPageMenuContainer, { "x-pds-name": "PageMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+        react_1.default.createElement(S_LeftPageMenuArea, { "x-pds-name": "PageMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_LeftPageMenuContent, { "x-pds-name": "PageMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children))));
 };
 var S_LeftPageMenuContainer = 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/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js

@@ -30,9 +30,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TopPageMenu = function (_a) {
     var children = _a.children, mobileWidth = _a.mobileWidth, containerColor = _a.containerColor, areaColor = _a.areaColor, areaLine = _a.areaLine;
-    return (react_1.default.createElement(S_TopPageMenuContainer, { mobileWidth: mobileWidth, containerColor: containerColor },
-        react_1.default.createElement(S_TopPageMenuArea, { mobileWidth: mobileWidth, areaColor: areaColor, areaLine: areaLine },
-            react_1.default.createElement(S_TopPageMenuContent, null, children))));
+    return (react_1.default.createElement(S_TopPageMenuContainer, { "x-pds-name": "PageMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", mobileWidth: mobileWidth, containerColor: containerColor },
+        react_1.default.createElement(S_TopPageMenuArea, { "x-pds-name": "PageMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", mobileWidth: mobileWidth, areaColor: areaColor, areaLine: areaLine },
+            react_1.default.createElement(S_TopPageMenuContent, { "x-pds-name": "PageMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children))));
 };
 var areaLineStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n"], ["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/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, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_LeftSubMenuContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_LeftSubMenuArea, { areaColor: areaColor },
-            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", containerColor: containerColor },
+        react_1.default.createElement(S_LeftSubMenuArea, { "x-pds-name": "SubMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", areaColor: areaColor },
+            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  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  height: 100%;\n  min-width: 296px;\n  width: calc(50% - 184px);\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  height: 100%;\n  min-width: 296px;\n  width: calc(50% - 184px);\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/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/LayoutWT/ContainersBox/ContainersBox.d.ts

@@ -1,6 +1,6 @@
 import React, { MutableRefObject } from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;
@@ -9,7 +9,9 @@ export declare type ContainersBoxProps = {
     children?: React.ReactNode;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, containerColor, areaColor, container1Ref }: ContainersBoxProps) => JSX.Element;
+declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, container1Ref }: ContainersBoxProps) => JSX.Element;
 export default ContainersBox;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
-    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
+    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, container1Ref = _a.container1Ref;
     return (react_1.default.createElement(S_ContainersBox, null,
         {
             WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -61,6 +61,7 @@ var ContainersBox = function (_a) {
             WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
             WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
+            WTK_4: react_1.default.createElement(react_1.default.Fragment, null),
             WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -106,6 +107,7 @@ var ContainersBox = function (_a) {
                 WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_4: react_1.default.createElement(react_1.default.Fragment, null),
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -150,6 +152,7 @@ var ContainersBox = function (_a) {
                 WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_4: react_1.default.createElement(react_1.default.Fragment, null),
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -195,6 +198,7 @@ var ContainersBox = function (_a) {
                     WTK_1: '',
                     WTK_2: '',
                     WTK_3: '',
+                    WTK_4: '',
                     WTL_1: '',
                     WTM_1: '',
                     WTM_2: '',
@@ -210,7 +214,7 @@ var ContainersBox = function (_a) {
                     WTT_2: '',
                     WTU_1: ''
                 }[layoutType],
-                react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })))));
+                react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, container1Ref: container1Ref })))));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));
 var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"])));

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

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

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

@@ -0,0 +1,57 @@
+import React, { CSSProperties } from 'react';
+import { UiColors } from '../../../common';
+declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+export declare type AnnotationSheetProps = {
+    width: string;
+    height: string;
+    backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    borderWidth?: 1 | 2;
+    borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    overrideCSS?: CSSProperties;
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare type StyleProps = {
+    $width?: string;
+    $height?: string;
+    $backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    $borderWidth?: 1 | 2;
+    $borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    $radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    hasOnClick?: boolean;
+};
+declare const paddingSpacing: {
+    readonly spacing_a: "spacingA";
+    readonly spacing_b: "spacingB";
+    readonly spacing_c: "spacingC";
+    readonly spacing_d: "spacingD";
+    readonly spacing_e: "spacingE";
+    readonly spacing_f: "spacingF";
+    readonly spacing_g: "spacingG";
+    readonly spacing_h: "spacingH";
+    readonly spacing_i: "spacingI";
+    readonly spacing_j: "spacingJ";
+    readonly spacing_k: "spacingK";
+    readonly spacing_l: "spacingL";
+    readonly spacing_m: "spacingM";
+    readonly spacing_n: "spacingN";
+};
+declare function AnnotationSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: AnnotationSheetProps): JSX.Element;
+export default AnnotationSheet;