npm - pds-dev-kit-web-test - Versions diffs - 0.2.29 → 0.2.31 - Mend

pds-dev-kit-web-test 0.2.29 → 0.2.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1516) hide show

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -52,7 +56,7 @@ var dynamicLayoutContext_1 = require("../../../../../DynamicLayout/dynamicLayout
 var styled_components_1 = __importStar(require("styled-components"));
 var constants_1 = require("../../constants");
 function MembershipSectionItem() {
-    return (0, jsx_runtime_1.jsx)(S_Item, { "x-dlayout-section-element-name": "Item", isClickable: false }, void 0);
+    return (0, jsx_runtime_1.jsx)(S_Item, { "x-dlayout-section-element-name": "Item", isClickable: false });
 }
 var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (_a) {
     var isClickable = _a.isClickable;
@@ -60,7 +64,7 @@ var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject
 });
 function Title(_a) {
     var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
-    return ((0, jsx_runtime_1.jsx)(S_TitleStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Title", color: color, lineHeight: lineHeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_TitleStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Title", color: color, lineHeight: lineHeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps)) })));
 }
 var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -71,7 +75,7 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
 });
 function Description(_a) {
     var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
-    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight, isBulletPointMode: textLabelProps.bulletPointMode === 'use' }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight, isBulletPointMode: textLabelProps.bulletPointMode === 'use' }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps)) })));
 }
 var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"], ["\n  ", ";\n\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"])), function (_a) {
     var isBulletPointMode = _a.isBulletPointMode;
@@ -81,7 +85,7 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3
     return color;
 }, function (_a) {
     var fontWeight = _a.fontWeight;
-    return fontWeight && "font-weight : " + fontWeight + ";";
+    return fontWeight && "font-weight : ".concat(fontWeight, ";");
 });
 function DesignedSectionButton(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;
@@ -94,28 +98,28 @@ function DesignedSectionButton(_a) {
         typeof navigationHandler === 'function' && navigationHandler(linkType, src);
     };
     if (!src || linkMethod !== 'CLICK_BUTTON_IN_ITEM')
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     switch (buttonType) {
         case 'A':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'B':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'C':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'D':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'E':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'F':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'G':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'H':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
         case 'I':
-            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionTextButtonWrapper, __assign({ color: textColor, state: state }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionTextButtonWrapper, __assign({ color: textColor, state: state }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state }) })));
         default:
-            return (0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "wrong type" }), void 0);
+            return (0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "wrong type" }));
     }
 }
 var S_DesignedSectionMainButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
@@ -128,16 +132,16 @@ var S_DesignedSectionMainButtonWrapper = styled_components_1.default.div(templat
     var borderWidth = _a.borderWidth, borderColor = _a.borderColor, state = _a.state, type = _a.type, theme = _a.theme;
     if (type === 'E' || type === 'F' || type === 'G' || type === 'H') {
         if (borderWidth && borderColor && state === 'normal') {
-            return borderWidth + "px solid " + borderColor;
+            return "".concat(borderWidth, "px solid ").concat(borderColor);
         }
         if (borderWidth && state === 'disabled') {
-            return borderWidth + "px solid " + theme.ui_cpnt_button_line_border_disabled;
+            return "".concat(borderWidth, "px solid ").concat(theme.ui_cpnt_button_line_border_disabled);
         }
     }
     return 'none';
 }, function (_a) {
     var radius = _a.radius;
-    return radius + "px";
+    return "".concat(radius, "px");
 }, function (_a) {
     var color = _a.color, state = _a.state, theme = _a.theme;
     if (state === 'normal') {
@@ -157,20 +161,20 @@ function IconButton(_a) {
     var handleOnClick = function () {
         onClick && onClick();
     };
-    return ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ iconButtonIconColor: iconButtonIconColor, iconButtonDisabledIconColor: iconButtonDisabledIconColor, iconButtonBackgroundColor: iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: iconButtonDisabledBackgroundColor, iconButtonBorderColor: iconButtonBorderColor, isDisabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_IconButton, { fillType: "line", shapeType: "circular", baseSize: "medium", iconName: iconName, state: state, onClick: handleOnClick }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ iconButtonIconColor: iconButtonIconColor, iconButtonDisabledIconColor: iconButtonDisabledIconColor, iconButtonBackgroundColor: iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: iconButtonDisabledBackgroundColor, iconButtonBorderColor: iconButtonBorderColor, isDisabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_IconButton, { fillType: "line", shapeType: "circular", baseSize: "medium", iconName: iconName, state: state, onClick: handleOnClick }) })));
 }
 var S_IconButtonWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button:hover:enabled {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button > svg > path {\n    stroke: ", ";\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button:hover:enabled {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button > svg > path {\n    stroke: ", ";\n  }\n"])), function (_a) {
     var iconButtonBackgroundColor = _a.iconButtonBackgroundColor, iconButtonDisabledBackgroundColor = _a.iconButtonDisabledBackgroundColor, isDisabled = _a.isDisabled;
     return (isDisabled ? iconButtonDisabledBackgroundColor : iconButtonBackgroundColor);
 }, function (_a) {
     var iconButtonBorderColor = _a.iconButtonBorderColor;
-    return "1px " + iconButtonBorderColor + " solid";
+    return "1px ".concat(iconButtonBorderColor, " solid");
 }, function (_a) {
     var iconButtonBackgroundColor = _a.iconButtonBackgroundColor;
     return iconButtonBackgroundColor;
 }, function (_a) {
     var iconButtonBorderColor = _a.iconButtonBorderColor;
-    return "1px " + iconButtonBorderColor + " solid";
+    return "1px ".concat(iconButtonBorderColor, " solid");
 }, function (_a) {
     var iconButtonIconColor = _a.iconButtonIconColor, iconButtonDisabledIconColor = _a.iconButtonDisabledIconColor, isDisabled = _a.isDisabled;
     return isDisabled ? iconButtonDisabledIconColor : iconButtonIconColor;
@@ -178,14 +182,14 @@ var S_IconButtonWrapper = styled_components_1.default.div(templateObject_6 || (t
 function MembershipCard(_a) {
     var membershipCardTemplate = _a.membershipCardTemplate, cardWidth = _a.cardWidth;
     var backgroundImageSrc = membershipCardTemplate.backgroundImageSrc, designSchema = membershipCardTemplate.designSchema, logoImageSrc = membershipCardTemplate.logoImageSrc, overlayColorPrimary = membershipCardTemplate.overlayColorPrimary, overlayColorSecondary = membershipCardTemplate.overlayColorSecondary, overlayType = membershipCardTemplate.overlayType;
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_GlossyOverlayWrapper, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: constants_1.COMMON_OVERLAY_IMAGE_SRC, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary, cardWidth: cardWidth }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(S_GlossyOverlayWrapper, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: constants_1.COMMON_OVERLAY_IMAGE_SRC, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }) }), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }) })), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary, cardWidth: cardWidth })] }) }));
 }
 var S_MembershipCardBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"])), function (_a) {
     var cardWidth = _a.cardWidth;
-    return (cardWidth ? cardWidth * 1.6 + "px" : '100%');
+    return (cardWidth ? "".concat(cardWidth * 1.6, "px") : '100%');
 }, function (_a) {
     var cardWidth = _a.cardWidth;
-    return (cardWidth ? cardWidth + "px" : '100%');
+    return (cardWidth ? "".concat(cardWidth, "px") : '100%');
 });
 var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  inset: 0;\n  position: absolute;\n  z-index: 4;\n"], ["\n  inset: 0;\n  position: absolute;\n  z-index: 4;\n"])));
 var designSchemaA = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: 10%;\n  top: 6%;\n"], ["\n  left: 10%;\n  top: 6%;\n"])));
@@ -193,12 +197,12 @@ var designSchemaB = (0, styled_components_1.css)(templateObject_10 || (templateO
 var S_LogoImageWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
     var cardWidth = _a.cardWidth, designSchema = _a.designSchema;
     if (designSchema === 'A') {
-        return cardWidth ? cardWidth * 0.5 + "px" : '50%';
+        return cardWidth ? "".concat(cardWidth * 0.5, "px") : '50%';
     }
     if (designSchema === 'B') {
-        return cardWidth ? cardWidth * 0.6 + "px" : '60%';
+        return cardWidth ? "".concat(cardWidth * 0.6, "px") : '60%';
     }
-    return cardWidth ? cardWidth * 0.5 + "px" : '50%';
+    return cardWidth ? "".concat(cardWidth * 0.5, "px") : '50%';
 }, function (_a) {
     var designSchema = _a.designSchema;
     switch (designSchema) {
@@ -216,14 +220,14 @@ var overlaySolidType = (0, styled_components_1.css)(templateObject_12 || (templa
 });
 var overlayGradientType = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
     var overlayColorPrimary = _a.overlayColorPrimary, overlayColorSecondary = _a.overlayColorSecondary;
-    return "linear-gradient(135deg, " + overlayColorPrimary + ", " + overlayColorSecondary + ")";
+    return "linear-gradient(135deg, ".concat(overlayColorPrimary, ", ").concat(overlayColorSecondary, ")");
 });
 var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"], ["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"])), function (_a) {
     var cardWidth = _a.cardWidth;
-    return (cardWidth ? cardWidth * 1.6 + "px" : '100%');
+    return (cardWidth ? "".concat(cardWidth * 1.6, "px") : '100%');
 }, function (_a) {
     var cardWidth = _a.cardWidth;
-    return (cardWidth ? cardWidth + "px" : '100%');
+    return (cardWidth ? "".concat(cardWidth, "px") : '100%');
 }, function (_a) {
     var overlayType = _a.overlayType;
     switch (overlayType) {
@@ -239,7 +243,7 @@ var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_14
 });
 function ColorOverrideIcon(_a) {
     var iconColor = _a.iconColor, iconName = _a.iconName;
-    return ((0, jsx_runtime_1.jsx)(S_ColorOverrideIconWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", iconColor: iconColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.Icon, { colorKey: "ui_cpnt_icon_sys_grey_01", iconName: iconName }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ColorOverrideIconWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", iconColor: iconColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.Icon, { colorKey: "ui_cpnt_icon_sys_grey_01", iconName: iconName }) })));
 }
 var S_ColorOverrideIconWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"])), function (_a) {
     var iconColor = _a.iconColor;
@@ -250,7 +254,7 @@ function XlargeMainButton(_a) {
     var handleOnclick = function () {
         onClick && onClick();
     };
-    return ((0, jsx_runtime_1.jsx)(S_XlargeMainButtonPropsWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", buttonTextColor: buttonTextColor, buttonBackgroundColor: buttonBackgroundColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: buttonText, size: "rlarge", responsiveMode: "use", onClick: handleOnclick, state: state }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_XlargeMainButtonPropsWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", buttonTextColor: buttonTextColor, buttonBackgroundColor: buttonBackgroundColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: buttonText, size: "rlarge", responsiveMode: "use", onClick: handleOnclick, state: state }) })));
 }
 var S_XlargeMainButtonPropsWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 100%;\n\n    & div {\n      -webkit-line-clamp: 2;\n      align-items: center;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      justify-content: center;\n      line-height: 24px;\n      overflow: auto;\n      text-align: center;\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n    height: 100%;\n\n    & div {\n      -webkit-line-clamp: 2;\n      align-items: center;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      justify-content: center;\n      line-height: 24px;\n      overflow: auto;\n      text-align: center;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme, buttonBackgroundColor = _a.buttonBackgroundColor;

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

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

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

@@ -7,24 +7,24 @@ import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util
 import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
 import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
 export { TypeOfSectionAction };
-export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
-export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B' | null | undefined;
-export declare type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
-export declare type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
-export declare type TypeOfSectionType = 'PROGRAMMED' | 'DESIGNED' | 'CUSTOM';
-export declare type TypeOfCarouselAutoplayMode = 'AUTO' | 'MANUAL';
-export declare type TypeOfCarouselInfiniteLoopMode = 'USE' | 'NO_USE';
-export declare type TypeOfBackgroundMediaType = 'IMAGE' | 'YOUTUBE';
-export declare type TypeOfSectionButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
-export declare type TypeOfItemButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
-export declare type TypeOfItemManifestSchema = 'BASE_CONTENTS_CAROUSEL_ITEM' | 'BASE_FOOTER_ITEM' | 'BASE_INFO_BOX_ITEM';
-export declare type TypeOfItemLinkMethod = 'CLICK_ITEM' | 'CLICK_BUTTON_IN_ITEM' | 'NONE';
-export declare type TypeOfItemLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
-export declare type TypeOfItemToneType = 'LIGHT' | 'DARK';
-export declare type TypeOfProgrammedItemActionButtonTextType = 'A' | 'B' | 'C' | 'D' | 'E';
-declare type KeyOfSectionProperties = 'title' | 'description' | 'section_content_media_type' | 'section_content_media_src' | 'button_alpha_label' | 'button_alpha_link_type' | 'button_alpha_link_src' | 'button_bravo_label' | 'button_bravo_link_type' | 'button_bravo_link_src' | 'button_charlie_label' | 'button_charlie_link_type' | 'button_charlie_link_src' | 'button_delta_label' | 'button_delta_link_type' | 'button_delta_link_src' | 'button_echo_label' | 'button_echo_link_type' | 'button_echo_link_src' | 'carousel_autoplay_mode' | 'carousel_autoplay_time' | 'carousel_infinite_loop_mode' | 'item_link_method' | 'multi_purpose_url';
-declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_hex' | 'background_color_in_hex' | 'background_media_type' | 'background_media_src' | 'background_overlay_color_in_hex' | 'button_alpha_design_type' | 'button_alpha_background_color_in_hex' | 'button_alpha_label_color_in_hex' | 'button_bravo_design_type' | 'button_bravo_background_color_in_hex' | 'button_bravo_label_color_in_hex' | 'button_charlie_design_type' | 'button_charlie_background_color_in_hex' | 'button_charlie_label_color_in_hex' | 'button_delta_design_type' | 'button_delta_background_color_in_hex' | 'button_delta_label_color_in_hex' | 'button_echo_design_type' | 'button_echo_background_color_in_hex' | 'button_echo_label_color_in_hex' | 'item_title_color_in_hex' | 'item_description_color_in_hex' | 'item_button_design_type' | 'item_button_background_color_in_hex' | 'item_button_label_color_in_hex' | 'item_highlighting_color_in_hex' | 'item_tone_type' | 'programmed_item_action_button_text_type';
-declare type KeyOfItemProperties = 'title' | 'description' | 'body' | 'logo_image_src' | 'image_src' | 'link_type' | 'link_src' | 'button_label';
+export type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
+export type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B' | null | undefined;
+export type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
+export type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
+export type TypeOfSectionType = 'PROGRAMMED' | 'DESIGNED' | 'CUSTOM';
+export type TypeOfCarouselAutoplayMode = 'AUTO' | 'MANUAL';
+export type TypeOfCarouselInfiniteLoopMode = 'USE' | 'NO_USE';
+export type TypeOfBackgroundMediaType = 'IMAGE' | 'YOUTUBE';
+export type TypeOfSectionButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
+export type TypeOfItemButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
+export type TypeOfItemManifestSchema = 'BASE_CONTENTS_CAROUSEL_ITEM' | 'BASE_FOOTER_ITEM' | 'BASE_INFO_BOX_ITEM';
+export type TypeOfItemLinkMethod = 'CLICK_ITEM' | 'CLICK_BUTTON_IN_ITEM' | 'NONE';
+export type TypeOfItemLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
+export type TypeOfItemToneType = 'LIGHT' | 'DARK';
+export type TypeOfProgrammedItemActionButtonTextType = 'A' | 'B' | 'C' | 'D' | 'E';
+type KeyOfSectionProperties = 'title' | 'description' | 'section_content_media_type' | 'section_content_media_src' | 'button_alpha_label' | 'button_alpha_link_type' | 'button_alpha_link_src' | 'button_bravo_label' | 'button_bravo_link_type' | 'button_bravo_link_src' | 'button_charlie_label' | 'button_charlie_link_type' | 'button_charlie_link_src' | 'button_delta_label' | 'button_delta_link_type' | 'button_delta_link_src' | 'button_echo_label' | 'button_echo_link_type' | 'button_echo_link_src' | 'carousel_autoplay_mode' | 'carousel_autoplay_time' | 'carousel_infinite_loop_mode' | 'item_link_method' | 'multi_purpose_url';
+type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_hex' | 'background_color_in_hex' | 'background_media_type' | 'background_media_src' | 'background_overlay_color_in_hex' | 'button_alpha_design_type' | 'button_alpha_background_color_in_hex' | 'button_alpha_label_color_in_hex' | 'button_bravo_design_type' | 'button_bravo_background_color_in_hex' | 'button_bravo_label_color_in_hex' | 'button_charlie_design_type' | 'button_charlie_background_color_in_hex' | 'button_charlie_label_color_in_hex' | 'button_delta_design_type' | 'button_delta_background_color_in_hex' | 'button_delta_label_color_in_hex' | 'button_echo_design_type' | 'button_echo_background_color_in_hex' | 'button_echo_label_color_in_hex' | 'item_title_color_in_hex' | 'item_description_color_in_hex' | 'item_button_design_type' | 'item_button_background_color_in_hex' | 'item_button_label_color_in_hex' | 'item_highlighting_color_in_hex' | 'item_tone_type' | 'programmed_item_action_button_text_type';
+type KeyOfItemProperties = 'title' | 'description' | 'body' | 'logo_image_src' | 'image_src' | 'link_type' | 'link_src' | 'button_label';
 export interface ISection {
     id: number;
     administrativeTitle?: string;
@@ -182,7 +182,7 @@ export interface ISectionBackground extends IBackground {
     color?: string;
     overlay?: IBackgroundOverlay;
 }
-declare type TypeOfBackground = 'COLOR' | 'IMAGE' | 'VIDEO' | 'YOUTUBE';
+type TypeOfBackground = 'COLOR' | 'IMAGE' | 'VIDEO' | 'YOUTUBE';
 export interface IBackgroundOverlay {
     color?: string;
 }
@@ -210,7 +210,7 @@ export interface IItemDescription extends IDescription {
     text: string;
     color?: string;
 }
-export declare type DynamicLayoutProps = {
+export type DynamicLayoutProps = {
     device: 'DESKTOP' | 'MOBILE';
     /** @default 'NORMAL */
     mode?: 'NORMAL' | 'PREVIEW' | 'EDIT';
@@ -223,13 +223,14 @@ export declare type DynamicLayoutProps = {
     onClickEditSection?: (section: ISection) => void;
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
+    width?: number;
 };
-export declare type NavHandlerAction = {
+export type NavHandlerAction = {
     openNewTab: boolean;
 };
-export declare type SubscriptionProductType = 'FREE_INFINITE' | 'FREE_FINITE' | 'ONCE_INFINITE' | 'ONCE_FINITE' | 'COUPON_FREE_INFINITE' | 'COUPON_FREE_FINITE' | 'COUPON_ONCE_INFINITE' | 'COUPON_ONCE_FINITE' | 'SUBSCRIPTION_30DAYS' | 'SUBSCRIPTION_90DAYS' | 'SUBSCRIPTION_180DAYS' | 'SUBSCRIPTION_365DAYS';
-declare type ExpiryPeriodInDaysType = 1 | 3 | 7 | 14 | 30;
-export declare type IMembershipCardTemplate = {
+export type SubscriptionProductType = 'FREE_INFINITE' | 'FREE_FINITE' | 'ONCE_INFINITE' | 'ONCE_FINITE' | 'COUPON_FREE_INFINITE' | 'COUPON_FREE_FINITE' | 'COUPON_ONCE_INFINITE' | 'COUPON_ONCE_FINITE' | 'SUBSCRIPTION_30DAYS' | 'SUBSCRIPTION_90DAYS' | 'SUBSCRIPTION_180DAYS' | 'SUBSCRIPTION_365DAYS';
+type ExpiryPeriodInDaysType = 1 | 3 | 7 | 14 | 30;
+export type IMembershipCardTemplate = {
     backgroundImageSrc: string;
     logoImageSrc: string;
     overlayType: 'NONE' | 'SOLID' | 'GRADIENT';
@@ -237,14 +238,14 @@ export declare type IMembershipCardTemplate = {
     overlayColorSecondary: string;
     designSchema: 'A' | 'B' | 'C';
 };
-export declare type IMembershipBenefitInfo = {
+export type IMembershipBenefitInfo = {
     benefitAlpha?: string;
     benefitBravo?: string;
     benefitCharlie?: string;
     benefitDelta?: string;
     benefitEcho?: string;
 };
-export declare type IConnectedSubscriptionProducts = {
+export type IConnectedSubscriptionProducts = {
     id: number;
     order: number;
     connectedMembershipId: number;
@@ -264,7 +265,7 @@ export declare type IConnectedSubscriptionProducts = {
         updatedAt: string;
     };
 };
-export declare type IMembership = {
+export type IMembership = {
     id: number;
     type: 'SYSTEM_GUEST' | 'SYSTEM_MEMBER' | 'SYSTEM_P_APP_UNLOCK' | 'GENERAL';
     mid: string;
@@ -275,7 +276,7 @@ export declare type IMembership = {
     membershipBenefitInfo: IMembershipBenefitInfo;
     totalSubscriptionProducts: number;
 };
-export declare type IConnectedMembership = {
+export type IConnectedMembership = {
     id: number;
     order: number;
     mdid: string;
@@ -283,17 +284,20 @@ export declare type IConnectedMembership = {
     membership: IMembership;
     connectedSubscriptionProducts: IConnectedSubscriptionProducts[];
 };
-export declare type IProgrammedSectionComponents = {
+export type IProgrammedSectionComponents = {
     [key in TypeOfSectionManifestSchema]?: JSX.Element;
 };
-export declare type IMembershipDisplay = {
+export type IMembershipDisplay = {
     id: number;
     mdid: string;
     title: string;
     isDefault: boolean;
     connectedMemberships: IConnectedMembership[];
 };
-export declare type ISectionJsonProperties = {
+export type ISectionJsonProperties = {
+    CB_CONTENT_PROP_SECTION: {
+        CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: boolean;
+    };
     CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
     CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
     CB_LAYOUT_PROP_PADDING?: CB_LAYOUT_PROP_PADDING_SPECS;
@@ -311,7 +315,7 @@ export declare type ISectionJsonProperties = {
     CB_STYLE_PROP_BGMEDIA?: CB_STYLE_PROP_BGMEDIA_SPECS;
     CB_STYLE_PROP_BGOVERLAY?: CB_STYLE_PROP_BGOVERLAY_SPECS;
 };
-export declare type CB_STYLE_PROP_BGMEDIA_SPECS_BASE = {
+export type CB_STYLE_PROP_BGMEDIA_SPECS_BASE = {
     CB_STYLE_PROP_BGMEDIA_SPEC_YSRC: string;
     CB_STYLE_PROP_BGMEDIA_SPEC_TYPE: string;
     CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL: boolean;
@@ -323,7 +327,7 @@ export declare type CB_STYLE_PROP_BGMEDIA_SPECS_BASE = {
     CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: string;
     CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: number;
 };
-export declare type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
+export type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
     'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': number | null | undefined;
     'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE': number | null | undefined;
     'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE:HOVER': number | null | undefined;

package/dist/src/sub/DynamicLayout/utils/TouTubeLinkParser.js CHANGED Viewed

@@ -10,13 +10,13 @@ var YouTubeLinkParser = /** @class */ (function () {
         return (_a = (embedUrl || shareUrl)) === null || _a === void 0 ? void 0 : _a.pop();
     };
     YouTubeLinkParser.getThumbnailUrl = function (src) {
-        return "https://img.youtube.com/vi/" + YouTubeLinkParser.getId(src) + "/0.jpg";
+        return "https://img.youtube.com/vi/".concat(YouTubeLinkParser.getId(src), "/0.jpg");
     };
     YouTubeLinkParser.getEmbedUrl = function (src) {
-        return "https://www.youtube.com/embed/" + YouTubeLinkParser.getId(src);
+        return "https://www.youtube.com/embed/".concat(YouTubeLinkParser.getId(src));
     };
     YouTubeLinkParser.getEmbedUrlWithLoop = function (src) {
-        return "https://www.youtube.com/embed/" + YouTubeLinkParser.getId(src) + "?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&playlist=" + this.getId(src);
+        return "https://www.youtube.com/embed/".concat(YouTubeLinkParser.getId(src), "?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&playlist=").concat(this.getId(src));
     };
     return YouTubeLinkParser;
 }());

package/dist/src/sub/index.js CHANGED Viewed

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -88,7 +88,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/styled-components": "^5.1.9",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "chromatic": "^6.0.6",
     "dotenv-cli": "^4.0.0",
     "eslint": "^7.27.0",
@@ -109,11 +109,14 @@
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
     "stylelint-prettier": "^1.2.0",
-    "ts-loader": "^8.3.0",
+    "ts-loader": "^8.4.0",
     "tsc-alias": "^1.8.3",
     "tsconfig-paths": "^4.1.2",
-    "typescript": "^4.4.4",
+    "typescript": "^4.9.5",
     "webpack": "^4.46.0",
     "webpack-cli": "^4.9.0"
+  },
+  "overrides": {
+    "@storybook/react-docgen-typescript-plugin": "1.0.2--canary.12.cf35881ff63bf958b8998e8dd1dfd5626ee868c2.0"
   }
 }

package/release-note.md CHANGED Viewed

@@ -1,7 +1,7 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.2.29]
-## 기준 pds-dev-kit-web 버전 @2.1.19
+## [v0.2.31]
+## 기준 pds-dev-kit-web 버전 @2.1.23
 ### sub
 * DynamicLayout - custom section
-    * BGMedia의 값이 Youtube 타입일 경우, spec panel에서 해당 영상의 상세 옵션(루프 모드, 시작시간, 종료시간) 설정을 변경하였을 때 대상 section이 리렌더 되지 않는 현상을 수정
+    * 모바일일 경우 font size 기준을 16에서 14로 변경