pds-dev-kit-web 2.0.9-alpha.4 → 2.0.9-alpha.6

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/mobile/M_TemplateA.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare function TemplateB(): JSX.Element;
-export default TemplateB;
+declare function TemplateA(): JSX.Element;
+export default TemplateA;

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

@@ -12,10 +12,10 @@ var react_1 = require("react");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
 var SectionContents_1 = __importDefault(require("./components/SectionContents"));
-function TemplateB() {
+function TemplateA() {
     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  padding: 0 ", ";\n"], ["\n  margin-top: ", ";\n  padding: 0 ", ";\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) {
@@ -29,5 +29,5 @@ function MembershipSection() {
     }
     return programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY ? (programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0));
 }
-exports.default = TemplateB;
+exports.default = TemplateA;
 var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/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,15 +30,19 @@ 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)(jsx_runtime_1.Fragment, { 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)), buttonAlphaLabel && ((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_DescriptionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+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;
     return theme.spacing.spacingD;
 });
-var S_ButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"])), function (_a) {
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
 exports.default = SectionContents;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/desktop/D_TemplateB.js

@@ -17,7 +17,7 @@ function TemplateB() {
 }
 var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: ", " auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n"], ["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: ", " auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingH;
+    return theme.spacing.spacingK;
 });
 function MembershipSection() {
     var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/desktop/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.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)), buttonAlphaLabel && ((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, 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));
 }
-var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 80px;\n  margin-top: ", ";\n"], ["\n  margin-bottom: 80px;\n  margin-top: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingK;
+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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,10 +10,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var styled_components_1 = __importDefault(require("styled-components"));
 var SectionContents_1 = __importDefault(require("./components/SectionContents"));
 function TemplateB() {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), (0, jsx_runtime_1.jsx)(MembershipSection, {}, void 0)] }, void 0));
+    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 theme = _a.theme;
+    return theme.spacing.spacingG;
+});
 function MembershipSection() {
     var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;
     if (!programmedSectionComponents) {
@@ -18,3 +27,4 @@ function MembershipSection() {
     return programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY ? (programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0));
 }
 exports.default = TemplateB;
+var templateObject_1;

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

@@ -19,12 +19,9 @@ 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_SectionInfoBox, { 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)), buttonAlphaLabel && ((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, { 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_SectionInfoBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  padding: 0 ", ";\n"], ["\n  margin-top: ", ";\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
+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;
 });

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys } from '../../../../../DynamicLayout/components/pdsOriginal/common';
 import type { TextLabelProps } from '../../../../../DynamicLayout/components/pdsOriginal/desktop/TextLabel/TextLabel';
-import type { IItemButton, IItemDescription, IItemTitle, IMembershipCardTemplate, TypeOfProgrammedItemActionButtonTextType } from '../../../../../DynamicLayout/types';
+import type { IItemButton, IItemDescription, IItemTitle, IMembershipCardTemplate } from '../../../../../DynamicLayout/types';
 declare function MembershipSectionItem(): JSX.Element;
 declare namespace MembershipSectionItem {
     var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
@@ -12,7 +12,7 @@ declare namespace MembershipSectionItem {
     var IconButton: ({ iconButtonIconColor, iconButtonDisabledIconColor, iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
     var MembershipCard: ({ membershipCardTemplate }: MembershipCardProps) => JSX.Element;
     var ColorOverrideIcon: ({ iconColor, iconName }: ColorOverrideIconProps) => JSX.Element;
-    var XlargeMainButton: ({ buttonTextColor, buttonBackgroundColor, programmedItemActionButtonTextType }: XlargeMainButtonProps) => JSX.Element;
+    var XlargeMainButton: ({ buttonTextColor, buttonBackgroundColor, state, buttonText, $paddingBottom }: XlargeMainButtonProps) => JSX.Element;
 }
 declare type IconButtonProps = {
     iconButtonIconColor: string;
@@ -33,8 +33,10 @@ declare type ColorOverrideIconProps = {
     iconName: FillIconNameKeys | LineIconNameKeys;
 };
 declare type XlargeMainButtonProps = {
-    buttonTextColor: string;
-    buttonBackgroundColor: string;
-    programmedItemActionButtonTextType: TypeOfProgrammedItemActionButtonTextType;
+    buttonTextColor?: string;
+    buttonBackgroundColor?: string;
+    state?: 'normal' | 'disabled';
+    buttonText: string;
+    $paddingBottom?: string;
 };
 export default MembershipSectionItem;

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

@@ -50,6 +50,7 @@ var react_1 = require("react");
 var pdsOriginal_1 = require("../../../../../DynamicLayout/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importStar(require("styled-components"));
+var constants_1 = require("../../constants");
 function MembershipSectionItem() {
     return (0, jsx_runtime_1.jsx)(S_Item, { "x-dlayout-section-element-name": "Item", isClickable: false }, void 0);
 }
@@ -171,12 +172,13 @@ var S_IconButtonWrapper = styled_components_1.default.div(templateObject_6 || (t
 function MembershipCard(_a) {
     var membershipCardTemplate = _a.membershipCardTemplate;
     var backgroundImageSrc = membershipCardTemplate.backgroundImageSrc, designSchema = membershipCardTemplate.designSchema, logoImageSrc = membershipCardTemplate.logoImageSrc, overlayColorPrimary = membershipCardTemplate.overlayColorPrimary, overlayColorSecondary = membershipCardTemplate.overlayColorSecondary, overlayType = membershipCardTemplate.overlayType;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative' } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: 288, height: 455.04, scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardShadow, {}, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative' } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: 288, height: 455, scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_GlossyOverlayWrapper, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: constants_1.COMMON_OVERLAY_IMAGE_SRC, width: 288, height: 455, ratio: "10_16", scaleType: "cover" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardShadow, {}, void 0)] }), void 0));
 }
 var S_MembershipCardBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 455px;\n  min-width: 288px;\n  overflow: hidden;\n  position: relative;\n"], ["\n  border-radius: 12px;\n  height: 455px;\n  min-width: 288px;\n  overflow: hidden;\n  position: relative;\n"])));
-var designSchemaA = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  left: 10%;\n  top: 6%;\n  width: 50%;\n"], ["\n  left: 10%;\n  top: 6%;\n  width: 50%;\n"])));
-var designSchemaB = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 60%;\n"], ["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 60%;\n"])));
-var S_LogoImageWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  z-index: 3;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
+var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  inset: 0;\n  position: absolute;\n"], ["\n  inset: 0;\n  position: absolute;\n"])));
+var designSchemaA = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: 10%;\n  top: 6%;\n  width: 50%;\n"], ["\n  left: 10%;\n  top: 6%;\n  width: 50%;\n"])));
+var designSchemaB = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 60%;\n"], ["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 60%;\n"])));
+var S_LogoImageWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  z-index: 3;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
     var designSchema = _a.designSchema;
     switch (designSchema) {
         case 'A':
@@ -187,15 +189,15 @@ var S_LogoImageWrapper = styled_components_1.default.div(templateObject_10 || (t
             return designSchemaA;
     }
 });
-var overlaySolidType = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+var overlaySolidType = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var overlayColorPrimary = _a.overlayColorPrimary;
-    return overlayColorPrimary + "4C";
+    return overlayColorPrimary;
 });
-var overlayGradientType = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+var overlayGradientType = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
     var overlayColorPrimary = _a.overlayColorPrimary, overlayColorSecondary = _a.overlayColorSecondary;
-    return "linear-gradient(135deg, " + overlayColorPrimary + "4C, " + overlayColorSecondary + "4C)";
+    return "linear-gradient(135deg, " + overlayColorPrimary + ", " + overlayColorSecondary + ")";
 });
-var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n  z-index: 2;\n\n  ", "\n"], ["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n  z-index: 2;\n\n  ", "\n"])), function (_a) {
+var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n  z-index: 2;\n\n  ", "\n"], ["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n  z-index: 2;\n\n  ", "\n"])), function (_a) {
     var overlayType = _a.overlayType;
     switch (overlayType) {
         case 'NONE':
@@ -208,22 +210,25 @@ var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_13
             return;
     }
 });
-var S_MembershipCardShadow = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n\n  &::after {\n    border-radius: 12px;\n    box-shadow: 0 25px 30px 0 rgba(0, 0, 0, 0.2);\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n\n  &::after {\n    border-radius: 12px;\n    box-shadow: 0 25px 30px 0 rgba(0, 0, 0, 0.2);\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
+var S_MembershipCardShadow = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n\n  &::after {\n    border-radius: 12px;\n    box-shadow: 0 25px 30px 0 rgba(0, 0, 0, 0.2);\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  height: 455px;\n  position: absolute;\n  top: 0;\n  width: 288px;\n\n  &::after {\n    border-radius: 12px;\n    box-shadow: 0 25px 30px 0 rgba(0, 0, 0, 0.2);\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
 function ColorOverrideIcon(_a) {
     var iconColor = _a.iconColor, iconName = _a.iconName;
     return ((0, jsx_runtime_1.jsx)(S_ColorOverrideIconWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", iconColor: iconColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.Icon, { colorKey: "ui_cpnt_icon_sys_grey_01", iconName: iconName }, void 0) }), void 0));
 }
-var S_ColorOverrideIconWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"])), function (_a) {
+var S_ColorOverrideIconWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"])), function (_a) {
     var iconColor = _a.iconColor;
     return iconColor;
 });
 function XlargeMainButton(_a) {
-    var buttonTextColor = _a.buttonTextColor, buttonBackgroundColor = _a.buttonBackgroundColor, programmedItemActionButtonTextType = _a.programmedItemActionButtonTextType;
-    return ((0, jsx_runtime_1.jsx)(S_XlargeMainButtonPropsWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", buttonTextColor: buttonTextColor, buttonBackgroundColor: buttonBackgroundColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: { A: 'str_5350', B: 'str_5351', C: 'str_5352', D: 'str_5353', E: 'str_5354' }[programmedItemActionButtonTextType], size: "rlarge", responsiveMode: "use" }, void 0) }), void 0));
+    var buttonTextColor = _a.buttonTextColor, buttonBackgroundColor = _a.buttonBackgroundColor, _b = _a.state, state = _b === void 0 ? 'normal' : _b, buttonText = _a.buttonText, $paddingBottom = _a.$paddingBottom;
+    return ((0, jsx_runtime_1.jsx)(S_XlargeMainButtonPropsWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", buttonTextColor: buttonTextColor, buttonBackgroundColor: buttonBackgroundColor, "$paddingBottom": $paddingBottom }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: buttonText, size: "rlarge", state: state, responsiveMode: "use" }, void 0) }), void 0));
 }
-var S_XlargeMainButtonPropsWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n  padding-bottom: 56px;\n\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 64px;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n  padding-bottom: 56px;\n\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 64px;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var S_XlargeMainButtonPropsWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n  padding-bottom: ", ";\n\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 64px;\n\n    & div {\n      color: ", ";\n      text-align: center;\n    }\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n  padding-bottom: ", ";\n\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 64px;\n\n    & div {\n      color: ", ";\n      text-align: center;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
+}, function (_a) {
+    var $paddingBottom = _a.$paddingBottom;
+    return $paddingBottom && $paddingBottom;
 }, function (_a) {
     var theme = _a.theme, buttonBackgroundColor = _a.buttonBackgroundColor;
     return buttonBackgroundColor
@@ -241,4 +246,4 @@ MembershipSectionItem.MembershipCard = MembershipCard;
 MembershipSectionItem.ColorOverrideIcon = ColorOverrideIcon;
 MembershipSectionItem.XlargeMainButton = XlargeMainButton;
 exports.default = MembershipSectionItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

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

@@ -12,7 +12,7 @@ declare namespace MembershipSectionItem {
     var IconButton: ({ iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor, iconButtonIconColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
     var MembershipCard: ({ membershipCardTemplate, cardWidth }: MembershipCardProps) => JSX.Element;
     var ColorOverrideIcon: ({ iconColor, iconName }: ColorOverrideIconProps) => JSX.Element;
-    var XlargeMainButton: ({ buttonTextColor, buttonBackgroundColor, buttonText, onClick }: XlargeMainButtonProps) => JSX.Element;
+    var XlargeMainButton: ({ buttonTextColor, buttonBackgroundColor, buttonText, onClick, state }: XlargeMainButtonProps) => JSX.Element;
 }
 declare type IconButtonProps = {
     iconButtonIconColor: string;
@@ -34,9 +34,10 @@ declare type ColorOverrideIconProps = {
     iconName: FillIconNameKeys | LineIconNameKeys;
 };
 declare type XlargeMainButtonProps = {
-    buttonTextColor: string;
-    buttonBackgroundColor: string;
-    buttonText: string;
+    buttonTextColor?: string;
+    buttonBackgroundColor?: string;
+    buttonText?: string;
     onClick?: () => void;
+    state?: 'normal' | 'disabled';
 };
 export default MembershipSectionItem;

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

@@ -50,6 +50,7 @@ var react_1 = require("react");
 var pdsOriginal_1 = require("../../../../../DynamicLayout/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importStar(require("styled-components"));
+var constants_1 = require("../../constants");
 function MembershipSectionItem() {
     return (0, jsx_runtime_1.jsx)(S_Item, { "x-dlayout-section-element-name": "Item", isClickable: false }, void 0);
 }
@@ -171,18 +172,19 @@ var S_IconButtonWrapper = styled_components_1.default.div(templateObject_6 || (t
 function MembershipCard(_a) {
     var membershipCardTemplate = _a.membershipCardTemplate, cardWidth = _a.cardWidth;
     var backgroundImageSrc = membershipCardTemplate.backgroundImageSrc, designSchema = membershipCardTemplate.designSchema, logoImageSrc = membershipCardTemplate.logoImageSrc, overlayColorPrimary = membershipCardTemplate.overlayColorPrimary, overlayColorSecondary = membershipCardTemplate.overlayColorSecondary, overlayType = membershipCardTemplate.overlayType;
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary, cardWidth: cardWidth }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_GlossyOverlayWrapper, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: constants_1.COMMON_OVERLAY_IMAGE_SRC, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary, cardWidth: cardWidth }, void 0)] }, void 0) }, void 0));
 }
-var S_MembershipCardBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: auto;\n"], ["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: auto;\n"])), function (_a) {
+var S_MembershipCardBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"])), function (_a) {
     var cardWidth = _a.cardWidth;
     return (cardWidth ? cardWidth * 1.6 + "px" : '100%');
 }, function (_a) {
     var cardWidth = _a.cardWidth;
     return (cardWidth ? cardWidth + "px" : '100%');
 });
-var designSchemaA = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  left: 10%;\n  top: 6%;\n"], ["\n  left: 10%;\n  top: 6%;\n"])));
-var designSchemaB = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n"])));
-var S_LogoImageWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
+var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  inset: 0;\n  position: absolute;\n"], ["\n  inset: 0;\n  position: absolute;\n"])));
+var designSchemaA = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: 10%;\n  top: 6%;\n"], ["\n  left: 10%;\n  top: 6%;\n"])));
+var designSchemaB = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var S_LogoImageWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
     var cardWidth = _a.cardWidth, designSchema = _a.designSchema;
     if (designSchema === 'A') {
         return cardWidth ? cardWidth * 0.5 + "px" : '50%';
@@ -202,15 +204,15 @@ var S_LogoImageWrapper = styled_components_1.default.div(templateObject_10 || (t
             return designSchemaA;
     }
 });
-var overlaySolidType = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+var overlaySolidType = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var overlayColorPrimary = _a.overlayColorPrimary;
-    return overlayColorPrimary + "4C";
+    return overlayColorPrimary;
 });
-var overlayGradientType = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+var overlayGradientType = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
     var overlayColorPrimary = _a.overlayColorPrimary, overlayColorSecondary = _a.overlayColorSecondary;
-    return "linear-gradient(135deg, " + overlayColorPrimary + "4C, " + overlayColorSecondary + "4C)";
+    return "linear-gradient(135deg, " + overlayColorPrimary + ", " + overlayColorSecondary + ")";
 });
-var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"], ["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"])), function (_a) {
+var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"], ["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"])), function (_a) {
     var cardWidth = _a.cardWidth;
     return (cardWidth ? cardWidth * 1.6 + "px" : '100%');
 }, function (_a) {
@@ -233,18 +235,18 @@ function ColorOverrideIcon(_a) {
     var iconColor = _a.iconColor, iconName = _a.iconName;
     return ((0, jsx_runtime_1.jsx)(S_ColorOverrideIconWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", iconColor: iconColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.Icon, { colorKey: "ui_cpnt_icon_sys_grey_01", iconName: iconName }, void 0) }), void 0));
 }
-var S_ColorOverrideIconWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"])), function (_a) {
+var S_ColorOverrideIconWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"])), function (_a) {
     var iconColor = _a.iconColor;
     return iconColor;
 });
 function XlargeMainButton(_a) {
-    var buttonTextColor = _a.buttonTextColor, buttonBackgroundColor = _a.buttonBackgroundColor, buttonText = _a.buttonText, onClick = _a.onClick;
+    var buttonTextColor = _a.buttonTextColor, buttonBackgroundColor = _a.buttonBackgroundColor, buttonText = _a.buttonText, onClick = _a.onClick, _b = _a.state, state = _b === void 0 ? 'normal' : _b;
     var handleOnclick = function () {
         onClick && onClick();
     };
-    return ((0, jsx_runtime_1.jsx)(S_XlargeMainButtonPropsWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", buttonTextColor: buttonTextColor, buttonBackgroundColor: buttonBackgroundColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: buttonText, size: "rlarge", responsiveMode: "use", onClick: handleOnclick }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_XlargeMainButtonPropsWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", buttonTextColor: buttonTextColor, buttonBackgroundColor: buttonBackgroundColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: buttonText, size: "rlarge", responsiveMode: "use", onClick: handleOnclick, state: state }, void 0) }), void 0));
 }
-var S_XlargeMainButtonPropsWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var S_XlargeMainButtonPropsWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 100%;\n\n    & div {\n      -webkit-line-clamp: 2;\n      align-items: center;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      justify-content: center;\n      line-height: 24px;\n      overflow: auto;\n      text-align: center;\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 100%;\n\n    & div {\n      -webkit-line-clamp: 2;\n      align-items: center;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      justify-content: center;\n      line-height: 24px;\n      overflow: auto;\n      text-align: center;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme, buttonBackgroundColor = _a.buttonBackgroundColor;
     return buttonBackgroundColor
         ? buttonBackgroundColor
@@ -261,4 +263,4 @@ MembershipSectionItem.MembershipCard = MembershipCard;
 MembershipSectionItem.ColorOverrideIcon = ColorOverrideIcon;
 MembershipSectionItem.XlargeMainButton = XlargeMainButton;
 exports.default = MembershipSectionItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

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

@@ -1,5 +1,12 @@
 import type { TypeOfMembershipSectionToneColor } from './type';
-import type { TypeOfItemToneType } from '../../../DynamicLayout/types';
+import type { SubscriptionProductType, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../DynamicLayout/types';
+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;
 };
+export declare const MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT: {
+    [key in TypeOfProgrammedItemActionButtonTextType]: string;
+};
+export declare const MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT: {
+    [key in SubscriptionProductType]: string;
+};

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MEMBERSHIP_SECTION_TONE_COLOR = 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 = void 0;
+exports.COMMON_OVERLAY_IMAGE_SRC = 'https://static.publ.site/membership_card_deco.png';
 exports.MEMBERSHIP_SECTION_TONE_COLOR = {
     LIGHT: {
         contentBackgroundDimColor: '#F5F5F8B3',
@@ -12,7 +13,10 @@ exports.MEMBERSHIP_SECTION_TONE_COLOR = {
         membershipPlanSheetBackgroundColor: '#EAEBEFFF',
         membershipSheetBackgroundColor: '#F5F5F8FF',
         membershipSheetTextLabelColor: '#1E1E20FF',
-        scrollbarColor: '#E3E5E9FF'
+        scrollbarColor: '#E3E5E9FF',
+        disabledProgrammedItemActionButtonTextColor: '#AAAAB1FF',
+        disabledProgrammedItemActionButtonBackgroundColor: '#E3E5E9FF',
+        emptyMembershipSheetTextLabelColor: '#68686BFF'
     },
     DARK: {
         contentBackgroundDimColor: '#25252699',
@@ -24,6 +28,30 @@ exports.MEMBERSHIP_SECTION_TONE_COLOR = {
         membershipPlanSheetBackgroundColor: '#303032FF',
         membershipSheetBackgroundColor: '#252526FF',
         membershipSheetTextLabelColor: '#FDFDFDFF',
-        scrollbarColor: '#404042FF'
+        scrollbarColor: '#404042FF',
+        disabledProgrammedItemActionButtonTextColor: '#68686CFF',
+        disabledProgrammedItemActionButtonBackgroundColor: '#404042FF',
+        emptyMembershipSheetTextLabelColor: '#A5A5ABFF'
     }
 };
+exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = {
+    A: 'str_5350',
+    B: 'str_5351',
+    C: 'str_5352',
+    D: 'str_5353',
+    E: 'str_5354'
+};
+exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = {
+    COUPON_FREE_FINITE: 'str_payment_option_coupon_free_finite',
+    COUPON_FREE_INFINITE: 'str_payment_option_coupon_free_infinite',
+    COUPON_ONCE_FINITE: 'str_payment_option_coupon_one_time',
+    COUPON_ONCE_INFINITE: 'str_payment_option_coupon_one_time',
+    FREE_FINITE: 'str_payment_option_subs_temporary_free',
+    FREE_INFINITE: 'str_payment_option_unlimited_free',
+    ONCE_FINITE: 'str_payment_option_one_time',
+    ONCE_INFINITE: 'str_payment_option_one_time',
+    SUBSCRIPTION_30DAYS: 'str_payment_option_subs_regularly',
+    SUBSCRIPTION_90DAYS: 'str_payment_option_subs_regularly',
+    SUBSCRIPTION_180DAYS: 'str_payment_option_subs_regularly',
+    SUBSCRIPTION_365DAYS: 'str_payment_option_subs_regularly'
+};

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

@@ -1,5 +1,5 @@
 export declare type TypeOfMembershipSectionToneColor = {
     [key in colorTonePreset]: string;
 };
-declare type colorTonePreset = 'contentBackgroundDimColor' | 'iconButtonBackgroundColor' | 'iconButtonBorderColor' | 'iconButtonDisabledBackgroundColor' | 'iconButtonDisabledIconColor' | 'iconButtonIconColor' | 'membershipPlanSheetBackgroundColor' | 'membershipSheetBackgroundColor' | 'membershipSheetTextLabelColor' | 'scrollbarColor';
+declare type colorTonePreset = 'contentBackgroundDimColor' | 'iconButtonBackgroundColor' | 'iconButtonBorderColor' | 'iconButtonDisabledBackgroundColor' | 'iconButtonDisabledIconColor' | 'iconButtonIconColor' | 'membershipPlanSheetBackgroundColor' | 'membershipSheetBackgroundColor' | 'membershipSheetTextLabelColor' | 'scrollbarColor' | 'disabledProgrammedItemActionButtonTextColor' | 'disabledProgrammedItemActionButtonBackgroundColor' | 'emptyMembershipSheetTextLabelColor';
 export {};

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

@@ -35,7 +35,7 @@ export interface ISection {
     dynamicLayoutSectionItems: Array<IItem> | null;
     insertedAt: string;
     updatedAt: string;
-    type?: TypeOfSectionType;
+    type: TypeOfSectionType;
     program?: 'MEMBERSHIP_DISPLAY';
     programData?: {
         mdid: string;
@@ -215,7 +215,7 @@ export declare type DynamicLayoutProps = {
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
 };
-declare type SubscriptionProductType = 'FREE_INFINITE' | 'FREE_FINITE' | 'ONCE_INFINITE' | 'ONCE_FINITE' | 'COUPON_FREE_INFINITE' | 'COUPON_FREE_FINITE' | 'COUPON_ONCE_INFINITE' | 'COUPON_ONCE_FINITE' | 'SUBSCRIPTION_30DAYS' | 'SUBSCRIPTION_90DAYS' | 'SUBSCRIPTION_180DAYS' | 'SUBSCRIPTION_365DAYS';
+export declare type SubscriptionProductType = 'FREE_INFINITE' | 'FREE_FINITE' | 'ONCE_INFINITE' | 'ONCE_FINITE' | 'COUPON_FREE_INFINITE' | 'COUPON_FREE_FINITE' | 'COUPON_ONCE_INFINITE' | 'COUPON_ONCE_FINITE' | 'SUBSCRIPTION_30DAYS' | 'SUBSCRIPTION_90DAYS' | 'SUBSCRIPTION_180DAYS' | 'SUBSCRIPTION_365DAYS';
 declare type ExpiryPeriodInDaysType = 1 | 3 | 7 | 14 | 30;
 export declare type IMembershipCardTemplate = {
     backgroundImageSrc: string;
@@ -246,7 +246,7 @@ export declare type IConnectedSubscriptionProducts = {
         isDeactivated: boolean;
         fee: {
             currency: 'KRW' | 'USD';
-            amount: string;
+            amount: string | number;
         };
         insertedAt: string;
         updatedAt: string;

package/dist/src/sub/DynamicLayout/utils/formatCurrency.d.ts

@@ -0,0 +1,8 @@
+/**
+ * currency에 따라 숫자를 통화 형식으로 변환한다.
+ *
+ * ex) KRW 1024 => 1,024
+ *
+ * ex) USD 1024 => 1,024.00
+ */
+export default function formatCurrency(value: string | number, currency?: string): string;

package/dist/src/sub/DynamicLayout/utils/formatCurrency.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * currency에 따라 숫자를 통화 형식으로 변환한다.
+ *
+ * ex) KRW 1024 => 1,024
+ *
+ * ex) USD 1024 => 1,024.00
+ */
+function formatCurrency(value, currency) {
+    if (currency === void 0) { currency = 'KRW'; }
+    var decimals;
+    switch (currency) {
+        case 'KRW':
+            decimals = 0;
+            break;
+        case 'USD':
+            decimals = 2;
+            break;
+    }
+    var str = Number(value).toFixed(decimals);
+    if (decimals) {
+        return str.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
+    }
+    return str.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+}
+exports.default = formatCurrency;

package/package.json

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

package/release-note.md

@@ -1,8 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.0.9-alpha.4]
+## [v2.0.9-alpha.6]
 
 ## alpha|https://staging.storybook.publ.biz/
 
 ### sub
 * DynamicLayout
-  * readonly 객체 수정 시도 에러 픽스
+    * membership section 디자인 수정

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/GlobalFixedOverlay.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { ISection } from '../../../../../DynamicLayout/types';
-declare type Props = {
-    filteredSortedSection: ISection[];
-};
-declare function GlobalFixedOverlay({ filteredSortedSection }: Props): JSX.Element;
-export default GlobalFixedOverlay;