pds-dev-kit-web-test 2.7.95 → 2.7.96

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { IConnectedSubscriptionProducts, ISectionStyles } from '@sub/DynamicLayout/types';
-type Props = {
-    connectedSubscriptionProducts: IConnectedSubscriptionProducts;
-    sectionStyles: ISectionStyles;
-};
-declare function MembershipPlanSheet({ connectedSubscriptionProducts, sectionStyles }: Props): JSX.Element;
-export default MembershipPlanSheet;

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

@@ -1,85 +0,0 @@
-"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 react_i18next_1 = require("react-i18next");
-var panels_1 = require("@desktop/panels");
-var components_1 = require("@hybrid/components");
-var components_2 = require("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
-var formatCurrency_1 = __importDefault(require("@sub/DynamicLayout/utils/formatCurrency"));
-var styled_components_1 = __importDefault(require("styled-components"));
-function MembershipPlanSheet(_a) {
-    var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, sectionStyles = _a.sectionStyles;
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var subscriptionProduct = connectedSubscriptionProducts.subscriptionProduct;
-    var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee, isDeactivated = subscriptionProduct.isDeactivated;
-    var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
-    var productFeeText = (0, react_1.useMemo)(function () {
-        var amount = fee.amount, currency = fee.currency;
-        var price = (0, formatCurrency_1.default)(amount, currency);
-        switch (type) {
-            case 'COUPON_FREE_FINITE':
-            case 'COUPON_FREE_INFINITE':
-            case 'FREE_FINITE':
-            case 'FREE_INFINITE':
-                return t('str_free');
-        }
-        switch (currency) {
-            case 'KRW':
-                return t('str_5339', { price: price });
-            case 'USD':
-                return t('str_5831', { price: price });
-            default:
-                return '';
-        }
-    }, [subscriptionProduct]);
-    var itemActionButtonText = (0, react_1.useMemo)(function () {
-        var itemActionButtonTextType = {
-            A: 'str_5350',
-            B: 'str_5351',
-            C: 'str_5352',
-            D: 'str_5353',
-            E: 'str_5354'
-        }[programmedItemActionButtonTextType];
-        if (isDeactivated) {
-            return t('str_5300');
-        }
-        switch (type) {
-            case 'COUPON_FREE_FINITE':
-            case 'COUPON_FREE_INFINITE':
-            case 'FREE_FINITE':
-            case 'FREE_INFINITE':
-                return t('str_1460');
-            default:
-                return t(itemActionButtonTextType);
-        }
-    }, [programmedItemActionButtonTextType, type]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }), (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", paddingBottom: "spacing_d", overrideCSS: {
-                    display: 'flex',
-                    cursor: 'pointer',
-                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
-                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t(constants_1.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT[type]), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, wordBreak: "break_all", ellipsisMode: "use" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, styleTheme: "body2Bold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, wordBreak: "break_all", textAlign: "left" }))] }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex })] }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconName: "ic_arrow_down", iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor })] })), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: isDeactivated ? undefined : itemHighlightingColorInHex, buttonText: itemActionButtonText, buttonTextColor: isDeactivated ? undefined : '#FDFDFDFF', state: isDeactivated ? 'disabled' : 'normal', "$paddingBottom": "56px" })] }));
-}
-var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_MembershipInfoBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-exports.default = MembershipPlanSheet;
-var templateObject_1, templateObject_2;

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

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

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

@@ -1,97 +0,0 @@
-"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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 Section_1 = require("@sub/DynamicLayout/components/Section");
-var components_1 = require("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
-var styled_components_1 = __importStar(require("styled-components"));
-var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
-var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
-var NarrowMembershipListView_1 = __importDefault(require("./NarrowMembershipListView"));
-var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
-var WideMembershipListView_1 = __importDefault(require("./WideMembershipListView"));
-function MembershipSheet(_a) {
-    var connectedMemberships = _a.connectedMemberships, isWideView = _a.isWideView;
-    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, {});
-    }
-    var _c = connectedMemberships[currentIndex], membership = _c.membership, connectedSubscriptionProducts = _c.connectedSubscriptionProducts;
-    var _d = section.styles, itemHighlightingColorInHex = _d.itemHighlightingColorInHex, itemToneType = _d.itemToneType;
-    var handleMembershipClick = function (currentIndex) {
-        setCurrentIndex(currentIndex);
-    };
-    var isOnlyMembership = connectedMemberships.length === 1;
-    return ((0, jsx_runtime_1.jsxs)(S_MembershipBox, __assign({ isWideView: isWideView }, { children: [isWideView ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isOnlyMembership && ((0, jsx_runtime_1.jsx)(WideMembershipListView_1.default, { connectedMemberships: connectedMemberships, currentIndex: currentIndex, handleMembershipClick: handleMembershipClick, itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isOnlyMembership && ((0, jsx_runtime_1.jsx)(NarrowMembershipListView_1.default, { connectedMemberships: connectedMemberships, currentIndex: currentIndex, handleMembershipClick: handleMembershipClick, itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex })) })), (0, jsx_runtime_1.jsx)(S_ScrollBarVisible, __assign({ isWideView: isWideView, itemToneType: itemToneType, isOnlyMembership: isOnlyMembership }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ overrideCSS: {
-                        backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
-                        display: 'flex',
-                        flex: '2',
-                        overflow: 'auto',
-                        padding: isOnlyMembership ? '56px 10%' : '56px 0 56px 56px'
-                    }, width: "100%", height: "720px", shapeType: "round" }, { children: [membership.membershipCardTemplate && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membership.membershipCardTemplate })), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isOnlyMembership: isOnlyMembership }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all" })), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor })), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProducts: connectedSubscriptionProducts[0], sectionStyles: section.styles })) : ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: section.styles }))] }))] })) }))] })));
-}
-var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ", ";\n    border: 8px solid transparent;\n    border-radius: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    height: 10px;\n    width: 24px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ", ";\n    border: 8px solid transparent;\n    border-radius: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    height: 10px;\n    width: 24px;\n  }\n"])), function (_a) {
-    var itemToneType = _a.itemToneType;
-    return constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].scrollbarColor;
-});
-var S_ScrollBarVisible = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n\n  & > div {\n    ", "\n  }\n"], ["\n  width: ", ";\n\n  & > div {\n    ", "\n  }\n"])), function (_a) {
-    var isWideView = _a.isWideView, isOnlyMembership = _a.isOnlyMembership;
-    return isWideView && !isOnlyMembership ? 'calc(67% - 48px)' : '100%';
-}, scrollVisible);
-var S_MembershipBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  position: relative;\n"])), function (_a) {
-    var isWideView = _a.isWideView;
-    return (isWideView ? 'row' : 'column');
-});
-var S_MembershipDetailBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  width: 100%;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  width: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingH;
-}, function (_a) {
-    var isOnlyMembership = _a.isOnlyMembership, theme = _a.theme;
-    return (isOnlyMembership ? 0 : theme.spacing.spacingH);
-});
-exports.default = MembershipSheet;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { IConnectedMembership, TypeOfItemToneType } from '@sub/DynamicLayout/types';
-type Props = {
-    connectedMemberships: IConnectedMembership[];
-    itemHighlightingColorInHex: string;
-    itemToneType: TypeOfItemToneType;
-    currentIndex: number;
-    handleMembershipClick: (currentIndex: number) => void;
-};
-declare function NarrowMembershipListView({ connectedMemberships, itemHighlightingColorInHex, itemToneType, currentIndex, handleMembershipClick }: Props): JSX.Element;
-export default NarrowMembershipListView;

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

@@ -1,178 +0,0 @@
-"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
-var styled_components_1 = __importStar(require("styled-components"));
-function NarrowMembershipListView(_a) {
-    var connectedMemberships = _a.connectedMemberships, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, itemToneType = _a.itemToneType, currentIndex = _a.currentIndex, handleMembershipClick = _a.handleMembershipClick;
-    var resizeTarget = (0, react_1.useRef)(null);
-    var membershipListRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(0), scrollValue = _b[0], setScrollValue = _b[1];
-    var _c = (0, react_1.useState)(0), targetWidth = _c[0], setTargetWidth = _c[1];
-    var handleScroll = function () {
-        if (membershipListRef === null || membershipListRef.current === null) {
-            return;
-        }
-        setScrollValue(membershipListRef.current.scrollLeft);
-    };
-    /**
-     * @when : 화면 진입 시
-     * @expected : 스크롤을 감지하는 이벤트 핸들러를 추가합니다.
-     * @clear : 스크롤을 감지하는 이벤트 핸들러를 제거합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        if (!membershipListRef.current) {
-            return;
-        }
-        membershipListRef.current.addEventListener('scroll', handleScroll);
-        return function () {
-            if (!membershipListRef.current) {
-                return;
-            }
-            membershipListRef.current.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-    /**
-     * @when : 화면 진입 시
-     * @expected : 콘텐츠 영역의 크기를 확인해서 observer를 추가합니다.
-     * @clear : observer를 제거합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        var element = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current;
-        if (!element)
-            return;
-        var observer = new ResizeObserver(function (entries) {
-            entries.forEach(function (entry) {
-                setTargetWidth(entry.contentRect.width);
-            });
-        });
-        observer.observe(element);
-        return function () {
-            observer.disconnect();
-        };
-    }, []);
-    var isLeftMaskingCoverShow = connectedMemberships.length > 2 && scrollValue > 0;
-    var isRightMaskingCoverShow = (0, react_1.useMemo)(function () {
-        if (connectedMemberships.length < 3) {
-            return false;
-        }
-        if (scrollValue === 0) {
-            return true;
-        }
-        return membershipListRef.current
-            ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
-                membershipListRef.current.scrollWidth - 1
-            : scrollValue === 0;
-    }, [connectedMemberships, membershipListRef.current, scrollValue, targetWidth]);
-    var scrollPrev = function (x) {
-        var scrollLeft = (membershipListRef.current || {}).scrollLeft;
-        if (membershipListRef.current && typeof scrollLeft === 'number') {
-            membershipListRef.current.scroll({ left: scrollLeft - x, behavior: 'smooth' });
-            setScrollValue(scrollLeft - x);
-        }
-    };
-    var scrollNext = function (x) {
-        var scrollLeft = (membershipListRef.current || {}).scrollLeft;
-        if (membershipListRef.current && typeof scrollLeft === 'number') {
-            membershipListRef.current.scroll({ left: scrollLeft + x, behavior: 'smooth' });
-            setScrollValue(scrollLeft + x);
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(S_NarrowMembershipList, { children: connectedMemberships.length > 0 && ((0, jsx_runtime_1.jsxs)(S_MembershipListBox, { children: [isLeftMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "left" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_left", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollPrev(500); } }) }))), (0, jsx_runtime_1.jsx)(S_ContentOperatorPanel, __assign({ ref: membershipListRef, isLeftMaskingCoverShow: isLeftMaskingCoverShow, isRightMaskingCoverShow: isRightMaskingCoverShow, centered: connectedMemberships.length <= 2 }, { children: connectedMemberships.map(function (_a, i) {
-                        var id = _a.id, membership = _a.membership;
-                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
-                                    backgroundColor: i === currentIndex
-                                        ? itemHighlightingColorInHex
-                                        : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
-                                            .membershipSheetBackgroundColor,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    height: '120px',
-                                    justifyContent: 'center',
-                                    marginRight: '24px',
-                                    width: '384px',
-                                    maxWidth: '384px',
-                                    minWidth: '384px',
-                                    paddingLeft: '40px',
-                                    paddingRight: '40px'
-                                }, radius: 24, shapeType: "round", width: "100%", height: "120px", onClick: function () {
-                                    handleMembershipClick(i);
-                                } }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 2, color: i === currentIndex
-                                        ? '#FDFDFDFF'
-                                        : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }) })) }, id));
-                    }) })), isRightMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "right" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_right", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollNext(500); } }) })))] })) }));
-}
-var S_NarrowMembershipList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var S_MembershipListBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"], ["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingF;
-});
-var Centered = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-var LeftMasking = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"])));
-var RightMasking = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"])));
-var BothMasking = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"], ["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"])));
-var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"], ["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"])), function (_a) {
-    var centered = _a.centered;
-    return centered && Centered;
-}, function (_a) {
-    var isLeftMaskingCoverShow = _a.isLeftMaskingCoverShow, isRightMaskingCoverShow = _a.isRightMaskingCoverShow;
-    if (isLeftMaskingCoverShow && isRightMaskingCoverShow) {
-        return BothMasking;
-    }
-    if (isLeftMaskingCoverShow) {
-        return LeftMasking;
-    }
-    if (isRightMaskingCoverShow) {
-        return RightMasking;
-    }
-});
-var S_ArrowIconCover = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"])), function (_a) {
-    var position = _a.position;
-    return (position === 'left' ? 'flex-start' : 'flex-end');
-}, function (_a) {
-    var position = _a.position;
-    return position && "".concat(position, ":0");
-});
-exports.default = NarrowMembershipListView;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

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

@@ -1,49 +0,0 @@
-"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 Section_1 = require("@sub/DynamicLayout/components/Section");
-var components_1 = require("@sub/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, {});
-    }
-    var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
-    var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
-    var isEmptySection = !title && !description && !buttonAlphaLabel;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySection: isEmptySection }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }) })), 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 }) }))] })));
-}
-var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
-    var isEmptySection = _a.isEmptySection;
-    return (isEmptySection ? 0 : '80px');
-});
-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/TemplateA/desktop/components/UnavailableMembershipPlanSheet.d.ts

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

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

@@ -1,33 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_i18next_1 = require("react-i18next");
-var panels_1 = require("@desktop/panels");
-var components_1 = require("@hybrid/components");
-var components_2 = require("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
-function UnavailableMembershipPlanSheet(_a) {
-    var sectionStyles = _a.sectionStyles;
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", overrideCSS: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '112px',
-                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
-                } }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5300'), color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }) })), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonText: t(constants_1.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT[programmedItemActionButtonTextType]), state: "disabled", buttonTextColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].disabledProgrammedItemActionButtonTextColor, buttonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
-                    .disabledProgrammedItemActionButtonBackgroundColor, "$paddingBottom": "56px" })] }));
-}
-exports.default = UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/WideMembershipListView.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { IConnectedMembership, TypeOfItemToneType } from '@sub/DynamicLayout/types';
-type Props = {
-    connectedMemberships: IConnectedMembership[];
-    itemHighlightingColorInHex: string;
-    itemToneType: TypeOfItemToneType;
-    currentIndex: number;
-    handleMembershipClick: (currentIndex: number) => void;
-};
-declare function WideMembershipListView({ connectedMemberships, itemHighlightingColorInHex, itemToneType, currentIndex, handleMembershipClick }: Props): JSX.Element;
-export default WideMembershipListView;

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

@@ -1,88 +0,0 @@
-"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("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
-var styled_components_1 = __importDefault(require("styled-components"));
-function WideMembershipListView(_a) {
-    var connectedMemberships = _a.connectedMemberships, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, itemToneType = _a.itemToneType, currentIndex = _a.currentIndex, handleMembershipClick = _a.handleMembershipClick;
-    var membershipListRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(0), scrollValue = _b[0], setScrollValue = _b[1];
-    var handleScroll = function () {
-        if (membershipListRef === null || membershipListRef.current === null) {
-            return;
-        }
-        setScrollValue(membershipListRef.current.scrollTop);
-    };
-    (0, react_1.useEffect)(function () {
-        if (!membershipListRef.current) {
-            return;
-        }
-        membershipListRef.current.addEventListener('scroll', handleScroll);
-        return function () {
-            if (!membershipListRef.current) {
-                return;
-            }
-            membershipListRef.current.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-    var isTopMaskingCoverShow = connectedMemberships.length > 5 && scrollValue > 0;
-    var isBottomMaskingCoverShow = membershipListRef.current
-        ? membershipListRef.current.scrollTop + membershipListRef.current.clientHeight <
-            membershipListRef.current.scrollHeight
-        : true;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_MembershipListMaskingBox, __assign({ isTopMaskingCoverShow: isTopMaskingCoverShow, isBottomMaskingCoverShow: isBottomMaskingCoverShow }, { children: (0, jsx_runtime_1.jsx)(S_MembershipList, __assign({ ref: membershipListRef }, { children: connectedMemberships.map(function (_a, i) {
-                    var id = _a.id, membership = _a.membership;
-                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
-                                backgroundColor: i === currentIndex
-                                    ? itemHighlightingColorInHex
-                                    : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '120px',
-                                justifyContent: 'center',
-                                marginBottom: '24px',
-                                paddingLeft: '40px',
-                                paddingRight: '40px'
-                            }, radius: 24, shapeType: "round", width: "100%", height: "120px", onClick: function () {
-                                handleMembershipClick(i);
-                            } }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 2, color: i === currentIndex
-                                    ? '#FDFDFDFF'
-                                    : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }) })) }, id));
-                }) })) })) }));
-}
-var S_MembershipListMaskingBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -webkit-mask-image: ", ";\n  width: 33%;\n"], ["\n  -webkit-mask-image: ", ";\n  width: 33%;\n"])), function (_a) {
-    var isTopMaskingCoverShow = _a.isTopMaskingCoverShow, isBottomMaskingCoverShow = _a.isBottomMaskingCoverShow;
-    if (isTopMaskingCoverShow && isBottomMaskingCoverShow) {
-        return 'linear-gradient(transparent 0%, white 7.5%, white 92.5%, transparent 100%)';
-    }
-    if (isTopMaskingCoverShow) {
-        return 'linear-gradient(transparent 0%, white 7.5%)';
-    }
-    if (isBottomMaskingCoverShow) {
-        return 'linear-gradient(white 92.5%, transparent 100%)';
-    }
-});
-var S_MembershipList = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"], ["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"])));
-exports.default = WideMembershipListView;
-var templateObject_1, templateObject_2;

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

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

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

@@ -1,8 +0,0 @@
-"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/EditType/templates/TemplateA/index.d.ts

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

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

@@ -1,8 +0,0 @@
-"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; } });