pds-dev-kit-web 2.0.8 → 2.0.9-alpha.1

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

@@ -0,0 +1,78 @@
+"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++) {
+            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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var components_1 = require("../../../../../../../../../hybrid/components");
+var desktop_1 = require("../../../../../../../../DynamicLayout/components/desktop");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+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"));
+var MembershipCard_1 = __importDefault(require("./MembershipCard"));
+var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
+function MembershipSheet(_a) {
+    var filteredMemberships = _a.filteredMemberships, isWideView = _a.isWideView;
+    var _b = (0, react_1.useState)(0), currentIndex = _b[0], setCurrentIndex = _b[1];
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    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 currentMembership = filteredMemberships[currentIndex];
+    var membership = currentMembership.membership, connectedSubscriptionProducts = currentMembership.connectedSubscriptionProducts;
+    var handlePrevMembershipClick = function () {
+        if (currentIndex === 0) {
+            return;
+        }
+        setCurrentIndex(currentIndex - 1);
+    };
+    var handleNextMembershipClick = function () {
+        if (currentIndex === filteredMemberships.length - 1) {
+            return;
+        }
+        setCurrentIndex(currentIndex + 1);
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipBox, { children: [(0, jsx_runtime_1.jsxs)(S_ArrowButtonBox, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconName: "ic_arrow_left", isDisabled: currentIndex === 0, state: currentIndex === 0 ? 'disabled' : 'normal', onClick: handlePrevMembershipClick }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_f", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconName: "ic_arrow_right", isDisabled: currentIndex === filteredMemberships.length - 1, state: currentIndex === filteredMemberships.length - 1 ? 'disabled' : 'normal', onClick: handleNextMembershipClick }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ overrideCSS: {
+                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    minWidth: '1000px',
+                    maxWidth: '1500px',
+                    minHeight: '460px',
+                    paddingBottom: '80px',
+                    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))] }), 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) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_MembershipDetailBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: ", "px;\n  max-width: 560px;\n  position: relative;\n  width: 100%;\n"], ["\n  margin-left: ", "px;\n  max-width: 560px;\n  position: relative;\n  width: 100%;\n"])), function (_a) {
+    var isWideView = _a.isWideView;
+    return (isWideView ? 96 : 56);
+});
+exports.default = MembershipSheet;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.d.ts

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

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

@@ -0,0 +1,37 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function SectionContents() {
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    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));
+}
+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_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.spacingF;
+});
+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.spacingG;
+});
+exports.default = SectionContents;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/index.d.ts

@@ -0,0 +1 @@
+export { default as D_TemplateB } from './D_TemplateB';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.D_TemplateB = void 0;
+var D_TemplateB_1 = require("./D_TemplateB");
+Object.defineProperty(exports, "D_TemplateB", { enumerable: true, get: function () { return __importDefault(D_TemplateB_1).default; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/index.d.ts

@@ -0,0 +1 @@
+export { default as TemplateB } from './TemplateB';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateB = void 0;
+var TemplateB_1 = require("./TemplateB");
+Object.defineProperty(exports, "TemplateB", { enumerable: true, get: function () { return __importDefault(TemplateB_1).default; } });

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+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 MembershipContents_1 = __importDefault(require("./components/MembershipContents"));
+var SectionContents_1 = __importDefault(require("./components/SectionContents"));
+function TemplateB(_a) {
+    var membershipDisplay = _a.membershipDisplay;
+    var orderedConnectedMemberships = membershipDisplay.connectedMemberships.sort(function (a, b) { return a.order - b.order; }) || [];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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))] }, void 0));
+}
+exports.default = TemplateB;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { IMembershipBenefitInfo, TypeOfItemToneType } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    membershipBenefitInfo: IMembershipBenefitInfo;
+    itemToneType: TypeOfItemToneType;
+};
+declare function MembershipBenefitInfo({ membershipBenefitInfo, itemToneType }: Props): JSX.Element;
+export default MembershipBenefitInfo;

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

@@ -0,0 +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 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));
+}
+exports.default = MembershipBenefitInfo;

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

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

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

@@ -0,0 +1,26 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var MembershipSectionSheet_1 = __importDefault(require("./MembershipSectionSheet"));
+function MembershipContents(_a) {
+    var orderedConnectedMemberships = _a.orderedConnectedMemberships;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_MembershipBox, { children: orderedConnectedMemberships.map(function (connectedMembership) {
+                    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), (0, jsx_runtime_1.jsx)(S_EmptySpacing, {}, 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  padding-top: ", ";\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding-top: ", ";\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingG;
+});
+var S_EmptySpacing = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: calc(100vh - 160vw);\n  position: relative;\n  z-index: 2;\n"], ["\n  height: calc(100vh - 160vw);\n  position: relative;\n  z-index: 2;\n"])));
+exports.default = MembershipContents;
+var templateObject_1, templateObject_2;

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

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

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

@@ -0,0 +1,66 @@
+"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++) {
+            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 };
+};
+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 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"));
+var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
+function MembershipSectionSheet(_a) {
+    var membership = _a.membership;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    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)("div", __assign({ style: { position: 'relative', margin: '0 72px' } }, { 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 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 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  background: ", ";\n  display: flex;\n  min-height: calc((100vw - 20px) * 1.6);\n  position: sticky;\n  width: 100%;\n  z-index: 2;\n"], ["\n  /* background: ", "; */\n  background: ", ";\n  display: flex;\n  min-height: calc((100vw - 20px) * 1.6);\n  position: sticky;\n  width: 100%;\n  z-index: 2;\n"])), function (_a) {
+    var contentBackgroundDimColor = _a.contentBackgroundDimColor;
+    return "linear-gradient(" + contentBackgroundDimColor + " 85%, transparent 100%)";
+}, function (_a) {
+    var contentBackgroundDimColor = _a.contentBackgroundDimColor;
+    return contentBackgroundDimColor;
+});
+exports.default = MembershipSectionSheet;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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

@@ -0,0 +1,40 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function SectionContents() {
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    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));
+}
+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 theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+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_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, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/index.d.ts

@@ -0,0 +1 @@
+export { default as M_TemplateB } from './M_TemplateB';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.M_TemplateB = void 0;
+var M_TemplateB_1 = require("./M_TemplateB");
+Object.defineProperty(exports, "M_TemplateB", { enumerable: true, get: function () { return __importDefault(M_TemplateB_1).default; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/index.d.ts

@@ -0,0 +1,2 @@
+export { TemplateA } from './TemplateA';
+export { TemplateB } from './TemplateB';

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateB = exports.TemplateA = void 0;
+var TemplateA_1 = require("./TemplateA");
+Object.defineProperty(exports, "TemplateA", { enumerable: true, get: function () { return TemplateA_1.TemplateA; } });
+var TemplateB_1 = require("./TemplateB");
+Object.defineProperty(exports, "TemplateB", { enumerable: true, get: function () { return TemplateB_1.TemplateB; } });

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ISection } from '../../../../DynamicLayout/types';
+declare function NormalTypeMembershipSection({ ...props }: ISection): JSX.Element;
+export default NormalTypeMembershipSection;

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

@@ -0,0 +1,54 @@
+"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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var templates_1 = require("./templates");
+function NormalTypeMembershipSection(_a) {
+    var props = __rest(_a, []);
+    var template = props.template;
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Membership" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: template }, void 0) }), void 0) }), void 0));
+}
+var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+function TemplateMather(_a) {
+    var styleTemplate = _a.styleTemplate;
+    switch (styleTemplate) {
+        case 'PRG_MEMBERSHIP_DISPLAY_A':
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY_B':
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}
+exports.default = NormalTypeMembershipSection;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/index.d.ts

@@ -0,0 +1 @@
+export { default as NormalTypeMembershipSection } from './MembershipSection';

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NormalTypeMembershipSection = void 0;
+var MembershipSection_1 = require("./MembershipSection");
+Object.defineProperty(exports, "NormalTypeMembershipSection", { enumerable: true, get: function () { return __importDefault(MembershipSection_1).default; } });

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+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 desktop_1 = require("./desktop");
+var mobile_1 = require("./mobile");
+function TemplateA() {
+    var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}, void 0),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {}, void 0)
+        }[device] }, void 0));
+}
+exports.default = TemplateA;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/desktop/D_TemplateA.d.ts

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/desktop/D_TemplateA.js

@@ -0,0 +1,30 @@
+"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 };
+};
+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 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  --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;
+});
+function MembershipSection() {
+    var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;
+    if (!programmedSectionComponents) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    return programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY ? (programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0));
+}
+exports.default = TemplateA;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/desktop/components/SectionContents.d.ts

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

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

@@ -0,0 +1,37 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function SectionContents() {
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    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));
+}
+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_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.spacingF;
+});
+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.spacingG;
+});
+exports.default = SectionContents;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/desktop/index.d.ts

@@ -0,0 +1 @@
+export { default as D_TemplateA } from './D_TemplateA';

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/desktop/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.D_TemplateA = void 0;
+var D_TemplateA_1 = require("./D_TemplateA");
+Object.defineProperty(exports, "D_TemplateA", { enumerable: true, get: function () { return __importDefault(D_TemplateA_1).default; } });

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

@@ -0,0 +1 @@
+export { default as TemplateA } from './TemplateA';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateA = void 0;
+var TemplateA_1 = require("./TemplateA");
+Object.defineProperty(exports, "TemplateA", { enumerable: true, get: function () { return __importDefault(TemplateA_1).default; } });