pds-dev-kit-web-test 0.0.14 → 0.0.16

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 (35) hide show
  1. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.js +2 -0
  2. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PageMenuItemNav.d.ts +12 -0
  3. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PageMenuItemNav.js +51 -0
  4. package/dist/src/desktop/components/DynamicDesktopNavBar/types.d.ts +2 -1
  5. package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.d.ts +3 -1
  6. package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.js +6 -3
  7. package/dist/src/sub/DynamicLayout/desktop/components/common/Carousel.js +36 -5
  8. package/dist/src/sub/DynamicLayout/desktop/components/common/swiper.style.d.ts +2 -0
  9. package/dist/src/sub/DynamicLayout/desktop/components/common/swiper.style.js +10 -0
  10. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +5 -7
  11. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +6 -10
  12. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateA/TemplateA.js +8 -5
  13. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js +8 -5
  14. package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +3 -3
  15. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateA/TemplateA.js +2 -2
  16. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateB/TemplateB.js +2 -2
  17. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateC/TemplateC.js +1 -1
  18. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateD/TemplateD.js +1 -1
  19. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.d.ts +6 -2
  20. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js +12 -6
  21. package/dist/src/sub/DynamicLayout/mobile/components/common/Carousel.js +2 -2
  22. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +9 -9
  23. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +9 -9
  24. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js +15 -13
  25. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js +8 -11
  26. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js +3 -6
  27. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js +3 -6
  28. package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +7 -10
  29. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateA/TemplateA.js +14 -3
  30. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateB/TemplateB.js +14 -3
  31. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js +1 -1
  32. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js +1 -1
  33. package/dist/src/sub/DynamicLayout/types.js +5 -5
  34. package/package.json +1 -1
  35. package/release-note.md +16 -7
package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -65,16 +65,16 @@ function TemplateA() {
65
65
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
66
66
  react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "cover" }))),
67
67
  react_1.default.createElement(S_ItemBodyWrapper, null,
68
- itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", styleTheme: "headingBold" })),
68
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold" })),
69
69
  itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
70
70
  react_1.default.createElement(S_CustomDividerBox, null,
71
71
  react_1.default.createElement(S_CustomWidthDivider, null)),
72
- react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" })))))));
72
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" })))))));
73
73
  }))),
74
74
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
75
75
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
76
76
  }
77
- 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: 80px auto;\n\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: 80px auto;\n\n ", "\n"])), function (_a) {
77
+ 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) {
78
78
  var hasNothing = _a.hasNothing;
79
79
  return hasNothing && "margin: 0";
80
80
  });
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateA/TemplateA.js CHANGED
@@ -38,7 +38,7 @@ function TemplateA() {
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
40
  react_1.default.createElement("div", null,
41
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold" })),
41
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
42
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
43
43
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
44
44
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateA() {
46
46
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
47
47
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
48
48
  }
49
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
49
+ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
50
50
  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"])));
51
51
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
52
52
  var theme = _a.theme, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateB/TemplateB.js CHANGED
@@ -38,7 +38,7 @@ function TemplateB() {
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
40
  react_1.default.createElement(S_ContentsBox, null,
41
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
41
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
42
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
43
43
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
44
44
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateB() {
46
46
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
47
47
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
48
48
  }
49
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100vh;\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n height: 100vh;\n display: flex;\n justify-content: center;\n"])));
49
+ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n justify-content: center;\n"])));
50
50
  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 --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"])));
51
51
  var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: 800px;\n position: absolute;\n bottom: 13vh;\n"], ["\n max-width: 800px;\n position: absolute;\n bottom: 13vh;\n"])));
52
52
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateC/TemplateC.js CHANGED
@@ -38,7 +38,7 @@ function TemplateC() {
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
40
  react_1.default.createElement(S_ContentsBox, null,
41
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
41
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
42
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
43
43
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
44
44
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateD/TemplateD.js CHANGED
@@ -38,7 +38,7 @@ function TemplateD() {
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
40
  react_1.default.createElement("div", null,
41
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold" })),
41
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
42
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
43
43
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
44
44
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.d.ts CHANGED
@@ -6,8 +6,12 @@ declare function Section({ children, ...props }: ISection & {
6
6
  children?: React.ReactNode;
7
7
  }): JSX.Element;
8
8
  declare namespace Section {
9
- var Title: ({ text, color, ...textLabelProps }: ISectionTitle & TextLabelProps) => JSX.Element;
10
- var Description: ({ text, color, ...textLabelProps }: ISectionDescription & TextLabelProps) => JSX.Element;
9
+ var Title: ({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
10
+ lineHeight?: number | undefined;
11
+ }) => JSX.Element;
12
+ var Description: ({ text, color, fontWeight, ...textLabelProps }: ISectionDescription & TextLabelProps & {
13
+ fontWeight?: string | undefined;
14
+ }) => JSX.Element;
11
15
  var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
12
16
  var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, state, borderColor }: ISectionButton) => JSX.Element;
13
17
  var context: React.Context<ISection | null>;
package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js CHANGED
@@ -153,23 +153,29 @@ var S_YoutubeContainer = styled_components_1.default.div(templateObject_5 || (te
153
153
  });
154
154
  // TITLE
155
155
  function Title(_a) {
156
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
157
- return (react_1.default.createElement(S_TitleStyleWrapper, { color: color },
156
+ var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.4 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
157
+ return (react_1.default.createElement(S_TitleStyleWrapper, { color: color, lineHeight: lineHeight },
158
158
  react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
159
159
  }
160
- var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n & > div {\n color: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n }\n"])), function (_a) {
160
+ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n & > div {\n color: ", ";\n line-height: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n line-height: ", ";\n }\n"])), function (_a) {
161
161
  var color = _a.color;
162
162
  return color;
163
+ }, function (_a) {
164
+ var lineHeight = _a.lineHeight;
165
+ return lineHeight;
163
166
  });
164
167
  // DESCRIPTION
165
168
  function Description(_a) {
166
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
167
- return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color },
169
+ var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
170
+ return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color, fontWeight: fontWeight },
168
171
  react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
169
172
  }
170
- var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n & > div {\n color: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n }\n"])), function (_a) {
173
+ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n & > div {\n color: ", ";\n ", ";\n }\n"], ["\n & > div {\n color: ", ";\n ", ";\n }\n"])), function (_a) {
171
174
  var color = _a.color;
172
175
  return color;
176
+ }, function (_a) {
177
+ var fontWeight = _a.fontWeight;
178
+ return fontWeight && "font-weight : " + fontWeight + ";";
173
179
  });
174
180
  // IMAGE
175
181
  function Image(_a) {
package/dist/src/sub/DynamicLayout/mobile/components/common/Carousel.js CHANGED
@@ -61,13 +61,13 @@ var S_SwiperStyleWrapper = styled_components_1.default.div(templateObject_2 || (
61
61
  return paginationSpacing[1];
62
62
  }, function (_a) {
63
63
  var theme = _a.theme;
64
- return theme.ui_cpnt_pagination_dot_01;
64
+ return theme.ui_cpnt_pagination_dot_02;
65
65
  }, function (_a) {
66
66
  var theme = _a.theme;
67
67
  return theme.ui_cpnt_pagination_dot_border;
68
68
  }, function (_a) {
69
69
  var theme = _a.theme;
70
- return theme.ui_cpnt_pagination_dot_02;
70
+ return theme.ui_cpnt_pagination_dot_01;
71
71
  });
72
72
  exports.default = Carousel;
73
73
  var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js CHANGED
@@ -59,9 +59,9 @@ function TemplateA() {
59
59
  : [];
60
60
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
61
61
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
- react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
62
+ react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
64
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
65
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
66
66
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
67
  filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
@@ -77,17 +77,17 @@ function TemplateA() {
77
77
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive" }))),
78
78
  title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
79
  description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "caption1Regular" }))),
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
81
81
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
82
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
83
  }))))));
84
84
  }
85
85
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n margin-top: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"])), function (_a) {
86
- var theme = _a.theme, hasNothing = _a.hasNothing;
87
- return (hasNothing ? 0 : theme.spacing.spacingG);
86
+ var hasNothing = _a.hasNothing;
87
+ return (hasNothing ? 0 : '80px');
88
88
  }, function (_a) {
89
- var theme = _a.theme, hasNothing = _a.hasNothing;
90
- return (hasNothing ? 0 : theme.spacing.spacingG);
89
+ var hasNothing = _a.hasNothing;
90
+ return (hasNothing ? 0 : '80px');
91
91
  }, function (_a) {
92
92
  var theme = _a.theme;
93
93
  return theme.spacing.spacingE;
@@ -97,11 +97,11 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
97
97
  });
98
98
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
99
99
  var theme = _a.theme;
100
- return theme.spacing.spacingD;
100
+ return theme.spacing.spacingE;
101
101
  });
102
102
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
- return theme.spacing.spacingD;
104
+ return theme.spacing.spacingE;
105
105
  });
106
106
  var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"], ["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"])), function (_a) {
107
107
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js CHANGED
@@ -59,9 +59,9 @@ function TemplateB() {
59
59
  : [];
60
60
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
61
61
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
- react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
62
+ react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
64
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
65
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
66
66
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
67
  filteredItems && (react_1.default.createElement(S_CarouselBox, null,
@@ -77,17 +77,17 @@ function TemplateB() {
77
77
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive" }))),
78
78
  title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
79
  description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "caption1Regular" }))),
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
81
81
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
82
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
83
  }))))));
84
84
  }
85
85
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n margin-top: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"])), function (_a) {
86
- var theme = _a.theme, hasNothing = _a.hasNothing;
87
- return (hasNothing ? 0 : theme.spacing.spacingG);
86
+ var hasNothing = _a.hasNothing;
87
+ return (hasNothing ? 0 : '80px');
88
88
  }, function (_a) {
89
- var theme = _a.theme, hasNothing = _a.hasNothing;
90
- return (hasNothing ? 0 : theme.spacing.spacingG);
89
+ var hasNothing = _a.hasNothing;
90
+ return (hasNothing ? 0 : '80px');
91
91
  }, function (_a) {
92
92
  var theme = _a.theme;
93
93
  return theme.spacing.spacingE;
@@ -97,11 +97,11 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
97
97
  });
98
98
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
99
99
  var theme = _a.theme;
100
- return theme.spacing.spacingD;
100
+ return theme.spacing.spacingE;
101
101
  });
102
102
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
- return theme.spacing.spacingD;
104
+ return theme.spacing.spacingE;
105
105
  });
106
106
  var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"], ["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"])), function (_a) {
107
107
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js CHANGED
@@ -36,34 +36,36 @@ function TemplateA() {
36
36
  var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
37
37
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
38
38
  sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
39
- react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover" }))))),
40
- title && react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
39
+ react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
40
+ title && (react_1.default.createElement(S_SectionTitleBox, null,
41
+ react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" }))),
41
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
42
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
43
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }))),
43
44
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
44
45
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
45
46
  }
46
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " ", ";\n ", "\n"], ["\n margin: ", " ", ";\n ", "\n"])), function (_a) {
47
- var theme = _a.theme;
48
- return theme.spacing.spacingG;
47
+ 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) {
48
+ var hasNothing = _a.hasNothing;
49
+ return (hasNothing ? 0 : '80px');
49
50
  }, function (_a) {
50
51
  var theme = _a.theme;
51
52
  return theme.spacing.spacingE;
52
- }, function (_a) {
53
- var hasNothing = _a.hasNothing;
54
- return hasNothing && "margin: 0";
55
53
  });
56
54
  var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
55
+ var theme = _a.theme;
56
+ return theme.spacing.spacingG;
57
+ });
58
+ var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
57
59
  var theme = _a.theme;
58
60
  return theme.spacing.spacingE;
59
61
  });
60
- var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
62
+ var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
61
63
  var theme = _a.theme;
62
- return theme.spacing.spacingD;
64
+ return theme.spacing.spacingE;
63
65
  });
64
- var S_ButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
66
+ var S_ButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
65
67
  var theme = _a.theme;
66
68
  return theme.spacing.spacingF;
67
69
  });
68
70
  exports.default = TemplateA;
69
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
71
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js CHANGED
@@ -35,31 +35,28 @@ function TemplateB() {
35
35
  var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
36
36
  var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
37
37
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
38
- title && react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
38
+ title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" })),
39
39
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
40
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
40
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }))),
41
41
  sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
42
- react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover" }))))),
42
+ react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
43
43
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
44
44
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
45
45
  }
46
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " ", ";\n ", "\n"], ["\n margin: ", " ", ";\n ", "\n"])), function (_a) {
47
- var theme = _a.theme;
48
- return theme.spacing.spacingG;
46
+ 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) {
47
+ var hasNothing = _a.hasNothing;
48
+ return (hasNothing ? 0 : '80px');
49
49
  }, function (_a) {
50
50
  var theme = _a.theme;
51
51
  return theme.spacing.spacingE;
52
- }, function (_a) {
53
- var hasNothing = _a.hasNothing;
54
- return hasNothing && "margin: 0";
55
52
  });
56
53
  var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
57
54
  var theme = _a.theme;
58
- return theme.spacing.spacingE;
55
+ return theme.spacing.spacingG;
59
56
  });
60
57
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
61
58
  var theme = _a.theme;
62
- return theme.spacing.spacingD;
59
+ return theme.spacing.spacingE;
63
60
  });
64
61
  var S_ButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
65
62
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js CHANGED
@@ -57,15 +57,12 @@ function TemplateA() {
57
57
  react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_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 margin: ", " ", ";\n ", "\n"], ["\n margin: ", " ", ";\n ", "\n"])), function (_a) {
61
- var theme = _a.theme;
62
- return theme.spacing.spacingG;
60
+ 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) {
61
+ var theme = _a.theme, hasNothing = _a.hasNothing;
62
+ return (hasNothing ? 0 : theme.spacing.spacingG);
63
63
  }, function (_a) {
64
64
  var theme = _a.theme;
65
65
  return theme.spacing.spacingE;
66
- }, function (_a) {
67
- var hasNothing = _a.hasNothing;
68
- return hasNothing && "margin: 0";
69
66
  });
70
67
  var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
71
68
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js CHANGED
@@ -57,15 +57,12 @@ function TemplateB() {
57
57
  react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_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 margin: ", " ", ";\n ", "\n"], ["\n margin: ", " ", ";\n ", "\n"])), function (_a) {
61
- var theme = _a.theme;
62
- return theme.spacing.spacingG;
60
+ 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) {
61
+ var theme = _a.theme, hasNothing = _a.hasNothing;
62
+ return (hasNothing ? 0 : theme.spacing.spacingG);
63
63
  }, function (_a) {
64
64
  var theme = _a.theme;
65
65
  return theme.spacing.spacingE;
66
- }, function (_a) {
67
- var hasNothing = _a.hasNothing;
68
- return hasNothing && "margin: 0";
69
66
  });
70
67
  var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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) {
71
68
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -54,9 +54,9 @@ function TemplateA() {
54
54
  : [];
55
55
  var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
56
56
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
57
- title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold" })),
57
+ title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" })),
58
58
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
59
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
59
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
60
60
  filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
61
61
  var id = item.id;
62
62
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
@@ -66,24 +66,21 @@ function TemplateA() {
66
66
  react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "cover" }))),
67
67
  itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center" })),
68
68
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, null,
69
- react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "caption1Regular" }))))));
69
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", customFontSize: "15px" }))))));
70
70
  }))),
71
71
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
72
72
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
73
73
  }
74
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " ", ";\n ", "\n"], ["\n margin: ", " ", ";\n ", "\n"])), function (_a) {
75
- var theme = _a.theme;
76
- return theme.spacing.spacingG;
74
+ 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) {
75
+ var hasNothing = _a.hasNothing;
76
+ return (hasNothing ? 0 : '80px');
77
77
  }, function (_a) {
78
78
  var theme = _a.theme;
79
79
  return theme.spacing.spacingE;
80
- }, function (_a) {
81
- var hasNothing = _a.hasNothing;
82
- return hasNothing && 'margin: 0';
83
80
  });
84
81
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
85
82
  var theme = _a.theme;
86
- return theme.spacing.spacingD;
83
+ return theme.spacing.spacingE;
87
84
  });
88
85
  var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
89
86
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateA/TemplateA.js CHANGED
@@ -35,9 +35,17 @@ function TemplateA() {
35
35
  var _b = context.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex;
36
36
  var _c = context.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;
37
37
  var _d = context.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;
38
- return (react_1.default.createElement(S_FullScreenWrapper, null,
38
+ var _e = (0, react_1.useState)(window.innerHeight * 0.01), vh = _e[0], setVH = _e[1];
39
+ var handleResize = function () {
40
+ setVH(window.innerHeight * 0.01);
41
+ };
42
+ (0, react_1.useEffect)(function () {
43
+ window.addEventListener('resize', handleResize);
44
+ return function () { return window.removeEventListener('resize', handleResize); };
45
+ }, []);
46
+ return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
39
47
  react_1.default.createElement(S_ContentsArea, null,
40
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold" })),
48
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold", lineHeight: 1.2 })),
41
49
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
50
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
43
51
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -45,7 +53,10 @@ function TemplateA() {
45
53
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
46
54
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
47
55
  }
48
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: center;\n"])));
56
+ 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) {
57
+ var vh = _a.vh;
58
+ return vh * 100;
59
+ });
49
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n margin: ", " ", ";\n"], ["\n width: 100%;\n margin: ", " ", ";\n"])), function (_a) {
50
61
  var theme = _a.theme;
51
62
  return theme.spacing.spacingG;
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateB/TemplateB.js CHANGED
@@ -35,9 +35,17 @@ function TemplateB() {
35
35
  var _b = context.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex;
36
36
  var _c = context.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;
37
37
  var _d = context.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;
38
- return (react_1.default.createElement(S_FullScreenWrapper, null,
38
+ var _e = (0, react_1.useState)(window.innerHeight * 0.01), vh = _e[0], setVH = _e[1];
39
+ var handleResize = function () {
40
+ setVH(window.innerHeight * 0.01);
41
+ };
42
+ (0, react_1.useEffect)(function () {
43
+ window.addEventListener('resize', handleResize);
44
+ return function () { return window.removeEventListener('resize', handleResize); };
45
+ }, []);
46
+ return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
39
47
  react_1.default.createElement(S_ContentsArea, null,
40
- title && react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold" }),
48
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold", lineHeight: 1.2 })),
41
49
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
50
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body2Bold" }))),
43
51
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -45,7 +53,10 @@ function TemplateB() {
45
53
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
46
54
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
47
55
  }
48
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: flex-end;\n"], ["\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: flex-end;\n"])));
56
+ 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: flex-end;\n"], ["\n width: 100%;\n min-height: calc(100vh - 56px); // fallback\n min-height: calc(", "px - 56px);\n display: flex;\n align-items: flex-end;\n"])), function (_a) {
57
+ var vh = _a.vh;
58
+ return vh * 100;
59
+ });
49
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n margin: ", " ", ";\n"], ["\n width: 100%;\n margin: ", " ", ";\n"])), function (_a) {
50
61
  var theme = _a.theme;
51
62
  return theme.spacing.spacingG;
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js CHANGED
@@ -37,7 +37,7 @@ function TemplateC() {
37
37
  var _d = context.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;
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
- title && react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
40
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold", lineHeight: 1.2 })),
41
41
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
42
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
43
43
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js CHANGED
@@ -37,7 +37,7 @@ function TemplateD() {
37
37
  var _d = context.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;
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold" })),
40
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold", lineHeight: 1.2 })),
41
41
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
42
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
43
43
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
package/dist/src/sub/DynamicLayout/types.js CHANGED
@@ -29,7 +29,7 @@ exports.MOCK_DATA = [
29
29
  buttonEchoLinkType: 'NONE',
30
30
  buttonEchoLinkSrc: '',
31
31
  carouselAutoplayMode: 'AUTO',
32
- carouselAutoplayTime: 5,
32
+ carouselAutoplayTime: 1,
33
33
  carouselInfiniteLoopMode: 'USE'
34
34
  },
35
35
  styles: {
@@ -89,7 +89,7 @@ exports.MOCK_DATA = [
89
89
  buttonEchoLinkType: 'INTERNAL_LINK',
90
90
  buttonEchoLinkSrc: '',
91
91
  carouselAutoplayMode: 'AUTO',
92
- carouselAutoplayTime: 5,
92
+ carouselAutoplayTime: 1,
93
93
  carouselInfiniteLoopMode: 'USE'
94
94
  },
95
95
  styles: {
@@ -153,7 +153,7 @@ exports.MOCK_DATA = [
153
153
  buttonEchoLinkType: 'NONE',
154
154
  buttonEchoLinkSrc: '',
155
155
  carouselAutoplayMode: 'AUTO',
156
- carouselAutoplayTime: 5,
156
+ carouselAutoplayTime: 1,
157
157
  carouselInfiniteLoopMode: 'USE'
158
158
  },
159
159
  styles: {
@@ -394,7 +394,7 @@ exports.MOCK_DATA = [
394
394
  buttonEchoLinkType: 'INTERNAL_LINK',
395
395
  buttonEchoLinkSrc: '',
396
396
  carouselAutoplayMode: 'AUTO',
397
- carouselAutoplayTime: 5,
397
+ carouselAutoplayTime: 1,
398
398
  carouselInfiniteLoopMode: 'USE'
399
399
  },
400
400
  styles: {
@@ -495,7 +495,7 @@ exports.MOCK_DATA = [
495
495
  buttonEchoLinkType: 'INTERNAL_LINK',
496
496
  buttonEchoLinkSrc: '',
497
497
  carouselAutoplayMode: 'AUTO',
498
- carouselAutoplayTime: 5,
498
+ carouselAutoplayTime: 1,
499
499
  carouselInfiniteLoopMode: 'USE'
500
500
  },
501
501
  styles: {