pds-dev-kit-web 1.4.28 → 1.4.31

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 (30) hide show
  1. package/dist/src/GlobalStyle.js +1 -1
  2. package/dist/src/common/assets/icons/line/PostColumn.d.ts +4 -0
  3. package/dist/src/common/assets/icons/line/PostColumn.js +34 -0
  4. package/dist/src/common/assets/icons/line/index.d.ts +1 -0
  5. package/dist/src/common/assets/icons/line/index.js +2 -0
  6. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  7. package/dist/src/common/styles/colorSet/index.d.ts +1 -0
  8. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  9. package/dist/src/desktop/components/ChatList/ChatTextField.js +1 -1
  10. package/dist/src/desktop/components/Chip/Chip.js +14 -14
  11. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +4 -4
  12. package/dist/src/desktop/components/Dropdown/Dropdown.js +12 -5
  13. package/dist/src/desktop/components/MainButton/MainButton.js +5 -5
  14. package/dist/src/desktop/components/Select/Select.js +4 -1
  15. package/dist/src/desktop/components/StatusBlock/StatusBlock.js +11 -5
  16. package/dist/src/desktop/components/TextButton/TextButton.js +5 -5
  17. package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +7 -7
  18. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +5 -5
  19. package/dist/src/mobile/components/ChatList/ChatTextField.js +1 -1
  20. package/dist/src/mobile/components/Chip/Chip.js +14 -14
  21. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +4 -4
  22. package/dist/src/mobile/components/Dropdown/Dropdown.js +12 -5
  23. package/dist/src/mobile/components/MainButton/MainButton.js +5 -5
  24. package/dist/src/mobile/components/Select/Select.js +4 -1
  25. package/dist/src/mobile/components/StatusBlock/StatusBlock.js +4 -4
  26. package/dist/src/mobile/components/TextButton/TextButton.js +4 -4
  27. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +7 -7
  28. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +5 -5
  29. package/package.json +1 -1
  30. package/release-note.md +3 -6
package/dist/src/GlobalStyle.js CHANGED
@@ -5,6 +5,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
5
5
  };
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  var styled_components_1 = require("styled-components");
8
- var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n html {\n height: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n width: 100%;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n height: 100%;\n margin: 0;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n width: 100%;\n }\n\n body::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n #root {\n height: 100%;\n width: 100%;\n }\n\n div, span, textarea, ul {\n font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n\n div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n input {\n font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n }\n\n a,\n [type='checkbox'],\n [type='radio'] {\n color: inherit;\n -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n text-decoration: none;\n }\n\n code {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n }\n\n button {\n cursor: pointer;\n font-family: inherit;\n outline: none;\n }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 1000px white inset !important;\n box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n html {\n height: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n width: 100%;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n height: 100%;\n margin: 0;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n width: 100%;\n }\n\n body::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n #root {\n height: 100%;\n width: 100%;\n }\n\n div, span, textarea, ul {\n font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n\n div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n input {\n font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n }\n\n a,\n [type='checkbox'],\n [type='radio'] {\n color: inherit;\n -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n text-decoration: none;\n }\n\n code {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n }\n\n button {\n cursor: pointer;\n font-family: inherit;\n outline: none;\n }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 1000px white inset !important;\n box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
8
+ var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n \n html {\n height: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n width: 100%;\n }\n\n body {\n font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n height: 100%;\n margin: 0;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n width: 100%;\n }\n\n body::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n #root {\n height: 100%;\n width: 100%;\n }\n\n div, span, textarea, ul {\n font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n\n div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n input {\n font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n }\n\n a,\n [type='checkbox'],\n [type='radio'] {\n color: inherit;\n -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n text-decoration: none;\n }\n\n code {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n }\n\n button {\n cursor: pointer;\n font-family: inherit;\n outline: none;\n }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 1000px white inset !important;\n box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n \n html {\n height: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n width: 100%;\n }\n\n body {\n font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n height: 100%;\n margin: 0;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n width: 100%;\n }\n\n body::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n #root {\n height: 100%;\n width: 100%;\n }\n\n div, span, textarea, ul {\n font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n\n div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n\n input {\n font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n }\n\n a,\n [type='checkbox'],\n [type='radio'] {\n color: inherit;\n -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n text-decoration: none;\n }\n\n code {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n }\n\n button {\n cursor: pointer;\n font-family: inherit;\n outline: none;\n }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 1000px white inset !important;\n box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
9
9
  exports.default = GlobalStyle;
10
10
  var templateObject_1;
package/dist/src/common/assets/icons/line/PostColumn.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import IconType from '../IconType';
3
+ declare const PostColumn: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default PostColumn;
package/dist/src/common/assets/icons/line/PostColumn.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var react_1 = __importDefault(require("react"));
29
+ var PostColumn = function (_a) {
30
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
+ return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
+ react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M18.5,2 C20.433,2 22,3.567 22,5.5 L22,5.5 L22,18.5 C22,20.433 20.433,22 18.5,22 L18.5,22 L5.5,22 C3.567,22 2,20.433 2,18.5 L2,18.5 L2,5.5 C2,3.567 3.567,2 5.5,2 L5.5,2 Z M18.5,3.5 L5.5,3.5 C4.397,3.5 3.5,4.397 3.5,5.5 L3.5,5.5 L3.5,18.5 C3.5,19.603 4.397,20.5 5.5,20.5 L5.5,20.5 L15.23,20.5 L14.1017582,18.8869552 L13.7979992,19.1907141 C13.6179939,19.3696967 13.3254853,19.3696967 13.1465028,19.1896914 L13.1465028,19.1896914 L11.9641952,18.0063611 C11.7841899,17.8263558 11.7841899,17.5348699 11.9641952,17.3548646 L11.9641952,17.3548646 L12.3968216,16.9222382 C10.7287043,15.8411836 8.58705028,14.9800219 7.50497295,14.4410288 C7.03655006,14.2078401 6.75529177,13.7118027 6.80233861,13.1912192 C7.05393693,10.4082963 6.36255293,8.70949628 5.97697339,7.99867989 L5.97697339,7.99867989 C5.93197206,7.92708687 5.90538037,7.87492624 5.87265213,7.82890216 C5.81435496,7.66628373 5.85321974,7.48423291 5.97697339,7.36047927 L5.97697339,7.36047927 L6.24186756,7.09660786 L10.649952,11.5046923 C10.4914246,11.9935703 10.6008596,12.5499503 10.9884847,12.9375754 C11.5397509,13.4888416 12.4346636,13.4888416 12.9859299,12.9375754 C13.5371961,12.3863091 13.5371961,11.4924192 12.9859299,10.9411529 C12.5972821,10.5525051 12.0419248,10.4440928 11.5530467,10.6015975 L11.5530467,10.6015975 L7.14496234,6.19351307 L7.41087927,5.92759615 C7.53463291,5.8038425 7.71668373,5.76497772 7.88032492,5.82327489 C7.92532624,5.85600313 7.97748687,5.88157206 8.04294334,5.9214596 L8.04294334,5.9214596 C8.76091904,6.31317569 10.4586963,7.00558245 13.2416192,6.75500689 C13.7622027,6.70796005 14.2582401,6.99024109 14.4914288,7.45866398 C15.0293992,8.54074131 15.8844243,10.6895546 16.9624106,12.361763 L16.9624106,12.361763 L17.4062874,11.9168635 C17.5862927,11.7378809 17.8788013,11.7378809 18.0577838,11.9178863 L18.0577838,11.9178863 L19.2411141,13.1012166 C19.4200967,13.2812219 19.4200967,13.5727077 19.2400914,13.752713 L19.2400914,13.752713 L18.9404235,14.052381 L20.5,15.146 L20.5,5.5 C20.5,4.44713636 19.6826921,3.58197107 18.6490673,3.50549502 L18.5,3.5 Z" })));
33
+ };
34
+ exports.default = PostColumn;
package/dist/src/common/assets/icons/line/index.d.ts CHANGED
@@ -79,6 +79,7 @@ declare const lineIcons: {
79
79
  readonly ic_plus: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
80
80
  readonly ic_plus_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
81
81
  readonly ic_post_blog: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
82
+ readonly ic_post_column: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
82
83
  readonly ic_post_community_p: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
83
84
  readonly ic_post_free: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
84
85
  readonly ic_post_inquiry: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
package/dist/src/common/assets/icons/line/index.js CHANGED
@@ -82,6 +82,7 @@ var Plan_1 = __importDefault(require("./Plan"));
82
82
  var Plus_1 = __importDefault(require("./Plus"));
83
83
  var PlusCircle_1 = __importDefault(require("./PlusCircle"));
84
84
  var PostBlog_1 = __importDefault(require("./PostBlog"));
85
+ var PostColumn_1 = __importDefault(require("./PostColumn"));
85
86
  var PostCommunityP_1 = __importDefault(require("./PostCommunityP"));
86
87
  var PostFree_1 = __importDefault(require("./PostFree"));
87
88
  var PostInquiry_1 = __importDefault(require("./PostInquiry"));
@@ -224,6 +225,7 @@ var lineIcons = {
224
225
  ic_plus: Plus_1.default,
225
226
  ic_plus_circle: PlusCircle_1.default,
226
227
  ic_post_blog: PostBlog_1.default,
228
+ ic_post_column: PostColumn_1.default,
227
229
  ic_post_community_p: PostCommunityP_1.default,
228
230
  ic_post_free: PostFree_1.default,
229
231
  ic_post_inquiry: PostInquiry_1.default,
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -526,5 +526,6 @@
526
526
  "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00",
527
527
  "ui_48": "sys_text_social_login_01",
528
528
  "ui_49": "sys_text_social_login_02",
529
- "ui_50": "sys_text_white"
529
+ "ui_50": "sys_text_white",
530
+ "ui_51": "sys_background_dimmed_65"
530
531
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -946,6 +946,7 @@ declare const colorSet: {
946
946
  ui_48: string;
947
947
  ui_49: string;
948
948
  ui_50: string;
949
+ ui_51: string;
949
950
  };
950
951
  };
951
952
  export default colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -527,4 +527,5 @@ export interface UITheme {
527
527
  ui_48: string;
528
528
  ui_49: string;
529
529
  ui_50: string;
530
+ ui_51: string;
530
531
  }
package/dist/src/desktop/components/ChatList/ChatTextField.js CHANGED
@@ -24,7 +24,7 @@ function ChatTextField(_a) {
24
24
  react_1.default.createElement(S_FooterContentWrapper, null,
25
25
  react_1.default.createElement(S_TextFieldWrapper, null,
26
26
  react_1.default.createElement(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState })),
27
- react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_paper_plane", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_icon_sys_brandprimary' : 'ui_cpnt_button_icon_disabled', iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
27
+ react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_paper_plane", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
28
28
  }
29
29
  var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
30
30
  var theme = _a.theme;
package/dist/src/desktop/components/Chip/Chip.js CHANGED
@@ -60,43 +60,43 @@ function Chip(_a) {
60
60
  !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
61
61
  react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
62
62
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
63
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
63
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
64
64
  isActive && (react_1.default.createElement(react_1.default.Fragment, null,
65
65
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
66
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
67
67
  case 'information':
68
68
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
69
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
69
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
70
70
  case 'label':
71
71
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
72
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
72
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
73
73
  case 'time':
74
74
  return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
75
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
75
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
76
76
  case 'removable':
77
77
  return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
78
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
78
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
79
79
  react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
80
80
  react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
81
81
  default:
82
82
  return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
83
83
  filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
84
84
  react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
85
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
85
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
86
86
  }
87
87
  };
88
88
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
89
89
  }
90
90
  exports.default = Chip;
91
- var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"])), function (_a) {
91
+ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 20px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"], ["\n border-radius: 20px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"])), function (_a) {
92
92
  var theme = _a.theme, isActive = _a.isActive;
93
93
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
94
94
  }, function (_a) {
95
95
  var theme = _a.theme;
96
- return theme.spacing.spacingC;
96
+ return theme.spacing.spacingD;
97
97
  }, function (_a) {
98
98
  var theme = _a.theme;
99
- return theme.spacing.spacingC;
99
+ return theme.spacing.spacingD;
100
100
  }, function (_a) {
101
101
  var theme = _a.theme, isActive = _a.isActive;
102
102
  return isActive ? '' : theme.ui_cpnt_chip_fill_base_inactive;
@@ -104,7 +104,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
104
104
  var theme = _a.theme, isActive = _a.isActive;
105
105
  return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
106
106
  });
107
- var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
107
+ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
108
108
  var theme = _a.theme;
109
109
  return theme.ui_cpnt_chip_fill_base_inactive;
110
110
  }, function (_a) {
@@ -114,7 +114,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
114
114
  var theme = _a.theme;
115
115
  return theme.spacing.spacingC;
116
116
  });
117
- var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
117
+ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
118
118
  var theme = _a.theme;
119
119
  return theme.ui_cpnt_chip_fill_base_inactive;
120
120
  }, function (_a) {
@@ -128,7 +128,7 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templa
128
128
  var theme = _a.theme;
129
129
  return theme.spacing.spacingB;
130
130
  });
131
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
131
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
132
132
  var theme = _a.theme, isActive = _a.isActive;
133
133
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
134
134
  }, function (_a) {
@@ -142,14 +142,14 @@ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (t
142
142
  var theme = _a.theme;
143
143
  return theme.spacing.spacingA;
144
144
  });
145
- var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
145
+ var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
146
146
  var theme = _a.theme;
147
147
  return theme.ui_cpnt_chip_line_border_01;
148
148
  }, function (_a) {
149
149
  var theme = _a.theme;
150
150
  return theme.spacing.spacingB;
151
151
  });
152
- var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
152
+ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
153
153
  var theme = _a.theme;
154
154
  return theme.ui_cpnt_chip_base_playtime;
155
155
  }, function (_a) {
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -53,17 +53,17 @@ function ContextMenuItem(_a) {
53
53
  textColorTheme = 'sysTextTertiary';
54
54
  }
55
55
  return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
56
- react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, lineLimit: 1, ellipsisMode: "use", wordBreak: "break_all" })));
56
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
57
57
  }
58
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n"], ["\n height: 48px;\n padding: 0 ", ";\n"])), function (_a) {
58
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
59
59
  var theme = _a.theme;
60
60
  return theme.spacing.spacingE;
61
61
  });
62
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n padding: 0 ", ";\n"], ["\n height: 40px;\n padding: 0 ", ";\n"])), function (_a) {
62
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n padding: 0 ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n height: 40px;\n padding: 0 ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])), function (_a) {
63
63
  var theme = _a.theme;
64
64
  return theme.spacing.spacingD;
65
65
  });
66
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n padding: 0 ", ";\n"], ["\n height: 32px;\n padding: 0 ", ";\n"])), function (_a) {
66
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n padding: 0 ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n height: 32px;\n padding: 0 ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
67
67
  var theme = _a.theme;
68
68
  return theme.spacing.spacingD;
69
69
  });
package/dist/src/desktop/components/Dropdown/Dropdown.js CHANGED
@@ -150,26 +150,33 @@ function Dropdown(_a) {
150
150
  }, [size, maxHeightItemNumber]);
151
151
  return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
152
152
  react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
153
- react_1.default.createElement(S_TextLabel, null,
154
- react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
153
+ react_1.default.createElement(S_TextLabel, { size: size },
154
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })),
155
155
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
156
156
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
157
157
  isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
158
158
  react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight, customWidth: customWidth }, valueArray.map(function (el) { return (react_1.default.createElement(react_1.Fragment, { key: el.value },
159
159
  react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state }))); }))))));
160
160
  }
161
- var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
161
+ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
162
162
  var theme = _a.theme;
163
163
  return theme.spacing.spacingD;
164
164
  }, function (_a) {
165
165
  var theme = _a.theme;
166
166
  return theme.spacing.spacingB;
167
+ }, function (_a) {
168
+ var size = _a.size;
169
+ return size &&
170
+ {
171
+ large: large,
172
+ small: small
173
+ }[size];
167
174
  });
168
- var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 48px;\n width: ", ";\n"], ["\n height: 48px;\n width: ", ";\n"])), function (_a) {
175
+ var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
169
176
  var responsiveMode = _a.responsiveMode;
170
177
  return (responsiveMode === 'use' ? '100%' : '432px');
171
178
  });
172
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n"], ["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n"])), function (_a) {
179
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
173
180
  var responsiveMode = _a.responsiveMode;
174
181
  return (responsiveMode === 'use' ? '100%' : '188px');
175
182
  });
package/dist/src/desktop/components/MainButton/MainButton.js CHANGED
@@ -117,12 +117,12 @@ function MainButton(_a) {
117
117
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
118
118
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
119
119
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
120
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor() }),
120
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
121
121
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
122
122
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
123
123
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
124
124
  }
125
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"])), function (_a) {
125
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
126
126
  var theme = _a.theme;
127
127
  return theme.spacing.spacingE;
128
128
  }, function (_a) {
@@ -132,21 +132,21 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
132
132
  var size = _a.size;
133
133
  return size === 'rlarge' && 'width: 100%';
134
134
  });
135
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
135
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])), function (_a) {
136
136
  var theme = _a.theme;
137
137
  return theme.spacing.spacingE;
138
138
  }, function (_a) {
139
139
  var shapeType = _a.shapeType;
140
140
  return shapeType === 'round' && 'border-radius: 14px;';
141
141
  });
142
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
142
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
143
143
  var theme = _a.theme;
144
144
  return theme.spacing.spacingD;
145
145
  }, function (_a) {
146
146
  var shapeType = _a.shapeType;
147
147
  return shapeType === 'round' && 'border-radius: 10px;';
148
148
  });
149
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
149
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
150
150
  var theme = _a.theme;
151
151
  return theme.spacing.spacingD;
152
152
  }, function (_a) {
package/dist/src/desktop/components/Select/Select.js CHANGED
@@ -112,7 +112,7 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
112
112
  var theme = _a.theme;
113
113
  return theme.spacing.spacingD;
114
114
  });
115
- var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n cursor: pointer;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n cursor: pointer;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
115
+ var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n cursor: pointer;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n cursor: pointer;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
116
116
  var theme = _a.theme;
117
117
  return theme.ui_cpnt_select_base_normal;
118
118
  }, function (_a) {
@@ -130,6 +130,9 @@ var S_Select = styled_components_1.default.select(templateObject_8 || (templateO
130
130
  }, function (_a) {
131
131
  var theme = _a.theme;
132
132
  return theme.spacing.spacingD;
133
+ }, function (_a) {
134
+ var theme = _a.theme;
135
+ return theme.spacing.spacingF;
133
136
  }, function (_a) {
134
137
  var theme = _a.theme;
135
138
  return theme.ui_cpnt_select_base_disabled;
package/dist/src/desktop/components/StatusBlock/StatusBlock.js CHANGED
@@ -37,11 +37,11 @@ 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", singleLineMode: "use", colorTheme: "sysTextWhite" })));
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
41
41
  }
42
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n"], ["\n border-radius: 14px;\n height: 48px;\n"])));
43
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
44
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
42
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])));
43
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
44
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
45
45
  var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
46
46
  var theme = _a.theme;
47
47
  return theme.ui_cpnt_statusblock_basic;
@@ -66,7 +66,13 @@ var error = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 =
66
66
  var theme = _a.theme;
67
67
  return theme.ui_cpnt_statusblock_error;
68
68
  });
69
- var S_StatusBlock = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n width: ", ";\n\n ", "\n ", ";\n\n & > div {\n width: 100%;\n }\n"], ["\n align-items: center;\n display: flex;\n width: ", ";\n\n ", "\n ", ";\n\n & > div {\n width: 100%;\n }\n"])), function (_a) {
69
+ var S_StatusBlock = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n\n ", "\n ", ";\n\n & > div {\n width: 100%;\n }\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n\n ", "\n ", ";\n\n & > div {\n width: 100%;\n }\n"])), function (_a) {
70
+ var theme = _a.theme;
71
+ return theme.spacing.spacingD;
72
+ }, function (_a) {
73
+ var theme = _a.theme;
74
+ return theme.spacing.spacingD;
75
+ }, function (_a) {
70
76
  var $width = _a.$width;
71
77
  return ($width === 'responsive' ? '100%' : $width + "px");
72
78
  }, function (_a) {
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -72,15 +72,15 @@ function TextButton(_a) {
72
72
  }
73
73
  };
74
74
  return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
75
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
75
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
76
76
  }
77
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n"])), function (_a) {
77
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
78
78
  var size = _a.size;
79
79
  return size === 'rlarge' && 'width: 100%';
80
80
  });
81
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
82
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
83
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n"], ["\n border-radius: 8px;\n height: 24px;\n"])));
81
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
82
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
83
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
84
84
  var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
85
85
  var state = _a.state;
86
86
  return (state === 'normal' ? 'pointer' : 'default');
package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js CHANGED
@@ -84,12 +84,12 @@ function UploadMainButton(_a) {
84
84
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
85
85
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
86
86
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
87
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor() }),
87
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
88
88
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
89
89
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
90
90
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
91
91
  }
92
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"])), function (_a) {
92
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
93
93
  var theme = _a.theme;
94
94
  return theme.spacing.spacingE;
95
95
  }, function (_a) {
@@ -99,21 +99,21 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
99
99
  var size = _a.size;
100
100
  return size === 'rlarge' && 'width: 100%';
101
101
  });
102
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
102
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
104
  return theme.spacing.spacingE;
105
105
  }, function (_a) {
106
106
  var shapeType = _a.shapeType;
107
107
  return shapeType === 'round' && 'border-radius: 14px;';
108
108
  });
109
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
109
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
110
110
  var theme = _a.theme;
111
111
  return theme.spacing.spacingD;
112
112
  }, function (_a) {
113
113
  var shapeType = _a.shapeType;
114
114
  return shapeType === 'round' && 'border-radius: 10px;';
115
115
  });
116
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
116
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
117
117
  var theme = _a.theme;
118
118
  return theme.spacing.spacingD;
119
119
  }, function (_a) {
@@ -193,7 +193,7 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
193
193
  var theme = _a.theme;
194
194
  return theme.ui_cpnt_button_fill_base_disabled;
195
195
  });
196
- var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
196
+ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
197
197
  var theme = _a.theme;
198
198
  return theme.ui_cpnt_button_fill_base_primary;
199
199
  }, function (_a) {
@@ -210,7 +210,7 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
210
210
  var theme = _a.theme;
211
211
  return theme.ui_cpnt_button_line_base_hover;
212
212
  });
213
- var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
213
+ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
214
214
  var theme = _a.theme;
215
215
  return theme.ui_cpnt_button_line_base_hover;
216
216
  }, function (_a) {
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -51,15 +51,15 @@ function UploadTextButton(_a) {
51
51
  };
52
52
  return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
53
53
  react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
54
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
54
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
55
55
  }
56
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n"], ["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n"])), function (_a) {
56
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
57
57
  var size = _a.size;
58
58
  return size === 'rlarge' && '100%';
59
59
  });
60
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
61
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
62
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n"], ["\n border-radius: 8px;\n height: 24px;\n"])));
60
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
61
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
62
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
63
63
  var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
64
64
  var disabled = _a.disabled;
65
65
  return (disabled ? 'default' : 'pointer');
package/dist/src/mobile/components/ChatList/ChatTextField.js CHANGED
@@ -24,7 +24,7 @@ function ChatTextField(_a) {
24
24
  react_1.default.createElement(S_FooterContentWrapper, null,
25
25
  react_1.default.createElement(S_TextFieldWrapper, null,
26
26
  react_1.default.createElement(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState })),
27
- react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_paper_plane", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_icon_sys_brandprimary' : 'ui_cpnt_button_icon_disabled', iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
27
+ react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_paper_plane", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
28
28
  }
29
29
  var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
30
30
  var theme = _a.theme;
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -60,48 +60,48 @@ function Chip(_a) {
60
60
  !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
61
61
  react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
62
62
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
63
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
63
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
64
64
  isActive && (react_1.default.createElement(react_1.default.Fragment, null,
65
65
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
66
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
67
67
  case 'information':
68
68
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
69
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
69
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
70
70
  case 'label':
71
71
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
72
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
72
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
73
73
  case 'time':
74
74
  return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
75
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
75
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
76
76
  case 'removable':
77
77
  return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
78
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
78
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
79
79
  react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
80
80
  react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
81
81
  default:
82
82
  return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
83
83
  filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
84
84
  react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
85
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
85
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
86
86
  }
87
87
  };
88
88
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
89
89
  }
90
90
  exports.default = Chip;
91
- var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n ", ";\n"])), function (_a) {
91
+ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 20px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"], ["\n border-radius: 20px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"])), function (_a) {
92
92
  var theme = _a.theme, isActive = _a.isActive;
93
93
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
94
94
  }, function (_a) {
95
95
  var theme = _a.theme;
96
- return theme.spacing.spacingC;
96
+ return theme.spacing.spacingD;
97
97
  }, function (_a) {
98
98
  var theme = _a.theme;
99
- return theme.spacing.spacingC;
99
+ return theme.spacing.spacingD;
100
100
  }, function (_a) {
101
101
  var theme = _a.theme, isActive = _a.isActive;
102
102
  return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
103
103
  });
104
- var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
104
+ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
105
105
  var theme = _a.theme;
106
106
  return theme.ui_cpnt_chip_fill_base_inactive;
107
107
  }, function (_a) {
@@ -111,7 +111,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
111
111
  var theme = _a.theme;
112
112
  return theme.spacing.spacingC;
113
113
  });
114
- var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
114
+ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
115
115
  var theme = _a.theme;
116
116
  return theme.ui_cpnt_chip_fill_base_inactive;
117
117
  }, function (_a) {
@@ -125,7 +125,7 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templa
125
125
  var theme = _a.theme;
126
126
  return theme.spacing.spacingB;
127
127
  });
128
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
128
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
129
129
  var theme = _a.theme, isActive = _a.isActive;
130
130
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
131
131
  }, function (_a) {
@@ -139,14 +139,14 @@ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (t
139
139
  var theme = _a.theme;
140
140
  return theme.spacing.spacingA;
141
141
  });
142
- var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
142
+ var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
143
143
  var theme = _a.theme;
144
144
  return theme.ui_cpnt_chip_line_border_01;
145
145
  }, function (_a) {
146
146
  var theme = _a.theme;
147
147
  return theme.spacing.spacingB;
148
148
  });
149
- var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
149
+ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
150
150
  var theme = _a.theme;
151
151
  return theme.ui_cpnt_chip_base_playtime;
152
152
  }, function (_a) {
package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -53,17 +53,17 @@ function ContextMenuItem(_a) {
53
53
  textColorTheme = 'sysTextTertiary';
54
54
  }
55
55
  return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
56
- react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, lineLimit: 1, ellipsisMode: "use", wordBreak: "break_all" })));
56
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
57
57
  }
58
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n"], ["\n height: 48px;\n padding: 0 ", ";\n"])), function (_a) {
58
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
59
59
  var theme = _a.theme;
60
60
  return theme.spacing.spacingE;
61
61
  });
62
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n padding: 0 ", ";\n"], ["\n height: 40px;\n padding: 0 ", ";\n"])), function (_a) {
62
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n padding: 0 ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n height: 40px;\n padding: 0 ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])), function (_a) {
63
63
  var theme = _a.theme;
64
64
  return theme.spacing.spacingD;
65
65
  });
66
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n padding: 0 ", ";\n"], ["\n height: 32px;\n padding: 0 ", ";\n"])), function (_a) {
66
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n padding: 0 ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n height: 32px;\n padding: 0 ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
67
67
  var theme = _a.theme;
68
68
  return theme.spacing.spacingD;
69
69
  });
package/dist/src/mobile/components/Dropdown/Dropdown.js CHANGED
@@ -150,26 +150,33 @@ function Dropdown(_a) {
150
150
  }, [size, maxHeightItemNumber]);
151
151
  return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
152
152
  react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
153
- react_1.default.createElement(S_TextLabel, null,
154
- react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
153
+ react_1.default.createElement(S_TextLabel, { size: size },
154
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })),
155
155
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
156
156
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
157
157
  isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
158
158
  react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight, customWidth: customWidth }, valueArray.map(function (el) { return (react_1.default.createElement(react_1.Fragment, { key: el.value },
159
159
  react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state }))); }))))));
160
160
  }
161
- var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
161
+ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
162
162
  var theme = _a.theme;
163
163
  return theme.spacing.spacingD;
164
164
  }, function (_a) {
165
165
  var theme = _a.theme;
166
166
  return theme.spacing.spacingB;
167
+ }, function (_a) {
168
+ var size = _a.size;
169
+ return size &&
170
+ {
171
+ large: large,
172
+ small: small
173
+ }[size];
167
174
  });
168
- var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 48px;\n width: ", ";\n"], ["\n height: 48px;\n width: ", ";\n"])), function (_a) {
175
+ var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
169
176
  var responsiveMode = _a.responsiveMode;
170
177
  return (responsiveMode === 'use' ? '100%' : '432px');
171
178
  });
172
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n"], ["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n"])), function (_a) {
179
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n width: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
173
180
  var responsiveMode = _a.responsiveMode;
174
181
  return (responsiveMode === 'use' ? '100%' : '188px');
175
182
  });
package/dist/src/mobile/components/MainButton/MainButton.js CHANGED
@@ -117,12 +117,12 @@ function MainButton(_a) {
117
117
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
118
118
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
119
119
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
120
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor() }),
120
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
121
121
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
122
122
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
123
123
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
124
124
  }
125
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"])), function (_a) {
125
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
126
126
  var theme = _a.theme;
127
127
  return theme.spacing.spacingE;
128
128
  }, function (_a) {
@@ -132,21 +132,21 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
132
132
  var size = _a.size;
133
133
  return size === 'rlarge' && 'width: 100%';
134
134
  });
135
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
135
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])), function (_a) {
136
136
  var theme = _a.theme;
137
137
  return theme.spacing.spacingE;
138
138
  }, function (_a) {
139
139
  var shapeType = _a.shapeType;
140
140
  return shapeType === 'round' && 'border-radius: 14px;';
141
141
  });
142
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
142
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
143
143
  var theme = _a.theme;
144
144
  return theme.spacing.spacingD;
145
145
  }, function (_a) {
146
146
  var shapeType = _a.shapeType;
147
147
  return shapeType === 'round' && 'border-radius: 10px;';
148
148
  });
149
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
149
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
150
150
  var theme = _a.theme;
151
151
  return theme.spacing.spacingD;
152
152
  }, function (_a) {
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -108,7 +108,7 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
108
108
  var theme = _a.theme;
109
109
  return theme.spacing.spacingD;
110
110
  });
111
- var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
111
+ var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
112
112
  var theme = _a.theme;
113
113
  return theme.ui_cpnt_select_base_normal;
114
114
  }, function (_a) {
@@ -126,6 +126,9 @@ var S_Select = styled_components_1.default.select(templateObject_8 || (templateO
126
126
  }, function (_a) {
127
127
  var theme = _a.theme;
128
128
  return theme.spacing.spacingD;
129
+ }, function (_a) {
130
+ var theme = _a.theme;
131
+ return theme.spacing.spacingF;
129
132
  }, function (_a) {
130
133
  var theme = _a.theme;
131
134
  return theme.ui_cpnt_select_base_disabled;
package/dist/src/mobile/components/StatusBlock/StatusBlock.js CHANGED
@@ -37,11 +37,11 @@ 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", singleLineMode: "use", colorTheme: "sysTextWhite" })));
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
41
41
  }
42
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n"], ["\n border-radius: 14px;\n height: 48px;\n"])));
43
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
44
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
42
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])));
43
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
44
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
45
45
  var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
46
46
  var theme = _a.theme;
47
47
  return theme.ui_cpnt_statusblock_basic;
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -74,13 +74,13 @@ function TextButton(_a) {
74
74
  return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }),
75
75
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
76
76
  }
77
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n"])), function (_a) {
77
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
78
78
  var size = _a.size;
79
79
  return size === 'rlarge' && 'width: 100%';
80
80
  });
81
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
82
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
83
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n"], ["\n border-radius: 8px;\n height: 24px;\n"])));
81
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
82
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
83
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
84
84
  var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
85
85
  var theme = _a.theme, colorTheme = _a.colorTheme;
86
86
  return colorTheme === 'white'
package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js CHANGED
@@ -84,12 +84,12 @@ function UploadMainButton(_a) {
84
84
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
85
85
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
86
86
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
87
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor() }),
87
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
88
88
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
89
89
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
90
90
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
91
91
  }
92
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n"])), function (_a) {
92
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n min-width: 96px;\n padding: 0 ", ";\n ", "\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
93
93
  var theme = _a.theme;
94
94
  return theme.spacing.spacingE;
95
95
  }, function (_a) {
@@ -99,21 +99,21 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
99
99
  var size = _a.size;
100
100
  return size === 'rlarge' && 'width: 100%';
101
101
  });
102
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
102
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n height: 40px;\n min-width: 64px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
104
  return theme.spacing.spacingE;
105
105
  }, function (_a) {
106
106
  var shapeType = _a.shapeType;
107
107
  return shapeType === 'round' && 'border-radius: 14px;';
108
108
  });
109
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
109
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n height: 32px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
110
110
  var theme = _a.theme;
111
111
  return theme.spacing.spacingD;
112
112
  }, function (_a) {
113
113
  var shapeType = _a.shapeType;
114
114
  return shapeType === 'round' && 'border-radius: 10px;';
115
115
  });
116
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n"])), function (_a) {
116
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n height: 24px;\n min-width: 48px;\n padding: 0 ", ";\n ", "\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
117
117
  var theme = _a.theme;
118
118
  return theme.spacing.spacingD;
119
119
  }, function (_a) {
@@ -184,7 +184,7 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
184
184
  var theme = _a.theme;
185
185
  return theme.ui_cpnt_button_fill_base_disabled;
186
186
  });
187
- var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
187
+ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
188
188
  var theme = _a.theme;
189
189
  return theme.ui_cpnt_button_fill_base_primary;
190
190
  }, function (_a) {
@@ -198,7 +198,7 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
198
198
  var theme = _a.theme;
199
199
  return theme.ui_cpnt_button_line_base_hover;
200
200
  });
201
- var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
201
+ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
202
202
  var theme = _a.theme;
203
203
  return theme.ui_cpnt_button_line_base_hover;
204
204
  }, function (_a) {
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -51,15 +51,15 @@ function UploadTextButton(_a) {
51
51
  };
52
52
  return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
53
53
  react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
54
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
54
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
55
55
  }
56
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n"], ["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n"])), function (_a) {
56
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
57
57
  var size = _a.size;
58
58
  return size === 'rlarge' && '100%';
59
59
  });
60
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
61
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
62
- var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n"], ["\n border-radius: 8px;\n height: 24px;\n"])));
60
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
61
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
62
+ var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
63
63
  var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
64
64
  var theme = _a.theme;
65
65
  return theme.spacing.spacingB;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.28",
3
+ "version": "1.4.31",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,9 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.28]
2
+ ## [v1.4.31]
3
3
 
4
4
  ### Component
5
- * ChatList
6
- * onClickHeaderIBtn1 prop 추가
7
-
8
- ### Layout
9
- * WSG_5 생성
5
+ * Chip
6
+ * DisplayType가 category_choice일때 높이와 내부간격 수정