pds-dev-kit-web-test 0.0.20 → 0.0.22

package/dist/src/sub/DynamicLayout/{desktop/sections → sections}/ContentsCarouselSection/ContentsCarouselSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { ISection } from '../../../types';
+import { ISection } from '../../types';
 declare function ContentsCarouselSection({ ...props }: ISection): JSX.Element;
 export default ContentsCarouselSection;

package/dist/src/sub/DynamicLayout/{desktop/sections → sections}/ContentsCarouselSection/ContentsCarouselSection.js

@@ -41,8 +41,7 @@ function TemplateMatcher(_a) {
         case 'BASE_CONTENTS_CAROUSEL_B':
             return react_1.default.createElement(templates_1.TemplateB, null);
         default:
-            // NOTE: temp
-            return react_1.default.createElement("div", null, "Error: styleTemplate must be defined");
+            return react_1.default.createElement(react_1.default.Fragment, null);
     }
 }
 exports.default = ContentsCarouselSection;

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

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var dynamicLayoutContext_1 = require("../../../../dynamicLayoutContext");
+var desktop_1 = require("./desktop");
+var mobile_1 = require("./mobile");
+function TemplateA() {
+    var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        MOBILE: react_1.default.createElement(mobile_1.M_TemplateA, null),
+        DESKTOP: react_1.default.createElement(desktop_1.D_TemplateA, null)
+    }[device]));
+}
+exports.default = TemplateA;

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

@@ -39,15 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var components_1 = require("../../../../components");
+var desktop_1 = require("../../../../../components/desktop");
+var Section_1 = require("../../../../../components/Section");
 function TemplateA() {
-    var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
-    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 section = (0, react_1.useContext)(Section_1.sectionContext);
+    var _a = section.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
+    var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
+    var _c = section.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
+    var _d = section.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = section.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
+    var dynamicLayoutSectionItems = section.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
             return item.display &&
@@ -61,13 +62,13 @@ function TemplateA() {
     return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.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: "48px", customFontWeight: "bold" }))),
+                react_1.default.createElement(desktop_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", customFontSize: "20px", fontWeight: "600" }))),
+                react_1.default.createElement(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
             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 }))),
+                react_1.default.createElement(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
             filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
-                react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
+                react_1.default.createElement(desktop_1.Carousel, { spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                         1301: {
                             slidesPerView: 4
                         },
@@ -80,15 +81,15 @@ 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;
-                    return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
+                    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(desktop_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" }))),
-                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
+                            react_1.default.createElement(desktop_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
+                        itemTitle && (react_1.default.createElement(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         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" }))),
+                            react_1.default.createElement(desktop_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(desktop_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/sections/ContentsCarouselSection/templates/TemplateA/desktop/index.d.ts

@@ -0,0 +1 @@
+export { default as D_TemplateA } from './D_TemplateA';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.D_TemplateA = void 0;
+var D_TemplateA_1 = require("./D_TemplateA");
+Object.defineProperty(exports, "D_TemplateA", { enumerable: true, get: function () { return __importDefault(D_TemplateA_1).default; } });

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

@@ -39,15 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var components_1 = require("../../../../components");
+var mobile_1 = require("../../../../../components/mobile");
+var Section_1 = require("../../../../../components/Section");
 function TemplateA() {
-    var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
-    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 section = (0, react_1.useContext)(Section_1.sectionContext);
+    var _a = section.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
+    var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
+    var _c = section.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
+    var _d = section.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = section.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
+    var dynamicLayoutSectionItems = section.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
             return item.display &&
@@ -60,27 +61,27 @@ function TemplateA() {
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
-            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
+            react_1.default.createElement(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
+            react_1.default.createElement(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
         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 }))),
+            react_1.default.createElement(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
         filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
-            react_1.default.createElement(components_1.Carousel, { spaceBetween: 16, slidesPerView: 2, mode: carouselAutoplayMode === 'AUTO'
+            react_1.default.createElement(mobile_1.Carousel, { spaceBetween: 16, slidesPerView: 2, mode: carouselAutoplayMode === 'AUTO'
                     ? 'autoplay'
                     : carouselInfiniteLoopMode === 'USE'
                         ? '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;
-                return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
+                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(mobile_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" }))),
-                    itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
+                        react_1.default.createElement(mobile_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
+                    itemTitle && (react_1.default.createElement(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
                     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" }))),
+                        react_1.default.createElement(mobile_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(mobile_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/sections/ContentsCarouselSection/templates/TemplateA/mobile/index.d.ts

@@ -0,0 +1 @@
+export { default as M_TemplateA } from './M_TemplateA';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.M_TemplateA = void 0;
+var M_TemplateA_1 = require("./M_TemplateA");
+Object.defineProperty(exports, "M_TemplateA", { enumerable: true, get: function () { return __importDefault(M_TemplateA_1).default; } });

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

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var dynamicLayoutContext_1 = require("../../../../dynamicLayoutContext");
+var desktop_1 = require("./desktop");
+var mobile_1 = require("./mobile");
+function TemplateB() {
+    var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        MOBILE: react_1.default.createElement(mobile_1.M_TemplateB, null),
+        DESKTOP: react_1.default.createElement(desktop_1.D_TemplateB, null)
+    }[device]));
+}
+exports.default = TemplateB;

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

@@ -39,15 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var components_1 = require("../../../../components");
+var desktop_1 = require("../../../../../components/desktop");
+var Section_1 = require("../../../../../components/Section");
 function TemplateB() {
-    var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
-    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 dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
-    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    var _a = section.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
+    var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
+    var _c = section.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
+    var _d = section.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var dynamicLayoutSectionItems = section.dynamicLayoutSectionItems;
+    var _e = section.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
             return item.display &&
@@ -61,13 +62,13 @@ function TemplateB() {
     return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.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: "48px", customFontWeight: "bold" }))),
+                react_1.default.createElement(desktop_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", customFontSize: "20px", fontWeight: "600" }))),
+                react_1.default.createElement(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
             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 }))),
+                react_1.default.createElement(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
             filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
-                react_1.default.createElement(components_1.Carousel, { spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
+                react_1.default.createElement(desktop_1.Carousel, { spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                         1301: {
                             slidesPerView: 4
                         },
@@ -80,15 +81,15 @@ 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;
-                    return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
+                    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(desktop_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 }))),
-                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
+                            react_1.default.createElement(desktop_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
+                        itemTitle && (react_1.default.createElement(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         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" }))),
+                            react_1.default.createElement(desktop_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(desktop_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/sections/ContentsCarouselSection/templates/TemplateB/desktop/index.d.ts

@@ -0,0 +1 @@
+export { default as D_TemplateB } from './D_TemplateB';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.D_TemplateB = void 0;
+var D_TemplateB_1 = require("./D_TemplateB");
+Object.defineProperty(exports, "D_TemplateB", { enumerable: true, get: function () { return __importDefault(D_TemplateB_1).default; } });

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

@@ -39,15 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var components_1 = require("../../../../components");
+var mobile_1 = require("../../../../../components/mobile");
+var Section_1 = require("../../../../../components/Section");
 function TemplateB() {
-    var sectionContext = (0, react_1.useContext)(components_1.Section.context);
-    var _a = sectionContext.properties, title = _a.title, description = _a.description;
-    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 section = (0, react_1.useContext)(Section_1.sectionContext);
+    var _a = section.properties, title = _a.title, description = _a.description, itemLinkMethod = _a.itemLinkMethod;
+    var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
+    var _c = section.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
+    var _d = section.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = section.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
+    var dynamicLayoutSectionItems = section.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
             return item.display &&
@@ -60,27 +61,27 @@ function TemplateB() {
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
-            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
+            react_1.default.createElement(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
+            react_1.default.createElement(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
         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 }))),
-        filteredSortedItems && (react_1.default.createElement(S_CarouselBox, null,
-            react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
+            react_1.default.createElement(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
+        filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
+            react_1.default.createElement(mobile_1.Carousel, { spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
                     ? 'autoplay'
                     : carouselInfiniteLoopMode === 'USE'
                         ? '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;
-                return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
+                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(mobile_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 }))),
-                    itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
+                        react_1.default.createElement(mobile_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
+                    itemTitle && (react_1.default.createElement(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
                     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" }))),
+                        react_1.default.createElement(mobile_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(mobile_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/sections/ContentsCarouselSection/templates/TemplateB/mobile/index.d.ts

@@ -0,0 +1 @@
+export { default as M_TemplateB } from './M_TemplateB';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.M_TemplateB = void 0;
+var M_TemplateB_1 = require("./M_TemplateB");
+Object.defineProperty(exports, "M_TemplateB", { enumerable: true, get: function () { return __importDefault(M_TemplateB_1).default; } });

package/dist/src/sub/DynamicLayout/{mobile/sections → sections}/ContentsSection/ContentsSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { ISection } from '../../../types';
+import { ISection } from '../../types';
 declare function ContentsSection({ ...props }: ISection): JSX.Element;
 export default ContentsSection;

package/dist/src/sub/DynamicLayout/{mobile/sections → sections}/ContentsSection/ContentsSection.js

@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var Section_1 = require("../../components/Section");
+var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.Section, __assign({ "x-dlayout-section-type": "Contents" }, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "Contents" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {
@@ -41,7 +41,7 @@ function TemplateMather(_a) {
         case 'BASE_CONTENTS_B':
             return react_1.default.createElement(templates_1.TemplateB, null);
         default:
-            return react_1.default.createElement("div", null, "wrong type for contents section");
+            return react_1.default.createElement(react_1.default.Fragment, null);
     }
 }
 exports.default = ContentsSection;

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

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var dynamicLayoutContext_1 = require("../../../../dynamicLayoutContext");
+var desktop_1 = require("./desktop");
+var mobile_1 = require("./mobile");
+function TemplateA() {
+    var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        MOBILE: react_1.default.createElement(mobile_1.M_TemplateA, null),
+        DESKTOP: react_1.default.createElement(desktop_1.D_TemplateA, null)
+    }[device]));
+}
+exports.default = TemplateA;