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

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

@@ -29,26 +29,24 @@ 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 ContentsSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Contents" },
-        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": "Contents" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: props.template }, void 0) }), void 0) }), void 0));
 }
 var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 function TemplateMather(_a) {
     var styleTemplate = _a.styleTemplate;
     switch (styleTemplate) {
         case 'BASE_CONTENTS_A':
-            return react_1.default.createElement(templates_1.TemplateA, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
         case 'BASE_CONTENTS_B':
-            return react_1.default.createElement(templates_1.TemplateB, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, 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 = ContentsSection;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/ContentsSection.stories.d.ts

@@ -0,0 +1,8 @@
+import { ContentsSection } from '.';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof ContentsSection>;
+export default _default;
+export declare const TemplateA_desktop: ComponentStory<typeof ContentsSection>;
+export declare const TemplateA_mobile: ComponentStory<typeof ContentsSection>;
+export declare const TemplateB_desktop: ComponentStory<typeof ContentsSection>;
+export declare const TemplateB_mobile: ComponentStory<typeof ContentsSection>;

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

@@ -0,0 +1,60 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateB_mobile = exports.TemplateB_desktop = exports.TemplateA_mobile = exports.TemplateA_desktop = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var dynamicLayoutContext_1 = require("../../dynamicLayoutContext");
+var mock_samplePage_1 = require("../../mock_samplePage");
+var _1 = require(".");
+exports.default = {
+    title: 'sub/DynamicLayout/sections/ContentsSection',
+    component: _1.ContentsSection,
+    parameters: {
+        docs: {
+            description: {
+                component: 'ContentsSection'
+            }
+        }
+    },
+    decorators: [
+        function (Story, context) { return ((0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+                device: context.parameters.device,
+                mode: 'NORMAL',
+                isPreview: false,
+                navigationHandler: function (linkType, src) {
+                    alert("navigate to " + src + " by " + linkType);
+                }
+            } }, { children: (0, jsx_runtime_1.jsx)(Story, {}, void 0) }), void 0)); }
+    ]
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(_1.ContentsSection, __assign({}, args), void 0); };
+exports.TemplateA_desktop = Template.bind({});
+exports.TemplateA_desktop.args = __assign(__assign({}, mock_samplePage_1.samplePageContentsSection), { template: 'BASE_CONTENTS_A' });
+exports.TemplateA_desktop.parameters = {
+    device: 'DESKTOP'
+};
+exports.TemplateA_mobile = Template.bind({});
+exports.TemplateA_mobile.args = __assign(__assign({}, mock_samplePage_1.samplePageContentsSection), { template: 'BASE_CONTENTS_A' });
+exports.TemplateA_mobile.parameters = {
+    device: 'MOBILE'
+};
+exports.TemplateB_desktop = Template.bind({});
+exports.TemplateB_desktop.args = __assign(__assign({}, mock_samplePage_1.samplePageContentsSection), { template: 'BASE_CONTENTS_B' });
+exports.TemplateB_desktop.parameters = {
+    device: 'DESKTOP'
+};
+exports.TemplateB_mobile = Template.bind({});
+exports.TemplateB_mobile.args = __assign(__assign({}, mock_samplePage_1.samplePageContentsSection), { template: 'BASE_CONTENTS_B' });
+exports.TemplateB_mobile.parameters = {
+    device: 'MOBILE'
+};

package/dist/src/sub/DynamicLayout/sections/ContentsSection/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/ContentsSection/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");
@@ -51,24 +44,14 @@ function TemplateA() {
             window.removeEventListener('resize', handleImageHeight);
         };
     }, [imageBoxRef, contentsBodyRef]);
-    return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
-        react_1.default.createElement(S_ContentsArea, null,
-            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { ref: imageBoxRef },
-                react_1.default.createElement(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))),
-            react_1.default.createElement(S_ContentsBodyWrapper, null,
-                react_1.default.createElement("div", { ref: contentsBodyRef },
-                    title && (react_1.default.createElement(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
-                    description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                        react_1.default.createElement(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
-                    buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
-                        react_1.default.createElement(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }))))))));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsAreaBox, __assign({ hasNothing: hasNothing }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, __assign({ ref: imageBoxRef }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }, void 0) }), void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(S_ContentsBodyWrapper, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: contentsBodyRef }, { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }), void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }), void 0))] }), void 0) }, void 0)] }, void 0) }), void 0));
 }
-var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
+var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (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  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (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  display: flex;\n"])));
-var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
+var 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  display: flex;\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  --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  display: flex;\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"])));
+var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  margin-right: ", ";\n  min-height: 360px;\n  min-width: 30%;\n  width: 30%;\n"], ["\n  height: 100%;\n  margin-right: ", ";\n  min-height: 360px;\n  min-width: 30%;\n  width: 30%;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });

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

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

@@ -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 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]));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, {}, void 0),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, {}, void 0)
+        }[device] }, void 0));
 }
 exports.default = TemplateB;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.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");
@@ -51,24 +44,14 @@ function TemplateB() {
             window.removeEventListener('resize', handleImageHeight);
         };
     }, [imageBoxRef, contentsBodyRef]);
-    return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
-        react_1.default.createElement(S_ContentsArea, null,
-            react_1.default.createElement(S_ContentsBodyWrapper, null,
-                react_1.default.createElement("div", { ref: contentsBodyRef },
-                    title && (react_1.default.createElement(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
-                    description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                        react_1.default.createElement(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
-                    buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
-                        react_1.default.createElement(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }))))),
-            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { ref: imageBoxRef },
-                react_1.default.createElement(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))))));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsAreaBox, __assign({ hasNothing: hasNothing }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, { children: [(0, jsx_runtime_1.jsx)(S_ContentsBodyWrapper, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: contentsBodyRef }, { children: [title && ((0, jsx_runtime_1.jsx)(desktop_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, __assign({ hasTitle: !!title }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }), void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, __assign({ hasTitle: !!title, hasDescription: !!description }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }), void 0))] }), void 0) }, void 0), sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, __assign({ ref: imageBoxRef }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }, void 0) }), void 0)) }, void 0))] }, void 0) }), void 0));
 }
-var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
+var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n  width: 100%;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (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  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (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  display: flex;\n"])));
-var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
+var 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  display: flex;\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  --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  display: flex;\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"])));
+var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  margin-left: ", ";\n  min-height: 360px;\n  min-width: 30%;\n  width: 30%;\n"], ["\n  height: 100%;\n  margin-left: ", ";\n  min-height: 360px;\n  min-width: 30%;\n  width: 30%;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/mobile/M_TemplateB.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");
@@ -35,14 +28,7 @@ function TemplateB() {
     var _a = section.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc, buttonAlphaLinkType = _a.buttonAlphaLinkType;
     var _b = section.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
-    return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && (react_1.default.createElement(mobile_1.Section.Title, { text: title, color: titleColorInHex, 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, customFontSize: "18px", fontWeight: "600" }))),
-        sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(mobile_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
-        buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
-            react_1.default.createElement(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, customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_SectionDescriptionBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), sectionContentMediaSrc && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sectionContentMediaType === 'IMAGE' && ((0, jsx_runtime_1.jsx)(S_ImageBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }, void 0) }, void 0)) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonBox, { children: (0, jsx_runtime_1.jsx)(mobile_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
 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/FooterSection/FooterSection.d.ts

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

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

@@ -29,26 +29,24 @@ 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 FooterSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Footer" },
-        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": "Footer" }, { 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_FOOTER_A':
-            return react_1.default.createElement(templates_1.TemplateA, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
         case 'BASE_FOOTER_B':
-            return react_1.default.createElement(templates_1.TemplateB, null);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, 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 = FooterSection;

package/dist/src/sub/DynamicLayout/sections/FooterSection/FooterSection.stories.d.ts

@@ -0,0 +1,8 @@
+import { FooterSection } from '.';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof FooterSection>;
+export default _default;
+export declare const TemplateA_desktop: ComponentStory<typeof FooterSection>;
+export declare const TemplateA_mobile: ComponentStory<typeof FooterSection>;
+export declare const TemplateB_desktop: ComponentStory<typeof FooterSection>;
+export declare const TemplateB_mobile: ComponentStory<typeof FooterSection>;

package/dist/src/sub/DynamicLayout/sections/FooterSection/FooterSection.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateB_mobile = exports.TemplateB_desktop = exports.TemplateA_mobile = exports.TemplateA_desktop = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var dynamicLayoutContext_1 = require("../../dynamicLayoutContext");
+var mock_samplePage_1 = require("../../mock_samplePage");
+var _1 = require(".");
+exports.default = {
+    title: 'sub/DynamicLayout/sections/FooterSection',
+    component: _1.FooterSection,
+    parameters: {
+        docs: {
+            description: {
+                component: 'FooterSection'
+            }
+        }
+    },
+    decorators: [
+        function (Story, context) { return ((0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+                device: context.parameters.device,
+                mode: 'NORMAL',
+                isPreview: false,
+                navigationHandler: function (linkType, src) {
+                    alert("navigate to " + src + " by " + linkType);
+                }
+            } }, { children: (0, jsx_runtime_1.jsx)(Story, {}, void 0) }), void 0)); }
+    ]
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(_1.FooterSection, __assign({}, args), void 0); };
+exports.TemplateA_desktop = Template.bind({});
+exports.TemplateA_desktop.args = __assign(__assign({}, mock_samplePage_1.samplePageFooterSection), { template: 'BASE_FOOTER_A' });
+exports.TemplateA_desktop.parameters = {
+    device: 'DESKTOP'
+};
+exports.TemplateA_mobile = Template.bind({});
+exports.TemplateA_mobile.args = __assign(__assign({}, mock_samplePage_1.samplePageFooterSection), { template: 'BASE_FOOTER_A' });
+exports.TemplateA_mobile.parameters = {
+    device: 'MOBILE'
+};
+exports.TemplateB_desktop = Template.bind({});
+exports.TemplateB_desktop.args = __assign(__assign({}, mock_samplePage_1.samplePageFooterSection), { template: 'BASE_FOOTER_B' });
+exports.TemplateB_desktop.parameters = {
+    device: 'DESKTOP'
+};
+exports.TemplateB_mobile = Template.bind({});
+exports.TemplateB_mobile.args = __assign(__assign({}, mock_samplePage_1.samplePageFooterSection), { template: 'BASE_FOOTER_B' });
+exports.TemplateB_mobile.parameters = {
+    device: 'MOBILE'
+};