pds-dev-kit-web-test 0.0.1

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

@@ -0,0 +1,25 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var 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))));
+};
+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;
+    return theme.ui_m_navigationcontainer_background;
+});
+var S_NavigationArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_NavigationContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 56px;\n"], ["\n  height: 56px;\n"])));
+exports.default = Navigation;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/mobile/layout/LayoutMM/Containers/NavigationContainer/variation/index.d.ts

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

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

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

package/dist/src/mobile/layout/LayoutMM/Containers/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentsContainer } from './ContentsContainer';
+export { NavigationContainer } from './NavigationContainer';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationContainer = exports.ContentsContainer = void 0;
+var ContentsContainer_1 = require("./ContentsContainer");
+Object.defineProperty(exports, "ContentsContainer", { enumerable: true, get: function () { return ContentsContainer_1.ContentsContainer; } });
+var NavigationContainer_1 = require("./NavigationContainer");
+Object.defineProperty(exports, "NavigationContainer", { enumerable: true, get: function () { return NavigationContainer_1.NavigationContainer; } });

package/dist/src/mobile/layout/LayoutMM/ContainersBox/ContainersBox.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type ContainersBoxProps = {
+    layoutType: 'MMA_1' | 'MMB_1';
+    content1?: JSX.Element;
+    children?: React.ReactNode;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const ContainersBox: ({ layoutType, content1, containerColor, areaColor }: ContainersBoxProps) => JSX.Element;
+export default ContainersBox;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Containers_1 = require("../Containers");
+var ContainersBox = function (_a) {
+    var layoutType = _a.layoutType, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    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 }))));
+};
+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"])));
+exports.default = ContainersBox;
+var templateObject_1, templateObject_2;

package/dist/src/mobile/layout/LayoutMM/ContainersBox/index.d.ts

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

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

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

package/dist/src/mobile/layout/LayoutMM/LayoutMM.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type LayoutMMProps = {
+    navigationContainer?: JSX.Element;
+    children?: React.ReactNode;
+};
+declare const LayoutMM: ({ navigationContainer, children }: LayoutMMProps) => JSX.Element;
+export default LayoutMM;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var LayoutMM = function (_a) {
+    var navigationContainer = _a.navigationContainer, children = _a.children;
+    return (react_1.default.createElement(S_LayoutMM, null,
+        react_1.default.createElement(S_Box, null,
+            react_1.default.createElement(S_TopWrapper, null, navigationContainer),
+            react_1.default.createElement(S_BottomWrapper, null, children))));
+};
+var S_LayoutMM = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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_TopWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
+exports.default = LayoutMM;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/layout/LayoutMM/index.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type ContentsContainerProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType: 'MPA_1' | 'MPB_1' | 'MPC_1' | 'MPC_2' | 'MPD_1' | 'MPE_1' | 'MPF_1' | 'MPF_2';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+export default ContentsContainer;

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var variation_1 = require("./variation");
+var ContentsContainer = function (_a) {
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    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 }))
+    }[layoutType]));
+};
+exports.default = ContentsContainer;

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

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

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type MPAProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MPA: ({ content1, containerColor, areaColor }: MPAProps) => JSX.Element;
+export default MPA;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var 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 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;
+    return theme.ui_m_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  min-width: 360px;\n  ", ";\n  /* padding-bottom: 88px; */\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  min-width: 360px;\n  ", ";\n  /* padding-bottom: 88px; */\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"])));
+exports.default = MPA;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type MPBProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MPB: ({ content1, containerColor, areaColor }: MPBProps) => JSX.Element;
+export default MPB;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var 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 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;
+    return theme.ui_m_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  min-width: 360px;\n  ", ";\n  /* padding-bottom: 88px; */\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  min-width: 360px;\n  ", ";\n  /* padding-bottom: 88px; */\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"])));
+exports.default = MPB;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type MPCProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType: 'MPC_1' | 'MPC_2';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MPC: ({ content1, content2, layoutType, containerColor, areaColor }: MPCProps) => JSX.Element;
+export default MPC;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var MPC = function (_a) {
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    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)))));
+};
+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) {
+    var theme = _a.theme;
+    return theme.ui_m_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        MPC_1: 'height: 56.25vw;',
+        MPC_2: 'height: 100vw;'
+    }[layoutType]);
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_m_contentscontainer02_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+exports.default = MPC;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type MPDProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MPD: ({ content1, containerColor, areaColor }: MPDProps) => JSX.Element;
+export default MPD;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var 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 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;
+    return theme.ui_m_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+exports.default = MPD;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type MPEProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MPE: ({ content1, containerColor, areaColor }: MPEProps) => JSX.Element;
+export default MPE;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var 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 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;
+    return theme.ui_m_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+exports.default = MPE;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type MPFProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType: 'MPF_1' | 'MPF_2';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MPF: ({ content1, content2, layoutType, containerColor, areaColor }: MPFProps) => JSX.Element;
+export default MPF;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var MPF = function (_a) {
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    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)))));
+};
+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) {
+    var theme = _a.theme;
+    return theme.ui_m_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        MPF_1: 'height: 56.25vw;',
+        MPF_2: 'height: 100vw;'
+    }[layoutType]);
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_m_contentscontainer02_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+exports.default = MPF;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -0,0 +1,6 @@
+export { default as MPA } from './MPA';
+export { default as MPB } from './MPB';
+export { default as MPC } from './MPC';
+export { default as MPD } from './MPD';
+export { default as MPE } from './MPE';
+export { default as MPF } from './MPF';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MPF = exports.MPE = exports.MPD = exports.MPC = exports.MPB = exports.MPA = void 0;
+var MPA_1 = require("./MPA");
+Object.defineProperty(exports, "MPA", { enumerable: true, get: function () { return __importDefault(MPA_1).default; } });
+var MPB_1 = require("./MPB");
+Object.defineProperty(exports, "MPB", { enumerable: true, get: function () { return __importDefault(MPB_1).default; } });
+var MPC_1 = require("./MPC");
+Object.defineProperty(exports, "MPC", { enumerable: true, get: function () { return __importDefault(MPC_1).default; } });
+var MPD_1 = require("./MPD");
+Object.defineProperty(exports, "MPD", { enumerable: true, get: function () { return __importDefault(MPD_1).default; } });
+var MPE_1 = require("./MPE");
+Object.defineProperty(exports, "MPE", { enumerable: true, get: function () { return __importDefault(MPE_1).default; } });
+var MPF_1 = require("./MPF");
+Object.defineProperty(exports, "MPF", { enumerable: true, get: function () { return __importDefault(MPF_1).default; } });

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type NavigationContainerProps = {
+    navigationType?: 'navigation';
+    navigationContent?: JSX.Element;
+};
+declare const NavigationContainer: ({ navigationType, navigationContent }: NavigationContainerProps) => JSX.Element;
+export default NavigationContainer;

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var variation_1 = require("./variation");
+var NavigationContainer = function (_a) {
+    var _b = _a.navigationType, navigationType = _b === void 0 ? 'navigation' : _b, navigationContent = _a.navigationContent;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        navigation: react_1.default.createElement(variation_1.Navigation, null, navigationContent)
+    }[navigationType]));
+};
+exports.default = NavigationContainer;

package/dist/src/mobile/layout/LayoutMP/Containers/NavigationContainer/index.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/NavigationContainer/index.js

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type NavigationProps = {
+    children?: React.ReactNode;
+};
+declare const Navigation: ({ children }: NavigationProps) => JSX.Element;
+export default Navigation;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var 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))));
+};
+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;
+    return theme.ui_m_navigationcontainer_background;
+});
+var S_NavigationArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_NavigationContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 56px;\n"], ["\n  min-height: 56px;\n"])));
+exports.default = Navigation;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/mobile/layout/LayoutMP/Containers/NavigationContainer/variation/index.d.ts

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