pds-dev-kit-web 1.8.1 → 1.8.3

package/dist/src/common/assets/icons/fill/More.js

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var More = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 20 20" }, rest),
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
         react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M6.256,10.413 C7.132,10.413 7.843,11.123 7.843,12 C7.843,12.877 7.132,13.587 6.256,13.587 C5.379,13.587 4.668,12.877 4.668,12 C4.668,11.123 5.379,10.413 6.256,10.413 Z M12.0006,10.413 C12.8766,10.413 13.5876,11.123 13.5876,12 C13.5876,12.877 12.8766,13.587 12.0006,13.587 C11.1236,13.587 10.4126,12.877 10.4126,12 C10.4126,11.123 11.1236,10.413 12.0006,10.413 Z M17.7452,10.413 C18.6212,10.413 19.3322,11.123 19.3322,12 C19.3322,12.877 18.6212,13.587 17.7452,13.587 C16.8682,13.587 16.1572,12.877 16.1572,12 C16.1572,11.123 16.8682,10.413 17.7452,10.413 Z" })));
 };
 exports.default = More;

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -227,5 +227,6 @@
     "sys_facebook": "facebookblue",
     "sys_component_base_19": "white/opacity65",
     "sys_cpnt_pagination_dot_01": "white",
-    "sys_cpnt_pagination_dot_02": "white/opacity50"
+    "sys_cpnt_pagination_dot_02": "white/opacity50",
+    "sys_component_base_white_opacity50": "white/opacity50"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -227,5 +227,6 @@
     "sys_facebook": "facebookblue",
     "sys_component_base_19": "white/opacity65",
     "sys_cpnt_pagination_dot_01": "grey400",
-    "sys_cpnt_pagination_dot_02": "white/opacity50"
+    "sys_cpnt_pagination_dot_02": "white/opacity50",
+    "sys_component_base_white_opacity50": "white/opacity50"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -646,5 +646,7 @@
     "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
     "ui_cpnt_divider_white_01": "sys_component_base_19",
     "ui_cpnt_timer_base_01": "sys_background_dimmed",
-    "ui_cpnt_timer_base_timeup": "sys_component_base_17"
+    "ui_cpnt_timer_base_timeup": "sys_component_base_17",
+    "ui_66": "sys_component_base_black_opacity50",
+    "ui_67": "sys_component_base_white_opacity50"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -309,6 +309,7 @@ declare const colorSet: {
         sys_component_base_19: string;
         sys_cpnt_pagination_dot_01: string;
         sys_cpnt_pagination_dot_02: string;
+        sys_component_base_white_opacity50: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -540,6 +541,7 @@ declare const colorSet: {
         sys_component_base_19: string;
         sys_cpnt_pagination_dot_01: string;
         sys_cpnt_pagination_dot_02: string;
+        sys_component_base_white_opacity50: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1190,6 +1192,8 @@ declare const colorSet: {
         ui_cpnt_divider_white_01: string;
         ui_cpnt_timer_base_01: string;
         ui_cpnt_timer_base_timeup: string;
+        ui_66: string;
+        ui_67: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -647,4 +647,6 @@ export interface UITheme {
     ui_cpnt_divider_white_01: string;
     ui_cpnt_timer_base_01: string;
     ui_cpnt_timer_base_timeup: string;
+    ui_66: string;
+    ui_67: string;
 }

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -22,6 +22,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var DisplayOnlyMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/DisplayOnlyMenuItemNav"));
 var InternalLinkMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/InternalLinkMenuItemNav"));
+var PageMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PageMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
 function ContextMenuItemNavBox(_a) {
@@ -30,7 +31,8 @@ function ContextMenuItemNavBox(_a) {
         menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
         menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
         menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
-        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
+        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) })),
+        menu.menuItemType === 'NAV_PAGE' && menu.slug && (react_1.default.createElement(PageMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { slug: menu.slug }) }))));
 }
 var S_ContextMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -49,9 +49,12 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
+var Section_1 = require("../Section");
 function Item(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var isItemClickable = props.properties.linkMethod === 'CLICK_ITEM';
+    var context = (0, react_1.useContext)(Section_1.Section.context);
+    var itemLinkMethod = context.properties.itemLinkMethod;
+    var isItemClickable = itemLinkMethod === 'CLICK_ITEM';
     var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), isPreview = _b.isPreview, navigationHandler = _b.navigationHandler;
     var handleClickButton = function (e) {
         if (isPreview)

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

@@ -42,7 +42,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../components");
 function TemplateA() {
     var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
+    var _a = sectionContext.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
     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;
@@ -80,7 +80,7 @@ function TemplateA() {
                             ? 'loop'
                             : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredSortedItems.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;
+                    var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
                         itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                             react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
@@ -88,7 +88,7 @@ function TemplateA() {
                         itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                             react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                         itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
-                            react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
+                            react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
                 })))))));
 }
 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) {

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

@@ -42,7 +42,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../components");
 function TemplateB() {
     var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
+    var _a = sectionContext.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
     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;
@@ -80,7 +80,7 @@ function TemplateB() {
                             ? 'loop'
                             : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredSortedItems.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;
+                    var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
                         itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                             react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
@@ -88,7 +88,7 @@ function TemplateB() {
                         itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                             react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                         itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
-                            react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
+                            react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
                 })))))));
 }
 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) {

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

@@ -34,22 +34,25 @@ function TemplateA() {
     var _a = sectionContext.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc, buttonAlphaLinkType = _a.buttonAlphaLinkType;
     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;
-    var _c = (0, react_1.useState)(360), imageHeight = _c[0], setImageHeight = _c[1];
+    var imageBoxRef = (0, react_1.useRef)(null);
     var contentsBodyRef = (0, react_1.useRef)(null);
-    var handleResize = function () {
-        var _a;
-        var contentsBodyHeight = (_a = contentsBodyRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
-        setImageHeight(contentsBodyHeight !== null && contentsBodyHeight !== void 0 ? contentsBodyHeight : 360);
+    var handleImageHeight = function () {
+        var imageBox = imageBoxRef.current;
+        var contentsBody = contentsBodyRef.current;
+        if (!imageBox || !contentsBody)
+            return;
+        imageBox.style.height = contentsBody.offsetHeight + "px";
     };
-    (0, react_1.useEffect)(function () {
-        window.addEventListener('resize', handleResize);
+    (0, react_1.useLayoutEffect)(function () {
+        handleImageHeight();
+        window.addEventListener('resize', handleImageHeight);
         return function () {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('resize', handleImageHeight);
         };
-    }, [contentsBodyRef]);
+    }, [imageBoxRef, contentsBodyRef]);
     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, { height: imageHeight },
+            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { ref: imageBoxRef },
                 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,
                 react_1.default.createElement("div", { ref: contentsBodyRef },
@@ -64,10 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     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: ", "px;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
-    var height = _a.height;
-    return height;
-}, function (_a) {
+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;
 });

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

@@ -34,19 +34,22 @@ function TemplateB() {
     var _a = sectionContext.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkType = _a.buttonAlphaLinkType, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc;
     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;
-    var _c = (0, react_1.useState)(360), imageHeight = _c[0], setImageHeight = _c[1];
+    var imageBoxRef = (0, react_1.useRef)(null);
     var contentsBodyRef = (0, react_1.useRef)(null);
-    var handleResize = function () {
-        var _a;
-        var contentsBodyHeight = (_a = contentsBodyRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
-        setImageHeight(contentsBodyHeight !== null && contentsBodyHeight !== void 0 ? contentsBodyHeight : 360);
+    var handleImageHeight = function () {
+        var imageBox = imageBoxRef.current;
+        var contentsBody = contentsBodyRef.current;
+        if (!imageBox || !contentsBody)
+            return;
+        imageBox.style.height = contentsBody.offsetHeight + "px";
     };
-    (0, react_1.useEffect)(function () {
-        window.addEventListener('resize', handleResize);
+    (0, react_1.useLayoutEffect)(function () {
+        handleImageHeight();
+        window.addEventListener('resize', handleImageHeight);
         return function () {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('resize', handleImageHeight);
         };
-    }, [contentsBodyRef]);
+    }, [imageBoxRef, contentsBodyRef]);
     return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_ContentsBodyWrapper, null,
@@ -56,7 +59,7 @@ function TemplateB() {
                         react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
                     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, { height: imageHeight },
+            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { ref: imageBoxRef },
                 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: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
@@ -64,10 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     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: ", "px;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
-    var height = _a.height;
-    return height;
-}, function (_a) {
+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;
 });

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

@@ -54,7 +54,7 @@ function TemplateA() {
         !((_b = filteredItems[0]) === null || _b === void 0 ? void 0 : _b.properties.description);
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing }, filteredItems.length > 0 && (react_1.default.createElement(Item_1.Item, __assign({}, filteredItems[0]),
         filteredItems[0].properties.logoImageSrc && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
+            react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", 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) {

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

@@ -54,7 +54,7 @@ function TemplateB() {
         !((_b = filteredItems[0]) === null || _b === void 0 ? void 0 : _b.properties.description);
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing }, filteredItems.length > 0 && (react_1.default.createElement(Item_1.Item, __assign({}, filteredItems[0]),
         filteredItems[0].properties.logoImageSrc && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
+            react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", 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) {

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

@@ -88,9 +88,9 @@ var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingH;
 });
-var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: calc(100% / ", ");\n  ", ";\n\n  &:not(:first-child) {\n    margin-left: ", ";\n  }\n"], ["\n  width: calc(100% / ", ");\n  ", ";\n\n  &:not(:first-child) {\n    margin-left: ", ";\n  }\n"])), function (_a) {
+var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: calc(\n    ", "\n  );\n  ", ";\n\n  &:not(:first-child) {\n    margin-left: ", ";\n  }\n"], ["\n  width: calc(\n    ", "\n  );\n  ", ";\n\n  &:not(:first-child) {\n    margin-left: ", ";\n  }\n"])), function (_a) {
     var totalItems = _a.totalItems;
-    return totalItems;
+    return 100 / totalItems + "% - " + (32 * (totalItems - 1)) / totalItems + "px";
 }, function (_a) {
     var totalItems = _a.totalItems;
     return totalItems <= 2 && "max-width: 360px;";

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

@@ -46,9 +46,9 @@ 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  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\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  margin: 160px 0;\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 0;\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_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 64px);\n  height: auto;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column-reverse;\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: 160px 0 13vh;\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 0 13vh;\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) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

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

@@ -49,9 +49,12 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
+var Section_1 = require("../Section");
 function Item(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var isItemClickable = props.properties.linkMethod === 'CLICK_ITEM';
+    var context = (0, react_1.useContext)(Section_1.Section.context);
+    var itemLinkMethod = context.properties.itemLinkMethod;
+    var isItemClickable = itemLinkMethod === 'CLICK_ITEM';
     var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), isPreview = _b.isPreview, navigationHandler = _b.navigationHandler;
     var handleClickButton = function (e) {
         if (isPreview)

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

@@ -42,7 +42,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../components");
 function TemplateA() {
     var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
+    var _a = sectionContext.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
     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;
@@ -72,7 +72,7 @@ function TemplateA() {
                         ? 'loop'
                         : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredSortedItems.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;
+                var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                 return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                         react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
@@ -80,7 +80,7 @@ function TemplateA() {
                     itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                         react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                     itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
-                        react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
+                        react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
             }))))));
 }
 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) {

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

@@ -42,7 +42,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../components");
 function TemplateB() {
     var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
+    var _a = sectionContext.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
     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;
@@ -72,7 +72,7 @@ function TemplateB() {
                         ? 'loop'
                         : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredSortedItems.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;
+                var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                 return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                         react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
@@ -80,7 +80,7 @@ function TemplateB() {
                     itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                         react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                     itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
-                        react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
+                        react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkMethod: itemLinkMethod, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
             }))))));
 }
 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) {

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

@@ -2,7 +2,7 @@ export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS'
 export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A';
 export declare type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
 export declare type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
-export declare type TypeOfCarouselAutoplayMode = 'AUTO' | 'NORMAL';
+export declare type TypeOfCarouselAutoplayMode = 'AUTO' | 'MANUAL';
 export declare type TypeOfCarouselInfiniteLoopMode = 'USE' | 'NO_USE';
 export declare type TypeOfBackgroundMediaType = 'IMAGE' | 'YOUTUBE';
 export declare type TypeOfSectionButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
@@ -47,6 +47,7 @@ export interface ISectionProperties {
     carouselAutoplayMode: TypeOfCarouselAutoplayMode;
     carouselAutoplayTime: number;
     carouselInfiniteLoopMode: TypeOfCarouselInfiniteLoopMode;
+    itemLinkMethod: TypeOfItemLinkMethod;
 }
 export interface ISectionStyles {
     titleColorInHex: string;
@@ -90,7 +91,6 @@ export interface IItem {
         body: string;
         logoImageSrc: string;
         imageSrc: string;
-        linkMethod: TypeOfItemLinkMethod;
         linkType: TypeOfItemLinkType;
         linkSrc: string;
         buttonLabel: string;