pds-dev-kit-web-test 2.2.99 → 2.2.652

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
+exports.RichTextEditor = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PriceTextLabel = exports.PriceTextField = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
 var BasicButtonGroup_1 = require("./BasicButtonGroup");
 Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
@@ -15,6 +15,8 @@ var BlogTextField_1 = require("./BlogTextField");
 Object.defineProperty(exports, "BlogTextField", { enumerable: true, get: function () { return BlogTextField_1.BlogTextField; } });
 var BodyTextGroup_1 = require("./BodyTextGroup");
 Object.defineProperty(exports, "BodyTextGroup", { enumerable: true, get: function () { return BodyTextGroup_1.BodyTextGroup; } });
+var BoxItem_1 = require("./BoxItem");
+Object.defineProperty(exports, "BoxItem", { enumerable: true, get: function () { return BoxItem_1.BoxItem; } });
 var Card_1 = require("./Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
 var CardList_1 = require("./CardList");
@@ -31,6 +33,8 @@ var ContextMenu_1 = require("./ContextMenu");
 Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function () { return ContextMenu_1.ContextMenu; } });
 var ContextMenuItem_1 = require("./ContextMenuItem");
 Object.defineProperty(exports, "ContextMenuItem", { enumerable: true, get: function () { return ContextMenuItem_1.ContextMenuItem; } });
+var DatePicker_1 = require("./DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 var Dropdown_1 = require("./Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
 var FloatingActionButton_1 = require("./FloatingActionButton");
@@ -51,16 +55,24 @@ var MobileHeaderBar_1 = require("./MobileHeaderBar");
 Object.defineProperty(exports, "MobileHeaderBar", { enumerable: true, get: function () { return MobileHeaderBar_1.MobileHeaderBar; } });
 var MobileTabBar_1 = require("./MobileTabBar");
 Object.defineProperty(exports, "MobileTabBar", { enumerable: true, get: function () { return MobileTabBar_1.MobileTabBar; } });
+var PriceTextField_1 = require("./PriceTextField");
+Object.defineProperty(exports, "PriceTextField", { enumerable: true, get: function () { return PriceTextField_1.PriceTextField; } });
+var PriceTextLabel_1 = require("./PriceTextLabel");
+Object.defineProperty(exports, "PriceTextLabel", { enumerable: true, get: function () { return PriceTextLabel_1.PriceTextLabel; } });
 var Radio_1 = require("./Radio");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
 var ReactionButton_1 = require("./ReactionButton");
 Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return ReactionButton_1.ReactionButton; } });
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return RichTextEditor_1.RichTextEditor; } });
 var SegmentedButtonGroup_1 = require("./SegmentedButtonGroup");
 Object.defineProperty(exports, "SegmentedButtonGroup", { enumerable: true, get: function () { return SegmentedButtonGroup_1.SegmentedButtonGroup; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+var Snackbar_1 = require("./Snackbar");
+Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return Snackbar_1.Snackbar; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextButton_1 = require("./TextButton");

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

@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
 export { LayoutMS } from './layout/LayoutMS';
 export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
-export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
+export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, Snackbar as M_Snackbar, StatusBlock as M_StatusBlock, TextButton as M_TextButton, PriceTextField as M_PriceTextField, TextField as M_TextField, TextLabel as M_TextLabel, PriceTextLabel as M_PriceTextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton, RichTextEditor as M_RichTextEditor } from './components';
 export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';

package/dist/src/mobile/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = 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;
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = void 0;
+exports.M_TextLabel = exports.M_TextField = exports.M_PriceTextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = 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;
+exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_RichTextEditor = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_PriceTextLabel = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "M_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
 Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
 Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "M_BoxItem", { enumerable: true, get: function () { return components_1.BoxItem; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
 Object.defineProperty(exports, "M_ChatBubbleListItem", { enumerable: true, get: function () { return components_1.ChatBubbleListItem; } });
@@ -46,6 +47,7 @@ Object.defineProperty(exports, "M_Checkbox", { enumerable: true, get: function (
 Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () { return components_1.Chip; } });
 Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
 Object.defineProperty(exports, "M_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
+Object.defineProperty(exports, "M_DatePicker", { enumerable: true, get: function () { return components_1.DatePicker; } });
 Object.defineProperty(exports, "M_Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
 Object.defineProperty(exports, "M_FloatingActionButton", { enumerable: true, get: function () { return components_1.FloatingActionButton; } });
 Object.defineProperty(exports, "M_HorizontalFormGroup", { enumerable: true, get: function () { return components_1.HorizontalFormGroup; } });
@@ -61,13 +63,17 @@ Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: func
 Object.defineProperty(exports, "M_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
 Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return components_1.Select; } });
 Object.defineProperty(exports, "M_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
+Object.defineProperty(exports, "M_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
 Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
+Object.defineProperty(exports, "M_PriceTextField", { enumerable: true, get: function () { return components_1.PriceTextField; } });
 Object.defineProperty(exports, "M_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
 Object.defineProperty(exports, "M_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });
+Object.defineProperty(exports, "M_PriceTextLabel", { enumerable: true, get: function () { return components_1.PriceTextLabel; } });
 Object.defineProperty(exports, "M_UploadIconButton", { enumerable: true, get: function () { return components_1.UploadIconButton; } });
 Object.defineProperty(exports, "M_UploadMainButton", { enumerable: true, get: function () { return components_1.UploadMainButton; } });
 Object.defineProperty(exports, "M_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });
+Object.defineProperty(exports, "M_RichTextEditor", { enumerable: true, get: function () { return components_1.RichTextEditor; } });
 // panels
 var panels_1 = require("./panels");
 Object.defineProperty(exports, "M_AnnotationSheet", { enumerable: true, get: function () { return panels_1.AnnotationSheet; } });

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MFA = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MFB = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType }, { children: content2 })) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFB", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MFC = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFC", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFC", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFC" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFC", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFC", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFC" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MFD = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFD", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFD" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFD", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFD" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MFE = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType }, { children: content2 })) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFE", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

package/dist/src/mobile/layout/LayoutMM/Containers/ContentsContainer/variation/MMA.js

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MMA = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMA", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMA" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMA", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMA" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

package/dist/src/mobile/layout/LayoutMM/Containers/ContentsContainer/variation/MMB.js

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MMB = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMB", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMB" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMB", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MMB" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MPA = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPA", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPA" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPA", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPA" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MPB = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPB", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPB" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPB", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPB" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MPC = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, { children: content2 })) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MPD = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MPE = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MPF = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, { children: content2 })) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSA = function (_a) {
     var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, container1Ref = _a.container1Ref;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, ref: container1Ref }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, ref: container1Ref }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSB = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSC = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType }, { children: content2 })) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSC", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSD = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSD", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSD" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSD", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSD" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSE = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSE", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSE", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSE" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSE", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSE", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSE" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSF = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType }, { children: content2 })) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSF", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSG = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -43,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSH = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH" }, { children: content1 })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, { size: "small" })) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH" }, { children: content1 })) }))) })));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 type MobileBasicModalProps = {
     titleText: PDSTextType;
     bodySpacingMode?: 'none' | 'use';
     bodyOverflowType?: 'auto' | 'visible';
+    scrollVisibleType?: ScrollVisibleType;
     contentText?: PDSTextType;
     mBtnText: PDSTextType;
     mBtnState?: 'normal' | 'disabled';
@@ -16,5 +18,5 @@ type MobileBasicModalProps = {
     onClickXMarkIcon?: () => void;
     children?: React.ReactNode;
 };
-declare function MobileBasicModal({ titleText, bodySpacingMode, bodyOverflowType, contentText, mBtnText, mBtnState, mBtnType, tBtnText, tBtnState, tBtnType, onClickMBtn, onClickTBtn, onClickXMarkIcon, children }: MobileBasicModalProps): import("react").ReactPortal;
+declare function MobileBasicModal({ titleText, bodySpacingMode, bodyOverflowType, scrollVisibleType, contentText, mBtnText, mBtnState, mBtnType, tBtnText, tBtnState, tBtnType, onClickMBtn, onClickTBtn, onClickXMarkIcon, children }: MobileBasicModalProps): import("react").ReactPortal;
 export default MobileBasicModal;

package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js

@@ -44,12 +44,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../components");
 function MobileBasicModal(_a) {
-    var titleText = _a.titleText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, contentText = _a.contentText, mBtnText = _a.mBtnText, _d = _a.mBtnState, mBtnState = _d === void 0 ? 'normal' : _d, _e = _a.mBtnType, mBtnType = _e === void 0 ? 'button' : _e, tBtnText = _a.tBtnText, _f = _a.tBtnState, tBtnState = _f === void 0 ? 'normal' : _f, _g = _a.tBtnType, tBtnType = _g === void 0 ? 'button' : _g, onClickMBtn = _a.onClickMBtn, onClickTBtn = _a.onClickTBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
+    var titleText = _a.titleText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'visible' : _d, contentText = _a.contentText, mBtnText = _a.mBtnText, _e = _a.mBtnState, mBtnState = _e === void 0 ? 'normal' : _e, _f = _a.mBtnType, mBtnType = _f === void 0 ? 'button' : _f, tBtnText = _a.tBtnText, _g = _a.tBtnState, tBtnState = _g === void 0 ? 'normal' : _g, _h = _a.tBtnType, tBtnType = _h === void 0 ? 'button' : _h, onClickMBtn = _a.onClickMBtn, onClickTBtn = _a.onClickTBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'MobileBasicModal');
@@ -65,7 +66,7 @@ function MobileBasicModal(_a) {
             root.removeChild(container);
         };
     }, []);
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MobileBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "mobile" }, { children: [(0, jsx_runtime_1.jsxs)(S_Header, { children: [(0, jsx_runtime_1.jsx)(S_TitleWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconColorKey: "ui_cpnt_modal_header_icon_02", iconFillType: "line", onClick: onClickXMarkIcon }) })] }), (0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType }, { children: [contentText && ((0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })), children && children] })), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(components_1.MainButton, { text: mBtnText, state: mBtnState, type: mBtnType, size: "rlarge", onClick: onClickMBtn }), tBtnText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextButton, { text: tBtnText, state: tBtnState, type: tBtnType, size: "rlarge", onClick: onClickTBtn })] }))] })] }))] }), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MobileBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "mobile" }, { children: [(0, jsx_runtime_1.jsxs)(S_Header, { children: [(0, jsx_runtime_1.jsx)(S_TitleWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconColorKey: "ui_cpnt_modal_header_icon_02", iconFillType: "line", onClick: onClickXMarkIcon }) })] }), (0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType, scrollVisibleType: scrollVisibleType }, { children: [contentText && ((0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })), children && children] })), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(components_1.MainButton, { text: mBtnText, state: mBtnState, type: mBtnType, size: "rlarge", onClick: onClickMBtn }), tBtnText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextButton, { text: tBtnText, state: tBtnState, type: tBtnType, size: "rlarge", onClick: onClickTBtn })] }))] })] }))] }), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
@@ -92,10 +93,7 @@ var S_IconButtonWrapper = styled_components_1.default.div(templateObject_4 || (t
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_Body = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 50vh;\n  overflow-y: ", ";\n  padding-top: ", ";\n\n  ", "\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 50vh;\n  overflow-y: ", ";\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-}, function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  max-height: 50vh;\n  overflow-y: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  max-height: 50vh;\n  overflow-y: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
@@ -104,12 +102,21 @@ var S_Body = styled_components_1.default.div(templateObject_6 || (templateObject
 }, function (_a) {
     var bodyOverflowType = _a.bodyOverflowType;
     return bodyOverflowType;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return ({
+        visible: scrollbarStyle_1.scrollbarStyle,
+        hidden: scrollbarStyle_1.scrollInvisible
+    }[scrollVisibleType]);
 }, function (_a) {
     var bodySpacingMode = _a.bodySpacingMode;
-    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "])));
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n      padding-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n      padding-right: 0;\n    "])));
 });
 var S_Footer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;