pds-dev-kit-web 0.3.27 → 0.3.28

package/dist/src/GlobalStyle.js

@@ -5,6 +5,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
-var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  div, span, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  div, span, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
+var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  html {\n    height: 100%;\n    width: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    height: 100%;\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n  }\n\n  div, span, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n  html {\n    height: 100%;\n    width: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    height: 100%;\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n  }\n\n  div, span, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
 exports.default = GlobalStyle;
 var templateObject_1;

package/dist/src/common/styles/colorSet/UIColor.json

@@ -373,5 +373,10 @@
     "ui_cpnt_icon_sys_warning_01": "sys_widget_warning_01",
     "ui_cpnt_icon_sys_success_01": "sys_widget_success_01",
     "ui_cpnt_icon_usr_brandsecondary": "usr_brand_secondary",
-    "ui_papp_post_notice_link": "sys_papp_post_notice_link"
+    "ui_papp_post_notice_link": "sys_papp_post_notice_link",
+    "ui_cpnt_headerbar_icon_02": "sys_widget_white",
+    "ui_m_navigationcontainer_background": "sys_container_background_01",
+    "ui_m_tabcontainer_background": "sys_container_background_01",
+    "ui_m_contentscontainer01_background": "sys_container_background_01",
+    "ui_m_contentscontainer02_background": "sys_container_background_01"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -98,57 +98,6 @@ declare const colorSet: {
         sys_component_base_05_opacity00: string;
         sys_papp_post_notice_link: string;
     };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -624,6 +573,62 @@ declare const colorSet: {
         ui_cpnt_icon_sys_success_01: string;
         ui_cpnt_icon_usr_brandsecondary: string;
         ui_papp_post_notice_link: string;
+        ui_cpnt_headerbar_icon_02: string;
+        ui_m_navigationcontainer_background: string;
+        ui_m_tabcontainer_background: string;
+        ui_m_contentscontainer01_background: string;
+        ui_m_contentscontainer02_background: string;
+    };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var colorSet = {
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default
+    UIColor: UIColor_json_1.default,
+    SemanticColor: SemanticColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -374,4 +374,9 @@ export interface UITheme {
     ui_cpnt_icon_sys_success_01: string;
     ui_cpnt_icon_usr_brandsecondary: string;
     ui_papp_post_notice_link: string;
+    ui_cpnt_headerbar_icon_02: string;
+    ui_m_navigationcontainer_background: string;
+    ui_m_tabcontainer_background: string;
+    ui_m_contentscontainer01_background: string;
+    ui_m_contentscontainer02_background: string;
 }

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

@@ -1,2 +1,9 @@
+import { LayoutMF } from './layout/LayoutMF';
+import { ContainersBox as MFContainersBox } from './layout/LayoutMF/ContainersBox';
+export { LayoutMF, MFContainersBox };
+import { LayoutMP } from './layout/LayoutMP';
+import { NavigationContainer as MPGlobalMenuContainer } from './layout/LayoutMP/Containers';
+import { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBox';
+export { LayoutMP, MPGlobalMenuContainer, MPContainersBox };
 import { TextLabel as M_TextLabel } from './components';
 export { M_TextLabel };

package/dist/src/mobile/index.js

@@ -2,7 +2,19 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_TextLabel = void 0;
+exports.M_TextLabel = exports.MPContainersBox = exports.MPGlobalMenuContainer = exports.LayoutMP = exports.MFContainersBox = exports.LayoutMF = void 0;
+// layoutMF
+var LayoutMF_1 = require("./layout/LayoutMF");
+Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
+var ContainersBox_1 = require("./layout/LayoutMF/ContainersBox");
+Object.defineProperty(exports, "MFContainersBox", { enumerable: true, get: function () { return ContainersBox_1.ContainersBox; } });
+// layoutMP
+var LayoutMP_1 = require("./layout/LayoutMP");
+Object.defineProperty(exports, "LayoutMP", { enumerable: true, get: function () { return LayoutMP_1.LayoutMP; } });
+var Containers_1 = require("./layout/LayoutMP/Containers");
+Object.defineProperty(exports, "MPGlobalMenuContainer", { enumerable: true, get: function () { return Containers_1.NavigationContainer; } });
+var ContainersBox_2 = require("./layout/LayoutMP/ContainersBox");
+Object.defineProperty(exports, "MPContainersBox", { enumerable: true, get: function () { return ContainersBox_2.ContainersBox; } });
 // components
 var components_1 = require("./components");
 Object.defineProperty(exports, "M_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });

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

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

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/ContentsContainer.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 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, {
+        MFB_1: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+    }[layoutType]));
+};
+exports.default = ContentsContainer;

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

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

package/dist/src/mobile/layout/LayoutMF/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/LayoutMF/Containers/ContentsContainer/variation/MFB.d.ts

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

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFB.js

@@ -0,0 +1,48 @@
+"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 MFB = 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  height: 56.25vw;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  height: 56.25vw;\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_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\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  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\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  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  max-width: 768px;\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 = MFB;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

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

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/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.MFB = void 0;
+var MFB_1 = require("./MFB");
+Object.defineProperty(exports, "MFB", { enumerable: true, get: function () { return __importDefault(MFB_1).default; } });

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

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

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

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

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

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

package/dist/src/mobile/layout/LayoutMF/ContainersBox/ContainersBox.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 Containers_1 = require("../Containers");
+var ContainersBox = function (_a) {
+    var layoutType = _a.layoutType, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContainersBox, null,
+        {
+            MFB_1: 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 }))));
+};
+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/LayoutMF/ContainersBox/index.d.ts

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

package/dist/src/mobile/layout/LayoutMF/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/LayoutMF/LayoutMF.d.ts

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

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

@@ -0,0 +1,18 @@
+"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 LayoutMF = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(S_LayoutMF, null, children);
+};
+var S_LayoutMF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+exports.default = LayoutMF;
+var templateObject_1;

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

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

package/dist/src/mobile/layout/LayoutMF/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.LayoutMF = void 0;
+var LayoutMF_1 = require("./LayoutMF");
+Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return __importDefault(LayoutMF_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';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const ContentsContainer: ({ content1, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+export default ContentsContainer;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/ContentsContainer.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 ContentsContainer = function (_a) {
+    var content1 = _a.content1, 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 })
+    }[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  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;
+    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  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  max-width: 768px;\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_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+exports.default = MPA;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/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.MPA = void 0;
+var MPA_1 = require("./MPA");
+Object.defineProperty(exports, "MPA", { enumerable: true, get: function () { return __importDefault(MPA_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  height: 56px;\n"], ["\n  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';

package/dist/src/mobile/layout/LayoutMP/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/LayoutMP/Containers/TabContainer/TabContainer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type TabContainerProps = {
+    tabType: 'tab';
+    tabContent?: JSX.Element;
+};
+declare const TabContainer: ({ tabType, tabContent }: TabContainerProps) => JSX.Element;
+export default TabContainer;

package/dist/src/mobile/layout/LayoutMP/Containers/TabContainer/TabContainer.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 TabContainer = function (_a) {
+    var tabType = _a.tabType, tabContent = _a.tabContent;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        tab: react_1.default.createElement(variation_1.Tab, null, tabContent)
+    }[tabType]));
+};
+exports.default = TabContainer;

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

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

package/dist/src/mobile/layout/LayoutMP/Containers/TabContainer/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.TabContainer = void 0;
+var TabContainer_1 = require("./TabContainer");
+Object.defineProperty(exports, "TabContainer", { enumerable: true, get: function () { return __importDefault(TabContainer_1).default; } });

package/dist/src/mobile/layout/LayoutMP/Containers/TabContainer/variation/Tab.d.ts

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

package/dist/src/mobile/layout/LayoutMP/Containers/TabContainer/variation/Tab.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 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))));
+};
+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;
+    return theme.ui_m_tabcontainer_background;
+});
+var S_TabArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_TabContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 48px;\n  overflow: hidden;\n"], ["\n  height: 48px;\n  overflow: hidden;\n"])));
+exports.default = Tab;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

package/dist/src/mobile/layout/LayoutMP/Containers/TabContainer/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.Tab = void 0;
+var Tab_1 = require("./Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(Tab_1).default; } });

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContainer = 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; } });
+var TabContainer_1 = require("./TabContainer");
+Object.defineProperty(exports, "TabContainer", { enumerable: true, get: function () { return TabContainer_1.TabContainer; } });

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

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

package/dist/src/mobile/layout/LayoutMP/ContainersBox/ContainersBox.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 Containers_1 = require("../Containers");
+var ContainersBox = function (_a) {
+    var layoutType = _a.layoutType, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContainersBox, null,
+        {
+            MPA_1: 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 }))));
+};
+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/LayoutMP/ContainersBox/index.d.ts

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

package/dist/src/mobile/layout/LayoutMP/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/LayoutMP/LayoutMP.d.ts

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

package/dist/src/mobile/layout/LayoutMP/LayoutMP.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 LayoutMP = function (_a) {
+    var navigationContainer = _a.navigationContainer, children = _a.children;
+    return (react_1.default.createElement(S_LayoutMP, 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_LayoutMP = 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 = LayoutMP;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/dist/src/mobile/layout/LayoutMP/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.LayoutMP = void 0;
+var LayoutMP_1 = require("./LayoutMP");
+Object.defineProperty(exports, "LayoutMP", { enumerable: true, get: function () { return __importDefault(LayoutMP_1).default; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "0.3.27",
+  "version": "0.3.28",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",