pds-dev-kit-web-test 0.0.17 → 0.0.18

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

@@ -639,5 +639,7 @@
     "ui_cpnt_pagination_dot_border": "sys_border_line_01",
     "ui_63": "sys_facebook",
     "ui_64": "sys_text_white",
-    "ui_cpnt_sheet_border_04": "sys_border_line_02"
+    "ui_cpnt_sheet_border_04": "sys_border_line_02",
+    "ui_cpnt_button_fill_base_01": "sys_component_base_05",
+    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red"
 }

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

@@ -1,4 +1,84 @@
 declare const colorSet: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+        orange50: string;
+        darkorange50: string;
+        orange30: string;
+        darkorange30: string;
+        green50: string;
+        darkgreen50: string;
+        opacity90: string;
+        facebookblue: string;
+    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -455,86 +535,6 @@ declare const colorSet: {
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
     };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-        pastelblue500: string;
-        pastelpink500: string;
-        pastelorange500: string;
-        pastelgreen500: string;
-        pastelpurple500: string;
-        darkpastelblue500: string;
-        darkpastelpink500: string;
-        darkpastelorange500: string;
-        darkpastelgreen500: string;
-        darkpastelpurple500: string;
-        green30: string;
-        darkgreen30: string;
-        orange50: string;
-        darkorange50: string;
-        orange30: string;
-        darkorange30: string;
-        green50: string;
-        darkgreen50: string;
-        opacity90: string;
-        facebookblue: string;
-    };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
         ui_cpnt_button_fill_base_default: string;
@@ -1177,6 +1177,8 @@ declare const colorSet: {
         ui_63: string;
         ui_64: string;
         ui_cpnt_sheet_border_04: string;
+        ui_cpnt_button_fill_base_01: string;
+        ui_cpnt_button_fill_base_hangup: string;
     };
 };
 export default colorSet;

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

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

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

@@ -640,4 +640,6 @@ export interface UITheme {
     ui_63: string;
     ui_64: string;
     ui_cpnt_sheet_border_04: string;
+    ui_cpnt_button_fill_base_01: string;
+    ui_cpnt_button_fill_base_hangup: string;
 }

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

@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
 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' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_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' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -40,6 +40,7 @@ var ContentsContainer = function (_a) {
         WTL_1: (react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTM_3: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
         WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
         WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare type WTMProps = {
     content1?: JSX.Element;
-    layoutType: 'WTM_1' | 'WTM_2';
+    layoutType: 'WTM_1' | 'WTM_2' | 'WTM_3';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -22,7 +22,8 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var layoutType = _a.layoutType;
     return ({
         WTM_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
-        WTM_2: 'height: 100%;'
+        WTM_2: 'height: 100%;',
+        WTM_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;'
     }[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 ({
         WTM_1: 'padding-bottom: 88px;',
-        WTM_2: 'height: 100%;'
+        WTM_2: 'height: 100%;',
+        WTM_3: ''
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
@@ -42,7 +44,8 @@ var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateOb
     var layoutType = _a.layoutType;
     return ({
         WTM_1: '',
-        WTM_2: 'height: 100%;overflow: hidden;'
+        WTM_2: 'height: 100%;overflow: hidden;',
+        WTM_3: ''
     }[layoutType]);
 });
 exports.default = WTM;

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

@@ -1,6 +1,6 @@
 import React, { MutableRefObject } 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' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_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' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;

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

@@ -65,6 +65,7 @@ var ContainersBox = function (_a) {
             WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTM_3: 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),
@@ -111,6 +112,7 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_3: 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),
@@ -156,6 +158,7 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_3: 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),
@@ -202,6 +205,7 @@ var ContainersBox = function (_a) {
                     WTL_1: '',
                     WTM_1: '',
                     WTM_2: '',
+                    WTM_3: '',
                     WTN_1: '',
                     WTN_2: '',
                     WTN_3: '',

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' | 'MSG_1' | 'MSH_1';
+    layoutType: 'MSA_1' | 'MSA_2' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -8,7 +8,8 @@ var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        MSA_1: (react_1.default.createElement(variation_1.MSA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSA_1: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSA_2: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         MSB_1: (react_1.default.createElement(variation_1.MSB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         MSC_1: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
         MSC_2: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 export declare type MSAProps = {
     content1?: JSX.Element;
+    layoutType: 'MSA_1' | 'MSA_2';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;
 };
-declare const MSA: ({ content1, containerColor, areaColor, isLoadingContainer1 }: MSAProps) => JSX.Element;
+declare const MSA: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1 }: MSAProps) => JSX.Element;
 export default MSA;

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

@@ -11,8 +11,8 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSA = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", areaColor: areaColor },
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, areaColor: areaColor },
         react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
@@ -22,7 +22,13 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  min-width: 360px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        MSA_1: 'padding-bottom: 88px;',
+        MSA_2: ''
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
+    layoutType: 'MSA_1' | 'MSA_2' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
     tabContent?: JSX.Element;
     content1?: JSX.Element;
     content2?: JSX.Element;

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

@@ -15,6 +15,7 @@ var ContainersBox = function (_a) {
     return (react_1.default.createElement(S_ContainersBox, null,
         {
             MSA_1: react_1.default.createElement(react_1.default.Fragment, null),
+            MSA_2: react_1.default.createElement(react_1.default.Fragment, null),
             MSB_1: react_1.default.createElement(react_1.default.Fragment, null),
             MSC_1: react_1.default.createElement(react_1.default.Fragment, null),
             MSC_2: react_1.default.createElement(react_1.default.Fragment, null),

package/dist/src/sub/DynamicLayout/common/components/index.d.ts

@@ -0,0 +1 @@
+export * from './pdsOriginal';

package/dist/src/sub/DynamicLayout/common/components/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./pdsOriginal"), exports);

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/IconType.d.ts

@@ -0,0 +1,5 @@
+declare type IconType = {
+    color: string;
+    size: number;
+} & Record<string, any>;
+export default IconType;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/IconType.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/Bell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Bell: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Bell;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/Bell.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Bell = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M14.5567,19.8493 C14.5567,21.2613 13.4117,22.4063 11.9997,22.4063 C10.5877,22.4063 9.4427,21.2613 9.4427,19.8493 L9.4427,19.8493 Z M11.9996,1.9861 C13.0956,1.9861 13.9826,2.8381 14.0596,3.9141 C17.1476,4.8351 18.9776,7.7771 18.9776,10.7231 L18.9776,10.7231 L18.9776,15.7421 C18.9776,15.7601 18.9846,15.7771 18.9976,15.7891 L18.9976,15.7891 L19.9836,16.7671 C20.9176,17.6921 20.2316,19.2361 18.8866,19.2361 L18.8866,19.2361 L5.1126,19.2361 C3.7686,19.2361 3.0826,17.6921 4.0156,16.7671 L4.0156,16.7671 L5.0026,15.7891 C5.0146,15.7771 5.0226,15.7601 5.0226,15.7421 L5.0226,15.7421 L5.0226,10.7231 C5.0226,7.7481 6.7096,4.7811 9.9416,3.8901 C10.0306,2.8251 10.9126,1.9861 11.9996,1.9861 Z" })));
+};
+exports.default = Bell;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/Bookmark.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Bookmark: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Bookmark;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/Bookmark.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Bookmark = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M17.2752,21.2916 L12.9662,18.9136 C12.3652,18.5816 11.6352,18.5816 11.0332,18.9136 L6.7252,21.2916 C5.7252,21.8436 4.5002,21.1206 4.5002,19.9786 L4.5002,6.0196 C4.5002,4.0866 6.0672,2.5196 8.0002,2.5196 L16.0002,2.5196 C17.9332,2.5196 19.5002,4.0866 19.5002,6.0196 L19.5002,19.9786 C19.5002,21.1206 18.2752,21.8436 17.2752,21.2916" })));
+};
+exports.default = Bookmark;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/Call.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Call: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Call;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/Call.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Call = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M8.0275,8.4492 L9.0875,7.3892 C9.8055,6.6712 9.8055,5.5072 9.0875,4.7892 L6.7535,2.4552 C6.0355,1.7372 4.8715,1.7372 4.1535,2.4552 L3.3975,3.2112 L3.0995,3.5092 L2.8655,3.7432 C1.9515,4.6572 1.7955,5.9312 2.0045,7.1402 C2.3625,9.2172 3.7245,12.6202 7.5495,16.4452 C11.3735,20.2692 14.6135,21.5532 16.8545,21.9902 C18.0575,22.2252 19.3385,22.0422 20.2515,21.1292 L20.4855,20.8952 L20.7835,20.5972 L21.5395,19.8412 C22.2575,19.1232 22.2575,17.9592 21.5395,17.2412 L19.2055,14.9072 C18.4875,14.1892 17.3235,14.1892 16.6055,14.9072 L15.5455,15.9672 C15.3185,16.1942 14.9565,16.2152 14.7095,16.0112 C13.4785,14.9972 12.2355,13.9052 11.1625,12.8322 C10.0895,11.7592 8.9975,10.5152 7.9835,9.2852 C7.7795,9.0372 7.8005,8.6762 8.0275,8.4492" })));
+};
+exports.default = Call;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/CallEnd.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const CallEnd: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default CallEnd;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/CallEnd.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var CallEnd = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M17.1891,13.2957 L17.1891,14.7587 C17.1891,15.7497 17.9921,16.5537 18.9831,16.5537 L22.2061,16.5537 C23.1961,16.5537 24.0001,15.7497 24.0001,14.7587 L24.0001,13.7147 L24.0001,13.3037 L24.0001,12.9807 C24.0001,11.7197 23.2281,10.7317 22.2501,10.0417 C20.5691,8.8557 17.2791,7.4467 12.0001,7.4467 C6.7201,7.4467 3.5991,8.7967 1.7501,10.0417 C0.7571,10.7107 0.0001,11.7197 0.0001,12.9807 L0.0001,13.3037 L0.0001,13.7147 L0.0001,14.7587 C0.0001,15.7497 0.8031,16.5537 1.7941,16.5537 L5.0171,16.5537 C6.0081,16.5537 6.8111,15.7497 6.8111,14.7587 L6.8111,13.2957 C6.8111,12.9827 7.0461,12.7177 7.3581,12.6877 C8.9071,12.5387 10.5191,12.4337 12.0001,12.4337 C13.4811,12.4337 15.0931,12.5387 16.6421,12.6877 C16.9541,12.7177 17.1891,12.9827 17.1891,13.2957" })));
+};
+exports.default = CallEnd;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/assets/icons/fill/Camera.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Camera: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Camera;