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

package/dist/src/mobile/layout/LayoutMM/Containers/NavigationContainer/variation/Navigation.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Navigation = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_NavigationContainer, null,
-        react_1.default.createElement(S_NavigationArea, null,
-            react_1.default.createElement(S_NavigationContent, null, children))));
+    return (react_1.default.createElement(S_NavigationContainer, { "x-pds-name": "NavigationContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+        react_1.default.createElement(S_NavigationArea, { "x-pds-name": "NavigationArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+            react_1.default.createElement(S_NavigationContent, { "x-pds-name": "NavigationContent", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" }, children))));
 };
 var S_NavigationContainer = 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/mobile/layout/LayoutMM/ContainersBox/ContainersBox.d.ts

@@ -5,6 +5,7 @@ export declare type ContainersBoxProps = {
     children?: React.ReactNode;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const ContainersBox: ({ layoutType, content1, containerColor, areaColor }: ContainersBoxProps) => JSX.Element;
+declare const ContainersBox: ({ layoutType, content1, containerColor, areaColor, isLoadingContainer1 }: ContainersBoxProps) => JSX.Element;
 export default ContainersBox;

package/dist/src/mobile/layout/LayoutMM/ContainersBox/ContainersBox.js

@@ -11,10 +11,10 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
-    var layoutType = _a.layoutType, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var layoutType = _a.layoutType, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
     return (react_1.default.createElement(S_ContainersBox, null,
         react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
-            react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, containerColor: containerColor, areaColor: areaColor }))));
+            react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 }))));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n"], ["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n"])));
 var S_BottomWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));

package/dist/src/mobile/layout/LayoutMM/LayoutMM.js

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -5,6 +5,8 @@ export declare type ContentsContainerProps = {
     layoutType: 'MPA_1' | 'MPB_1' | 'MPC_1' | 'MPC_2' | 'MPD_1' | 'MPE_1' | 'MPF_1' | 'MPF_2';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContentsContainerProps) => JSX.Element;
 export default ContentsContainer;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/ContentsContainer.js

@@ -6,16 +6,16 @@ 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;
+    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(react_1.default.Fragment, null, {
-        MPA_1: react_1.default.createElement(variation_1.MPA, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MPB_1: react_1.default.createElement(variation_1.MPB, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MPC_1: (react_1.default.createElement(variation_1.MPC, { layoutType: "MPC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MPC_2: (react_1.default.createElement(variation_1.MPC, { layoutType: "MPC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MPD_1: react_1.default.createElement(variation_1.MPD, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MPE_1: react_1.default.createElement(variation_1.MPE, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MPF_1: (react_1.default.createElement(variation_1.MPF, { layoutType: "MPF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MPF_2: (react_1.default.createElement(variation_1.MPF, { layoutType: "MPF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        MPA_1: (react_1.default.createElement(variation_1.MPA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MPB_1: (react_1.default.createElement(variation_1.MPB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MPC_1: (react_1.default.createElement(variation_1.MPC, { layoutType: "MPC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        MPC_2: (react_1.default.createElement(variation_1.MPC, { layoutType: "MPC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        MPD_1: (react_1.default.createElement(variation_1.MPD, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MPE_1: (react_1.default.createElement(variation_1.MPE, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MPF_1: (react_1.default.createElement(variation_1.MPF, { layoutType: "MPF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        MPF_2: (react_1.default.createElement(variation_1.MPF, { layoutType: "MPF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPA.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPA.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 MPA = 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": "mobile", "x-pds-layout-type": "MPA", 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": "mobile", "x-pds-layout-type": "MPA", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPA" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPB.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPB.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 MPB = 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": "mobile", "x-pds-layout-type": "MPB", 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": "mobile", "x-pds-layout-type": "MPB", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPB" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPC.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPC.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 MPC = 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": "mobile", "x-pds-layout-type": "MPC", 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": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", 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": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPD.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPD.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 MPD = 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": "mobile", "x-pds-layout-type": "MPD", 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": "mobile", "x-pds-layout-type": "MPD", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPE.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPE.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 MPE = 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": "mobile", "x-pds-layout-type": "MPE", 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": "mobile", "x-pds-layout-type": "MPE", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPF.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPF.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 MPF = 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": "mobile", "x-pds-layout-type": "MPF", 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": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", 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": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/mobile/layout/LayoutMP/Containers/NavigationContainer/variation/Navigation.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Navigation = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_NavigationContainer, null,
-        react_1.default.createElement(S_NavigationArea, null,
-            react_1.default.createElement(S_NavigationContent, null, children))));
+    return (react_1.default.createElement(S_NavigationContainer, { "x-pds-name": "NavigationContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+        react_1.default.createElement(S_NavigationArea, { "x-pds-name": "NavigationArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+            react_1.default.createElement(S_NavigationContent, { "x-pds-name": "NavigationContent", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" }, children))));
 };
 var S_NavigationContainer = 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/mobile/layout/LayoutMP/Containers/TabContainer/variation/Tab.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Tab = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_TabContainer, null,
-        react_1.default.createElement(S_TabArea, null,
-            react_1.default.createElement(S_TabContent, null, children))));
+    return (react_1.default.createElement(S_TabContainer, { "x-pds-name": "TabContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+        react_1.default.createElement(S_TabArea, { "x-pds-name": "TabArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+            react_1.default.createElement(S_TabContent, { "x-pds-name": "TabContent", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" }, children))));
 };
 var S_TabContainer = 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/mobile/layout/LayoutMP/ContainersBox/ContainersBox.d.ts

@@ -7,6 +7,8 @@ export declare type ContainersBoxProps = {
     children?: React.ReactNode;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContainersBox: ({ layoutType, tabContent, content1, content2, containerColor, areaColor }: ContainersBoxProps) => JSX.Element;
+declare const ContainersBox: ({ layoutType, tabContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContainersBoxProps) => JSX.Element;
 export default ContainersBox;

package/dist/src/mobile/layout/LayoutMP/ContainersBox/ContainersBox.js

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
-    var layoutType = _a.layoutType, tabContent = _a.tabContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var layoutType = _a.layoutType, tabContent = _a.tabContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_ContainersBox, null,
         {
             MPA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -24,7 +24,7 @@ var ContainersBox = function (_a) {
             MPF_2: react_1.default.createElement(react_1.default.Fragment, null)
         }[layoutType],
         react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
-            react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))));
+            react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n"], ["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n"])));
 var S_BottomWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));

package/dist/src/mobile/layout/LayoutMP/LayoutMP.js

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

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -5,6 +5,8 @@ export declare type ContentsContainerProps = {
     layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContentsContainerProps) => JSX.Element;
 export default ContentsContainer;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.js

@@ -6,18 +6,18 @@ 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;
+    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(react_1.default.Fragment, null, {
-        MSA_1: react_1.default.createElement(variation_1.MSA, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MSB_1: react_1.default.createElement(variation_1.MSB, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MSC_1: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MSC_2: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MSD_1: react_1.default.createElement(variation_1.MSD, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MSE_1: react_1.default.createElement(variation_1.MSE, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MSF_1: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MSG_1: react_1.default.createElement(variation_1.MSG, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        MSH_1: react_1.default.createElement(variation_1.MSH, { content1: content1, containerColor: containerColor, areaColor: areaColor })
+        MSA_1: (react_1.default.createElement(variation_1.MSA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSB_1: (react_1.default.createElement(variation_1.MSB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSC_1: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        MSC_2: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        MSD_1: (react_1.default.createElement(variation_1.MSD, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSE_1: (react_1.default.createElement(variation_1.MSE, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSF_1: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        MSG_1: (react_1.default.createElement(variation_1.MSG, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSH_1: (react_1.default.createElement(variation_1.MSH, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.d.ts

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

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.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 MSA = 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": "mobile", "x-pds-layout-type": "MSA", 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": "mobile", "x-pds-layout-type": "MSA", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSB.d.ts

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

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSB.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 MSB = 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": "mobile", "x-pds-layout-type": "MSB", 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": "mobile", "x-pds-layout-type": "MSB", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSC.d.ts

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

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSC.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 MSC = 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": "mobile", "x-pds-layout-type": "MSC", 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": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", 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": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSD.d.ts

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

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSD.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 MSD = 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": "mobile", "x-pds-layout-type": "MSD", 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": "mobile", "x-pds-layout-type": "MSD", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSD" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSE.d.ts

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

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSE.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 MSE = 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": "mobile", "x-pds-layout-type": "MSE", 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": "mobile", "x-pds-layout-type": "MSE", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSE" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSF.d.ts

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