pds-dev-kit-web 0.6.2 → 0.6.5

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 (56) hide show
  1. package/dist/src/common/assets/icons/line/ArrowRoundLeft.d.ts +4 -0
  2. package/dist/src/common/assets/icons/line/ArrowRoundLeft.js +34 -0
  3. package/dist/src/common/assets/icons/line/PostVote.d.ts +4 -0
  4. package/dist/src/common/assets/icons/line/PostVote.js +38 -0
  5. package/dist/src/common/assets/icons/line/TenSecBackArrow.js +1 -1
  6. package/dist/src/common/assets/icons/line/TenSecForwardArrow.js +1 -1
  7. package/dist/src/common/assets/icons/line/index.d.ts +2 -0
  8. package/dist/src/common/assets/icons/line/index.js +4 -0
  9. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +4 -1
  10. package/dist/src/common/styles/colorSet/PaletteColor_light.json +4 -1
  11. package/dist/src/common/styles/colorSet/SemanticColor.json +2 -1
  12. package/dist/src/common/styles/colorSet/UIColor.json +13 -4
  13. package/dist/src/common/styles/colorSet/index.d.ts +71 -55
  14. package/dist/src/common/styles/colorSet/index.js +2 -2
  15. package/dist/src/common/styles/colorSet/ui-type.d.ts +9 -0
  16. package/dist/src/common/styles/index.d.ts +0 -2
  17. package/dist/src/common/styles/theme.d.ts +0 -2
  18. package/dist/src/common/styles/theme.js +2 -4
  19. package/dist/src/common/types/styled-components.d.ts +0 -2
  20. package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js +10 -1
  21. package/dist/src/desktop/components/Chip/Chip.js +6 -6
  22. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +6 -4
  23. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +1 -0
  24. package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js +2 -2
  25. package/dist/src/desktop/components/MainButton/MainButton.js +1 -1
  26. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
  27. package/dist/src/desktop/components/StatusBlock/StatusBlock.js +1 -1
  28. package/dist/src/desktop/components/TextButton/TextButton.js +1 -1
  29. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +1 -3
  30. package/dist/src/desktop/components/TextLabel/TextLabel.js +7 -8
  31. package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +1 -1
  32. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +1 -1
  33. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js +1 -1
  34. package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js +2 -2
  35. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
  36. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +4 -2
  37. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTA.js +5 -2
  38. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTI.d.ts +2 -1
  39. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTI.js +17 -5
  40. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTK.js +5 -2
  41. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.d.ts +2 -1
  42. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.js +17 -5
  43. package/dist/src/desktop/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js +5 -2
  44. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
  45. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +9 -3
  46. package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js +10 -1
  47. package/dist/src/mobile/components/Chip/Chip.js +6 -6
  48. package/dist/src/mobile/components/MainButton/MainButton.js +1 -1
  49. package/dist/src/mobile/components/ReactionButton/ReactionButton.js +1 -1
  50. package/dist/src/mobile/components/StatusBlock/StatusBlock.js +1 -1
  51. package/dist/src/mobile/components/TextButton/TextButton.js +1 -1
  52. package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +1 -3
  53. package/dist/src/mobile/components/TextLabel/TextLabel.js +7 -8
  54. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +1 -1
  55. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +1 -1
  56. package/package.json +1 -1
package/dist/src/desktop/components/MainButton/MainButton.js CHANGED
@@ -98,7 +98,7 @@ function MainButton(_a) {
98
98
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
99
99
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
101
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
101
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
102
102
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
103
103
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
104
104
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
package/dist/src/desktop/components/ReactionButton/ReactionButton.js CHANGED
@@ -100,7 +100,7 @@ function ReactionButton(_a) {
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
101
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
102
102
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
103
- react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", btnMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
103
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
104
104
  }
105
105
  var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n cursor: 'pointer';\n display: flex;\n justify-content: center;\n padding: 0;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n cursor: 'pointer';\n display: flex;\n justify-content: center;\n padding: 0;\n"])));
106
106
  var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
package/dist/src/desktop/components/StatusBlock/StatusBlock.js CHANGED
@@ -37,7 +37,7 @@ function StatusBlock(_a) {
37
37
  small: 'body2Bold'
38
38
  };
39
39
  return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
40
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", btnMode: "use", colorTheme: "sysTextWhite" })));
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
41
41
  }
42
42
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n height: 48px;\n"], ["\n border-radius: 8px;\n height: 48px;\n"])));
43
43
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 8px;\n height: 40px;\n"], ["\n border-radius: 8px;\n height: 40px;\n"])));
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -68,7 +68,7 @@ function TextButton(_a) {
68
68
  xsmall: 'caption1Regular'
69
69
  };
70
70
  return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
71
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
71
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
72
72
  }
73
73
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n ", ";\n"], ["\n height: 48px;\n ", ";\n"])), function (_a) {
74
74
  var size = _a.size;
package/dist/src/desktop/components/TextLabel/TextLabel.d.ts CHANGED
@@ -10,7 +10,6 @@ export declare type TextLabelProps = {
10
10
  singleLineMode?: 'none' | 'use';
11
11
  ellipsisMode?: 'none' | 'use';
12
12
  lineLimit?: number;
13
- btnMode?: 'none' | 'use';
14
13
  };
15
14
  export declare type TextStyleProps = {
16
15
  textAlign?: 'left' | 'center' | 'right';
@@ -21,7 +20,6 @@ export declare type TextStyleProps = {
21
20
  singleLineMode?: 'none' | 'use';
22
21
  ellipsisMode?: 'none' | 'use';
23
22
  lineLimit?: number;
24
- btnMode?: 'none' | 'use';
25
23
  };
26
- declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit, btnMode }: TextLabelProps): JSX.Element;
24
+ declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
27
25
  export default TextLabel;
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var common_1 = require("../../../common");
32
32
  function TextLabel(_a) {
33
- var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.btnMode, btnMode = _h === void 0 ? 'none' : _h;
34
- return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, btnMode: btnMode }, text));
33
+ var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
34
+ return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
35
35
  }
36
36
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
37
37
  var theme = _a.theme;
@@ -251,7 +251,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateO
251
251
  var lineLimit = _a.lineLimit;
252
252
  return lineLimit;
253
253
  });
254
- var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
254
+ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
255
255
  var textAlign = _a.textAlign;
256
256
  return textAlign;
257
257
  }, function (_a) {
@@ -295,11 +295,10 @@ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (template
295
295
  usrTextBrandOnPrimary: usrTextBrandOnPrimary
296
296
  }[colorTheme];
297
297
  }, function (_a) {
298
- var singleLineMode = _a.singleLineMode, theme = _a.theme;
299
- return singleLineMode === 'use' && "line-height: " + theme.desktopLineHeight.singleLine;
300
- }, function (_a) {
301
- var btnMode = _a.btnMode, theme = _a.theme;
302
- return btnMode === 'use' && "line-height: " + theme.desktopLineHeight.btn;
298
+ var singleLineMode = _a.singleLineMode, ellipsisMode = _a.ellipsisMode, theme = _a.theme;
299
+ return singleLineMode === 'use' &&
300
+ ellipsisMode === 'none' &&
301
+ "line-height: " + theme.desktopLineHeight.singleLine;
303
302
  }, function (_a) {
304
303
  var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
305
304
  return ellipsisMode === 'use' && lineLimit && ellipsisStyle;
package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js CHANGED
@@ -64,7 +64,7 @@ function UploadMainButton(_a) {
64
64
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
65
65
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
66
66
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
67
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
67
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
68
68
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
69
69
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
70
70
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -45,7 +45,7 @@ function UploadTextButton(_a) {
45
45
  };
46
46
  return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
47
47
  react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
48
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
48
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
49
49
  }
50
50
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: ", ";\n"], ["\n height: 48px;\n width: ", ";\n"])), function (_a) {
51
51
  var size = _a.size;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js CHANGED
@@ -34,7 +34,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templa
34
34
  var areaColor = _a.areaColor;
35
35
  return "background-color: " + areaColor;
36
36
  });
37
- var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex-grow: 1;\n margin: 0;\n"], ["\n flex-grow: 1;\n margin: 0;\n"])));
37
+ var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex-grow: 1;\n margin: 0;\n max-width: 720px;\n min-width: 512px;\n"], ["\n flex-grow: 1;\n margin: 0;\n max-width: 720px;\n min-width: 512px;\n"])));
38
38
  var S_Content2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 24px;\n width: 360px;\n"], ["\n margin-left: 24px;\n width: 360px;\n"])));
39
39
  exports.default = WFB;
40
40
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js CHANGED
@@ -23,11 +23,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
23
23
  var containerColor = _a.containerColor;
24
24
  return "background-color: " + containerColor;
25
25
  });
26
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n min-width: 912px;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"], ["\n box-sizing: border-box;\n display: flex;\n min-width: 912px;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"])), function (_a) {
26
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"], ["\n box-sizing: border-box;\n display: flex;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"])), function (_a) {
27
27
  var areaColor = _a.areaColor;
28
28
  return "background-color: " + areaColor;
29
29
  });
30
- var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
30
+ var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n max-width: 720px;\n min-width: 512px;\n"], ["\n flex-grow: 1;\n max-width: 720px;\n min-width: 512px;\n"])));
31
31
  var S_Content2 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: 24px;\n min-width: 360px;\n width: 360px;\n"], ["\n margin-left: 24px;\n min-width: 360px;\n width: 360px;\n"])));
32
32
  exports.default = WSE;
33
33
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  export declare type ContentsContainerProps = {
3
3
  content1?: JSX.Element;
4
4
  content2?: JSX.Element;
5
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1';
5
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2';
6
6
  containerColor?: string;
7
7
  areaColor?: string;
8
8
  };
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js CHANGED
@@ -29,7 +29,8 @@ var ContentsContainer = function (_a) {
29
29
  WTG_1: react_1.default.createElement(variation_1.WTG, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
30
30
  WTH_1: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
31
31
  WTH_2: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
32
- WTI_1: react_1.default.createElement(variation_1.WTI, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
32
+ WTI_1: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
33
+ WTI_2: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
33
34
  WTJ_1: (react_1.default.createElement(variation_1.WTJ, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
34
35
  WTK_1: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
35
36
  WTK_2: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
@@ -37,7 +38,8 @@ var ContentsContainer = function (_a) {
37
38
  WTL_1: react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
38
39
  WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
39
40
  WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
40
- WTN_1: react_1.default.createElement(variation_1.WTN, { content1: content1, containerColor: containerColor, areaColor: areaColor })
41
+ WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
42
+ WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor }))
41
43
  }[layoutType]));
42
44
  };
43
45
  exports.default = ContentsContainer;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTA.js CHANGED
@@ -17,7 +17,7 @@ var WTA = function (_a) {
17
17
  };
18
18
  var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n\n /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n\n /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
19
19
  var theme = _a.theme;
20
- return theme.ui_contentscontainer01_background;
20
+ return theme.ui_contentscontainer_background_wt_m;
21
21
  }, function (_a) {
22
22
  var containerColor = _a.containerColor;
23
23
  return "background-color: " + containerColor;
@@ -29,7 +29,10 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
29
29
  WTA_3: 'min-width: 768px;'
30
30
  }[layoutType]);
31
31
  });
32
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"])), function (_a) {
32
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"])), function (_a) {
33
+ var theme = _a.theme;
34
+ return theme.ui_contentsarea_background_wt_m;
35
+ }, function (_a) {
33
36
  var theme = _a.theme;
34
37
  return theme.ui_area_divider;
35
38
  }, function (_a) {
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTI.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  export declare type WTIProps = {
3
3
  content1?: JSX.Element;
4
+ layoutType: 'WTI_1' | 'WTI_2';
4
5
  containerColor?: string;
5
6
  areaColor?: string;
6
7
  };
7
- declare const WTI: ({ content1, containerColor, areaColor }: WTIProps) => JSX.Element;
8
+ declare const WTI: ({ content1, containerColor, areaColor, layoutType }: WTIProps) => JSX.Element;
8
9
  export default WTI;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTI.js CHANGED
@@ -10,19 +10,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var react_1 = __importDefault(require("react"));
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var WTI = function (_a) {
13
- var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
14
- return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
15
- react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
13
+ var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
14
+ return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
15
+ react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
16
16
  react_1.default.createElement(S_Content1, null, content1))));
17
17
  };
18
- var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
18
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n"])), function (_a) {
19
19
  var theme = _a.theme;
20
20
  return theme.ui_contentscontainer01_background;
21
+ }, function (_a) {
22
+ var layoutType = _a.layoutType;
23
+ return ({
24
+ WTI_1: 'min-width: 1200px;',
25
+ WTI_2: 'min-width: 960px;'
26
+ }[layoutType]);
21
27
  }, function (_a) {
22
28
  var containerColor = _a.containerColor;
23
29
  return "background-color: " + containerColor;
24
30
  });
25
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n width: 1200px;\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n width: 1200px;\n ", ";\n"])), function (_a) {
31
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n ", ";\n"])), function (_a) {
32
+ var layoutType = _a.layoutType;
33
+ return ({
34
+ WTI_1: 'width: 1200px;',
35
+ WTI_2: 'width: 960px;'
36
+ }[layoutType]);
37
+ }, function (_a) {
26
38
  var areaColor = _a.areaColor;
27
39
  return "background-color: " + areaColor;
28
40
  });
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTK.js CHANGED
@@ -17,7 +17,7 @@ var WTK = function (_a) {
17
17
  };
18
18
  var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n\n /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n\n /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
19
19
  var theme = _a.theme;
20
- return theme.ui_contentscontainer01_background;
20
+ return theme.ui_contentscontainer_background_wt_m;
21
21
  }, function (_a) {
22
22
  var containerColor = _a.containerColor;
23
23
  return "background-color: " + containerColor;
@@ -29,7 +29,10 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
29
29
  WTK_3: 'min-width: 768px;'
30
30
  }[layoutType]);
31
31
  });
32
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"])), function (_a) {
32
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"])), function (_a) {
33
+ var theme = _a.theme;
34
+ return theme.ui_contentsarea_background_wt_m;
35
+ }, function (_a) {
33
36
  var theme = _a.theme;
34
37
  return theme.ui_area_divider;
35
38
  }, function (_a) {
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  export declare type WTNProps = {
3
3
  content1?: JSX.Element;
4
+ layoutType: 'WTN_1' | 'WTN_2';
4
5
  containerColor?: string;
5
6
  areaColor?: string;
6
7
  };
7
- declare const WTN: ({ content1, containerColor, areaColor }: WTNProps) => JSX.Element;
8
+ declare const WTN: ({ content1, containerColor, areaColor, layoutType }: WTNProps) => JSX.Element;
8
9
  export default WTN;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.js CHANGED
@@ -10,19 +10,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var react_1 = __importDefault(require("react"));
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var WTN = function (_a) {
13
- var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
14
- return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
15
- react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
13
+ var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
14
+ return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
15
+ react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
16
16
  react_1.default.createElement(S_Content1, null, content1))));
17
17
  };
18
- var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
18
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n ", ";\n"])), function (_a) {
19
19
  var theme = _a.theme;
20
20
  return theme.ui_contentscontainer01_background;
21
+ }, function (_a) {
22
+ var layoutType = _a.layoutType;
23
+ return ({
24
+ WTN_1: 'min-width: 1200px;',
25
+ WTN_2: 'min-width: 960px;'
26
+ }[layoutType]);
21
27
  }, function (_a) {
22
28
  var containerColor = _a.containerColor;
23
29
  return "background-color: " + containerColor;
24
30
  });
25
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n width: 1200px;\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n width: 1200px;\n ", ";\n"])), function (_a) {
31
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n ", ";\n"])), function (_a) {
32
+ var layoutType = _a.layoutType;
33
+ return ({
34
+ WTN_1: 'min-width: 1200px;',
35
+ WTN_2: 'min-width: 960px;'
36
+ }[layoutType]);
37
+ }, function (_a) {
26
38
  var areaColor = _a.areaColor;
27
39
  return "background-color: " + areaColor;
28
40
  });
package/dist/src/desktop/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js CHANGED
@@ -43,7 +43,7 @@ var areaLineStyle = (0, styled_components_1.css)(templateObject_1 || (templateOb
43
43
  });
44
44
  var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n ", ";\n ", ";\n"])), function (_a) {
45
45
  var theme = _a.theme;
46
- return theme.ui_pagemenucontainer_background;
46
+ return theme.ui_toppagemenucontainer_background_wt_m;
47
47
  }, function (_a) {
48
48
  var mobileWidth = _a.mobileWidth;
49
49
  return mobileWidth &&
@@ -52,7 +52,10 @@ var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_2 ||
52
52
  var containerColor = _a.containerColor;
53
53
  return "background-color: " + containerColor;
54
54
  });
55
- var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n ", ";\n ", ";\n ", ";\n"], ["\n margin: 0;\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
55
+ var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n ", ";\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
56
+ var theme = _a.theme;
57
+ return theme.ui_toppagemenuarea_background_wt_m;
58
+ }, function (_a) {
56
59
  var mobileWidth = _a.mobileWidth;
57
60
  return mobileWidth && "width: " + mobileWidth + "px;";
58
61
  }, function (_a) {
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare type ContainersBoxProps = {
3
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1';
3
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_2' | 'WTN_1';
4
4
  pageMenuContent?: JSX.Element;
5
5
  tabMenuContent?: JSX.Element;
6
6
  content1?: JSX.Element;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js CHANGED
@@ -36,6 +36,7 @@ var ContainersBox = function (_a) {
36
36
  WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
37
37
  WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
38
38
  WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
39
+ WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
39
40
  WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
40
41
  WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
41
42
  WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -43,7 +44,8 @@ var ContainersBox = function (_a) {
43
44
  WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
44
45
  WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
45
46
  WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
46
- WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
47
+ WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
48
+ WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
47
49
  }[layoutType],
48
50
  react_1.default.createElement(S_RightBox, null,
49
51
  {
@@ -69,6 +71,7 @@ var ContainersBox = function (_a) {
69
71
  WTH_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
70
72
  WTH_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
71
73
  WTI_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
74
+ WTI_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
72
75
  WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
73
76
  WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
74
77
  WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -76,7 +79,8 @@ var ContainersBox = function (_a) {
76
79
  WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
77
80
  WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
78
81
  WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
79
- WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
82
+ WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
83
+ WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
80
84
  }[layoutType],
81
85
  {
82
86
  WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -101,6 +105,7 @@ var ContainersBox = function (_a) {
101
105
  WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
102
106
  WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
103
107
  WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
108
+ WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
104
109
  WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
105
110
  WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
106
111
  WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -108,7 +113,8 @@ var ContainersBox = function (_a) {
108
113
  WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
109
114
  WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
110
115
  WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
111
- WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
116
+ WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
117
+ WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
112
118
  }[layoutType],
113
119
  react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
114
120
  react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })))));
package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -202,7 +202,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
202
202
  dark: theme.ui_cpnt_textfield_text_darktheme_disabled
203
203
  }[colorTheme];
204
204
  });
205
- var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n height: 100%;\n line-height: ", ";\n outline: 0;\n overflow: hidden;\n padding: 0;\n width: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n &::placeholder {\n color: ", ";\n }\n\n ", ";\n ", "\n"], ["\n display: inline-flex;\n justify-content: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n height: 100%;\n line-height: ", ";\n outline: 0;\n overflow: hidden;\n padding: 0;\n width: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n &::placeholder {\n color: ", ";\n }\n\n ", ";\n ", "\n"])), function (_a) {
205
+ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n height: 100%;\n line-height: ", ";\n outline: 0;\n overflow: hidden;\n padding: 0;\n width: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n &::placeholder {\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n ", ";\n ", "\n"], ["\n display: inline-flex;\n justify-content: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n height: 100%;\n line-height: ", ";\n outline: 0;\n overflow: hidden;\n padding: 0;\n width: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n &::placeholder {\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n ", ";\n ", "\n"])), function (_a) {
206
206
  var theme = _a.theme, colorTheme = _a.colorTheme;
207
207
  return colorTheme &&
208
208
  {
@@ -225,6 +225,15 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
225
225
  none: theme.ui_cpnt_textfield_text_hint,
226
226
  dark: theme.ui_cpnt_textfield_text_darktheme_hint
227
227
  }[colorTheme];
228
+ }, function (_a) {
229
+ var textSize = _a.textSize;
230
+ return common_1.desktopFontSize[textSize];
231
+ }, function (_a) {
232
+ var textWeight = _a.textWeight;
233
+ return common_1.fontWeight[textWeight];
234
+ }, function (_a) {
235
+ var textSize = _a.textSize;
236
+ return common_1.desktopLineHeight[textSize];
228
237
  }, function (_a) {
229
238
  var state = _a.state;
230
239
  return state &&
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -29,21 +29,21 @@ function Chip(_a) {
29
29
  return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: chipId === activeChipId, onClick: handleClick },
30
30
  chipId !== activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
31
31
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
32
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
32
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
33
33
  chipId === activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
34
34
  react_1.default.createElement(hybrid_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
35
35
  case 'information':
36
36
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClick },
37
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", btnMode: "use", colorTheme: "sysTextPrimary" })));
37
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
38
38
  case 'label':
39
39
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClick },
40
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextTertiary" })));
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
41
41
  case 'time':
42
42
  return (react_1.default.createElement(S_TimeChip, { onClick: handleClick },
43
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextWhite" })));
43
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
44
44
  case 'removable':
45
45
  return (react_1.default.createElement(S_RemovableChip, { onClick: handleClick },
46
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: "sysTextSecondary" }),
46
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
47
47
  react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
48
48
  react_1.default.createElement(hybrid_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
49
49
  default:
@@ -52,7 +52,7 @@ function Chip(_a) {
52
52
  react_1.default.createElement(hybrid_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
53
53
  ? 'ui_cpnt_chip_fill_icon_active_01'
54
54
  : 'ui_cpnt_chip_line_icon_02' }))),
55
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
55
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
56
56
  }
57
57
  };
58
58
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
package/dist/src/mobile/components/MainButton/MainButton.js CHANGED
@@ -98,7 +98,7 @@ function MainButton(_a) {
98
98
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
99
99
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
101
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
101
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
102
102
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
103
103
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
104
104
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
package/dist/src/mobile/components/ReactionButton/ReactionButton.js CHANGED
@@ -100,7 +100,7 @@ function ReactionButton(_a) {
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
101
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
102
102
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
103
- react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", btnMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
103
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
104
104
  }
105
105
  var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n display: flex;\n justify-content: center;\n padding: 0;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n display: flex;\n justify-content: center;\n padding: 0;\n"])));
106
106
  var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
package/dist/src/mobile/components/StatusBlock/StatusBlock.js CHANGED
@@ -37,7 +37,7 @@ function StatusBlock(_a) {
37
37
  small: 'body2Bold'
38
38
  };
39
39
  return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
40
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", btnMode: "use", colorTheme: "sysTextWhite" })));
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
41
41
  }
42
42
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n height: 48px;\n"], ["\n border-radius: 8px;\n height: 48px;\n"])));
43
43
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 8px;\n height: 40px;\n"], ["\n border-radius: 8px;\n height: 40px;\n"])));
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -68,7 +68,7 @@ function TextButton(_a) {
68
68
  xsmall: 'caption1Regular'
69
69
  };
70
70
  return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
71
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
71
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
72
72
  }
73
73
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n ", ";\n"], ["\n height: 48px;\n ", ";\n"])), function (_a) {
74
74
  var size = _a.size;
package/dist/src/mobile/components/TextLabel/TextLabel.d.ts CHANGED
@@ -10,7 +10,6 @@ export declare type TextLabelProps = {
10
10
  singleLineMode?: 'none' | 'use';
11
11
  ellipsisMode?: 'none' | 'use';
12
12
  lineLimit?: number;
13
- btnMode?: 'none' | 'use';
14
13
  };
15
14
  export declare type TextStyleProps = {
16
15
  textAlign?: 'left' | 'center' | 'right';
@@ -21,7 +20,6 @@ export declare type TextStyleProps = {
21
20
  singleLineMode?: 'none' | 'use';
22
21
  ellipsisMode?: 'none' | 'use';
23
22
  lineLimit?: number;
24
- btnMode?: 'none' | 'use';
25
23
  };
26
- declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit, btnMode }: TextLabelProps): JSX.Element;
24
+ declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
27
25
  export default TextLabel;