pds-dev-kit-web-test 0.0.13 → 0.0.15

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

@@ -48,6 +48,7 @@ function TemplateB() {
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
             return item.display &&
@@ -60,22 +61,24 @@ function TemplateB() {
     return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
         react_1.default.createElement(S_ContentsArea, null,
             title && (react_1.default.createElement(S_SectionTitleBox, null,
-                react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold" }))),
+                react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
             description && (react_1.default.createElement(S_SectionDescriptionBox, null,
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
             buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
                 react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
             filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
-                react_1.default.createElement(components_1.Carousel, { spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 3, breakpoints: {
+                react_1.default.createElement(components_1.Carousel, { spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                         1301: {
-                            slidesPerView: 4,
-                            slidesPerGroup: 4
+                            slidesPerView: 4
                         },
                         1601: {
-                            slidesPerView: 5,
-                            slidesPerGroup: 5
+                            slidesPerView: 5
                         }
-                    }, buttonSpacing: "-16px" }, filteredItems.map(function (item) {
+                    }, mode: carouselAutoplayMode === 'AUTO'
+                        ? 'autoplay'
+                        : carouselInfiniteLoopMode === 'USE'
+                            ? 'loop'
+                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-16px" }, filteredItems.map(function (item) {
                     var id = item.id;
                     var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
@@ -91,7 +94,7 @@ function TemplateB() {
 }
 var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : '80px');
+    return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {

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

@@ -37,24 +37,27 @@ function TemplateA() {
     return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
         react_1.default.createElement(S_ContentsArea, null,
             sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-                react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", shapeType: "rectangle", scaleType: "cover" }))))),
+                react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))),
             react_1.default.createElement(S_ContentsBodyWrapper, null,
-                title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_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  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"])), function (_a) {
+var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
+    return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });
-var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: calc(70% - ", ");\n"], ["\n  width: calc(70% - ", ");\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+});
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

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

@@ -43,18 +43,21 @@ function TemplateB() {
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))),
             sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-                react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover" }))))))));
+                react_1.default.createElement(Section_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  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"])), function (_a) {
+var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
+    return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });
-var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: calc(70% - ", ");\n"], ["\n  width: calc(70% - ", ");\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+});
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

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

@@ -57,10 +57,7 @@ function TemplateA() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingH;
-}, function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && 'margin: 0';
 });

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

@@ -57,10 +57,7 @@ function TemplateB() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingH;
-}, function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && 'margin: 0';
 });

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

@@ -74,7 +74,7 @@ function TemplateA() {
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_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  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 80px auto;\n\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 80px auto;\n\n  ", "\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && "margin: 0";
 });

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

@@ -38,7 +38,7 @@ function TemplateA() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement("div", null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateA() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;

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

@@ -38,7 +38,7 @@ function TemplateB() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_ContentsBox, null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateB() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  justify-content: center;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n"])));
 var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 800px;\n  position: absolute;\n  bottom: 13vh;\n"], ["\n  max-width: 800px;\n  position: absolute;\n  bottom: 13vh;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {

package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateC/TemplateC.js

@@ -38,7 +38,7 @@ function TemplateC() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_ContentsBox, null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateC() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 90vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 90vh;\n  display: flex;\n  justify-content: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n"])));
 var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 800px;\n"], ["\n  max-width: 800px;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {

package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateD/TemplateD.js

@@ -38,7 +38,7 @@ function TemplateD() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement("div", null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,8 +46,8 @@ function TemplateD() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 90vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 90vh;\n  display: flex;\n  justify-content: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  display: flex;\n  align-items: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.js

@@ -231,7 +231,7 @@ var S_Content = styled_components_1.default.div(templateObject_6 || (templateObj
         }[colorTheme];
 }, function (_a) {
     var color = _a.color;
-    return color && "color: " + color;
+    return color && "color: " + color + ";";
 }, function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;

package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.d.ts

@@ -6,7 +6,9 @@ declare function Section({ children, ...props }: ISection & {
     children?: React.ReactNode;
 }): JSX.Element;
 declare namespace Section {
-    var Title: ({ text, color, ...textLabelProps }: ISectionTitle & TextLabelProps) => JSX.Element;
+    var Title: ({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
+        lineHeight?: number | undefined;
+    }) => JSX.Element;
     var Description: ({ text, color, ...textLabelProps }: ISectionDescription & TextLabelProps) => JSX.Element;
     var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
     var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, state, borderColor }: ISectionButton) => JSX.Element;

package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js

@@ -61,7 +61,7 @@ function Section(_a) {
     return (react_1.default.createElement(sectionContext.Provider, { value: props },
         react_1.default.createElement(S_MarginCollapsingBoundary, null,
             react_1.default.createElement(S_Section, null,
-                props.styles.backgroundMediaType && react_1.default.createElement(Background, null),
+                react_1.default.createElement(Background, null),
                 children))));
 }
 var S_MarginCollapsingBoundary = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -118,7 +118,7 @@ function Background() {
             (_a = backgroundRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', onTouchMove);
         };
     }, []);
-    var background = (0, react_1.useMemo)(function () {
+    var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
                 return (react_1.default.createElement(hybrid_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
@@ -126,13 +126,14 @@ function Background() {
             // NOTE VIDEO타입 배경은 최초 scope에서 제외
             // return <></>;
             case 'YOUTUBE':
-                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize), backgroundMediaSrc && react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
+                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
+                    react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
         }
     }, [youtubeSize]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, background),
+        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
         react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));
 }
 var S_BackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"], ["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"])), function (_a) {
@@ -152,13 +153,16 @@ var S_YoutubeContainer = styled_components_1.default.div(templateObject_5 || (te
 });
 // TITLE
 function Title(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color },
+    var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.4 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color, lineHeight: lineHeight },
         react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n  }\n"])), function (_a) {
+var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
 });
 // DESCRIPTION
 function Description(_a) {

package/dist/src/sub/DynamicLayout/mobile/components/common/Carousel.js

@@ -40,7 +40,9 @@ function Carousel(_a) {
     };
     return (react_1.default.createElement(S_Carousel, null,
         react_1.default.createElement(S_SwiperStyleWrapper, { paginationSpacing: paginationSpacing },
-            react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Pagination, swiper_1.Autoplay], spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerView, allowTouchMove: true, pagination: paginationOptions, loop: mode === 'loop' || mode === 'autoplay', autoplay: mode === 'autoplay' ? { delay: autoplayDelay, disableOnInteraction: false } : undefined, onSwiper: function (swiper) {
+            react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Pagination, swiper_1.Autoplay], spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerView, allowTouchMove: true, pagination: paginationOptions, loop: mode === 'loop' || mode === 'autoplay', autoplay: mode === 'autoplay'
+                    ? { delay: autoplayDelay * 1000, disableOnInteraction: false }
+                    : undefined, onSwiper: function (swiper) {
                     paginationRef.current = swiper;
                 } },
                 react_1.default.Children.map(children, function (child) {
@@ -59,13 +61,13 @@ var S_SwiperStyleWrapper = styled_components_1.default.div(templateObject_2 || (
     return paginationSpacing[1];
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_pagination_dot_01;
+    return theme.ui_cpnt_pagination_dot_02;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_pagination_dot_border;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_pagination_dot_02;
+    return theme.ui_cpnt_pagination_dot_01;
 });
 exports.default = Carousel;
 var templateObject_1, templateObject_2;

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

@@ -46,6 +46,7 @@ function TemplateA() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
@@ -58,13 +59,17 @@ function TemplateA() {
         : [];
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
-            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
+            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
+            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
             react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
         filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
-            react_1.default.createElement(components_1.Carousel, { spaceBetween: 16, slidesPerView: 2, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
+            react_1.default.createElement(components_1.Carousel, { spaceBetween: 16, slidesPerView: 2, mode: carouselAutoplayMode === 'AUTO'
+                    ? 'autoplay'
+                    : carouselInfiniteLoopMode === 'USE'
+                        ? 'loop'
+                        : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
                 var id = item.id;
                 var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                 return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
@@ -78,11 +83,11 @@ function TemplateA() {
             }))))));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

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

@@ -46,6 +46,7 @@ function TemplateB() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
@@ -58,13 +59,17 @@ function TemplateB() {
         : [];
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
-            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
+            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
+            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
             react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
         filteredItems && (react_1.default.createElement(S_CarouselBox, null,
-            react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 1, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
+            react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
+                    ? 'autoplay'
+                    : carouselInfiniteLoopMode === 'USE'
+                        ? 'loop'
+                        : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
                 var id = item.id;
                 var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                 return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
@@ -78,11 +83,11 @@ function TemplateB() {
             }))))));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

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

@@ -36,34 +36,36 @@ function TemplateA() {
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
         sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover" }))))),
-        title && react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
+            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
+        title && (react_1.default.createElement(S_SectionTitleBox, null,
+            react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_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: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+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;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingG;
+});
+var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
 });
-var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
+var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
+var S_ButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
 exports.default = TemplateA;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -35,27 +35,24 @@ function TemplateB() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
+        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
         sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover" }))))),
+            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_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: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+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;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingG;
 });
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -57,15 +57,12 @@ function TemplateA() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+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;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;