pds-dev-kit-web-test 0.0.23 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
  2. package/dist/src/sub/DynamicLayout/DynamicLayout.js +66 -3
  3. package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  4. package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  5. package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  6. package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  7. package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  8. package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  9. package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  10. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  11. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  12. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateC/desktop/D_TemplateC.js +1 -1
  13. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateD/desktop/D_TemplateD.js +1 -1
  14. package/dist/src/sub/DynamicLayout/types.d.ts +3 -1
  15. package/package.json +1 -1
  16. package/release-note.md +4 -4
package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { DynamicLayoutProps } from './types';
3
- declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
3
+ declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler, scrollDownTargetSectionId, onClickEditSection }: DynamicLayoutProps): JSX.Element;
4
4
  export default DynamicLayout;
package/dist/src/sub/DynamicLayout/DynamicLayout.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __assign = (this && this.__assign) || function () {
3
7
  __assign = Object.assign || function(t) {
4
8
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
10
14
  };
11
15
  return __assign.apply(this, arguments);
12
16
  };
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
13
36
  var __rest = (this && this.__rest) || function (s, e) {
14
37
  var t = {};
15
38
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -34,14 +57,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
34
57
  return (mod && mod.__esModule) ? mod : { "default": mod };
35
58
  };
36
59
  Object.defineProperty(exports, "__esModule", { value: true });
37
- var react_1 = __importDefault(require("react"));
60
+ var react_1 = __importStar(require("react"));
61
+ var styled_components_1 = __importDefault(require("styled-components"));
38
62
  var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
39
63
  var sections_1 = require("./sections");
40
64
  function DynamicLayout(_a) {
41
- var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
65
+ var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
42
66
  var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
43
67
  .sort(function (a, b) { return a.order - b.order; });
44
- return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } }, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section))); })));
68
+ return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
69
+ mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSections, { scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
70
+ mode !== 'EDIT' &&
71
+ filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)); })));
45
72
  }
46
73
  function SectionMatcher(_a) {
47
74
  var props = __rest(_a, []);
@@ -62,3 +89,39 @@ function SectionMatcher(_a) {
62
89
  }
63
90
  }
64
91
  exports.default = DynamicLayout;
92
+ function EditModeSections(_a) {
93
+ var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
94
+ return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox, { scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
95
+ react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)))); })));
96
+ }
97
+ function SectionBox(_a) {
98
+ var scrollIntoThisSection = _a.scrollIntoThisSection, children = _a.children, onClick = _a.onClick;
99
+ var _b = (0, react_1.useState)(false), isHover = _b[0], setHover = _b[1];
100
+ var sectionRef = (0, react_1.useRef)(null);
101
+ (0, react_1.useEffect)(function () {
102
+ var _a;
103
+ if (!sectionRef) {
104
+ return;
105
+ }
106
+ if (scrollIntoThisSection) {
107
+ (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
108
+ }
109
+ }, [scrollIntoThisSection]);
110
+ var onMouseEnter = function () {
111
+ setHover(true);
112
+ };
113
+ var onMouseLeave = function () {
114
+ setHover(false);
115
+ };
116
+ return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
117
+ isHover && (react_1.default.createElement(DimmedEditOverlay, null,
118
+ react_1.default.createElement(S_EditButton, null, "\uC774 Section \uC218\uC815\uD558\uAE30"))),
119
+ children));
120
+ }
121
+ var S_EditButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: #ddf68c;\n font-weight: bold;\n padding: ", ";\n"], ["\n background-color: #ddf68c;\n font-weight: bold;\n padding: ", ";\n"])), function (_a) {
122
+ var theme = _a.theme;
123
+ return theme.spacing.spacingE;
124
+ });
125
+ var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
126
+ var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n background-color: #f7f7f7c4;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n background-color: #f7f7f7c4;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
127
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/desktop/D_TemplateA.js CHANGED
@@ -96,7 +96,7 @@ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObj
96
96
  var hasNothing = _a.hasNothing;
97
97
  return (hasNothing ? 0 : '160px');
98
98
  });
99
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"])));
99
+ 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: 0 auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (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: 0 auto;\n"])));
100
100
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
101
101
  var theme = _a.theme;
102
102
  return theme.spacing.spacingE;
package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/desktop/D_TemplateB.js CHANGED
@@ -96,7 +96,7 @@ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObj
96
96
  var hasNothing = _a.hasNothing;
97
97
  return (hasNothing ? 0 : '160px');
98
98
  });
99
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"])));
99
+ 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: 0 auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (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: 0 auto;\n"])));
100
100
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
101
101
  var theme = _a.theme;
102
102
  return theme.spacing.spacingE;
package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/desktop/D_TemplateA.js CHANGED
@@ -67,7 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
67
67
  var hasNothing = _a.hasNothing;
68
68
  return (hasNothing ? 0 : '160px');
69
69
  });
70
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n display: flex;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n display: flex;\n"])));
70
+ 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"])));
71
71
  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) {
72
72
  var theme = _a.theme;
73
73
  return theme.spacing.spacingI;
package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.js CHANGED
@@ -67,7 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
67
67
  var hasNothing = _a.hasNothing;
68
68
  return (hasNothing ? 0 : '160px');
69
69
  });
70
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n display: flex;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n display: flex;\n"])));
70
+ 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"])));
71
71
  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) {
72
72
  var theme = _a.theme;
73
73
  return theme.spacing.spacingI;
package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateA/desktop/D_TemplateA.js CHANGED
@@ -57,7 +57,7 @@ function TemplateA() {
57
57
  react_1.default.createElement(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
60
+ 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) {
61
61
  var theme = _a.theme;
62
62
  return theme.spacing.spacingH;
63
63
  }, function (_a) {
package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateB/desktop/D_TemplateB.js CHANGED
@@ -57,7 +57,7 @@ function TemplateB() {
57
57
  react_1.default.createElement(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
60
+ 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) {
61
61
  var theme = _a.theme;
62
62
  return theme.spacing.spacingH;
63
63
  }, function (_a) {
package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/templates/TemplateA/desktop/D_TemplateA.js CHANGED
@@ -73,7 +73,7 @@ function TemplateA() {
73
73
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
74
74
  react_1.default.createElement(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
75
75
  }
76
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n margin: 160px auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n margin: 160px auto;\n ", "\n"])), function (_a) {
76
+ 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) {
77
77
  var hasNothing = _a.hasNothing;
78
78
  return hasNothing && "margin: 0";
79
79
  });
package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateA/desktop/D_TemplateA.js CHANGED
@@ -48,7 +48,7 @@ function TemplateA() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  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"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
51
+ 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"])));
52
52
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
53
53
  var theme = _a.theme, hasTitle = _a.hasTitle;
54
54
  return hasTitle && theme.spacing.spacingF;
package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateB/desktop/D_TemplateB.js CHANGED
@@ -48,7 +48,7 @@ function TemplateB() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n"], ["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0 13vh;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0 13vh;\n"])));
51
+ 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 0 13vh;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (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 0 13vh;\n"])));
52
52
  var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: 800px;\n"], ["\n max-width: 800px;\n"])));
53
53
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
54
54
  var theme = _a.theme, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateC/desktop/D_TemplateC.js CHANGED
@@ -48,7 +48,7 @@ function TemplateC() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"])));
51
+ 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 display: flex;\n align-items: center;\n margin: 160px 0;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (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 display: flex;\n align-items: center;\n margin: 160px 0;\n"])));
52
52
  var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: 800px;\n"], ["\n max-width: 800px;\n"])));
53
53
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
54
54
  var theme = _a.theme, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateD/desktop/D_TemplateD.js CHANGED
@@ -48,7 +48,7 @@ function TemplateD() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
51
+ 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"])));
52
52
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
53
53
  var theme = _a.theme, hasTitle = _a.hasTitle;
54
54
  return hasTitle && theme.spacing.spacingF;
package/dist/src/sub/DynamicLayout/types.d.ts CHANGED
@@ -166,10 +166,12 @@ export interface IItemDescription extends IDescription {
166
166
  export declare type DynamicLayoutProps = {
167
167
  device: 'DESKTOP' | 'MOBILE';
168
168
  /** @default 'NORMAL */
169
- mode?: 'NORMAL' | 'PREVIEW';
169
+ mode?: 'NORMAL' | 'PREVIEW' | 'EDIT';
170
170
  /** @deprecated use 'mode' instead */
171
171
  isPreview?: boolean;
172
172
  sections: ISection[];
173
173
  navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
174
+ scrollDownTargetSectionId?: number;
175
+ onClickEditSection?: (section: ISection) => void;
174
176
  };
175
177
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.0.23",
3
+ "version": "0.0.24",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # PDS-DEV-KIT-WEB-TEST Release Notes
2
- ## [v0.0.23]
2
+ ## [v0.0.24]
3
3
 
4
4
  ### sub
5
5
  * DynamicLayout 수정
6
- * YouTubeIframe player에 에러 핸들링 추가
7
- * iframe을 제거한 후 다시 생성하도록 조치
8
- * 모니터링을 위해 콘솔에 에러 이벤트 출력
6
+ * DynamicLayout에 'EDIT' 모드 추가
7
+ * 특정 section으로 스크롤하기 기능 추가
8
+ * vw를 사용하는 section들 %로 변경