pds-dev-kit-web 2.0.14 → 2.1.0-alpha.1

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

@@ -186,14 +186,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
@@ -298,7 +298,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_16 || (t
     }
 });
 var normalActionColor = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundActiveColor);
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {

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

@@ -6,7 +6,7 @@ export declare type UploadIconButtonProps = {
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     baseColorKey?: UiColors;
     borderColorKey?: UiColors;
-    iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
+    iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
     iconFillType?: 'fill' | 'line';
     iconName: FillIconNameKeys | LineIconNameKeys;
     iconColorKey?: UiColors;

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

@@ -67,7 +67,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         ? ''
         : theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {

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

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -49,6 +49,7 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
+    grey2: 'sysTextSecondary',
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
@@ -91,6 +92,8 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
         case 'red':
         case 'grey_01':
             return colorThemeDefault;
+        case 'grey2':
+            return colorThemeDefault;
         case 'white':
             return colorThemeWhite;
         case 'white2':

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

@@ -1,3 +1,4 @@
+import { BasicButtonGroup } from './BasicButtonGroup';
 import { BasicChatListItem } from './BasicChatListItem';
 import { BasicFormGroup } from './BasicFormGroup';
 import { BasicList } from './BasicList';
@@ -24,7 +25,9 @@ import { MobileHeaderBar } from './MobileHeaderBar';
 import { MobileTabBar } from './MobileTabBar';
 import { Radio } from './Radio';
 import { ReactionButton } from './ReactionButton';
+import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
+import { Slider } from './Slider';
 import { StatusBlock } from './StatusBlock';
 import { TextButton } from './TextButton';
 import { TextField } from './TextField';
@@ -32,4 +35,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
+export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = 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 = void 0;
+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;
+var BasicButtonGroup_1 = require("./BasicButtonGroup");
+Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
 Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return BasicChatListItem_1.BasicChatListItem; } });
 var BasicFormGroup_1 = require("./BasicFormGroup");
@@ -53,8 +55,12 @@ 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 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 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 { 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, Select as M_Select, 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, 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 { 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,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = 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_Select = 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.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_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;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -30,6 +31,7 @@ var ContainersBox_4 = require("./layout/LayoutMS/ContainersBox");
 Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return ContainersBox_4.ContainersBox; } });
 // components
 var components_1 = require("./components");
+Object.defineProperty(exports, "M_BasicButtonGroup", { enumerable: true, get: function () { return components_1.BasicButtonGroup; } });
 Object.defineProperty(exports, "M_BasicChatListItem", { enumerable: true, get: function () { return components_1.BasicChatListItem; } });
 Object.defineProperty(exports, "M_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
 Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
@@ -56,7 +58,9 @@ Object.defineProperty(exports, "M_MobileHeaderBar", { enumerable: true, get: fun
 Object.defineProperty(exports, "M_MobileTabBar", { enumerable: true, get: function () { return components_1.MobileTabBar; } });
 Object.defineProperty(exports, "M_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
 Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: function () { return components_1.ReactionButton; } });
+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_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_TextField", { enumerable: true, get: function () { return components_1.TextField; } });

package/dist/src/sub/DynamicLayout/mock_storybook.js

@@ -1146,21 +1146,18 @@ exports.SampleSectionsMock = [
         updatedAt: '2023-01-12T08:03:48'
     },
     {
+        display: true,
         type: 'PROGRAMMED',
         program: 'MEMBERSHIP_DISPLAY',
-        display: true,
-        dynamicLayoutSectionItems: null,
+        dynamicLayoutSectionItems: [],
         id: 6010,
-        insertedAt: '2023-01-06T09:05:45',
         manifest: {
             availableProperties: [
                 'title',
                 'description',
                 'button_alpha_label',
                 'button_alpha_link_type',
-                'button_alpha_link_src',
-                'section_content_media_type',
-                'section_content_media_src'
+                'button_alpha_link_src'
             ],
             availableStyles: [
                 'title_color_in_hex',
@@ -1179,7 +1176,7 @@ exports.SampleSectionsMock = [
             availableTemplates: ['PRG_MEMBERSHIP_DISPLAY_A', 'PRG_MEMBERSHIP_DISPLAY_B'],
             schema: 'PRG_MEMBERSHIP_DISPLAY'
         },
-        order: 10,
+        order: 8,
         properties: {
             buttonAlphaLabel: 'Lorem Ipsum',
             buttonAlphaLinkSrc: 'https://team.publ.space',
@@ -1200,45 +1197,140 @@ exports.SampleSectionsMock = [
             carouselAutoplayTime: 3,
             carouselInfiniteLoopMode: 'NO_USE',
             description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
-            itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
             sectionContentMediaSrc: '',
             sectionContentMediaType: 'IMAGE',
             title: 'Lorem Ipsum',
-            multiPurposeUrl: 'https://app.publr.co/'
+            multiPurposeUrl: 'https://app.publr.co/',
+            itemLinkMethod: 'NONE'
         },
         styles: {
-            backgroundColorInHex: '#FF1D973B',
+            backgroundColorInHex: '#4A5D78AB',
             backgroundMediaSrc: '',
             backgroundMediaType: 'IMAGE',
             backgroundOverlayColorInHex: '#FFFFFF00',
-            buttonAlphaBackgroundColorInHex: '#FFC0CBFF',
+            buttonAlphaBackgroundColorInHex: '#313131FF',
             buttonAlphaDesignType: 'C',
             buttonAlphaLabelColorInHex: '#f5efd9FF',
-            buttonBravoBackgroundColorInHex: '#FFC0CBFF',
+            buttonBravoBackgroundColorInHex: '#313131FF',
             buttonBravoDesignType: 'E',
             buttonBravoLabelColorInHex: '#FFFFFFFF',
             buttonCharlieBackgroundColorInHex: '#465FF000',
             buttonCharlieDesignType: 'E',
             buttonCharlieLabelColorInHex: '#FFFFFFFF',
-            buttonDeltaBackgroundColorInHex: '#FFC0CBFF',
+            buttonDeltaBackgroundColorInHex: '#313131FF',
             buttonDeltaDesignType: 'A',
             buttonDeltaLabelColorInHex: '#FFFFFFFF',
-            buttonEchoBackgroundColorInHex: '#FFC0CBFF',
+            buttonEchoBackgroundColorInHex: '#313131FF',
             buttonEchoDesignType: 'A',
             buttonEchoLabelColorInHex: '#FFFFFFFF',
-            descriptionColorInHex: '#FEECD8FF',
-            itemButtonBackgroundColorInHex: '#FFC0CBFF',
+            descriptionColorInHex: '#DEECFFA6',
+            itemButtonBackgroundColorInHex: '#313131FF',
             itemButtonDesignType: 'A',
             itemButtonLabelColorInHex: '#FFFFFFFF',
             itemDescriptionColorInHex: '#68686BFF',
             itemTitleColorInHex: '#1E1E20FF',
-            itemHighlightingColorInHex: '#FF1D97FF',
+            titleColorInHex: '#DEECFFFF',
+            itemHighlightingColorInHex: '#ff7f50FF',
             itemToneType: 'LIGHT',
-            titleColorInHex: '#F8FFACFF',
             programmedItemActionButtonTextType: 'A'
         },
-        template: 'PRG_MEMBERSHIP_DISPLAY_B',
-        updatedAt: '2023-01-06T09:05:45'
+        template: 'PRG_MEMBERSHIP_DISPLAY_A',
+        programData: {
+            mdid: 'mdid',
+            preview: {
+                availableResources: ['REAL.MEMBERSHIP_DISPLAY'],
+                resources: {
+                    mock: {},
+                    real: {
+                        membershipDisplay: {
+                            id: 1,
+                            mdid: "MEMBERSHIP_DISPLAY_MD_ID",
+                            title: "MEMBERSHIP_DISPLAY_MD_TITLE",
+                            isDefault: true,
+                            connectedMemberships: Array.from({ length: 6 }, function (_, i) {
+                                var alphabet = ['A', 'B', 'C', 'D', 'E', 'F'];
+                                var cardImage = [
+                                    'https://cdn.dev.publishingkit.net/7f3f7a31-023b-4852-9a11-cbac31d25d93',
+                                    'https://cdn.dev.publishingkit.net/c8973261-6c2a-4833-9b9f-20ee355647e4',
+                                    'https://cdn.dev.publishingkit.net/8e585c93-9591-4300-ad93-d002560cbeae',
+                                    'https://cdn.dev.publishingkit.net/4aaa2811-b3ff-435c-b50a-9486376ab230',
+                                    'https://cdn.dev.publishingkit.net/5111c33c-07ba-4b91-8eb6-9975f4cd906a',
+                                    'https://cdn.dev.publishingkit.net/16ac0a8a-acb1-465b-960c-6be66f2a04e8.jpg'
+                                ];
+                                var getOverlayType = function () {
+                                    if (i % 3 === 1)
+                                        return 'SOLID';
+                                    if (i % 3 === 2)
+                                        return 'GRADIENT';
+                                    return 'NONE';
+                                };
+                                var getDesignSchema = function () {
+                                    if (i % 3 === 1)
+                                        return 'B';
+                                    if (i % 3 === 2)
+                                        return 'C';
+                                    return 'A';
+                                };
+                                return {
+                                    id: i + 1,
+                                    order: i,
+                                    mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
+                                    mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
+                                    membership: {
+                                        id: i + 1,
+                                        type: 'GENERAL',
+                                        mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
+                                        title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                        insertedAt: '2023-01-06T09:05:45',
+                                        updatedAt: '2023-01-06T09:05:45',
+                                        membershipCardTemplate: {
+                                            backgroundImageSrc: cardImage[i],
+                                            logoImageSrc: 'https://publ-upload-local.s3.ap-northeast-2.amazonaws.com/e11d1a92-a1c0-4faa-b341-13a32f21828d_image',
+                                            overlayType: getOverlayType(),
+                                            overlayColorPrimary: '#FFC0CB49',
+                                            overlayColorSecondary: '#31313149',
+                                            designSchema: getDesignSchema()
+                                        },
+                                        membershipBenefitInfo: {
+                                            benefitAlpha: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                            benefitBravo: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
+                                            benefitCharlie: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                            benefitDelta: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
+                                            benefitEcho: 'Lorem ipsum dolor sit amet. Et magnam molestiae.'
+                                        },
+                                        totalSubscriptionProducts: 3
+                                    },
+                                    connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
+                                        return {
+                                            id: i + 1,
+                                            order: i,
+                                            connectedMembershipId: i + 1,
+                                            subscriptionProductId: i + 1,
+                                            subscriptionProduct: {
+                                                id: i + 1,
+                                                type: 'COUPON_ONCE_FINITE',
+                                                title: '청춘이 황금시대를 우리의 같은 무엇을',
+                                                alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
+                                                expiryPeriodInDays: 7,
+                                                isDeactivated: i % 2 === 0,
+                                                fee: {
+                                                    currency: 'KRW',
+                                                    amount: 10000
+                                                },
+                                                insertedAt: '2023-01-06T09:05:45',
+                                                updatedAt: '2023-01-06T09:05:45'
+                                            }
+                                        };
+                                    })
+                                };
+                            })
+                        }
+                    }
+                }
+            }
+        },
+        insertedAt: '2023-01-30T10:24:35',
+        updatedAt: '2023-01-30T10:24:35'
     }
 ];
 var MembershipSectionsMock = function (templateType) { return [

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/mobile/components/SectionContents.js

@@ -30,7 +30,7 @@ function SectionContents() {
     }
     var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
     var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "headingBold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Regular" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
 var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
     var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/mobile/components/SectionContents.js

@@ -30,7 +30,7 @@ function SectionContents() {
     }
     var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
     var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "headingBold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Regular" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
 var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
     var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;

package/package.json

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

package/release-note.md

@@ -1,15 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.0.14]
-## daily|https://design.storybook.publ.biz/
+## [v2.1.0-alpha.1]
+## alpha|https://design.storybook.publ.biz/
 
 ### components
-* Icon
-    * ic_dotted_circle line icon 추가
-* IconButton
-    * tooltip 기능 추가
-* TextField
-    * stepper 기능 추가 
-### layout
-* WSI_1 생성
-### Color
-* 컬러 키 값 23.06.21 18시 30분 기준 싱크
+* TextFieldBase
+    * stepper기능과 함께 들어갔던 z-index 제거