pds-dev-kit-web 2.0.12 → 2.0.13-alpha.1

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

@@ -1110,8 +1110,8 @@ exports.samplePageMembershipSection = {
         itemDescriptionColorInHex: '#68686BFF',
         itemTitleColorInHex: '#1E1E20FF',
         titleColorInHex: '#DEECFFFF',
-        itemHighlightingColorInHex: '#313131FF',
-        itemToneType: 'LIGHT',
+        itemHighlightingColorInHex: '#FFCC00FF',
+        itemToneType: 'DARK',
         programmedItemActionButtonTextType: 'A'
     },
     template: 'PRG_MEMBERSHIP_DISPLAY_B',
@@ -1184,7 +1184,7 @@ exports.samplePageMembershipSection = {
                                     },
                                     totalSubscriptionProducts: 3
                                 },
-                                connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, i) {
+                                connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
                                     return {
                                         id: i + 1,
                                         order: i,

package/dist/src/sub/DynamicLayout/mock_storybook.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type DynamicLayout from './DynamicLayout';
 export declare const SampleSectionsMock: React.ComponentProps<typeof DynamicLayout>['sections'];
-export declare const MembershipSectionsMock: React.ComponentProps<typeof DynamicLayout>['sections'];
-export declare const MembershipSectionsMockWithoutMembership: React.ComponentProps<typeof DynamicLayout>['sections'];
-export declare const MembershipSectionsMockWithoutConnectedSubscriptionProducts: React.ComponentProps<typeof DynamicLayout>['sections'];
-export declare const MembershipSectionsMockOnlyOneConnectedSubscriptionProduct: React.ComponentProps<typeof DynamicLayout>['sections'];
+export declare const MembershipSectionsMock: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];
+export declare const MembershipSectionsMockWithoutMembership: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];
+export declare const MembershipSectionsMockWithoutConnectedSubscriptionProducts: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];
+export declare const MembershipSectionsMockOnlyOneConnectedSubscriptionProduct: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];

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

@@ -1241,7 +1241,7 @@ exports.SampleSectionsMock = [
         updatedAt: '2023-01-06T09:05:45'
     }
 ];
-exports.MembershipSectionsMock = [
+var MembershipSectionsMock = function (templateType) { return [
     {
         type: 'DESIGNED',
         display: true,
@@ -1432,7 +1432,7 @@ exports.MembershipSectionsMock = [
             itemToneType: 'LIGHT',
             programmedItemActionButtonTextType: 'A'
         },
-        template: 'PRG_MEMBERSHIP_DISPLAY_A',
+        template: templateType,
         programData: {
             mdid: 'mdid',
             preview: {
@@ -1498,19 +1498,19 @@ exports.MembershipSectionsMock = [
                                         },
                                         totalSubscriptionProducts: 3
                                     },
-                                    connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, j) {
+                                    connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
                                         return {
-                                            id: j + 1,
-                                            order: j,
-                                            connectedMembershipId: j + 1,
-                                            subscriptionProductId: j + 1,
+                                            id: i + 1,
+                                            order: i,
+                                            connectedMembershipId: i + 1,
+                                            subscriptionProductId: i + 1,
                                             subscriptionProduct: {
-                                                id: j + 1,
+                                                id: i + 1,
                                                 type: 'COUPON_ONCE_FINITE',
                                                 title: '청춘이 황금시대를 우리의 같은 무엇을',
                                                 alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
                                                 expiryPeriodInDays: 7,
-                                                isDeactivated: j % 2 === 0,
+                                                isDeactivated: i % 2 === 0,
                                                 fee: {
                                                     currency: 'KRW',
                                                     amount: 10000
@@ -1530,8 +1530,9 @@ exports.MembershipSectionsMock = [
         insertedAt: '2023-01-30T10:24:35',
         updatedAt: '2023-01-30T10:24:35'
     }
-];
-exports.MembershipSectionsMockWithoutMembership = [
+]; };
+exports.MembershipSectionsMock = MembershipSectionsMock;
+var MembershipSectionsMockWithoutMembership = function (templateType) { return [
     {
         type: 'DESIGNED',
         display: true,
@@ -1722,7 +1723,7 @@ exports.MembershipSectionsMockWithoutMembership = [
             itemToneType: 'LIGHT',
             programmedItemActionButtonTextType: 'A'
         },
-        template: 'PRG_MEMBERSHIP_DISPLAY_A',
+        template: templateType,
         programData: {
             mdid: 'mdid',
             preview: {
@@ -1744,8 +1745,9 @@ exports.MembershipSectionsMockWithoutMembership = [
         insertedAt: '2023-01-30T10:24:35',
         updatedAt: '2023-01-30T10:24:35'
     }
-];
-exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = [
+]; };
+exports.MembershipSectionsMockWithoutMembership = MembershipSectionsMockWithoutMembership;
+var MembershipSectionsMockWithoutConnectedSubscriptionProducts = function (templateType) { return [
     {
         type: 'DESIGNED',
         display: true,
@@ -1936,7 +1938,7 @@ exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = [
             itemToneType: 'LIGHT',
             programmedItemActionButtonTextType: 'A'
         },
-        template: 'PRG_MEMBERSHIP_DISPLAY_A',
+        template: templateType,
         programData: {
             mdid: 'mdid',
             preview: {
@@ -2013,8 +2015,9 @@ exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = [
         insertedAt: '2023-01-30T10:24:35',
         updatedAt: '2023-01-30T10:24:35'
     }
-];
-exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
+]; };
+exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = MembershipSectionsMockWithoutConnectedSubscriptionProducts;
+var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templateType) { return [
     {
         type: 'DESIGNED',
         display: true,
@@ -2205,7 +2208,7 @@ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
             itemToneType: 'LIGHT',
             programmedItemActionButtonTextType: 'A'
         },
-        template: 'PRG_MEMBERSHIP_DISPLAY_A',
+        template: templateType,
         programData: {
             mdid: 'mdid',
             preview: {
@@ -2271,19 +2274,19 @@ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
                                         },
                                         totalSubscriptionProducts: 3
                                     },
-                                    connectedSubscriptionProducts: Array.from({ length: 1 }, function (_, j) {
+                                    connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
                                         return {
-                                            id: j + 1,
-                                            order: j,
-                                            connectedMembershipId: j + 1,
-                                            subscriptionProductId: j + 1,
+                                            id: i + 1,
+                                            order: i,
+                                            connectedMembershipId: i + 1,
+                                            subscriptionProductId: i + 1,
                                             subscriptionProduct: {
-                                                id: j + 1,
+                                                id: i + 1,
                                                 type: 'COUPON_ONCE_FINITE',
                                                 title: '청춘이 황금시대를 우리의 같은 무엇을',
                                                 alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
                                                 expiryPeriodInDays: 7,
-                                                isDeactivated: j % 2 === 0,
+                                                isDeactivated: i % 2 === 0,
                                                 fee: {
                                                     currency: 'KRW',
                                                     amount: 10000
@@ -2303,4 +2306,5 @@ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
         insertedAt: '2023-01-30T10:24:35',
         updatedAt: '2023-01-30T10:24:35'
     }
-];
+]; };
+exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = MembershipSectionsMockOnlyOneConnectedSubscriptionProduct;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js

@@ -31,7 +31,7 @@ function MembershipPlanSheet(_a) {
     var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, sectionStyles = _a.sectionStyles;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var subscriptionProduct = connectedSubscriptionProducts.subscriptionProduct;
-    var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee;
+    var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee, isDeactivated = subscriptionProduct.isDeactivated;
     var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
     var productFeeText = (0, react_1.useMemo)(function () {
         var amount = fee.amount, currency = fee.currency;
@@ -68,7 +68,7 @@ function MembershipPlanSheet(_a) {
                     display: 'flex',
                     cursor: 'pointer',
                     backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
-                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t(constants_1.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT[type]), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, wordBreak: "break_all", ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, styleTheme: "body2Bold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, wordBreak: "break_all", textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconName: "ic_arrow_down", iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonText: itemActionButtonText, buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", "$paddingBottom": "56px" }, void 0)] }, void 0));
+                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t(constants_1.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT[type]), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, wordBreak: "break_all", ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, styleTheme: "body2Bold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, wordBreak: "break_all", textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconName: "ic_arrow_down", iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: isDeactivated ? undefined : itemHighlightingColorInHex, buttonText: itemActionButtonText, buttonTextColor: isDeactivated ? undefined : '#FDFDFDFF', state: isDeactivated ? 'disabled' : 'normal' }, void 0)] }, void 0));
 }
 var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_MembershipInfoBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.js

@@ -44,10 +44,10 @@ var Section_1 = require("../../../../../../../../DynamicLayout/components/Sectio
 var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 var styled_components_1 = __importStar(require("styled-components"));
-var EmptyMembershipPlanSheet_1 = __importDefault(require("./EmptyMembershipPlanSheet"));
 var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
 var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
 var NarrowMembershipListView_1 = __importDefault(require("./NarrowMembershipListView"));
+var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
 var WideMembershipListView_1 = __importDefault(require("./WideMembershipListView"));
 function MembershipSheet(_a) {
     var connectedMemberships = _a.connectedMemberships, isWideView = _a.isWideView;
@@ -67,9 +67,8 @@ function MembershipSheet(_a) {
                         display: 'flex',
                         flex: '2',
                         overflow: 'auto',
-                        padding: '56px',
-                        paddingRight: '0'
-                    }, width: "100%", height: "720px", shapeType: "round" }, { children: [membership.membershipCardTemplate && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membership.membershipCardTemplate }, void 0)), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, { children: [membership.title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProducts: connectedSubscriptionProducts[0], sectionStyles: section.styles }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }, void 0)] }), void 0) }), void 0)] }), void 0));
+                        padding: isOnlyMembership ? '56px 10%' : '56px 0 56px 56px'
+                    }, width: "100%", height: "720px", shapeType: "round" }, { children: [membership.membershipCardTemplate && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membership.membershipCardTemplate }, void 0)), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isOnlyMembership: isOnlyMembership }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProducts: connectedSubscriptionProducts[0], sectionStyles: section.styles }, void 0)) : ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0) }), void 0)] }), void 0));
 }
 var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ", ";\n    border: 8px solid transparent;\n    border-radius: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    height: 10px;\n    width: 24px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ", ";\n    border: 8px solid transparent;\n    border-radius: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    height: 10px;\n    width: 24px;\n  }\n"])), function (_a) {
     var itemToneType = _a.itemToneType;
@@ -87,8 +86,8 @@ var S_MembershipDetailBox = styled_components_1.default.div(templateObject_4 ||
     var theme = _a.theme;
     return theme.spacing.spacingH;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingH;
+    var isOnlyMembership = _a.isOnlyMembership, theme = _a.theme;
+    return (isOnlyMembership ? 0 : theme.spacing.spacingH);
 });
 exports.default = MembershipSheet;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js

@@ -42,14 +42,21 @@ var constants_1 = require("../../../../../../../../DynamicLayout/sections/Member
 var styled_components_1 = __importStar(require("styled-components"));
 function NarrowMembershipListView(_a) {
     var connectedMemberships = _a.connectedMemberships, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, itemToneType = _a.itemToneType, currentIndex = _a.currentIndex, handleMembershipClick = _a.handleMembershipClick;
+    var resizeTarget = (0, react_1.useRef)(null);
     var membershipListRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(0), scrollValue = _b[0], setScrollValue = _b[1];
+    var _c = (0, react_1.useState)(0), targetWidth = _c[0], setTargetWidth = _c[1];
     var handleScroll = function () {
         if (membershipListRef === null || membershipListRef.current === null) {
             return;
         }
         setScrollValue(membershipListRef.current.scrollLeft);
     };
+    /**
+     * @when : 화면 진입 시
+     * @expected : 스크롤을 감지하는 이벤트 핸들러를 추가합니다.
+     * @clear : 스크롤을 감지하는 이벤트 핸들러를 제거합니다.
+     */
     (0, react_1.useEffect)(function () {
         if (!membershipListRef.current) {
             return;
@@ -62,11 +69,38 @@ function NarrowMembershipListView(_a) {
             membershipListRef.current.removeEventListener('scroll', handleScroll);
         };
     }, []);
+    /**
+     * @when : 화면 진입 시
+     * @expected : 콘텐츠 영역의 크기를 확인해서 observer를 추가합니다.
+     * @clear : observer를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        var element = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current;
+        if (!element)
+            return;
+        var observer = new ResizeObserver(function (entries) {
+            entries.forEach(function (entry) {
+                setTargetWidth(entry.contentRect.width);
+            });
+        });
+        observer.observe(element);
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
     var isLeftMaskingCoverShow = connectedMemberships.length > 2 && scrollValue > 0;
-    var isRightMaskingCoverShow = connectedMemberships.length > 2 && membershipListRef.current
-        ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
-            membershipListRef.current.scrollWidth - 1
-        : connectedMemberships.length > 2 && scrollValue === 0;
+    var isRightMaskingCoverShow = (0, react_1.useMemo)(function () {
+        if (connectedMemberships.length < 3) {
+            return false;
+        }
+        if (scrollValue === 0) {
+            return true;
+        }
+        return membershipListRef.current
+            ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
+                membershipListRef.current.scrollWidth - 1
+            : scrollValue === 0;
+    }, [connectedMemberships, membershipListRef.current, scrollValue, targetWidth]);
     var scrollPrev = function (x) {
         var scrollLeft = (membershipListRef.current || {}).scrollLeft;
         if (membershipListRef.current && typeof scrollLeft === 'number') {
@@ -81,7 +115,7 @@ function NarrowMembershipListView(_a) {
             setScrollValue(scrollLeft + x);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: connectedMemberships.length > 0 && ((0, jsx_runtime_1.jsxs)(S_MembershipListBox, { children: [isLeftMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "left" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_left", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollPrev(500); } }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(S_ContentOperatorPanel, __assign({ ref: membershipListRef, isLeftMaskingCoverShow: isLeftMaskingCoverShow, isRightMaskingCoverShow: isRightMaskingCoverShow, centered: connectedMemberships.length <= 2 }, { children: connectedMemberships.map(function (_a, i) {
+    return ((0, jsx_runtime_1.jsx)(S_NarrowMembershipList, { children: connectedMemberships.length > 0 && ((0, jsx_runtime_1.jsxs)(S_MembershipListBox, { children: [isLeftMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "left" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_left", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollPrev(500); } }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(S_ContentOperatorPanel, __assign({ ref: membershipListRef, isLeftMaskingCoverShow: isLeftMaskingCoverShow, isRightMaskingCoverShow: isRightMaskingCoverShow, centered: connectedMemberships.length <= 2 }, { children: connectedMemberships.map(function (_a, i) {
                         var id = _a.id, membership = _a.membership;
                         return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
                                     backgroundColor: i === currentIndex
@@ -105,15 +139,16 @@ function NarrowMembershipListView(_a) {
                                         : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0) }), void 0) }, id));
                     }) }), void 0), isRightMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "right" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_right", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollNext(500); } }, void 0) }), void 0))] }, void 0)) }, void 0));
 }
-var S_MembershipListBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"], ["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"])), function (_a) {
+var S_NarrowMembershipList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var S_MembershipListBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"], ["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
-var Centered = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-var LeftMasking = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"])));
-var RightMasking = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"])));
-var BothMasking = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"], ["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"])));
-var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"], ["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"])), function (_a) {
+var Centered = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var LeftMasking = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"])));
+var RightMasking = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"])));
+var BothMasking = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"], ["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"])));
+var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"], ["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"])), function (_a) {
     var centered = _a.centered;
     return centered && Centered;
 }, function (_a) {
@@ -128,7 +163,7 @@ var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_6 ||
         return RightMasking;
     }
 });
-var S_ArrowIconCover = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"])), function (_a) {
+var S_ArrowIconCover = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"])), function (_a) {
     var position = _a.position;
     return (position === 'left' ? 'flex-start' : 'flex-end');
 }, function (_a) {
@@ -136,4 +171,4 @@ var S_ArrowIconCover = styled_components_1.default.div(templateObject_7 || (temp
     return position && position + ":0";
 });
 exports.default = NarrowMembershipListView;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js

@@ -31,7 +31,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;
     var isEmptySection = !title && !description && !buttonAlphaLabel;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySection: isEmptySection }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "headingBold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_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({ isEmptySection: isEmptySection }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_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 isEmptySection = _a.isEmptySection;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts}

@@ -3,5 +3,5 @@ import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types
 declare type Props = {
     sectionStyles: ISectionStyles;
 };
-declare function EmptyMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
-export default EmptyMembershipPlanSheet;
+declare function UnavailableMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
+export default UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js}

@@ -17,16 +17,17 @@ var panels_1 = require("../../../../../../../../../desktop/panels");
 var components_1 = require("../../../../../../../../../hybrid/components");
 var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
-function EmptyMembershipPlanSheet(_a) {
+function UnavailableMembershipPlanSheet(_a) {
     var sectionStyles = _a.sectionStyles;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", paddingBottom: "spacing_d", overrideCSS: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", overrideCSS: {
                     display: 'flex',
                     alignItems: 'center',
+                    justifyContent: 'center',
                     height: '112px',
                     backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
                 } }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5300'), color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonText: t(constants_1.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT[programmedItemActionButtonTextType]), state: "disabled", buttonTextColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].disabledProgrammedItemActionButtonTextColor, buttonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
                     .disabledProgrammedItemActionButtonBackgroundColor, "$paddingBottom": "56px" }, void 0)] }, void 0));
 }
-exports.default = EmptyMembershipPlanSheet;
+exports.default = UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.js

@@ -29,8 +29,7 @@ function MembershipSheet() {
             backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center',
-            marginBottom: '96px'
+            justifyContent: 'center'
         }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0));
 }
 exports.default = MembershipSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/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: "displayBold" }, 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: "body1Bold" }, 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/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.d.ts

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-import type { IConnectedSubscriptionProducts, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../../../../../../DynamicLayout/types';
+import type { IConnectedSubscriptionProducts, ISectionStyles } from '../../../../../../../../DynamicLayout/types';
 declare type Props = {
     connectedSubscriptionProduct: IConnectedSubscriptionProducts;
-    itemToneType: TypeOfItemToneType;
-    itemHighlightingColorInHex: string;
-    programmedItemActionButtonTextType: TypeOfProgrammedItemActionButtonTextType;
+    sectionStyles: ISectionStyles;
 };
-declare function MembershipPlanSheet({ connectedSubscriptionProduct, itemToneType, itemHighlightingColorInHex, programmedItemActionButtonTextType }: Props): JSX.Element;
+declare function MembershipPlanSheet({ connectedSubscriptionProduct, sectionStyles }: Props): JSX.Element;
 export default MembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.js

@@ -28,10 +28,11 @@ var constants_1 = require("../../../../../../../../DynamicLayout/sections/Member
 var formatCurrency_1 = __importDefault(require("../../../../../../../../DynamicLayout/utils/formatCurrency"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function MembershipPlanSheet(_a) {
-    var connectedSubscriptionProduct = _a.connectedSubscriptionProduct, itemToneType = _a.itemToneType, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, programmedItemActionButtonTextType = _a.programmedItemActionButtonTextType;
+    var connectedSubscriptionProduct = _a.connectedSubscriptionProduct, sectionStyles = _a.sectionStyles;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var subscriptionProduct = connectedSubscriptionProduct.subscriptionProduct;
-    var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee;
+    var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee, isDeactivated = subscriptionProduct.isDeactivated;
+    var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
     var productFeeText = (0, react_1.useMemo)(function () {
         var amount = fee.amount, currency = fee.currency;
         var price = (0, formatCurrency_1.default)(amount, currency);
@@ -67,7 +68,7 @@ function MembershipPlanSheet(_a) {
                     display: 'flex',
                     cursor: 'pointer',
                     backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
-                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t(constants_1.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT[type]), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", lineLimit: 2, ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, styleTheme: "body2Bold", wordBreak: "break_all", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, iconName: "ic_arrow_down" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", buttonText: itemActionButtonText }, void 0)] }, void 0));
+                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t(constants_1.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT[type]), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", lineLimit: 2, ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, styleTheme: "body2Bold", wordBreak: "break_all", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, iconName: "ic_arrow_down" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: isDeactivated ? undefined : itemHighlightingColorInHex, buttonText: itemActionButtonText, buttonTextColor: isDeactivated ? undefined : '#FDFDFDFF', state: isDeactivated ? 'disabled' : 'normal' }, void 0)] }, void 0));
 }
 var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_MembershipInfoBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipSheet.js

@@ -27,10 +27,10 @@ var Section_1 = require("../../../../../../../../DynamicLayout/components/Sectio
 var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 var styled_components_1 = __importDefault(require("styled-components"));
-var EmptyMembershipPlanSheet_1 = __importDefault(require("./EmptyMembershipPlanSheet"));
 var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
 var MembershipCard_1 = __importDefault(require("./MembershipCard"));
 var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
+var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
 function MembershipSheet(_a) {
     var filteredMemberships = _a.filteredMemberships, isWideView = _a.isWideView;
     var _b = (0, react_1.useState)(0), currentIndex = _b[0], setCurrentIndex = _b[1];
@@ -38,7 +38,7 @@ function MembershipSheet(_a) {
     if (!section) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
-    var _c = section.styles, itemHighlightingColorInHex = _c.itemHighlightingColorInHex, itemToneType = _c.itemToneType, programmedItemActionButtonTextType = _c.programmedItemActionButtonTextType;
+    var itemToneType = section.styles.itemToneType;
     var currentMembership = filteredMemberships[currentIndex];
     var membership = currentMembership.membership, connectedSubscriptionProducts = currentMembership.connectedSubscriptionProducts;
     var handlePrevMembershipClick = function () {
@@ -64,7 +64,7 @@ function MembershipSheet(_a) {
                     paddingLeft: isWideView ? '160px' : '64px',
                     paddingRight: isWideView ? '160px' : '64px',
                     paddingTop: '80px'
-                }, width: "100%", height: "auto", shapeType: "round" }, { children: [(0, jsx_runtime_1.jsx)(MembershipCard_1.default, { membershipCardTemplate: membership.membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isWideView: isWideView }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, ellipsisMode: "use" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProduct: connectedSubscriptionProducts[0], itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex, programmedItemActionButtonTextType: programmedItemActionButtonTextType }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0)] }, void 0));
+                }, width: "100%", height: "auto", shapeType: "round" }, { children: [(0, jsx_runtime_1.jsx)(MembershipCard_1.default, { membershipCardTemplate: membership.membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isWideView: isWideView }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, ellipsisMode: "use" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProduct: connectedSubscriptionProducts[0], sectionStyles: section.styles }, void 0)) : ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0)] }, void 0));
 }
 var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"])));
 var S_ArrowButtonBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: ", ";\n"])), function (_a) {

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/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.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "headingBold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_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.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_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;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts}

@@ -3,5 +3,5 @@ import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types
 declare type Props = {
     sectionStyles: ISectionStyles;
 };
-declare function EmptyMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
-export default EmptyMembershipPlanSheet;
+declare function UnavailableMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
+export default UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js}

@@ -17,16 +17,17 @@ var panels_1 = require("../../../../../../../../../desktop/panels");
 var components_1 = require("../../../../../../../../../hybrid/components");
 var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
-function EmptyMembershipPlanSheet(_a) {
+function UnavailableMembershipPlanSheet(_a) {
     var sectionStyles = _a.sectionStyles;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", paddingBottom: "spacing_d", overrideCSS: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", overrideCSS: {
                     display: 'flex',
                     alignItems: 'center',
+                    justifyContent: 'center',
                     height: '112px',
                     backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
                 } }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5300'), color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonText: t(constants_1.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT[programmedItemActionButtonTextType]), state: "disabled", buttonTextColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].disabledProgrammedItemActionButtonTextColor, buttonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
                     .disabledProgrammedItemActionButtonBackgroundColor }, void 0)] }, void 0));
 }
-exports.default = EmptyMembershipPlanSheet;
+exports.default = UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/M_TemplateB.js

@@ -17,9 +17,12 @@ function TemplateB(_a) {
     var orderedConnectedMemberships = membershipDisplay.connectedMemberships.slice().sort(function (a, b) { return a.order - b.order; }) || [];
     return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), orderedConnectedMemberships.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipContents_1.default, { orderedConnectedMemberships: orderedConnectedMemberships }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipSheet_1.default, {}, void 0))] }, void 0));
 }
-var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
+var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " auto;\n  padding: 0 ", ";\n"], ["\n  margin: ", " auto;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
 });
 exports.default = TemplateB;
 var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,9 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
@@ -25,7 +18,6 @@ var panels_1 = require("../../../../../../../../../desktop/panels");
 var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
 var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
-var styled_components_1 = __importDefault(require("styled-components"));
 function MembershipSheet() {
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var section = (0, react_1.useContext)(Section_1.sectionContext);
@@ -33,23 +25,11 @@ function MembershipSheet() {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
     var itemToneType = section.styles.itemToneType;
-    return ((0, jsx_runtime_1.jsx)(S_EmptyMembershipSheet, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
-                backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginBottom: '96px'
-            }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
+            backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0));
 }
-var S_EmptyMembershipSheet = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n  padding: 0 ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
 exports.default = MembershipSheet;
-var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipBenefitInfo.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var pdsOriginal_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal");
-var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var components_1 = require("../../../../../../../../DynamicLayout/components");
+var mobile_1 = require("../../../../../../../../DynamicLayout/components/mobile");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 function MembershipBenefitInfo(_a) {
     var membershipBenefitInfo = _a.membershipBenefitInfo, itemToneType = _a.itemToneType;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [membershipBenefitInfo.benefitAlpha && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitAlpha, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)), membershipBenefitInfo.benefitBravo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitBravo, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitCharlie && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitCharlie, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitDelta && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitDelta, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitEcho && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitEcho, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [membershipBenefitInfo.benefitAlpha && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitAlpha, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)), membershipBenefitInfo.benefitBravo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitBravo, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitCharlie && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitCharlie, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitDelta && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitDelta, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitEcho && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitEcho, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0))] }, void 0));
 }
 exports.default = MembershipBenefitInfo;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipContents.js

@@ -17,6 +17,6 @@ function MembershipContents(_a) {
             return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MembershipSectionSheet_1.default, { membership: connectedMembership.membership }, void 0) }, connectedMembership.id));
         }) }, void 0));
 }
-var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-bottom: 115px;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-bottom: 115px;\n  position: relative;\n"])));
+var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"])));
 exports.default = MembershipContents;
 var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipSectionSheet.js

@@ -20,9 +20,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var pdsOriginal_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal");
+var components_1 = require("../../../../../../../../../hybrid/components");
+var panels_1 = require("../../../../../../../../../mobile/panels");
 var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
-var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 var styled_components_1 = __importDefault(require("styled-components"));
 var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
@@ -32,33 +33,19 @@ function MembershipSectionSheet(_a) {
     if (!section) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
-    var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
     var itemToneType = section.styles.itemToneType;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(S_ImageWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsxs)(S_ContentBox, { children: [(0, jsx_runtime_1.jsx)(S_TopGradient, { contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipDetailBox, __assign({ contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, { children: (0, jsx_runtime_1.jsxs)(S_MembershipDetailContents, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: membership.title || '', color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, customFontSize: "28px", customFontWeight: "bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_f" }, void 0), membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0)), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_BottomGradient, { contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, void 0)] }, void 0)] }, void 0));
+    var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
+    return ((0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ overrideCSS: {
+            backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            marginBottom: '48px'
+        }, width: "100%", height: "100%", shapeType: "round", paddingBottom: "spacing_f" }, { children: [(0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.Title, { text: membership.title || '', color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, customFontSize: "28px", customFontWeight: "bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipDetailBox, { children: membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0)) }, void 0)] }), void 0));
 }
-var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
+var S_MembershipDetailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: ", ";\n  position: relative;\n  width: 100%;\n"], ["\n  padding-top: ", ";\n  position: relative;\n  width: 100%;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
-var S_ContentBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var S_TopGradient = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"], ["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"])), function (_a) {
-    var contentBackgroundDimColor = _a.contentBackgroundDimColor;
-    return "linear-gradient(transparent, " + contentBackgroundDimColor + ")";
-});
-var S_BottomGradient = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"], ["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"])), function (_a) {
-    var contentBackgroundDimColor = _a.contentBackgroundDimColor;
-    return "linear-gradient(" + contentBackgroundDimColor + ", transparent)";
-});
-var S_MembershipDetailBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  min-height: 446px;\n  position: sticky;\n  width: 100%;\n  z-index: 2;\n"], ["\n  background: ", ";\n  display: flex;\n  min-height: 446px;\n  position: sticky;\n  width: 100%;\n  z-index: 2;\n"])), function (_a) {
-    var contentBackgroundDimColor = _a.contentBackgroundDimColor;
-    return contentBackgroundDimColor;
+    return theme.spacing.spacingF;
 });
-var S_MembershipDetailContents = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0 72px;\n  position: relative;\n  width: 100%;\n"], ["\n  margin: 0 72px;\n  position: relative;\n  width: 100%;\n"])));
 exports.default = MembershipSectionSheet;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,11 +30,11 @@ 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, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "displayBold" }, 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: "body1Bold" }, 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  padding: 0 ", ";\n"], ["\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+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;
+    return isEmptySectionData ? 0 : theme.spacing.spacingG;
 });
 var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -15,9 +15,12 @@ var SectionContents_1 = __importDefault(require("./components/SectionContents"))
 function TemplateB() {
     return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), (0, jsx_runtime_1.jsx)(MembershipSection, {}, void 0)] }, void 0));
 }
-var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
+var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " auto;\n  padding: 0 ", ";\n"], ["\n  margin: ", " auto;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
 });
 function MembershipSection() {
     var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,11 +30,11 @@ 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, { 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, 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));
 }
-var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", ";\n"], ["\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+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;
+    return isEmptySectionData ? 0 : theme.spacing.spacingG;
 });
 var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.d.ts

@@ -7,7 +7,9 @@ declare namespace MembershipSectionItem {
     var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
         lineHeight?: number | undefined;
     }) => JSX.Element;
-    var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
+    var Description: ({ text, color, fontWeight, ...textLabelProps }: IItemDescription & TextLabelProps & {
+        fontWeight?: string | undefined;
+    }) => JSX.Element;
     var DesignedSectionButton: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
     var IconButton: ({ iconButtonIconColor, iconButtonDisabledIconColor, iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
     var MembershipCard: ({ membershipCardTemplate }: MembershipCardProps) => JSX.Element;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js

@@ -70,12 +70,15 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
     return lineHeight;
 });
 function Description(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
+    var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
 }
-var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight : " + fontWeight + ";";
 });
 function DesignedSectionButton(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts

@@ -7,7 +7,9 @@ declare namespace MembershipSectionItem {
     var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
         lineHeight?: number | undefined;
     }) => JSX.Element;
-    var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
+    var Description: ({ text, color, fontWeight, ...textLabelProps }: IItemDescription & TextLabelProps & {
+        fontWeight?: string | undefined;
+    }) => JSX.Element;
     var DesignedSectionButton: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
     var IconButton: ({ iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor, iconButtonIconColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
     var MembershipCard: ({ membershipCardTemplate, cardWidth }: MembershipCardProps) => JSX.Element;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js

@@ -70,12 +70,18 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
     return lineHeight;
 });
 function Description(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
+    var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight, isBulletPointMode: textLabelProps.bulletPointMode === 'use' }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
 }
-var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"], ["\n  ", ";\n\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"])), function (_a) {
+    var isBulletPointMode = _a.isBulletPointMode;
+    return isBulletPointMode && 'position: relative';
+}, function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight : " + fontWeight + ";";
 });
 function DesignedSectionButton(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.d.ts

@@ -1,5 +1,6 @@
 import type { TypeOfMembershipSectionToneColor } from './type';
 import type { SubscriptionProductType, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../DynamicLayout/types';
+export declare const MEMBERSHIP_SECTION_PREVIEW_WIDTH = 375;
 export declare const COMMON_OVERLAY_IMAGE_SRC = "https://static.publ.site/membership_card_deco.png";
 export declare const MEMBERSHIP_SECTION_TONE_COLOR: {
     [key in TypeOfItemToneType]: TypeOfMembershipSectionToneColor;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = exports.MEMBERSHIP_SECTION_TONE_COLOR = exports.COMMON_OVERLAY_IMAGE_SRC = void 0;
+exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = exports.MEMBERSHIP_SECTION_TONE_COLOR = exports.COMMON_OVERLAY_IMAGE_SRC = exports.MEMBERSHIP_SECTION_PREVIEW_WIDTH = void 0;
+exports.MEMBERSHIP_SECTION_PREVIEW_WIDTH = 375;
 exports.COMMON_OVERLAY_IMAGE_SRC = 'https://static.publ.site/membership_card_deco.png';
 exports.MEMBERSHIP_SECTION_TONE_COLOR = {
     LIGHT: {

package/package.json

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

package/release-note.md

@@ -1,20 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.0.12]
+## [v2.0.13-alpha.1]
 
-## daily|https://design.storybook.publ.biz/
+## alpha|https://storybook-pds-alpha.test.publ.biz
 
-### Component
-* Icon
-    * 커머스 관련 line icon 추가
-        * ic_box
-        * ic_cart
-        * ic_delivery
-        * ic_receipt
-        * ic_shop
-        * ic_shoppingbag
 ### sub
-* AdminList
-    * ToolBar
-        * chip들의 왼쪽 간격이 searchMode에 따라 변경되도록 조치
-### Color
-* 컬러 키 값 23.05.11 17시 01분 기준 싱크
+* DynamicLayout
+    * membership section M_Template_B 디자인 변경을 NORMALMODE에도 적용
+    * 연결된 요금제가 판매중지 상태일때 버튼만 비활성화되도록 수정