pds-dev-kit-web 1.8.7 → 1.8.9

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 (75) hide show
  1. package/dist/src/common/assets/icons/fill/ArrowDown.d.ts +4 -0
  2. package/dist/src/common/assets/icons/fill/ArrowDown.js +34 -0
  3. package/dist/src/common/assets/icons/fill/ArrowUp.d.ts +4 -0
  4. package/dist/src/common/assets/icons/fill/ArrowUp.js +34 -0
  5. package/dist/src/common/assets/icons/fill/ToggleDown.d.ts +4 -0
  6. package/dist/src/common/assets/icons/fill/ToggleDown.js +36 -0
  7. package/dist/src/common/assets/icons/fill/ToggleUp.d.ts +4 -0
  8. package/dist/src/common/assets/icons/fill/ToggleUp.js +36 -0
  9. package/dist/src/common/assets/icons/fill/index.d.ts +4 -0
  10. package/dist/src/common/assets/icons/fill/index.js +8 -0
  11. package/dist/src/common/assets/icons/line/Confetti.d.ts +4 -0
  12. package/dist/src/common/assets/icons/line/Confetti.js +36 -0
  13. package/dist/src/common/assets/icons/line/DeviceApp.d.ts +4 -0
  14. package/dist/src/common/assets/icons/line/DeviceApp.js +36 -0
  15. package/dist/src/common/assets/icons/line/DeviceDesktop.d.ts +4 -0
  16. package/dist/src/common/assets/icons/line/DeviceDesktop.js +36 -0
  17. package/dist/src/common/assets/icons/line/DeviceMobile.d.ts +4 -0
  18. package/dist/src/common/assets/icons/line/DeviceMobile.js +34 -0
  19. package/dist/src/common/assets/icons/line/EditorLeftSide.d.ts +4 -0
  20. package/dist/src/common/assets/icons/line/EditorLeftSide.js +34 -0
  21. package/dist/src/common/assets/icons/line/EditorRightSide.d.ts +4 -0
  22. package/dist/src/common/assets/icons/line/EditorRightSide.js +34 -0
  23. package/dist/src/common/assets/icons/line/Mail.d.ts +4 -0
  24. package/dist/src/common/assets/icons/line/Mail.js +36 -0
  25. package/dist/src/common/assets/icons/line/News.d.ts +4 -0
  26. package/dist/src/common/assets/icons/line/News.js +36 -0
  27. package/dist/src/common/assets/icons/line/Rocket.d.ts +4 -0
  28. package/dist/src/common/assets/icons/line/Rocket.js +36 -0
  29. package/dist/src/common/assets/icons/line/VideoGuide.d.ts +4 -0
  30. package/dist/src/common/assets/icons/line/VideoGuide.js +36 -0
  31. package/dist/src/common/assets/icons/line/index.d.ts +10 -0
  32. package/dist/src/common/assets/icons/line/index.js +20 -0
  33. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +10 -1
  34. package/dist/src/common/styles/colorSet/PaletteColor_light.json +10 -1
  35. package/dist/src/common/styles/colorSet/SemanticColor.json +7 -1
  36. package/dist/src/common/styles/colorSet/UIColor.json +25 -1
  37. package/dist/src/common/styles/colorSet/index.d.ts +297 -249
  38. package/dist/src/common/styles/colorSet/index.js +3 -3
  39. package/dist/src/common/styles/colorSet/ui-type.d.ts +24 -0
  40. package/dist/src/common/styles/index.d.ts +4 -0
  41. package/dist/src/common/styles/theme.d.ts +4 -0
  42. package/dist/src/common/styles/theme.js +4 -0
  43. package/dist/src/common/types/styled-components.d.ts +4 -0
  44. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
  45. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js +5 -4
  46. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
  47. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
  48. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +4 -4
  49. package/dist/src/desktop/components/TextLabel/TextLabel.js +56 -40
  50. package/dist/src/hybrid/components/Icon/Icon.d.ts +1 -1
  51. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
  52. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.js +5 -4
  53. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
  54. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
  55. package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +4 -4
  56. package/dist/src/mobile/components/TextLabel/TextLabel.js +52 -36
  57. package/dist/storybook-static/{0.1e64cc00.iframe.bundle.d.ts → 0.73af3e66.iframe.bundle.d.ts} +0 -0
  58. package/dist/storybook-static/{0.1e64cc00.iframe.bundle.js → 0.73af3e66.iframe.bundle.js} +8 -8
  59. package/dist/storybook-static/{4.08a6743e.iframe.bundle.d.ts → 4.d7ecdbf4.iframe.bundle.d.ts} +0 -0
  60. package/dist/storybook-static/{4.08a6743e.iframe.bundle.js → 4.d7ecdbf4.iframe.bundle.js} +71 -71
  61. package/dist/storybook-static/{5.fd119510.iframe.bundle.d.ts → 5.dc1e4c72.iframe.bundle.d.ts} +0 -0
  62. package/dist/storybook-static/{5.fd119510.iframe.bundle.js → 5.dc1e4c72.iframe.bundle.js} +12 -12
  63. package/dist/storybook-static/{6.ed855029.iframe.bundle.d.ts → 6.e668ed7b.iframe.bundle.d.ts} +0 -0
  64. package/dist/storybook-static/{6.ed855029.iframe.bundle.js → 6.e668ed7b.iframe.bundle.js} +6 -6
  65. package/dist/storybook-static/{7.acdfc1e4.iframe.bundle.d.ts → 7.9af8f518.iframe.bundle.d.ts} +0 -0
  66. package/dist/storybook-static/{7.acdfc1e4.iframe.bundle.js → 7.9af8f518.iframe.bundle.js} +3 -3
  67. package/dist/storybook-static/main.747cc139.iframe.bundle.d.ts +3141 -0
  68. package/dist/storybook-static/{main.3a848f92.iframe.bundle.js → main.747cc139.iframe.bundle.js} +2153 -1790
  69. package/dist/storybook-static/{runtime~main.c94cafde.iframe.bundle.d.ts → runtime~main.1b62987c.iframe.bundle.d.ts} +0 -0
  70. package/dist/storybook-static/{runtime~main.c94cafde.iframe.bundle.js → runtime~main.1b62987c.iframe.bundle.js} +1 -1
  71. package/dist/storybook-static/{vendors~main.6ff7334c.iframe.bundle.d.ts → vendors~main.4e754259.iframe.bundle.d.ts} +0 -0
  72. package/dist/storybook-static/{vendors~main.6ff7334c.iframe.bundle.js → vendors~main.4e754259.iframe.bundle.js} +590 -590
  73. package/package.json +1 -1
  74. package/release-note.md +26 -9
  75. package/dist/storybook-static/main.3a848f92.iframe.bundle.d.ts +0 -1124
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -62,7 +62,17 @@ var headingBold = (0, styled_components_1.css)(templateObject_2 || (templateObje
62
62
  var theme = _a.theme;
63
63
  return theme.fontWeight.bold;
64
64
  });
65
- var leadParaBold = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
65
+ var wizardPageTitleBold = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
66
+ var theme = _a.theme;
67
+ return theme.desktopFontSize.wizardPageTitle;
68
+ }, function (_a) {
69
+ var theme = _a.theme;
70
+ return theme.desktopLineHeight.wizardPageTitle;
71
+ }, function (_a) {
72
+ var theme = _a.theme;
73
+ return theme.fontWeight.bold;
74
+ });
75
+ var leadParaBold = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
66
76
  var theme = _a.theme;
67
77
  return theme.desktopFontSize.leadParagraph;
68
78
  }, function (_a) {
@@ -72,7 +82,7 @@ var leadParaBold = (0, styled_components_1.css)(templateObject_3 || (templateObj
72
82
  var theme = _a.theme;
73
83
  return theme.fontWeight.bold;
74
84
  });
75
- var leadParaRegular = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
85
+ var leadParaRegular = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
76
86
  var theme = _a.theme;
77
87
  return theme.desktopFontSize.leadParagraph;
78
88
  }, function (_a) {
@@ -82,7 +92,7 @@ var leadParaRegular = (0, styled_components_1.css)(templateObject_4 || (template
82
92
  var theme = _a.theme;
83
93
  return theme.fontWeight.normal;
84
94
  });
85
- var subTitleBold = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
95
+ var subTitleBold = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
86
96
  var theme = _a.theme;
87
97
  return theme.desktopFontSize.subtitle;
88
98
  }, function (_a) {
@@ -92,7 +102,7 @@ var subTitleBold = (0, styled_components_1.css)(templateObject_5 || (templateObj
92
102
  var theme = _a.theme;
93
103
  return theme.fontWeight.bold;
94
104
  });
95
- var subTitleRegular = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
105
+ var subTitleRegular = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
96
106
  var theme = _a.theme;
97
107
  return theme.desktopFontSize.subtitle;
98
108
  }, function (_a) {
@@ -102,7 +112,7 @@ var subTitleRegular = (0, styled_components_1.css)(templateObject_6 || (template
102
112
  var theme = _a.theme;
103
113
  return theme.fontWeight.normal;
104
114
  });
105
- var body1Bold = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
115
+ var body1Bold = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
106
116
  var theme = _a.theme;
107
117
  return theme.desktopFontSize.body1;
108
118
  }, function (_a) {
@@ -112,7 +122,7 @@ var body1Bold = (0, styled_components_1.css)(templateObject_7 || (templateObject
112
122
  var theme = _a.theme;
113
123
  return theme.fontWeight.bold;
114
124
  });
115
- var body1Regular = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
125
+ var body1Regular = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
116
126
  var theme = _a.theme;
117
127
  return theme.desktopFontSize.body1;
118
128
  }, function (_a) {
@@ -122,7 +132,7 @@ var body1Regular = (0, styled_components_1.css)(templateObject_8 || (templateObj
122
132
  var theme = _a.theme;
123
133
  return theme.fontWeight.normal;
124
134
  });
125
- var body2Bold = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
135
+ var body2Bold = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
126
136
  var theme = _a.theme;
127
137
  return theme.desktopFontSize.body2;
128
138
  }, function (_a) {
@@ -132,7 +142,7 @@ var body2Bold = (0, styled_components_1.css)(templateObject_9 || (templateObject
132
142
  var theme = _a.theme;
133
143
  return theme.fontWeight.bold;
134
144
  });
135
- var body2Regular = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
145
+ var body2Regular = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
136
146
  var theme = _a.theme;
137
147
  return theme.desktopFontSize.body2;
138
148
  }, function (_a) {
@@ -142,7 +152,7 @@ var body2Regular = (0, styled_components_1.css)(templateObject_10 || (templateOb
142
152
  var theme = _a.theme;
143
153
  return theme.fontWeight.normal;
144
154
  });
145
- var caption1Bold = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
155
+ var caption1Bold = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
146
156
  var theme = _a.theme;
147
157
  return theme.desktopFontSize.caption1;
148
158
  }, function (_a) {
@@ -152,7 +162,7 @@ var caption1Bold = (0, styled_components_1.css)(templateObject_11 || (templateOb
152
162
  var theme = _a.theme;
153
163
  return theme.fontWeight.bold;
154
164
  });
155
- var caption1Regular = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
165
+ var caption1Regular = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
156
166
  var theme = _a.theme;
157
167
  return theme.desktopFontSize.caption1;
158
168
  }, function (_a) {
@@ -162,7 +172,7 @@ var caption1Regular = (0, styled_components_1.css)(templateObject_12 || (templat
162
172
  var theme = _a.theme;
163
173
  return theme.fontWeight.normal;
164
174
  });
165
- var caption2Bold = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
175
+ var caption2Bold = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
166
176
  var theme = _a.theme;
167
177
  return theme.desktopFontSize.caption2;
168
178
  }, function (_a) {
@@ -172,7 +182,7 @@ var caption2Bold = (0, styled_components_1.css)(templateObject_13 || (templateOb
172
182
  var theme = _a.theme;
173
183
  return theme.fontWeight.bold;
174
184
  });
175
- var caption2Regular = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
185
+ var caption2Regular = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
176
186
  var theme = _a.theme;
177
187
  return theme.desktopFontSize.caption2;
178
188
  }, function (_a) {
@@ -182,7 +192,7 @@ var caption2Regular = (0, styled_components_1.css)(templateObject_14 || (templat
182
192
  var theme = _a.theme;
183
193
  return theme.fontWeight.normal;
184
194
  });
185
- var form1Regular = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
195
+ var form1Regular = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
186
196
  var theme = _a.theme;
187
197
  return theme.desktopFontSize.form1;
188
198
  }, function (_a) {
@@ -192,7 +202,7 @@ var form1Regular = (0, styled_components_1.css)(templateObject_15 || (templateOb
192
202
  var theme = _a.theme;
193
203
  return theme.fontWeight.normal;
194
204
  });
195
- var form2Regular = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
205
+ var form2Regular = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
196
206
  var theme = _a.theme;
197
207
  return theme.desktopFontSize.form2;
198
208
  }, function (_a) {
@@ -202,7 +212,7 @@ var form2Regular = (0, styled_components_1.css)(templateObject_16 || (templateOb
202
212
  var theme = _a.theme;
203
213
  return theme.fontWeight.normal;
204
214
  });
205
- var blog1Regular = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
215
+ var blog1Regular = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
206
216
  var theme = _a.theme;
207
217
  return theme.desktopFontSize.blog1;
208
218
  }, function (_a) {
@@ -212,72 +222,76 @@ var blog1Regular = (0, styled_components_1.css)(templateObject_17 || (templateOb
212
222
  var theme = _a.theme;
213
223
  return theme.fontWeight.normal;
214
224
  });
215
- var sysTextPrimary = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
225
+ var sysTextPrimary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
216
226
  var theme = _a.theme;
217
227
  return theme.ui_cpnt_textlabel_sys_primary;
218
228
  });
219
- var sysTextSecondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
229
+ var sysTextSecondary = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
220
230
  var theme = _a.theme;
221
231
  return theme.ui_cpnt_textlabel_sys_secondary;
222
232
  });
223
- var sysTextTertiary = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
233
+ var sysTextTertiary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
224
234
  var theme = _a.theme;
225
235
  return theme.ui_cpnt_textlabel_sys_tertiary;
226
236
  });
227
- var sysTextWhite = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
237
+ var sysTextWhite = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
228
238
  var theme = _a.theme;
229
239
  return theme.ui_cpnt_textlabel_sys_white;
230
240
  });
231
- var sysTextError = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
241
+ var sysTextBlack = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
242
+ var theme = _a.theme;
243
+ return theme.ui_cpnt_textlabel_sys_black;
244
+ });
245
+ var sysTextError = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
232
246
  var theme = _a.theme;
233
247
  return theme.ui_cpnt_textlabel_sys_error;
234
248
  });
235
- var sysTextWarning = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
249
+ var sysTextWarning = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
236
250
  var theme = _a.theme;
237
251
  return theme.ui_cpnt_textlabel_sys_warning;
238
252
  });
239
- var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
253
+ var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
240
254
  var theme = _a.theme;
241
255
  return theme.ui_cpnt_textlabel_sys_brandprimary;
242
256
  });
243
- var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
257
+ var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
244
258
  var theme = _a.theme;
245
259
  return theme.ui_cpnt_textlabel_sys_brandseconvariant;
246
260
  });
247
- var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
261
+ var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
248
262
  var theme = _a.theme;
249
263
  return theme.ui_cpnt_textlabel_usr_brandprimary;
250
264
  });
251
- var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
265
+ var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
252
266
  var theme = _a.theme;
253
267
  return theme.ui_cpnt_textlabel_usr_brandseconvariant;
254
268
  });
255
- var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
269
+ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
256
270
  var theme = _a.theme;
257
271
  return theme.ui_cpnt_textlabel_usr_brandonprimary;
258
272
  });
259
- var customFontStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"])), function (_a) {
273
+ var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"])), function (_a) {
260
274
  var customFontSize = _a.customFontSize;
261
275
  return customFontSize;
262
276
  }, function (_a) {
263
277
  var theme = _a.theme, customFontWeight = _a.customFontWeight;
264
278
  return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
265
279
  });
266
- var colorOverrideStyle = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
280
+ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
267
281
  var colorOverride = _a.colorOverride, theme = _a.theme;
268
282
  return colorOverride && theme[colorOverride];
269
283
  });
270
- var ellipsisStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
284
+ var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
271
285
  var lineLimit = _a.lineLimit;
272
286
  return lineLimit;
273
287
  });
274
- var userSelectModeStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
275
- var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"])));
276
- var tooltipLeftTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n right: 0;\n bottom: 20px;\n"], ["\n right: 0;\n bottom: 20px;\n"])));
277
- var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
278
- var tooltipRightTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n left: 0;\n bottom: 20px;\n"], ["\n left: 0;\n bottom: 20px;\n"])));
279
- var tooltipRightBottom = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
280
- var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
288
+ var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
289
+ var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"])));
290
+ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n right: 0;\n bottom: 20px;\n"], ["\n right: 0;\n bottom: 20px;\n"])));
291
+ var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
292
+ var tooltipRightTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n left: 0;\n bottom: 20px;\n"], ["\n left: 0;\n bottom: 20px;\n"])));
293
+ var tooltipRightBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
294
+ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
281
295
  var textAlign = _a.textAlign;
282
296
  return textAlign;
283
297
  }, function (_a) {
@@ -294,6 +308,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_38 || (template
294
308
  return styleTheme &&
295
309
  {
296
310
  displayBold: displayBold,
311
+ wizardPageTitleBold: wizardPageTitleBold,
297
312
  headingBold: headingBold,
298
313
  leadParaBold: leadParaBold,
299
314
  leadParaRegular: leadParaRegular,
@@ -319,6 +334,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_38 || (template
319
334
  sysTextSecondary: sysTextSecondary,
320
335
  sysTextTertiary: sysTextTertiary,
321
336
  sysTextWhite: sysTextWhite,
337
+ sysTextBlack: sysTextBlack,
322
338
  sysTextError: sysTextError,
323
339
  sysTextWarning: sysTextWarning,
324
340
  sysTextBrandPrimary: sysTextBrandPrimary,
@@ -355,7 +371,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_38 || (template
355
371
  var bulletPointMode = _a.bulletPointMode;
356
372
  return bulletPointMode === 'use' && bulletPointModeStyle;
357
373
  });
358
- var S_AfterTextBox = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
374
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
359
375
  var theme = _a.theme;
360
376
  return theme.spacing.spacingA;
361
377
  }, function (_a) {
@@ -371,8 +387,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_39 || (templ
371
387
  return 'vertical-align: middle';
372
388
  }
373
389
  });
374
- var S_IconWrapper = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"])));
375
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"])), function (_a) {
390
+ var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"])));
391
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"])), function (_a) {
376
392
  var theme = _a.theme;
377
393
  return theme.ui_cpnt_contextmenu_base;
378
394
  }, function (_a) {
@@ -410,4 +426,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_41 || (tem
410
426
  }[tooltipPosition];
411
427
  });
412
428
  exports.default = TextLabel;
413
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41;
429
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
package/dist/src/hybrid/components/Icon/Icon.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
3
3
  export declare type IconProps = {
4
4
  iconName?: FillIconNameKeys | LineIconNameKeys;
5
- size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
5
+ size?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
6
6
  colorKey?: UiColors;
7
7
  fillType?: 'line' | 'fill';
8
8
  } & Record<string, any>;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare type ChatBubbleProps = {
3
- colorTheme?: 'my' | 'seller' | 'subscriber';
3
+ colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
4
4
  tailType?: 'none' | 'left_top' | 'right_top';
5
5
  children?: React.ReactNode;
6
6
  };
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.js CHANGED
@@ -29,12 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var backgroundColorTheme = {
32
- my: 'ui_cpnt_list_chatbubble_base_area_my',
33
- seller: 'ui_cpnt_list_chatbubble_base_area_seller',
34
- subscriber: 'ui_cpnt_list_chatbubble_base_area_subscriber'
32
+ grey: 'ui_cpnt_list_chatbubble_base_grey',
33
+ brand_primary: 'ui_cpnt_list_chatbubble_base_brand_primary',
34
+ translucent_white: 'ui_cpnt_list_chatbubble_base_translucent_white',
35
+ translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black'
35
36
  };
36
37
  function ChatBubble(_a) {
37
- var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'seller' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
38
+ var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
38
39
  return (react_1.default.createElement(S_ChatBubbleWrapper, null,
39
40
  react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
40
41
  react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { PDSTextType, PDSValueOption } from '../../../common';
3
+ declare type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
3
4
  export declare type ChatBubbleListItemProps = {
4
5
  titleText?: PDSTextType;
5
- imageMode?: 'none' | 'use';
6
6
  imageSrc?: string;
7
7
  hoverMode?: 'none' | 'use';
8
- styleTheme?: 'seller_tail' | 'seller' | 'subscriber_tail' | 'subscriber' | 'my_tail' | 'my';
8
+ styleTheme: 'other_avatar_impact' | 'other_avatar' | 'other_avatar_sub' | 'other' | 'other_sub' | 'me' | 'me_sub';
9
+ colorTheme?: ColorThemeType;
9
10
  timeMode?: 'none' | 'use';
10
11
  timeText?: PDSTextType;
11
12
  contextMenuOptionArray?: PDSValueOption[];
@@ -13,5 +14,5 @@ export declare type ChatBubbleListItemProps = {
13
14
  children?: React.ReactNode;
14
15
  onClickContextMenuItem?: (option: PDSValueOption) => void;
15
16
  };
16
- declare function ChatBubbleListItem({ titleText, imageMode, imageSrc, hoverMode, styleTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
17
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
17
18
  export default ChatBubbleListItem;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -35,28 +35,25 @@ var IconButton_1 = require("../IconButton");
35
35
  var TextLabel_1 = require("../TextLabel");
36
36
  var ChatBubble_1 = __importDefault(require("./ChatBubble"));
37
37
  var Popup_1 = require("./Popup");
38
- var ChatBubbleColorTheme = {
39
- seller_tail: 'seller',
40
- seller: 'seller',
41
- subscriber_tail: 'subscriber',
42
- subscriber: 'subscriber',
43
- my_tail: 'my',
44
- my: 'my'
38
+ var chatBubbleTailType = {
39
+ other_avatar_impact: 'left_top',
40
+ other_avatar: 'left_top',
41
+ other_avatar_sub: 'none',
42
+ other: 'left_top',
43
+ other_sub: 'none',
44
+ me: 'right_top',
45
+ me_sub: 'none'
45
46
  };
46
- var ChatBubbleTailType = {
47
- seller_tail: 'left_top',
48
- seller: 'none',
49
- subscriber_tail: 'left_top',
50
- subscriber: 'none',
51
- my_tail: 'right_top',
52
- my: 'none'
47
+ var profileImageBorderColorTheme = {
48
+ grey: 'ui_avatar_border',
49
+ brand_primary: 'ui_avatar_border_brandprimary',
50
+ translucent_white: 'ui_avatar_border_translucent_white',
51
+ translucent_black: 'ui_avatar_border_translucent_black'
53
52
  };
54
53
  function ChatBubbleListItem(_a) {
55
- var titleText = _a.titleText, _b = _a.imageMode, imageMode = _b === void 0 ? 'use' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'seller_tail' : _d, _e = _a.timeMode, timeMode = _e === void 0 ? 'use' : _e, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
56
- var isMy = styleTheme.includes('my');
57
- var isSeller = styleTheme.includes('seller');
58
- var isTail = styleTheme.includes('tail');
59
- var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
54
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
55
+ var isMe = styleTheme.includes('me');
56
+ var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
60
57
  var contextMenuRef = (0, react_1.useRef)(null);
61
58
  var chatBody = document.querySelector('#chatMessageBox');
62
59
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -82,24 +79,65 @@ function ChatBubbleListItem(_a) {
82
79
  }
83
80
  setIsContextMenuOpen(false);
84
81
  };
82
+ var isShowProfileImage = function () {
83
+ if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
84
+ return true;
85
+ }
86
+ return false;
87
+ };
88
+ var isShowTitleText = function () {
89
+ if (styleTheme === 'other_avatar_impact' ||
90
+ styleTheme === 'other_avatar' ||
91
+ styleTheme === 'other') {
92
+ return true;
93
+ }
94
+ return false;
95
+ };
96
+ var checkTextColorTheme = function () {
97
+ switch (colorTheme) {
98
+ case 'grey': {
99
+ return 'sysTextPrimary';
100
+ }
101
+ case 'brand_primary': {
102
+ return 'usrTextBrandPrimary';
103
+ }
104
+ case 'translucent_white': {
105
+ return 'sysTextBlack';
106
+ }
107
+ case 'translucent_black': {
108
+ return 'sysTextWhite';
109
+ }
110
+ default: {
111
+ return 'sysTextPrimary';
112
+ }
113
+ }
114
+ };
115
+ var isLeftSpacingChecker = function () {
116
+ if (styleTheme === 'other_avatar_impact' ||
117
+ styleTheme === 'other_avatar' ||
118
+ styleTheme === 'other_avatar_sub') {
119
+ return true;
120
+ }
121
+ return false;
122
+ };
85
123
  return (react_1.default.createElement(react_1.default.Fragment, null,
86
- react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMy: isMy, imageMode: imageMode },
87
- imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
88
- react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: isSeller ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
124
+ react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe },
125
+ isLeftSpacingChecker() ? (react_1.default.createElement(react_1.default.Fragment, null, isShowProfileImage() ? (react_1.default.createElement(S_ImageViewWrapper, { isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme },
126
+ react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })),
89
127
  react_1.default.createElement(S_RightBox, null,
90
- isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
91
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
128
+ isShowTitleText() && (react_1.default.createElement(react_1.default.Fragment, null,
129
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }),
92
130
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
93
131
  react_1.default.createElement(S_ChatBubbleBox, null,
94
- react_1.default.createElement(S_ChatBubbleWrapper, { isMy: isMy },
95
- timeMode === 'use' && timeText && isMy && (react_1.default.createElement(S_TimeWrapper, null,
132
+ react_1.default.createElement(S_ChatBubbleWrapper, { isMe: isMe },
133
+ timeMode === 'use' && timeText && isMe && (react_1.default.createElement(S_TimeWrapper, null,
96
134
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
97
135
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
98
- react_1.default.createElement(ChatBubble_1.default, { colorTheme: ChatBubbleColorTheme[styleTheme], tailType: ChatBubbleTailType[styleTheme] }, children),
99
- timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
136
+ react_1.default.createElement(ChatBubble_1.default, { colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, children),
137
+ timeMode === 'use' && timeText && !isMe && (react_1.default.createElement(S_TimeWrapper, null,
100
138
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
139
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
102
- hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
140
+ hoverMode === 'use' && !isMe && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
103
141
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))))),
104
142
  react_1.default.createElement(Popup_1.PopupProvider, null,
105
143
  react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
@@ -109,41 +147,34 @@ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (tem
109
147
  var theme = _a.theme;
110
148
  return theme.spacing.spacingA;
111
149
  });
112
- var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
113
- var theme = _a.theme;
114
- return theme.spacing.spacingA;
150
+ var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"])), function (_a) {
151
+ var isMe = _a.isMe;
152
+ return isMe && MyChatBubbleListItem;
115
153
  });
116
- var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
117
- var isMy = _a.isMy;
118
- return isMy && MyChatBubbleListItem;
119
- }, function (_a) {
120
- var imageMode = _a.imageMode;
121
- return imageMode === 'none' && NoImageChatBubbleListItem;
154
+ var ImageViewBrandPrimary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n"], ["\n border: 2px solid\n ", ";\n"])), function (_a) {
155
+ var colorTheme = _a.colorTheme, theme = _a.theme;
156
+ return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
122
157
  });
123
- var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 2px solid ", ";\n"], ["\n border: 2px solid ", ";\n"])), function (_a) {
124
- var theme = _a.theme;
125
- return theme.ui_profile_image_border_brandprimary;
126
- });
127
- var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 1px solid ", ";\n"], ["\n border: 1px solid ", ";\n"])), function (_a) {
128
- var theme = _a.theme;
129
- return theme.ui_profile_image_border;
158
+ var ImageViewDefault = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n"], ["\n border: 1px solid\n ", ";\n"])), function (_a) {
159
+ var colorTheme = _a.colorTheme, theme = _a.theme;
160
+ return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
130
161
  });
131
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
162
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
132
163
  var theme = _a.theme;
133
164
  return theme.spacing.spacingB;
134
165
  }, function (_a) {
135
- var isSeller = _a.isSeller;
136
- return (isSeller ? ImageViewSeller : ImageViewDefault);
166
+ var isOtherAvatarImpact = _a.isOtherAvatarImpact;
167
+ return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
137
168
  });
138
- var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
139
- var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
140
- var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
141
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
142
- var isMy = _a.isMy;
143
- return isMy && MyChatBubble;
169
+ var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
170
+ var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
171
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
172
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
173
+ var isMe = _a.isMe;
174
+ return isMe && MyChatBubble;
144
175
  });
145
- var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
146
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
176
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
177
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
147
178
  var theme = _a.theme;
148
179
  return theme.spacing.spacingB;
149
180
  }, function (_a) {
@@ -157,4 +188,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (temp
157
188
  return hoverMode === 'use' && '1';
158
189
  });
159
190
  exports.default = ChatBubbleListItem;
160
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
191
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/dist/src/mobile/components/TextLabel/TextLabel.d.ts CHANGED
@@ -3,9 +3,9 @@ import { PDSTextType, UiColors } from '../../../common';
3
3
  export declare type TextLabelProps = {
4
4
  text: PDSTextType;
5
5
  textAlign?: 'left' | 'center' | 'right';
6
- styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
6
+ styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
7
7
  colorOverride?: UiColors;
8
- colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
8
+ colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
9
9
  singleLineMode?: 'none' | 'use';
10
10
  ellipsisMode?: 'none' | 'use';
11
11
  lineLimit?: number;
@@ -19,9 +19,9 @@ export declare type TextLabelProps = {
19
19
  };
20
20
  export declare type TextStyleProps = {
21
21
  textAlign?: 'left' | 'center' | 'right';
22
- styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
22
+ styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
23
23
  colorOverride?: UiColors;
24
- colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
24
+ colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
25
25
  singleLineMode?: 'none' | 'use';
26
26
  ellipsisMode?: 'none' | 'use';
27
27
  lineLimit?: number;