pds-dev-kit-web-test 0.2.28 → 0.2.30

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/ImageView/ImageView.js

@@ -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];
@@ -41,17 +45,17 @@ var ImageView = function (_a) {
     var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g, isLoading = _a.isLoading;
     var LoadingAutoImageView = function () {
         if (width && !height && !noImageHeight) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }) })));
         }
         if (height && height !== 'responsive' && !width && !noImageWidth) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }) })));
         }
         if (height === 'responsive' && !width && !noImageWidth) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }, void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }));
         }
-        return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }, void 0));
+        return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }));
     };
-    var LoadingRatioImageView = ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: ratio }, void 0) }), void 0));
+    var LoadingRatioImageView = ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: ratio }) })));
     var LoadingImageView = function () {
         if (ratio === 'auto') {
             return LoadingAutoImageView();
@@ -62,42 +66,42 @@ var ImageView = function (_a) {
         if (isLoading) {
             return LoadingImageView();
         }
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ratio === 'auto' ? ((0, jsx_runtime_1.jsx)(S_AutoImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, { children: src && ((0, jsx_runtime_1.jsx)(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType }, void 0)) }), void 0)) : ((0, jsx_runtime_1.jsx)(S_RatioImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode }, { children: (0, jsx_runtime_1.jsx)(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio }, void 0) }), void 0)) }, void 0));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ratio === 'auto' ? ((0, jsx_runtime_1.jsx)(S_AutoImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, { children: src && ((0, jsx_runtime_1.jsx)(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })) }))) : ((0, jsx_runtime_1.jsx)(S_RatioImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode }, { children: (0, jsx_runtime_1.jsx)(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio }) }))) }));
     };
     return ImageViewVariation();
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, backgroundFillMode = _a.backgroundFillMode;
-    return backgroundFillMode === 'use' ? "background-color: " + theme.ui_temp_grey_04 : '';
+    return backgroundFillMode === 'use' ? "background-color: ".concat(theme.ui_temp_grey_04) : '';
 }, function (_a) {
     var borderMode = _a.borderMode, theme = _a.theme;
-    return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
+    return borderMode === 'use' && "border: 1px solid ".concat(theme.ui_profile_image_border);
 }, function (_a) {
     var shapeType = _a.shapeType, $radius = _a.$radius;
     return shapeType &&
         {
-            round: "border-radius: " + $radius + "px",
+            round: "border-radius: ".concat($radius, "px"),
             circular: 'border-radius: 50%',
             rectangle: ''
         }[shapeType];
 });
 var S_RatioImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"], ["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"])), wrapperStyle, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 });
 var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, $src = _a.$src;
-    return $src ? "background-image: url(" + $src + ")" : "background-color: " + theme.ui_temp_grey_04;
+    return $src ? "background-image: url(".concat($src, ")") : "background-color: ".concat(theme.ui_temp_grey_04);
 }, function (_a) {
     var scaleType = _a.scaleType;
     return scaleType &&
         {
             fill: 'background-size: 100% 100%',
-            contain: "background-size: " + scaleType,
-            cover: "background-size: " + scaleType,
+            contain: "background-size: ".concat(scaleType),
+            cover: "background-size: ".concat(scaleType),
             none: 'background-size: auto'
         }[scaleType];
 }, function (_a) {
@@ -118,51 +122,51 @@ var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (temp
 });
 var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var noImageHeight = _a.noImageHeight, $src = _a.$src;
-    return (!$src && noImageHeight ? noImageHeight + "px" : 'auto');
+    return (!$src && noImageHeight ? "".concat(noImageHeight, "px") : 'auto');
 }, function (_a) {
     var noImageHeight = _a.noImageHeight, $src = _a.$src;
-    return !$src && noImageHeight ? noImageHeight + "px" : 'auto';
+    return !$src && noImageHeight ? "".concat(noImageHeight, "px") : 'auto';
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var theme = _a.theme, noImageHeight = _a.noImageHeight, $src = _a.$src;
-    return !$src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
+    return !$src && noImageHeight ? "background-color: ".concat(theme.ui_temp_grey_04) : '';
 });
 var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var noImageWidth = _a.noImageWidth, $src = _a.$src;
-    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+    return (!$src && noImageWidth ? "".concat(noImageWidth, "px") : 'auto');
 }, function (_a) {
     var noImageWidth = _a.noImageWidth, $src = _a.$src;
-    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+    return (!$src && noImageWidth ? "".concat(noImageWidth, "px") : 'auto');
 }, function (_a) {
     var theme = _a.theme, noImageWidth = _a.noImageWidth, $src = _a.$src;
-    return !$src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
+    return !$src && noImageWidth ? "background-color: ".concat(theme.ui_temp_grey_04) : '';
 });
 var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var theme = _a.theme, $src = _a.$src;
-    return (!$src ? "background-color: " + theme.ui_temp_grey_04 : '');
+    return (!$src ? "background-color: ".concat(theme.ui_temp_grey_04) : '');
 });
 var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: auto;\n  width: 100%;\n"], ["\n  height: auto;\n  width: 100%;\n"])));
 var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  width: auto;\n"], ["\n  height: 100%;\n  width: auto;\n"])));
@@ -179,7 +183,7 @@ var S_AutoImageViewWrapper = styled_components_1.default.div(templateObject_10 |
 });
 var S_AutoImageView = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var scaleType = _a.scaleType;
-    return (scaleType !== 'none' ? "object-fit: " + scaleType + ";" : '');
+    return (scaleType !== 'none' ? "object-fit: ".concat(scaleType, ";") : '');
 }, function (_a) {
     var $width = _a.$width, $height = _a.$height;
     return $width && !$height && onlyWidthStyle;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Spacing/Spacing.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type SpacingProps = {
+export type SpacingProps = {
     size: 'spacing_a' | 'spacing_b' | 'spacing_c' | 'spacing_d' | 'spacing_e' | 'spacing_f' | 'spacing_g' | 'spacing_h' | 'spacing_i' | 'spacing_j' | 'spacing_k' | 'spacing_l' | 'spacing_m' | 'spacing_n';
     spacingType?: 'height' | 'width';
 };

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Spacing/Spacing.js

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 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];
@@ -27,7 +31,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 function Spacing(_a) {
     var size = _a.size, _b = _a.spacingType, spacingType = _b === void 0 ? 'height' : _b;
-    return ((0, jsx_runtime_1.jsx)(S_Spacing, { "x-pds-name": "Spacing", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", size: size, spacingType: spacingType }, void 0));
+    return ((0, jsx_runtime_1.jsx)(S_Spacing, { "x-pds-name": "Spacing", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", size: size, spacingType: spacingType }));
 }
 var spacing_a = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/IconButton/IconButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../common';
-export declare type IconButtonProps = {
+export type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/IconButton/IconButton.js

@@ -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];
@@ -72,7 +76,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }) })));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -87,7 +91,7 @@ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
         ? ''
-        : "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+        : "background-image: linear-gradient(\n    to top,\n    ".concat(theme.ui_cpnt_button_fill_on_base_pressed, ",\n    ").concat(theme.ui_cpnt_button_fill_on_base_pressed, "\n  );");
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && fillDisabled;
@@ -117,7 +121,7 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     }
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_pressed + "\n  ;";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, "\n  ;");
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && lineDisabled;
@@ -140,7 +144,7 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templat
     return shapeType && { circular: 'border-radius: 50%', rectangle: '' }[shapeType];
 }, function (_a) {
     var theme = _a.theme, shadow = _a.shadow;
-    return shadow === 'visible' && "box-shadow: " + theme.boxShadow.elevation2;
+    return shadow === 'visible' && "box-shadow: ".concat(theme.boxShadow.elevation2);
 }, function (_a) {
     var fillType = _a.fillType;
     return fillType &&

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/MainButton/MainButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../common';
-export declare type MainButtonProps = {
+export type MainButtonProps = {
     text?: PDSTextType;
     shapeType?: 'round' | 'rectangle';
     fillType?: 'fill' | 'line';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/MainButton/MainButton.js

@@ -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];
@@ -143,12 +147,12 @@ function MainButton(_a) {
     };
     var MainButtonVariation = function () {
         if (isLoading) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }, void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }));
         }
         if (isSubmitting) {
-            return ((0, jsx_runtime_1.jsx)(S_MainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true }, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_MainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true }, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }) })));
         }
-        return ((0, jsx_runtime_1.jsxs)(S_MainButton, __assign({ "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0)] }, void 0))] }), void 0));
+        return ((0, jsx_runtime_1.jsxs)(S_MainButton, __assign({ "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })] }))] })));
     };
     return MainButtonVariation();
 }
@@ -192,7 +196,7 @@ var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    return "background-image: linear-gradient(\n    to top,\n    ".concat(theme.ui_cpnt_button_fill_on_base_pressed, ",\n    ").concat(theme.ui_cpnt_button_fill_on_base_pressed, "\n  );");
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && fillDisabled;
@@ -217,7 +221,7 @@ var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10
     return theme.ui_cpnt_button_line_border_darktheme_enabled;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_darktheme_pressed + ";";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_darktheme_pressed, ";");
 });
 var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
@@ -235,7 +239,7 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, ";");
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
@@ -252,7 +256,7 @@ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    return "background-image: linear-gradient(\n    to top,\n    ".concat(theme.ui_cpnt_button_fill_on_base_pressed, ",\n    ").concat(theme.ui_cpnt_button_fill_on_base_pressed, "\n  );");
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && primaryDisabled;
@@ -266,7 +270,7 @@ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObjec
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    return "background-image: linear-gradient(\n    to top,\n    ".concat(theme.ui_cpnt_button_fill_on_base_pressed, ",\n    ").concat(theme.ui_cpnt_button_fill_on_base_pressed, "\n  );");
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;
@@ -287,8 +291,8 @@ var S_MainButton = styled_components_1.default.button(templateObject_17 || (temp
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
         {
-            bold: "font-weight: " + theme.fontWeight.bold,
-            regular: "font-weight: " + theme.fontWeight.normal
+            bold: "font-weight: ".concat(theme.fontWeight.bold),
+            regular: "font-weight: ".concat(theme.fontWeight.normal)
         }[fontWeight];
 });
 var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/TextButton/TextButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../common';
-export declare type TextButtonProps = {
+export type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     responsiveMode?: 'none' | 'use';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/TextButton/TextButton.js

@@ -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];
@@ -68,7 +72,7 @@ function TextButton(_a) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" }) })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;
@@ -96,8 +100,8 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
         {
-            bold: "font-weight: " + theme.fontWeight.bold,
-            regular: "font-weight: " + theme.fontWeight.normal
+            bold: "font-weight: ".concat(theme.fontWeight.bold),
+            regular: "font-weight: ".concat(theme.fontWeight.normal)
         }[fontWeight];
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/TextLabel/TextLabel.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType, UiColors } from '../../common';
-export declare type TextLabelProps = {
+export type TextLabelProps = {
     text: PDSTextType;
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
@@ -17,7 +17,7 @@ export declare type TextLabelProps = {
     bulletPointMode?: 'none' | 'use';
     wordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
 };
-export declare type TextStyleProps = {
+export type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/TextLabel/TextLabel.js

@@ -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];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../hybrid");
 function TextLabel(_a) {
     var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k, _l = _a.wordBreak, wordBreak = _l === void 0 ? 'keep_all' : _l;
-    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }, void 0) }, void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) })))] })));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -329,7 +333,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_34 || (template
     var singleLineMode = _a.singleLineMode, ellipsisMode = _a.ellipsisMode, theme = _a.theme;
     return singleLineMode === 'use' &&
         ellipsisMode === 'none' &&
-        "line-height: " + theme.desktopLineHeight.singleLine;
+        "line-height: ".concat(theme.desktopLineHeight.singleLine);
 }, function (_a) {
     var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
     return ellipsisMode === 'use' && lineLimit && ellipsisStyle;

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/useLazyUnmount.d.ts

@@ -1,4 +1,4 @@
-declare type Options = {
+type Options = {
     doUnmount: () => void;
 };
 export default function useLazyUnmount({ doUnmount }: Options, delayTime: number): () => Promise<void>;

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/useLazyUnmount.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/useUmountStyle.d.ts

@@ -1,4 +1,4 @@
-declare type Options = {
+type Options = {
     mountStyle: Record<string, unknown>;
     unmountStyle: Record<string, unknown>;
     handleUnmount: () => void;

package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/useUmountStyle.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

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

@@ -75,6 +75,9 @@ exports.customSectionMock1 = {
     template: undefined,
     updatedAt: '2023-01-06T09:05:45',
     jsonProperties: {
+        CB_CONTENT_PROP_SECTION: {
+            CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: true
+        },
         CB_CONTENT_PROP_VISIBILITY: {
             CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
             CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true

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

@@ -1163,12 +1163,12 @@ exports.samplePageMembershipSection = {
                             return {
                                 id: i + 1,
                                 order: i,
-                                mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
-                                mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
+                                mdid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_MD_ID"),
+                                mid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_M_ID"),
                                 membership: {
                                     id: i + 1,
                                     type: 'GENERAL',
-                                    mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
+                                    mid: "MEMBERSHIP_".concat(alphabet[i], "_MID"),
                                     title: i % 2
                                         ? '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!'
                                         : '짧은 제목',
@@ -1204,7 +1204,7 @@ exports.samplePageMembershipSection = {
                                             type: 'COUPON_FREE_FINITE',
                                             title: i % 2 ? '청춘이 황금시대를 우리의 같은 무엇을' : '짧은 제목',
                                             alias: i % 2
-                                                ? "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS"
+                                                ? "CONNECTED_SUBSCRIPTION_PRODUCTS_".concat(alphabet[i], "_ALIAS")
                                                 : 'shortAlias',
                                             expiryPeriodInDays: 7,
                                             isDeactivated: i % 2 === 0,

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

@@ -1472,12 +1472,12 @@ var MembershipSectionsMock = function (templateType) { return [
                                 return {
                                     id: i + 1,
                                     order: i,
-                                    mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
-                                    mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
+                                    mdid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_MD_ID"),
+                                    mid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_M_ID"),
                                     membership: {
                                         id: i + 1,
                                         type: 'GENERAL',
-                                        mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
+                                        mid: "MEMBERSHIP_".concat(alphabet[i], "_MID"),
                                         title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
                                         insertedAt: '2023-01-06T09:05:45',
                                         updatedAt: '2023-01-06T09:05:45',
@@ -1508,7 +1508,7 @@ var MembershipSectionsMock = function (templateType) { return [
                                                 id: i + 1,
                                                 type: 'COUPON_ONCE_FINITE',
                                                 title: '청춘이 황금시대를 우리의 같은 무엇을',
-                                                alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
+                                                alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_".concat(alphabet[i], "_ALIAS"),
                                                 expiryPeriodInDays: 7,
                                                 isDeactivated: i % 2 === 0,
                                                 fee: {
@@ -1978,12 +1978,12 @@ var MembershipSectionsMockWithoutConnectedSubscriptionProducts = function (templ
                                 return {
                                     id: i + 1,
                                     order: i,
-                                    mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
-                                    mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
+                                    mdid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_MD_ID"),
+                                    mid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_M_ID"),
                                     membership: {
                                         id: i + 1,
                                         type: 'GENERAL',
-                                        mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
+                                        mid: "MEMBERSHIP_".concat(alphabet[i], "_MID"),
                                         title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
                                         insertedAt: '2023-01-06T09:05:45',
                                         updatedAt: '2023-01-06T09:05:45',
@@ -2248,12 +2248,12 @@ var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templa
                                 return {
                                     id: i + 1,
                                     order: i,
-                                    mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
-                                    mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
+                                    mdid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_MD_ID"),
+                                    mid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_M_ID"),
                                     membership: {
                                         id: i + 1,
                                         type: 'GENERAL',
-                                        mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
+                                        mid: "MEMBERSHIP_".concat(alphabet[i], "_MID"),
                                         title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
                                         insertedAt: '2023-01-06T09:05:45',
                                         updatedAt: '2023-01-06T09:05:45',
@@ -2284,7 +2284,7 @@ var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templa
                                                 id: i + 1,
                                                 type: 'COUPON_ONCE_FINITE',
                                                 title: '청춘이 황금시대를 우리의 같은 무엇을',
-                                                alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
+                                                alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_".concat(alphabet[i], "_ALIAS"),
                                                 expiryPeriodInDays: 7,
                                                 isDeactivated: i % 2 === 0,
                                                 fee: {