pds-dev-kit-web 0.3.38 → 0.3.39

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

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

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

@@ -400,4 +400,31 @@ export interface UITheme {
     ui_cpnt_button_icon_darktheme_disabled: string;
     ui_cpnt_icon_sys_white: string;
     ui_cpnt_button_fill_base_media: string;
+    ui_cpnt_textfield_text_darktheme_enabled: string;
+    ui_cpnt_textfield_text_darktheme_hint: string;
+    ui_cpnt_textfield_text_darktheme_disabled: string;
+    ui_cpnt_textfield_icon_darktheme_default: string;
+    ui_cpnt_textfield_icon_darktheme_disabled: string;
+    ui_cpnt_textfield_border_darktheme_normal: string;
+    ui_cpnt_textfield_border_darktheme_focus: string;
+    ui_cpnt_textfield_border_darktheme_error: string;
+    ui_cpnt_textfield_text_darktheme_error: string;
+    ui_cpnt_textfield_base_darktheme_disabled: string;
+    ui_cpnt_select_text_darktheme_enabled: string;
+    ui_cpnt_select_text_darktheme_hint: string;
+    ui_cpnt_select_text_darktheme_disabled: string;
+    ui_cpnt_select_icon_darktheme_default: string;
+    ui_cpnt_select_icon_darktheme_disabled: string;
+    ui_cpnt_select_border_darktheme_normal: string;
+    ui_cpnt_select_border_darktheme_focus: string;
+    ui_cpnt_select_base_darktheme_disabled: string;
+    ui_cpnt_dropdown_text_darktheme_enabled: string;
+    ui_cpnt_dropdown_text_darktheme_hint: string;
+    ui_cpnt_dropdown_text_darktheme_disabled: string;
+    ui_cpnt_dropdown_icon_darktheme_default: string;
+    ui_cpnt_dropdown_icon_darktheme_disabled: string;
+    ui_cpnt_dropdown_border_darktheme_normal: string;
+    ui_cpnt_dropdown_border_darktheme_focus: string;
+    ui_cpnt_dropdown_base_darktheme_disabled: string;
+    ui_cpnt_sheet_base: string;
 }

package/dist/src/common/styles/ui-colors.js

@@ -27,7 +27,7 @@ function buildCascadedColors(lowLevel, highLevel, override) {
 // 서버로부터 해당 채널에서 커스텀으로 설정한 팔레트 가져오기
 // from server (원래는 비동기)
 var channelSettings = {
-    tone: 'dark',
+    tone: 'light',
     customPalette: {
         usr_good_job: '#999999'
     }

package/dist/src/desktop/components/TextLabel/TextLabel.js

@@ -247,11 +247,11 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (temp
     var colorOverride = _a.colorOverride;
     return colorOverride && common_1.uiColors[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js

@@ -62,6 +62,6 @@ var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (tem
     var areaLine = _a.areaLine;
     return areaLine && areaLineStyle;
 });
-var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 64px;\n  overflow: hidden;\n"], ["\n  height: 64px;\n  overflow: hidden;\n"])));
+var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 64px;\n"], ["\n  min-height: 64px;\n"])));
 exports.default = TopPageMenu;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/hybrid/components/Icon/Icon.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import fillIcons from '../../../common/assets/icons/fill';
+import lineIcons from '../../../common/assets/icons/line';
+import { uiColors } from '../../../common/styles/ui-colors';
+export declare type FillIconNameKeys = keyof typeof fillIcons;
+export declare type LineIconNameKeys = keyof typeof lineIcons;
+export declare type UiColors = keyof typeof uiColors;
+export declare type IconProps = {
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
+    colorKey: UiColors;
+    fillType?: 'line' | 'fill';
+} & Record<string, any>;
+declare const Icon: ({ iconName, size, colorKey, fillType, ...rest }: IconProps) => JSX.Element;
+export default Icon;

package/dist/src/hybrid/components/Icon/Icon.js

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
+var line_1 = __importDefault(require("../../../common/assets/icons/line"));
+var ui_colors_1 = require("../../../common/styles/ui-colors");
+var Icon = function (_a) {
+    var iconName = _a.iconName, _b = _a.size, size = _b === void 0 ? 24 : _b, colorKey = _a.colorKey, _c = _a.fillType, fillType = _c === void 0 ? 'line' : _c, rest = __rest(_a, ["iconName", "size", "colorKey", "fillType"]);
+    var SelectedIcon = fillType === 'line'
+        ? line_1.default[iconName] || fill_1.default[iconName]
+        : fill_1.default[iconName] || line_1.default[iconName];
+    return react_1.default.createElement(SelectedIcon, __assign({ color: ui_colors_1.uiColors[colorKey], size: size }, rest));
+};
+exports.default = Icon;

package/dist/src/hybrid/components/Icon/index.d.ts

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

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

package/dist/src/hybrid/components/ImageView/ImageView.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type ImageViewProps = {
+    src?: string;
+    shapeType?: 'round' | 'circular' | 'rectangle';
+    radius?: 8 | 16 | 24;
+    width?: number | 'responsive';
+    height?: number;
+    ratio?: '16_9' | '9_16' | '16_10' | '10_16' | '4_3' | '3_4' | '1_1' | 'auto';
+    scaleType?: 'fill' | 'contain' | 'cover' | 'none';
+    borderMode?: 'use' | 'none';
+};
+declare const ImageView: ({ src, shapeType, radius, width, height, ratio, scaleType, borderMode }: ImageViewProps) => JSX.Element;
+export default ImageView;

package/dist/src/hybrid/components/ImageView/ImageView.js

@@ -0,0 +1,75 @@
+"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 ImageView = function (_a) {
+    var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, _d = _a.width, width = _d === void 0 ? 'responsive' : _d, height = _a.height, _e = _a.ratio, ratio = _e === void 0 ? 'auto' : _e, _f = _a.scaleType, scaleType = _f === void 0 ? 'none' : _f, _g = _a.borderMode, borderMode = _g === void 0 ? 'none' : _g;
+    return (react_1.default.createElement(S_ImageViewWrapper, { "$width": width },
+        react_1.default.createElement(S_ImageView, { "$src": src, shapeType: shapeType, radius: radius, "$width": width, "$height": height, ratio: ratio, scaleType: scaleType, borderMode: borderMode }, ratio === 'auto' && react_1.default.createElement(S_ImageViewImg, { src: src, scaleType: scaleType }))));
+};
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: ", ";\n  width: ", ";\n"], ["\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+});
+var S_ImageView = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, $src = _a.$src;
+    return !$src && "background-color: " + theme.ui_temp_grey_04;
+}, function (_a) {
+    var $src = _a.$src, ratio = _a.ratio;
+    return ratio !== 'auto' && "background-image: url(" + $src + ")";
+}, function (_a) {
+    var $height = _a.$height, ratio = _a.ratio;
+    return ratio === 'auto' && $height && "height: " + $height + "px";
+}, function (_a) {
+    var $height = _a.$height, ratio = _a.ratio;
+    return ratio === 'auto' && $height && "min-height: " + $height + "px";
+}, function (_a) {
+    var borderMode = _a.borderMode, theme = _a.theme;
+    return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
+}, function (_a) {
+    var shapeType = _a.shapeType, radius = _a.radius;
+    return shapeType &&
+        {
+            round: "border-radius: " + radius + "px",
+            circular: 'border-radius: 50%',
+            rectangle: ''
+        }[shapeType];
+}, function (_a) {
+    var scaleType = _a.scaleType;
+    return scaleType &&
+        {
+            fill: 'background-size: 100% 100%',
+            contain: "background-size: " + scaleType,
+            cover: "background-size: " + scaleType,
+            none: 'background-size: auto'
+        }[scaleType];
+}, function (_a) {
+    var ratio = _a.ratio;
+    return ratio &&
+        {
+            '16_9': 'padding-top: 56.25%',
+            '9_16': 'padding-top: 177.77%',
+            '16_10': 'padding-top: 62.5%',
+            '10_16': 'padding-top: 159.74%',
+            '4_3': 'padding-top: 75%',
+            '3_4': 'padding-top: 133.33%',
+            '1_1': 'padding-top: 100%',
+            auto: ''
+        }[ratio];
+});
+var S_ImageViewImg = styled_components_1.default.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  ", ";\n"], ["\n  display: block;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+    var scaleType = _a.scaleType;
+    return (scaleType !== 'none' ? "object-fit: " + scaleType + ";height: 100%;" : '');
+});
+exports.default = ImageView;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/hybrid/components/ImageView/index.d.ts

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

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

package/dist/src/hybrid/components/index.d.ts

@@ -0,0 +1,4 @@
+import { Icon } from './Icon';
+import { ImageView } from './ImageView';
+import { Spacing } from './Spacing';
+export { Icon, ImageView, Spacing };

package/dist/src/hybrid/components/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = exports.ImageView = exports.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
+var ImageView_1 = require("./ImageView");
+Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return ImageView_1.ImageView; } });
+var Spacing_1 = require("./Spacing");
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return Spacing_1.Spacing; } });

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

@@ -0,0 +1,2 @@
+import { Icon, ImageView, Spacing } from './components';
+export { Icon, ImageView, Spacing };

package/dist/src/hybrid/index.js

@@ -0,0 +1,10 @@
+"use strict";
+/* eslint-disable import/order */
+/* eslint-disable import/first */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = exports.ImageView = exports.Icon = void 0;
+// component
+var components_1 = require("./components");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return components_1.Icon; } });
+Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return components_1.ImageView; } });
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });

package/dist/src/mobile/components/TextLabel/TextLabel.js

@@ -247,11 +247,11 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (temp
     var colorOverride = _a.colorOverride;
     return colorOverride && common_1.uiColors[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {

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

@@ -1,9 +1,17 @@
 import { LayoutMF } from './layout/LayoutMF';
 import { ContainersBox as MFContainersBox } from './layout/LayoutMF/ContainersBox';
 export { LayoutMF, MFContainersBox };
+import { LayoutMM } from './layout/LayoutMM';
+import { NavigationContainer as MMNavigationContainer } from './layout/LayoutMM/Containers';
+import { ContainersBox as MMContainersBox } from './layout/LayoutMM/ContainersBox';
+export { LayoutMM, MMNavigationContainer, MMContainersBox };
 import { LayoutMP } from './layout/LayoutMP';
-import { NavigationContainer as MPGlobalMenuContainer } from './layout/LayoutMP/Containers';
+import { NavigationContainer as MPNavigationContainer, TabContainer as MPTabContainer } from './layout/LayoutMP/Containers';
 import { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBox';
-export { LayoutMP, MPGlobalMenuContainer, MPContainersBox };
+export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
+import { LayoutMS } from './layout/LayoutMS';
+import { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
+import { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
+export { LayoutMS, MSNavigationContainer, MSContainersBox };
 import { TextLabel as M_TextLabel } from './components';
 export { M_TextLabel };

package/dist/src/mobile/index.js

@@ -2,19 +2,34 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_TextLabel = exports.MPContainersBox = exports.MPGlobalMenuContainer = exports.LayoutMP = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_TextLabel = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = 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; } });
+// layoutMM
+var LayoutMM_1 = require("./layout/LayoutMM");
+Object.defineProperty(exports, "LayoutMM", { enumerable: true, get: function () { return LayoutMM_1.LayoutMM; } });
+var Containers_1 = require("./layout/LayoutMM/Containers");
+Object.defineProperty(exports, "MMNavigationContainer", { enumerable: true, get: function () { return Containers_1.NavigationContainer; } });
+var ContainersBox_2 = require("./layout/LayoutMM/ContainersBox");
+Object.defineProperty(exports, "MMContainersBox", { enumerable: true, get: function () { return ContainersBox_2.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; } });
+var Containers_2 = require("./layout/LayoutMP/Containers");
+Object.defineProperty(exports, "MPNavigationContainer", { enumerable: true, get: function () { return Containers_2.NavigationContainer; } });
+Object.defineProperty(exports, "MPTabContainer", { enumerable: true, get: function () { return Containers_2.TabContainer; } });
+var ContainersBox_3 = require("./layout/LayoutMP/ContainersBox");
+Object.defineProperty(exports, "MPContainersBox", { enumerable: true, get: function () { return ContainersBox_3.ContainersBox; } });
+// layoutMS
+var LayoutMS_1 = require("./layout/LayoutMS");
+Object.defineProperty(exports, "LayoutMS", { enumerable: true, get: function () { return LayoutMS_1.LayoutMS; } });
+var Containers_3 = require("./layout/LayoutMS/Containers");
+Object.defineProperty(exports, "MSNavigationContainer", { enumerable: true, get: function () { return Containers_3.NavigationContainer; } });
+var ContainersBox_4 = require("./layout/LayoutMS/ContainersBox");
+Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return ContainersBox_4.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

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'MFB_1';
+    layoutType: 'MFA_1' | 'MFB_1' | 'MFB_2' | 'MFC_1' | 'MFD_1' | 'MFE_1' | 'MFE_2';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -8,7 +8,13 @@ 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 }))
+        MFA_1: react_1.default.createElement(variation_1.MFA, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MFB_1: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MFB_2: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MFC_1: react_1.default.createElement(variation_1.MFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MFD_1: react_1.default.createElement(variation_1.MFD, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MFE_1: (react_1.default.createElement(variation_1.MFE, { layoutType: "MFE_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MFE_2: (react_1.default.createElement(variation_1.MFE, { layoutType: "MFE_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

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

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

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFA.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 MFA = 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 = MFA;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -2,7 +2,7 @@
 export declare type MFBProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'MFB_1';
+    layoutType: 'MFB_1' | 'MFB_2';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -20,9 +20,15 @@ var MFB = function (_a) {
                 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 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 ({
+        MFB_1: 'height: 56.25vw;',
+        MFB_2: 'height: 100vw;'
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;

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

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

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFC.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 MFC = 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  flex: 1;\n  min-width: 640px;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  min-width: 640px;\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  min-width: 640px;\n  height: 100%;\n  ", ";\n"], ["\n  min-width: 640px;\n  height: 100%;\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 = MFC;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFD.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 MFD = 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  flex: 1;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  min-width: 360px;\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  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_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 = MFD;
+var templateObject_1, templateObject_2, templateObject_3;

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

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