pds-dev-kit-web 2.1.22 → 2.1.23

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

@@ -2,8 +2,8 @@
 import type { Layout } from 'publ-echo/dist/lib';
 import type { ResizeEventType } from 'publ-echo/dist/lib/GridItem/types';
 import type { LayoutItem, Layouts } from 'publ-echo/dist/lib/GridLayoutEditor/types';
-export declare type TypeOfSectionAction = ActionMap<ActionHandlerPayload>[keyof ActionMap<ActionHandlerPayload>];
-declare type ActionHandlerPayload = {
+export type TypeOfSectionAction = ActionMap<ActionHandlerPayload>[keyof ActionMap<ActionHandlerPayload>];
+type ActionHandlerPayload = {
     '@EXP_IFRAME/IFRAME_ON_LOADED': {
         event: React.SyntheticEvent<HTMLIFrameElement, Event>;
         multiPurposeUrl: string;
@@ -35,7 +35,7 @@ declare type ActionHandlerPayload = {
         sectionId: number;
     };
 };
-declare type ActionMap<M extends {
+type ActionMap<M extends {
     [index: string]: any;
 }> = {
     [Key in keyof M]: M[Key] extends undefined ? {

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/ContentsCarouselSection.js

@@ -35,18 +35,18 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsCarouselSection(_a) {
     var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "ContentsCarousel" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMatcher, { styleTemplate: props.template }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "ContentsCarousel" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMatcher, { styleTemplate: props.template }) })) })));
 }
 var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 function TemplateMatcher(_a) {
     var styleTemplate = _a.styleTemplate;
     switch (styleTemplate) {
         case 'BASE_CONTENTS_CAROUSEL_A':
-            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {});
         case 'BASE_CONTENTS_CAROUSEL_B':
-            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {});
         default:
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
 }
 exports.default = ContentsCarouselSection;

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js

@@ -8,8 +8,8 @@ var mobile_1 = require("./mobile");
 function TemplateA() {
     var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
-            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {}, void 0)
-        }[device] }, void 0));
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {})
+        }[device] }));
 }
 exports.default = TemplateA;

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

@@ -41,7 +41,7 @@ function TemplateA() {
         })
         : [];
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
-    return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }, void 0) }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0)), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Carousel, __assign({ spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
+    return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }) })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }) })), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Carousel, __assign({ spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                             1301: {
                                 slidesPerView: 4
                             },
@@ -55,8 +55,8 @@ function TemplateA() {
                                 : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, { children: filteredSortedItems.map(function (item) {
                             var id = item.id;
                             var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
-                            return ((0, jsx_runtime_1.jsxs)(desktop_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }, void 0) }, void 0)), itemTitle && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 }, void 0)), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }, void 0) }), void 0)), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }, void 0) }), void 0))] }), id));
-                        }) }), void 0) }, void 0))] }, void 0) }), void 0));
+                            return ((0, jsx_runtime_1.jsxs)(desktop_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }) })), itemTitle && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }) }))), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }) })))] }), id));
+                        }) })) }))] }) })));
 }
 var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  width: 100%;\n"], ["\n  margin: ", " 0;\n  width: 100%;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

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

@@ -41,15 +41,15 @@ function TemplateA() {
         })
         : [];
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
-    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0) }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0)), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Carousel, __assign({ spaceBetween: 16, slidesPerView: 2, mode: carouselAutoplayMode === 'AUTO'
+    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }) })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }) })), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Carousel, __assign({ spaceBetween: 16, slidesPerView: 2, mode: carouselAutoplayMode === 'AUTO'
                         ? 'autoplay'
                         : carouselInfiniteLoopMode === 'USE'
                             ? 'loop'
                             : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, { children: filteredSortedItems.map(function (item) {
                         var id = item.id;
                         var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
-                        return ((0, jsx_runtime_1.jsxs)(mobile_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }, void 0) }, void 0)), itemTitle && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 }, void 0)), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }, void 0) }), void 0)), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }, void 0) }), void 0))] }), id));
-                    }) }), void 0) }, void 0))] }), void 0));
+                        return ((0, jsx_runtime_1.jsxs)(mobile_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }) })), itemTitle && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }) }))), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }) })))] }), id));
+                    }) })) }))] })));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js

@@ -8,8 +8,8 @@ var mobile_1 = require("./mobile");
 function TemplateB() {
     var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
-            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, {}, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, {}, void 0)
-        }[device] }, void 0));
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, {}),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, {})
+        }[device] }));
 }
 exports.default = TemplateB;

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

@@ -41,7 +41,7 @@ function TemplateB() {
         })
         : [];
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
-    return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }, void 0) }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0)), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Carousel, __assign({ spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
+    return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }) })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }) })), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Carousel, __assign({ spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                             1301: {
                                 slidesPerView: 4
                             },
@@ -55,8 +55,8 @@ function TemplateB() {
                                 : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, { children: filteredSortedItems.map(function (item) {
                             var id = item.id;
                             var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
-                            return ((0, jsx_runtime_1.jsxs)(desktop_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }, void 0) }, void 0)), itemTitle && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 }, void 0)), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }, void 0) }), void 0)), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }, void 0) }), void 0))] }), id));
-                        }) }), void 0) }, void 0))] }, void 0) }), void 0));
+                            return ((0, jsx_runtime_1.jsxs)(desktop_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }) })), itemTitle && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }) }))), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }) })))] }), id));
+                        }) })) }))] }) })));
 }
 var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  width: 100%;\n"], ["\n  margin: ", " 0;\n  width: 100%;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

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

@@ -41,15 +41,15 @@ function TemplateB() {
         })
         : [];
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
-    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0) }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0)), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Carousel, __assign({ spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
+    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 }, { children: [title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }) })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_SectionButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }) })), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_CarouselBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Carousel, __assign({ spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
                         ? 'autoplay'
                         : carouselInfiniteLoopMode === 'USE'
                             ? 'loop'
                             : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, { children: filteredSortedItems.map(function (item) {
                         var id = item.id;
                         var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
-                        return ((0, jsx_runtime_1.jsxs)(mobile_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }, void 0) }, void 0)), itemTitle && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 }, void 0)), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }, void 0) }), void 0)), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }, void 0) }), void 0))] }), id));
-                    }) }), void 0) }, void 0))] }), void 0));
+                        return ((0, jsx_runtime_1.jsxs)(mobile_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }) })), itemTitle && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }) }))), itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && ((0, jsx_runtime_1.jsx)(S_ItemButtonBox, __assign({ hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex }) })))] }), id));
+                    }) })) }))] })));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/ContentsSection.js

@@ -35,18 +35,18 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsSection(_a) {
     var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Contents" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: props.template }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Contents" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: props.template }) })) })));
 }
 var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 function TemplateMather(_a) {
     var styleTemplate = _a.styleTemplate;
     switch (styleTemplate) {
         case 'BASE_CONTENTS_A':
-            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {});
         case 'BASE_CONTENTS_B':
-            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {});
         default:
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
 }
 exports.default = ContentsSection;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/TemplateA.js

@@ -8,8 +8,8 @@ var mobile_1 = require("./mobile");
 function TemplateA() {
     var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
-            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {}, void 0)
-        }[device] }, void 0));
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {})
+        }[device] }));
 }
 exports.default = TemplateA;

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

@@ -35,7 +35,7 @@ function TemplateA() {
         var contentsBody = contentsBodyRef.current;
         if (!imageBox || !contentsBody)
             return;
-        imageBox.style.height = contentsBody.offsetHeight + "px";
+        imageBox.style.height = "".concat(contentsBody.offsetHeight, "px");
     };
     (0, react_1.useLayoutEffect)(function () {
         handleImageHeight();
@@ -44,7 +44,7 @@ function TemplateA() {
             window.removeEventListener('resize', handleImageHeight);
         };
     }, [imageBoxRef, contentsBodyRef]);
-    return ((0, jsx_runtime_1.jsx)(S_ContentsAreaBox, __assign({ hasNothing: hasNothing }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, __assign({ ref: imageBoxRef }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }, void 0) }), void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(S_ContentsBodyWrapper, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: contentsBodyRef }, { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }), void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }), void 0))] }), void 0) }, void 0)] }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsAreaBox, __assign({ hasNothing: hasNothing }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, __assign({ ref: imageBoxRef }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsBodyWrapper, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: contentsBodyRef }, { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }) }))), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }) })))] })) })] }) })));
 }
 var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

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

@@ -28,7 +28,7 @@ function TemplateA() {
     var _a = section.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc, buttonAlphaLinkType = _a.buttonAlphaLinkType;
     var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
-    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: [sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }, void 0) }, void 0)) }, void 0)), title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0) }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: [sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }) })) })), title && ((0, jsx_runtime_1.jsx)(S_SectionTitleBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }) })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }) }))] })));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/TemplateB.js

@@ -8,8 +8,8 @@ var mobile_1 = require("./mobile");
 function TemplateB() {
     var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
-            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, {}, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, {}, void 0)
-        }[device] }, void 0));
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, {}),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, {})
+        }[device] }));
 }
 exports.default = TemplateB;

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

@@ -35,7 +35,7 @@ function TemplateB() {
         var contentsBody = contentsBodyRef.current;
         if (!imageBox || !contentsBody)
             return;
-        imageBox.style.height = contentsBody.offsetHeight + "px";
+        imageBox.style.height = "".concat(contentsBody.offsetHeight, "px");
     };
     (0, react_1.useLayoutEffect)(function () {
         handleImageHeight();
@@ -44,7 +44,7 @@ function TemplateB() {
             window.removeEventListener('resize', handleImageHeight);
         };
     }, [imageBoxRef, contentsBodyRef]);
-    return ((0, jsx_runtime_1.jsx)(S_ContentsAreaBox, __assign({ hasNothing: hasNothing }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [(0, jsx_runtime_1.jsx)(S_ContentsBodyWrapper, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: contentsBodyRef }, { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }), void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }), void 0))] }), void 0) }, void 0), sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, __assign({ ref: imageBoxRef }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }, void 0) }), void 0)) }, void 0))] }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsAreaBox, __assign({ hasNothing: hasNothing }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [(0, jsx_runtime_1.jsx)(S_ContentsBodyWrapper, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: contentsBodyRef }, { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }) }))), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }) })))] })) }), sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, __assign({ ref: imageBoxRef }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }) }))) }))] }) })));
 }
 var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

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

@@ -28,7 +28,7 @@ function TemplateB() {
     var _a = section.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc, buttonAlphaLinkType = _a.buttonAlphaLinkType;
     var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
-    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: [title && ((0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }, void 0) }, void 0)) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: [title && ((0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 })), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }) })), sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }) })) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }) }))] })));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var hasNothing = _a.hasNothing;