pds-dev-kit-web 1.3.15 → 1.3.18

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

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTO_1' | 'WTP_1' | 'WTQ_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -41,9 +41,11 @@ var ContentsContainer = function (_a) {
         WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare type WTNProps = {
     content1?: JSX.Element;
-    layoutType: 'WTN_1' | 'WTN_2';
+    layoutType: 'WTN_1' | 'WTN_2' | 'WTN_3';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -22,7 +22,8 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var layoutType = _a.layoutType;
     return ({
         WTN_1: 'min-width: 1200px;',
-        WTN_2: 'min-width: 960px;'
+        WTN_2: 'min-width: 960px;',
+        WTN_3: 'min-width: 1200px;'
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
@@ -32,7 +33,8 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templa
     var layoutType = _a.layoutType;
     return ({
         WTN_1: 'width: 1200px;',
-        WTN_2: 'width: 960px;'
+        WTN_2: 'width: 960px;',
+        WTN_3: 'width: 100%; min-width: 1200px; max-width: 1400px; padding-top: 24px; padding-left: 24px; padding-right: 24px;'
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;

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

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

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

@@ -0,0 +1,40 @@
+"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 hybrid_1 = require("../../../../../../hybrid");
+var WTS = function (_a) {
+    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, null, content1)),
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
+        react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, null, content2))));
+};
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 1200px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 1200px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 24px;\n  max-width: 1400px;\n  min-width: 1200px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 24px;\n  max-width: 1400px;\n  min-width: 1200px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 480px;\n"], ["\n  min-height: 480px;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+exports.default = WTS;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -15,3 +15,4 @@ export { default as WTN } from './WTN';
 export { default as WTO } from './WTO';
 export { default as WTP } from './WTP';
 export { default as WTQ } from './WTQ';
+export { default as WTS } from './WTS';

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
+exports.WTS = exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
 var WTA_1 = require("./WTA");
 Object.defineProperty(exports, "WTA", { enumerable: true, get: function () { return __importDefault(WTA_1).default; } });
 var WTB_1 = require("./WTB");
@@ -38,3 +38,5 @@ var WTP_1 = require("./WTP");
 Object.defineProperty(exports, "WTP", { enumerable: true, get: function () { return __importDefault(WTP_1).default; } });
 var WTQ_1 = require("./WTQ");
 Object.defineProperty(exports, "WTQ", { enumerable: true, get: function () { return __importDefault(WTQ_1).default; } });
+var WTS_1 = require("./WTS");
+Object.defineProperty(exports, "WTS", { enumerable: true, get: function () { return __importDefault(WTS_1).default; } });

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTO_1' | 'WTP_1' | 'WTQ_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;

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

@@ -66,9 +66,11 @@ var ContainersBox = function (_a) {
             WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
             WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
             WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
-            WTQ_1: react_1.default.createElement(react_1.default.Fragment, null)
+            WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
         }[layoutType],
         react_1.default.createElement(S_RightBox, null,
             {
@@ -105,9 +107,11 @@ var ContainersBox = function (_a) {
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
                 WTO_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTQ_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             {
                 WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -143,9 +147,11 @@ var ContainersBox = function (_a) {
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
                 WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTQ_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
                 {
@@ -182,9 +188,11 @@ var ContainersBox = function (_a) {
                     WTM_2: '',
                     WTN_1: '',
                     WTN_2: '',
+                    WTN_3: '',
                     WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
                     WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
-                    WTQ_1: ''
+                    WTQ_1: '',
+                    WTS_1: ''
                 }[layoutType],
                 react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })))));
 };

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

@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(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, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode },
+    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
         react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
@@ -40,10 +40,10 @@ var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObj
     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;
+    var shapeType = _a.shapeType, $radius = _a.$radius;
     return shapeType &&
         {
-            round: "border-radius: " + radius + "px",
+            round: "border-radius: " + $radius + "px",
             circular: 'border-radius: 50%',
             rectangle: ''
         }[shapeType];

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

@@ -28,10 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 function BlogTextField(_a) {
     var hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'auto' : _c, _d = _a.multiRows, multiRows = _d === void 0 ? 8 : _d, _e = _a.autoMinRows, autoMinRows = _e === void 0 ? 8 : _e, autoMaxRows = _a.autoMaxRows, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.spacingMode, spacingMode = _g === void 0 ? 'use' : _g, maxLength = _a.maxLength, name = _a.name, validation = _a.validation, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var register = (0, react_hook_form_1.useFormContext)().register;
+    var validateOnChange = register(name, validation).onChange;
     function handleFocus(e) {
         if (onFocus) {
             onFocus(e);
@@ -48,16 +51,17 @@ function BlogTextField(_a) {
         }
     }
     function handleChange(e) {
+        validateOnChange(e);
         if (onChange) {
             onChange(e);
         }
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.d.ts

@@ -4,11 +4,12 @@ export declare type ContextMenuItemProps = {
     option?: PDSValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
+    state?: 'normal' | 'disabled';
     onClick?: (value: PDSValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */
     value?: string | number | boolean;
 };
-declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
+declare function ContextMenuItem({ option, size, isSelected, state, onClick, text, value }: ContextMenuItemProps): JSX.Element;
 export default ContextMenuItem;

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

@@ -30,8 +30,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick, text = _a.text, value = _a.value;
+    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, text = _a.text, value = _a.value;
     var handleClick = function () {
+        if (state === 'disabled') {
+            return;
+        }
         if (onClick && option) {
             onClick(option);
         }
@@ -39,8 +42,18 @@ function ContextMenuItem(_a) {
             onClick(value);
         }
     };
-    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
+    var textColorTheme;
+    if (isSelected) {
+        textColorTheme = 'sysTextPrimary';
+    }
+    if (!isSelected && state === 'normal') {
+        textColorTheme = 'sysTextSecondary';
+    }
+    if (state === 'disabled') {
+        textColorTheme = 'sysTextTertiary';
+    }
+    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/Dropdown/Dropdown.d.ts

@@ -2,14 +2,15 @@
 import { TFunctionResult } from 'i18next';
 import { PDSValueOption } from '../../../common';
 declare type Props = {
-    size?: 'large' | 'small';
-    hintText?: TFunctionResult;
+    colorTheme?: 'none' | 'dark';
     defaultValue?: PDSValueOption;
-    valueArray: PDSValueOption[];
+    hintText?: TFunctionResult;
+    responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
+    size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    valueArray: PDSValueOption[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, defaultValue, hintText, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,9 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'single' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
+    var _h = (0, react_1.useState)(defaultValue), selectedOption = _h[0], setSelectedOption = _h[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedOption(defaultValue);
@@ -97,8 +97,8 @@ function Dropdown(_a) {
             return 'ui_cpnt_dropdown_text_darktheme_enabled';
         }
     };
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme },
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
@@ -113,9 +113,15 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '432px');
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: ", ";\n"], ["\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '188px');
+});
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -123,7 +129,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
             small: small
         }[size];
 });
-var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
     switch (state) {
         case 'disabled':

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

@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
     return lineLimit;
 });
 var userSelectModeStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {

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

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2';
+    layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -15,7 +15,9 @@ var ContentsContainer = function (_a) {
         MSD_1: react_1.default.createElement(variation_1.MSD, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         MSE_1: react_1.default.createElement(variation_1.MSE, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         MSF_1: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MSG_1: react_1.default.createElement(variation_1.MSG, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MSH_1: react_1.default.createElement(variation_1.MSH, { content1: content1, containerColor: containerColor, areaColor: areaColor })
     }[layoutType]));
 };
 exports.default = ContentsContainer;

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

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

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

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

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

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

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

@@ -4,3 +4,5 @@ export { default as MSC } from './MSC';
 export { default as MSD } from './MSD';
 export { default as MSE } from './MSE';
 export { default as MSF } from './MSF';
+export { default as MSG } from './MSG';
+export { default as MSH } from './MSH';

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MSF = exports.MSE = exports.MSD = exports.MSC = exports.MSB = exports.MSA = void 0;
+exports.MSH = exports.MSG = exports.MSF = exports.MSE = exports.MSD = exports.MSC = exports.MSB = exports.MSA = void 0;
 var MSA_1 = require("./MSA");
 Object.defineProperty(exports, "MSA", { enumerable: true, get: function () { return __importDefault(MSA_1).default; } });
 var MSB_1 = require("./MSB");
@@ -16,3 +16,7 @@ var MSE_1 = require("./MSE");
 Object.defineProperty(exports, "MSE", { enumerable: true, get: function () { return __importDefault(MSE_1).default; } });
 var MSF_1 = require("./MSF");
 Object.defineProperty(exports, "MSF", { enumerable: true, get: function () { return __importDefault(MSF_1).default; } });
+var MSG_1 = require("./MSG");
+Object.defineProperty(exports, "MSG", { enumerable: true, get: function () { return __importDefault(MSG_1).default; } });
+var MSH_1 = require("./MSH");
+Object.defineProperty(exports, "MSH", { enumerable: true, get: function () { return __importDefault(MSH_1).default; } });

package/dist/src/mobile/layout/LayoutMS/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/LayoutMS/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 _b = _a.tabType, tabType = _b === void 0 ? 'tab' : _b, 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/LayoutMS/Containers/TabContainer/index.d.ts

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

package/dist/src/mobile/layout/LayoutMS/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/LayoutMS/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;