pds-dev-kit-web-test 0.1.4 → 0.1.6

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

@@ -14,30 +14,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var desktop_1 = require("../../../../../components/desktop");
 var Section_1 = require("../../../../../components/Section");
@@ -52,12 +34,9 @@ function TemplateB() {
     var hasNothing = filteredItems.length <= 0 &&
         !((_a = filteredItems[0]) === null || _a === void 0 ? void 0 : _a.properties.logoImageSrc) &&
         !((_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(desktop_1.Item, __assign({}, filteredItems[0]),
-        filteredItems[0].properties.logoImageSrc && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
-        filteredItems[0].properties.body && (react_1.default.createElement(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: filteredItems.length > 0 && ((0, jsx_runtime_1.jsxs)(desktop_1.Item, __assign({}, filteredItems[0], { children: [filteredItems[0].properties.logoImageSrc && ((0, jsx_runtime_1.jsx)(S_ImageBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }, void 0) }, void 0)), filteredItems[0].properties.body && ((0, jsx_runtime_1.jsx)(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }, void 0))] }), void 0)) }), void 0));
 }
-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    (100% - 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    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: ", " auto;\n  ", "\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: ", " auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - 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  ", "\n"], ["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: ", " auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - 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  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingH;
 }, function (_a) {

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

@@ -14,30 +14,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var mobile_1 = require("../../../../../components/mobile");
 var Section_1 = require("../../../../../components/Section");
@@ -52,10 +34,7 @@ function TemplateB() {
     var hasNothing = filteredItems.length <= 0 &&
         !((_a = filteredItems[0]) === null || _a === void 0 ? void 0 : _a.properties.logoImageSrc) &&
         !((_b = filteredItems[0]) === null || _b === void 0 ? void 0 : _b.properties.body);
-    return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing }, filteredItems.length > 0 && (react_1.default.createElement(mobile_1.Item, __assign({}, filteredItems[0]),
-        filteredItems[0].properties.logoImageSrc && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(mobile_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
-        filteredItems[0].properties.body && (react_1.default.createElement(mobile_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: filteredItems.length > 0 && ((0, jsx_runtime_1.jsxs)(mobile_1.Item, __assign({}, filteredItems[0], { children: [filteredItems[0].properties.logoImageSrc && ((0, jsx_runtime_1.jsx)(S_ImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }, void 0) }, void 0)), filteredItems[0].properties.body && ((0, jsx_runtime_1.jsx)(mobile_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }, void 0))] }), void 0)) }), void 0));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme, hasNothing = _a.hasNothing;

package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/InfoBoxSection.d.ts

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

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

@@ -29,24 +29,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function InfoBoxSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "InfoBox" },
-        react_1.default.createElement(components_1.Section, __assign({}, props),
-            react_1.default.createElement(TemplateMather, { styleTemplate: props.template }))));
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "InfoBox" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: props.template }, void 0) }), void 0) }), void 0));
 }
 var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 function TemplateMather(_a) {
     var styleTemplate = _a.styleTemplate;
     switch (styleTemplate) {
         case 'BASE_INFO_BOX_A':
-            return react_1.default.createElement(templates_1.TemplateA, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
         default:
-            return react_1.default.createElement(react_1.default.Fragment, null);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
 }
 exports.default = InfoBoxSection;

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

@@ -1,33 +1,15 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = 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]));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}, void 0),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {}, void 0)
+        }[device] }, void 0));
 }
 exports.default = TemplateA;

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

@@ -14,30 +14,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var desktop_1 = require("../../../../../components/desktop");
 var Section_1 = require("../../../../../components/Section");
@@ -54,26 +36,13 @@ function TemplateA() {
         : [];
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
     var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length <= 0;
-    return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && (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(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
-        filteredSortedItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredSortedItems.length }, filteredSortedItems.map(function (item, index, self) {
-            var id = item.id;
-            var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
-            return (react_1.default.createElement(S_ItemWrapper, { key: id, isFirstItem: index === 0, totalItems: self.length },
-                react_1.default.createElement(desktop_1.Item, __assign({}, item),
-                    itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
-                        react_1.default.createElement(desktop_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "contain" }))),
-                    itemTitle && (react_1.default.createElement(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
-                    itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(S_CustomDivider, null),
-                        react_1.default.createElement(desktop_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));
-        }))),
-        buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
-            react_1.default.createElement(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
+    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }, void 0) }, void 0)), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_ItemsWrapper, __assign({ totalItems: filteredSortedItems.length }, { children: filteredSortedItems.map(function (item, index, self) {
+                    var id = item.id;
+                    var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
+                    return ((0, jsx_runtime_1.jsx)(S_ItemWrapper, __assign({ isFirstItem: index === 0, totalItems: self.length }, { children: (0, jsx_runtime_1.jsxs)(desktop_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "contain" }, void 0) }, void 0)), itemTitle && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 }, void 0)), itemDescription && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_CustomDivider, {}, void 0), (0, jsx_runtime_1.jsx)(desktop_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }, void 0)] }, void 0))] }), void 0) }), id));
+                }) }), void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
-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    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  margin: 160px auto;\n  ", "\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: 160px auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n\n  width: calc(\n    (100% - 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  ", "\n"], ["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: 160px auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n\n  width: calc(\n    (100% - 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  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && "margin: 0";
 });
@@ -102,12 +71,12 @@ var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_CustomDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: ", " auto;\n  width: 24px;\n  height: 3px;\n  background-color: ", ";\n"], ["\n  margin: ", " auto;\n  width: 24px;\n  height: 3px;\n  background-color: ", ";\n"])), function (_a) {
+var S_CustomDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 3px;\n  margin: ", " auto;\n  width: 24px;\n"], ["\n  background-color: ", ";\n  height: 3px;\n  margin: ", " auto;\n  width: 24px;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.ui_cpnt_divider_white_01;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider_white_01;
+    return theme.spacing.spacingE;
 });
 var S_ButtonBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -14,30 +14,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var mobile_1 = require("../../../../../components/mobile");
 var Section_1 = require("../../../../../components/Section");
@@ -54,23 +36,11 @@ function TemplateA() {
         : [];
     var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
     var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length <= 0;
-    return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && (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(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
-        filteredSortedItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredSortedItems.map(function (item, index) {
-            var id = item.id;
-            var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
-            return (react_1.default.createElement(S_ItemWrapper, { isFirstItem: index === 0, key: id },
-                react_1.default.createElement(mobile_1.Item, __assign({}, item),
-                    itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
-                        react_1.default.createElement(mobile_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "contain" }))),
-                    itemTitle && (react_1.default.createElement(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
-                    itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, null,
-                        react_1.default.createElement(mobile_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));
-        }))),
-        buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
-            react_1.default.createElement(mobile_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
+    return ((0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ hasNothing: hasNothing }, { children: [title && ((0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), filteredSortedItems.length > 0 && ((0, jsx_runtime_1.jsx)(S_ItemsWrapper, { children: filteredSortedItems.map(function (item, index) {
+                    var id = item.id;
+                    var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
+                    return ((0, jsx_runtime_1.jsx)(S_ItemWrapper, __assign({ isFirstItem: index === 0 }, { children: (0, jsx_runtime_1.jsxs)(mobile_1.Item, __assign({}, item, { children: [itemImageSrc && ((0, jsx_runtime_1.jsx)(S_ItemImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "contain" }, void 0) }, void 0)), itemTitle && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 }, void 0)), itemDescription && ((0, jsx_runtime_1.jsx)(S_ItemDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }, void 0) }, void 0))] }), void 0) }), id));
+                }) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var hasNothing = _a.hasNothing;

package/dist/src/sub/DynamicLayout/sections/IntroSection/IntroSection.d.ts

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

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

@@ -29,30 +29,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function IntroSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Intro" },
-        react_1.default.createElement(components_1.Section, __assign({}, props),
-            react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template }))));
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Intro" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMatcher, { styleTemplate: props.template }, void 0) }), void 0) }), void 0));
 }
 var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 function TemplateMatcher(_a) {
     var styleTemplate = _a.styleTemplate;
     switch (styleTemplate) {
         case 'BASE_INTRO_A':
-            return react_1.default.createElement(templates_1.TemplateA, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
         case 'BASE_INTRO_B':
-            return react_1.default.createElement(templates_1.TemplateB, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, void 0);
         case 'BASE_INTRO_C':
-            return react_1.default.createElement(templates_1.TemplateC, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateC, {}, void 0);
         case 'BASE_INTRO_D':
-            return react_1.default.createElement(templates_1.TemplateD, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateD, {}, void 0);
         default:
-            return react_1.default.createElement(react_1.default.Fragment, null);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
 }
 exports.default = IntroSection;

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

@@ -1,33 +1,15 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = 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]));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}, void 0),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {}, void 0)
+        }[device] }, void 0));
 }
 exports.default = TemplateA;

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

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var desktop_1 = require("../../../../../components/desktop");
 var Section_1 = require("../../../../../components/Section");
@@ -36,24 +29,15 @@ function TemplateA() {
     var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex;
     var _c = section.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType, buttonBravoLabel = _c.buttonBravoLabel, buttonBravoLinkSrc = _c.buttonBravoLinkSrc, buttonBravoLinkType = _c.buttonBravoLinkType, buttonCharlieLabel = _c.buttonCharlieLabel, buttonCharlieLinkSrc = _c.buttonCharlieLinkSrc, buttonCharlieLinkType = _c.buttonCharlieLinkType;
     var _d = section.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
-    return (react_1.default.createElement(S_FullScreenWrapper, null,
-        react_1.default.createElement(S_ContentsArea, null,
-            react_1.default.createElement("div", null,
-                title && (react_1.default.createElement(desktop_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
-                description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                    react_1.default.createElement(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
-                (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
-                    buttonAlphaLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex })),
-                    buttonBravoLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
-                    buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
+    return ((0, jsx_runtime_1.jsx)(S_FullScreenWrapper, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, { children: (0, jsx_runtime_1.jsxs)("div", { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }, void 0) }), void 0)), (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && ((0, jsx_runtime_1.jsxs)(S_SectionButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: [buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0)), buttonBravoLinkSrc && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex }, void 0)), buttonCharlieLinkSrc && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }, void 0))] }), void 0))] }, void 0) }, void 0) }, void 0));
 }
-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  align-items: center;\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  align-items: center;\n  justify-content: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"], ["\n  --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    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 160px auto;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: auto;\n  justify-content: center;\n  min-height: calc(100vh - 64px);\n  width: 100%;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: auto;\n  justify-content: center;\n  min-height: calc(100vh - 64px);\n  width: 100%;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: 160px auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - 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"], ["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: 160px auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - 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"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;
 });
-var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n  display: flex;\n  justify-content: center;\n\n  & > div {\n    &:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  margin-top: ", ";\n  display: flex;\n  justify-content: center;\n\n  & > div {\n    &:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n"])), function (_a) {
+var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n\n  & > div {\n    &:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n\n  & > div {\n    &:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle, hasDescription = _a.hasDescription;
     return (hasTitle || hasDescription) && theme.spacing.spacingH;
 }, function (_a) {

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

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var mobile_1 = require("../../../../../components/mobile");
 var Section_1 = require("../../../../../components/Section");
@@ -44,21 +37,13 @@ function TemplateA() {
         window.addEventListener('resize', handleResize);
         return function () { return window.removeEventListener('resize', handleResize); };
     }, []);
-    return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
-        react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
-            description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                react_1.default.createElement(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
-            (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
-                buttonAlphaLinkSrc && (react_1.default.createElement(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex })),
-                buttonBravoLinkSrc && (react_1.default.createElement(mobile_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
-                buttonCharlieLinkSrc && (react_1.default.createElement(mobile_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
+    return ((0, jsx_runtime_1.jsx)(S_FullScreenWrapper, __assign({ vh: vh }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [title && ((0, jsx_runtime_1.jsx)(mobile_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }, void 0) }), void 0)), (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && ((0, jsx_runtime_1.jsxs)(S_SectionButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: [buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0)), buttonBravoLinkSrc && ((0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex }, void 0)), buttonCharlieLinkSrc && ((0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }, void 0))] }), void 0))] }, void 0) }), void 0));
 }
 var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var vh = _a.vh;
     return vh * 100;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n  width: 100%;\n"], ["\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n  width: 100%;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {
@@ -69,7 +54,7 @@ var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 |
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingE;
 });
-var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n\n  & > div {\n    margin-top: ", ";\n    width: fit-content;\n    margin-left: auto;\n    margin-right: auto;\n  }\n"], ["\n  margin-top: ", ";\n\n  & > div {\n    margin-top: ", ";\n    width: fit-content;\n    margin-left: auto;\n    margin-right: auto;\n  }\n"])), function (_a) {
+var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n\n  & > div {\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: ", ";\n    width: fit-content;\n  }\n"], ["\n  margin-top: ", ";\n\n  & > div {\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: ", ";\n    width: fit-content;\n  }\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle, hasDescription = _a.hasDescription;
     return (hasTitle || hasDescription) && theme.spacing.spacingG;
 }, function (_a) {