pds-dev-kit-web 2.1.7 → 2.1.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 (179) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/src/common/assets/icons/fill/Accordion.d.ts +4 -0
  3. package/dist/src/common/assets/icons/fill/Accordion.js +30 -0
  4. package/dist/src/common/assets/icons/fill/AlignBottom.d.ts +4 -0
  5. package/dist/src/common/assets/icons/fill/AlignBottom.js +30 -0
  6. package/dist/src/common/assets/icons/fill/AlignCenter.d.ts +4 -0
  7. package/dist/src/common/assets/icons/fill/AlignCenter.js +30 -0
  8. package/dist/src/common/assets/icons/fill/AlignLeft.d.ts +4 -0
  9. package/dist/src/common/assets/icons/fill/AlignLeft.js +30 -0
  10. package/dist/src/common/assets/icons/fill/AlignMiddle.d.ts +4 -0
  11. package/dist/src/common/assets/icons/fill/AlignMiddle.js +30 -0
  12. package/dist/src/common/assets/icons/fill/AlignRight.d.ts +4 -0
  13. package/dist/src/common/assets/icons/fill/AlignRight.js +30 -0
  14. package/dist/src/common/assets/icons/fill/AlignTop.d.ts +4 -0
  15. package/dist/src/common/assets/icons/fill/AlignTop.js +30 -0
  16. package/dist/src/common/assets/icons/fill/Button.d.ts +4 -0
  17. package/dist/src/common/assets/icons/fill/Button.js +30 -0
  18. package/dist/src/common/assets/icons/fill/Carousel.d.ts +4 -0
  19. package/dist/src/common/assets/icons/fill/Carousel.js +30 -0
  20. package/dist/src/common/assets/icons/fill/Copy.d.ts +4 -0
  21. package/dist/src/common/assets/icons/fill/Copy.js +30 -0
  22. package/dist/src/common/assets/icons/fill/DeviceApp.d.ts +4 -0
  23. package/dist/src/common/assets/icons/fill/DeviceApp.js +30 -0
  24. package/dist/src/common/assets/icons/fill/DeviceDesktop.d.ts +4 -0
  25. package/dist/src/common/assets/icons/fill/DeviceDesktop.js +30 -0
  26. package/dist/src/common/assets/icons/fill/DeviceMobile.d.ts +4 -0
  27. package/dist/src/common/assets/icons/fill/DeviceMobile.js +30 -0
  28. package/dist/src/common/assets/icons/fill/Divider.d.ts +4 -0
  29. package/dist/src/common/assets/icons/fill/Divider.js +30 -0
  30. package/dist/src/common/assets/icons/fill/Download.d.ts +4 -0
  31. package/dist/src/common/assets/icons/fill/Download.js +30 -0
  32. package/dist/src/common/assets/icons/fill/EditorLeftSide.d.ts +4 -0
  33. package/dist/src/common/assets/icons/fill/EditorLeftSide.js +30 -0
  34. package/dist/src/common/assets/icons/fill/EditorRightSide.d.ts +4 -0
  35. package/dist/src/common/assets/icons/fill/EditorRightSide.js +30 -0
  36. package/dist/src/common/assets/icons/fill/Image.d.ts +4 -0
  37. package/dist/src/common/assets/icons/fill/Image.js +30 -0
  38. package/dist/src/common/assets/icons/fill/Item.d.ts +4 -0
  39. package/dist/src/common/assets/icons/fill/Item.js +30 -0
  40. package/dist/src/common/assets/icons/fill/LayerBackward.d.ts +4 -0
  41. package/dist/src/common/assets/icons/fill/LayerBackward.js +30 -0
  42. package/dist/src/common/assets/icons/fill/LayerForward.d.ts +4 -0
  43. package/dist/src/common/assets/icons/fill/LayerForward.js +30 -0
  44. package/dist/src/common/assets/icons/fill/Layout.d.ts +4 -0
  45. package/dist/src/common/assets/icons/fill/Layout.js +30 -0
  46. package/dist/src/common/assets/icons/fill/Lightning.d.ts +4 -0
  47. package/dist/src/common/assets/icons/fill/Lightning.js +30 -0
  48. package/dist/src/common/assets/icons/fill/Links.d.ts +4 -0
  49. package/dist/src/common/assets/icons/fill/Links.js +30 -0
  50. package/dist/src/common/assets/icons/fill/LogoInsta.d.ts +4 -0
  51. package/dist/src/common/assets/icons/fill/LogoInsta.js +30 -0
  52. package/dist/src/common/assets/icons/fill/LogoTwitter.d.ts +4 -0
  53. package/dist/src/common/assets/icons/fill/LogoTwitter.js +30 -0
  54. package/dist/src/common/assets/icons/fill/LogoYt.d.ts +4 -0
  55. package/dist/src/common/assets/icons/fill/LogoYt.js +30 -0
  56. package/dist/src/common/assets/icons/fill/Moon.d.ts +4 -0
  57. package/dist/src/common/assets/icons/fill/Moon.js +30 -0
  58. package/dist/src/common/assets/icons/fill/Paint.d.ts +4 -0
  59. package/dist/src/common/assets/icons/fill/Paint.js +30 -0
  60. package/dist/src/common/assets/icons/fill/Palette.d.ts +4 -0
  61. package/dist/src/common/assets/icons/fill/Palette.js +30 -0
  62. package/dist/src/common/assets/icons/fill/PlusRound.d.ts +4 -0
  63. package/dist/src/common/assets/icons/fill/PlusRound.js +30 -0
  64. package/dist/src/common/assets/icons/fill/Richtext.d.ts +4 -0
  65. package/dist/src/common/assets/icons/fill/Richtext.js +30 -0
  66. package/dist/src/common/assets/icons/fill/Setting.js +1 -1
  67. package/dist/src/common/assets/icons/fill/Shape.d.ts +4 -0
  68. package/dist/src/common/assets/icons/fill/Shape.js +30 -0
  69. package/dist/src/common/assets/icons/fill/Text.d.ts +4 -0
  70. package/dist/src/common/assets/icons/fill/Text.js +30 -0
  71. package/dist/src/common/assets/icons/fill/Trashcan.d.ts +4 -0
  72. package/dist/src/common/assets/icons/fill/Trashcan.js +30 -0
  73. package/dist/src/common/assets/icons/fill/Unavailable.d.ts +4 -0
  74. package/dist/src/common/assets/icons/fill/Unavailable.js +30 -0
  75. package/dist/src/common/assets/icons/fill/Upload.d.ts +4 -0
  76. package/dist/src/common/assets/icons/fill/Upload.js +30 -0
  77. package/dist/src/common/assets/icons/fill/index.d.ts +37 -0
  78. package/dist/src/common/assets/icons/fill/index.js +74 -0
  79. package/dist/src/common/assets/icons/line/Accordion.d.ts +4 -0
  80. package/dist/src/common/assets/icons/line/Accordion.js +30 -0
  81. package/dist/src/common/assets/icons/line/AlignBottom.d.ts +4 -0
  82. package/dist/src/common/assets/icons/line/AlignBottom.js +30 -0
  83. package/dist/src/common/assets/icons/line/AlignCenter.d.ts +4 -0
  84. package/dist/src/common/assets/icons/line/AlignCenter.js +30 -0
  85. package/dist/src/common/assets/icons/line/AlignLeft.d.ts +4 -0
  86. package/dist/src/common/assets/icons/line/AlignLeft.js +30 -0
  87. package/dist/src/common/assets/icons/line/AlignMiddle.d.ts +4 -0
  88. package/dist/src/common/assets/icons/line/AlignMiddle.js +30 -0
  89. package/dist/src/common/assets/icons/line/AlignRight.d.ts +4 -0
  90. package/dist/src/common/assets/icons/line/AlignRight.js +30 -0
  91. package/dist/src/common/assets/icons/line/AlignTop.d.ts +4 -0
  92. package/dist/src/common/assets/icons/line/AlignTop.js +30 -0
  93. package/dist/src/common/assets/icons/line/Button.d.ts +4 -0
  94. package/dist/src/common/assets/icons/line/Button.js +30 -0
  95. package/dist/src/common/assets/icons/line/Carousel.d.ts +4 -0
  96. package/dist/src/common/assets/icons/line/Carousel.js +30 -0
  97. package/dist/src/common/assets/icons/line/ChannelSetting.js +1 -1
  98. package/dist/src/common/assets/icons/line/Copy.js +1 -1
  99. package/dist/src/common/assets/icons/line/DeviceDesktop.js +1 -1
  100. package/dist/src/common/assets/icons/line/DeviceMobile.js +1 -1
  101. package/dist/src/common/assets/icons/line/Divider.d.ts +4 -0
  102. package/dist/src/common/assets/icons/line/Divider.js +30 -0
  103. package/dist/src/common/assets/icons/line/Download.js +1 -1
  104. package/dist/src/common/assets/icons/line/EditorLeftSide.js +1 -1
  105. package/dist/src/common/assets/icons/line/EditorRightSide.js +1 -1
  106. package/dist/src/common/assets/icons/line/Image.d.ts +4 -0
  107. package/dist/src/common/assets/icons/line/Image.js +30 -0
  108. package/dist/src/common/assets/icons/line/Item.d.ts +4 -0
  109. package/dist/src/common/assets/icons/line/Item.js +30 -0
  110. package/dist/src/common/assets/icons/line/LayerBackward.d.ts +4 -0
  111. package/dist/src/common/assets/icons/line/LayerBackward.js +30 -0
  112. package/dist/src/common/assets/icons/line/LayerForward.d.ts +4 -0
  113. package/dist/src/common/assets/icons/line/LayerForward.js +30 -0
  114. package/dist/src/common/assets/icons/line/Layout.d.ts +4 -0
  115. package/dist/src/common/assets/icons/line/Layout.js +30 -0
  116. package/dist/src/common/assets/icons/line/Lightning.d.ts +4 -0
  117. package/dist/src/common/assets/icons/line/Lightning.js +30 -0
  118. package/dist/src/common/assets/icons/line/Minus.d.ts +4 -0
  119. package/dist/src/common/assets/icons/line/Minus.js +30 -0
  120. package/dist/src/common/assets/icons/line/MinusCircle.js +1 -1
  121. package/dist/src/common/assets/icons/line/MinusRound.d.ts +4 -0
  122. package/dist/src/common/assets/icons/line/MinusRound.js +30 -0
  123. package/dist/src/common/assets/icons/line/Moon.d.ts +4 -0
  124. package/dist/src/common/assets/icons/line/Moon.js +30 -0
  125. package/dist/src/common/assets/icons/line/Paint.d.ts +4 -0
  126. package/dist/src/common/assets/icons/line/Paint.js +30 -0
  127. package/dist/src/common/assets/icons/line/Palette.d.ts +4 -0
  128. package/dist/src/common/assets/icons/line/Palette.js +30 -0
  129. package/dist/src/common/assets/icons/line/PaymentSetting.js +1 -1
  130. package/dist/src/common/assets/icons/line/PlusRound.d.ts +4 -0
  131. package/dist/src/common/assets/icons/line/PlusRound.js +30 -0
  132. package/dist/src/common/assets/icons/line/PostStorage.d.ts +4 -0
  133. package/dist/src/common/assets/icons/line/PostStorage.js +30 -0
  134. package/dist/src/common/assets/icons/line/Richtext.d.ts +4 -0
  135. package/dist/src/common/assets/icons/line/Richtext.js +30 -0
  136. package/dist/src/common/assets/icons/line/SectionCustom32.d.ts +4 -0
  137. package/dist/src/common/assets/icons/line/SectionCustom32.js +30 -0
  138. package/dist/src/common/assets/icons/line/SectionCustom40.d.ts +4 -0
  139. package/dist/src/common/assets/icons/line/SectionCustom40.js +30 -0
  140. package/dist/src/common/assets/icons/line/Setting.js +1 -1
  141. package/dist/src/common/assets/icons/line/Shape.d.ts +4 -0
  142. package/dist/src/common/assets/icons/line/Shape.js +30 -0
  143. package/dist/src/common/assets/icons/line/Target.d.ts +4 -0
  144. package/dist/src/common/assets/icons/line/Target.js +30 -0
  145. package/dist/src/common/assets/icons/line/Text.d.ts +4 -0
  146. package/dist/src/common/assets/icons/line/Text.js +30 -0
  147. package/dist/src/common/assets/icons/line/Trashcan.js +1 -1
  148. package/dist/src/common/assets/icons/line/Upload.js +1 -1
  149. package/dist/src/common/assets/icons/line/index.d.ts +29 -0
  150. package/dist/src/common/assets/icons/line/index.js +58 -0
  151. package/dist/src/common/index.d.ts +1 -1
  152. package/dist/src/common/types/components.d.ts +11 -0
  153. package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js +47 -4
  154. package/dist/src/desktop/components/BasicButtonGroup/constants.d.ts +11 -0
  155. package/dist/src/desktop/components/BasicButtonGroup/constants.js +15 -0
  156. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +1 -1
  157. package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +2 -1
  158. package/dist/src/desktop/components/Dropdown/Dropdown.js +4 -4
  159. package/dist/src/desktop/components/IconButton/IconButton.js +1 -1
  160. package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts +3 -9
  161. package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.js +81 -38
  162. package/dist/src/desktop/components/SegmentedButtonGroup/constants.d.ts +11 -0
  163. package/dist/src/desktop/components/SegmentedButtonGroup/constants.js +15 -0
  164. package/dist/src/desktop/components/TextField/TextField.d.ts +2 -1
  165. package/dist/src/desktop/components/TextField/TextField.js +7 -7
  166. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +15 -15
  167. package/dist/src/desktop/components/TextLabel/TextLabel.js +50 -28
  168. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +1 -1
  169. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +1 -1
  170. package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +2 -1
  171. package/dist/src/mobile/components/Dropdown/Dropdown.js +4 -4
  172. package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts +3 -9
  173. package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.js +36 -36
  174. package/dist/src/mobile/components/TextField/TextField.d.ts +2 -1
  175. package/dist/src/mobile/components/TextField/TextField.js +7 -7
  176. package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +14 -14
  177. package/dist/src/mobile/components/TextLabel/TextLabel.js +45 -23
  178. package/package.json +1 -1
  179. package/release-note.md +8 -17
@@ -206,7 +206,17 @@ var form1Regular = (0, styled_components_1.css)(templateObject_16 || (templateOb
206
206
  var theme = _a.theme;
207
207
  return theme.desktopLineHeight.form1;
208
208
  });
209
- var form2Regular = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
209
+ var form1Bold = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
210
+ var theme = _a.theme;
211
+ return theme.desktopFontSize.form1;
212
+ }, function (_a) {
213
+ var theme = _a.theme;
214
+ return theme.fontWeight.bold;
215
+ }, function (_a) {
216
+ var theme = _a.theme;
217
+ return theme.desktopLineHeight.form1;
218
+ });
219
+ var form2Regular = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
210
220
  var theme = _a.theme;
211
221
  return theme.desktopFontSize.form2;
212
222
  }, function (_a) {
@@ -216,7 +226,17 @@ var form2Regular = (0, styled_components_1.css)(templateObject_17 || (templateOb
216
226
  var theme = _a.theme;
217
227
  return theme.desktopLineHeight.form2;
218
228
  });
219
- var blog1Regular = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
229
+ var form2Bold = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
230
+ var theme = _a.theme;
231
+ return theme.desktopFontSize.form2;
232
+ }, function (_a) {
233
+ var theme = _a.theme;
234
+ return theme.fontWeight.bold;
235
+ }, function (_a) {
236
+ var theme = _a.theme;
237
+ return theme.desktopLineHeight.form2;
238
+ });
239
+ var blog1Regular = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
220
240
  var theme = _a.theme;
221
241
  return theme.desktopFontSize.blog1;
222
242
  }, function (_a) {
@@ -226,76 +246,76 @@ var blog1Regular = (0, styled_components_1.css)(templateObject_18 || (templateOb
226
246
  var theme = _a.theme;
227
247
  return theme.desktopLineHeight.blog1;
228
248
  });
229
- var sysTextPrimary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
249
+ var sysTextPrimary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
230
250
  var theme = _a.theme;
231
251
  return theme.ui_cpnt_textlabel_sys_primary;
232
252
  });
233
- var sysTextSecondary = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
253
+ var sysTextSecondary = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
234
254
  var theme = _a.theme;
235
255
  return theme.ui_cpnt_textlabel_sys_secondary;
236
256
  });
237
- var sysTextTertiary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
257
+ var sysTextTertiary = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
238
258
  var theme = _a.theme;
239
259
  return theme.ui_cpnt_textlabel_sys_tertiary;
240
260
  });
241
- var sysTextWhite = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
261
+ var sysTextWhite = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
242
262
  var theme = _a.theme;
243
263
  return theme.ui_cpnt_textlabel_sys_white;
244
264
  });
245
- var sysTextBlack = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
265
+ var sysTextBlack = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
246
266
  var theme = _a.theme;
247
267
  return theme.ui_cpnt_textlabel_sys_black;
248
268
  });
249
- var sysTextError = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
269
+ var sysTextError = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
250
270
  var theme = _a.theme;
251
271
  return theme.ui_cpnt_textlabel_sys_error;
252
272
  });
253
- var sysTextWarning = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
273
+ var sysTextWarning = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
254
274
  var theme = _a.theme;
255
275
  return theme.ui_cpnt_textlabel_sys_warning;
256
276
  });
257
- var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
277
+ var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
258
278
  var theme = _a.theme;
259
279
  return theme.ui_cpnt_textlabel_sys_brandprimary;
260
280
  });
261
- var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
281
+ var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
262
282
  var theme = _a.theme;
263
283
  return theme.ui_cpnt_textlabel_sys_brandseconvariant;
264
284
  });
265
- var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
285
+ var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
266
286
  var theme = _a.theme;
267
287
  return theme.ui_cpnt_textlabel_usr_brandprimary;
268
288
  });
269
- var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
289
+ var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
270
290
  var theme = _a.theme;
271
291
  return theme.ui_cpnt_textlabel_usr_brandseconvariant;
272
292
  });
273
- var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
293
+ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
274
294
  var theme = _a.theme;
275
295
  return theme.ui_cpnt_textlabel_usr_brandonprimary;
276
296
  });
277
- var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n"])), function (_a) {
297
+ var customFontStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n"])), function (_a) {
278
298
  var customFontSize = _a.customFontSize;
279
299
  return customFontSize;
280
300
  }, function (_a) {
281
301
  var theme = _a.theme, customFontWeight = _a.customFontWeight;
282
302
  return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
283
303
  });
284
- var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
304
+ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
285
305
  var colorOverride = _a.colorOverride, theme = _a.theme;
286
306
  return colorOverride && theme[colorOverride];
287
307
  });
288
- var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
308
+ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
289
309
  var lineLimit = _a.lineLimit;
290
310
  return lineLimit;
291
311
  });
292
- var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
293
- var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
294
- var tooltipLeftTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n bottom: 20px;\n right: 0;\n"], ["\n bottom: 20px;\n right: 0;\n"])));
295
- 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"])));
296
- var tooltipRightTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n bottom: 20px;\n left: 0;\n"], ["\n bottom: 20px;\n left: 0;\n"])));
297
- 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"])));
298
- var S_TextLabel = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\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 overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
312
+ var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
313
+ var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
314
+ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n bottom: 20px;\n right: 0;\n"], ["\n bottom: 20px;\n right: 0;\n"])));
315
+ var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
316
+ var tooltipRightTop = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n bottom: 20px;\n left: 0;\n"], ["\n bottom: 20px;\n left: 0;\n"])));
317
+ var tooltipRightBottom = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
318
+ var S_TextLabel = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\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 overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
299
319
  var textAlign = _a.textAlign;
300
320
  return textAlign;
301
321
  }, function (_a) {
@@ -330,7 +350,9 @@ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (template
330
350
  caption2Regular: caption2Regular,
331
351
  caption2Bold: caption2Bold,
332
352
  form1Regular: form1Regular,
353
+ form1Bold: form1Bold,
333
354
  form2Regular: form2Regular,
355
+ form2Bold: form2Bold,
334
356
  blog1Regular: blog1Regular
335
357
  }[styleTheme];
336
358
  }, function (_a) {
@@ -378,7 +400,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (template
378
400
  var bulletPointMode = _a.bulletPointMode;
379
401
  return bulletPointMode === 'use' && bulletPointModeStyle;
380
402
  });
381
- 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) {
403
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __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) {
382
404
  var theme = _a.theme;
383
405
  return theme.spacing.spacingA;
384
406
  }, function (_a) {
@@ -394,8 +416,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templ
394
416
  return 'vertical-align: middle';
395
417
  }
396
418
  });
397
- var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
398
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\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 z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\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 z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"])), function (_a) {
419
+ var S_IconWrapper = styled_components_1.default.div(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
420
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\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 z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\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 z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"])), function (_a) {
399
421
  var theme = _a.theme;
400
422
  return theme.ui_cpnt_button_tooltip_base;
401
423
  }, function (_a) {
@@ -421,4 +443,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (tem
421
443
  }[tooltipPosition];
422
444
  });
423
445
  exports.default = TextLabel;
424
- 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;
446
+ 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, templateObject_44, templateObject_45;
@@ -66,7 +66,7 @@ function UploadIconButton(_a) {
66
66
  }
67
67
  return types_1.iconStateColors[fillType];
68
68
  };
69
- return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onMouseEnter: function () { return tooltipText && handleTooltipToggle(true); }, onMouseLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
69
+ return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onPointerEnter: function () { return tooltipText && handleTooltipToggle(true); }, onPointerLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
70
70
  }
71
71
  var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
72
72
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -67,7 +67,7 @@ function ContextMenuItem(_a) {
67
67
  }
68
68
  return 'ui_cpnt_dropdown_display_icon_normal';
69
69
  };
70
- return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }, void 0) }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0));
70
+ return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), ' '] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0));
71
71
  }
72
72
  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) {
73
73
  var theme = _a.theme;
@@ -13,7 +13,8 @@ declare type Props = {
13
13
  valueArray: DropdownValueOption[];
14
14
  customWidth?: string;
15
15
  displayType?: 'text_only' | 'icon_only' | 'icon_text';
16
+ fontWeight?: 'bold' | 'regular';
16
17
  onChange?: (option: DropdownValueOption) => void;
17
18
  };
18
- declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, onChange }: Props): JSX.Element;
19
+ declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, onChange }: Props): JSX.Element;
19
20
  export default Dropdown;
@@ -48,9 +48,9 @@ function Dropdown(_a) {
48
48
  // selectionMode = 'single',
49
49
  _e = _a.size,
50
50
  // selectionMode = 'single',
51
- size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, onChange = _a.onChange;
52
- var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
53
- var _j = (0, react_1.useState)(null), selectedValue = _j[0], setSelectedValue = _j[1];
51
+ size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, onChange = _a.onChange;
52
+ var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
53
+ var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
54
54
  /**
55
55
  * @when value 프롭의 값에 따라
56
56
  * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
@@ -190,7 +190,7 @@ function Dropdown(_a) {
190
190
  var LARGE_HEIGHT = 48;
191
191
  return LARGE_HEIGHT * maxHeightItemNumber;
192
192
  }, [size, maxHeightItemNumber]);
193
- return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }, void 0) }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }, void 0) }, el.value)); }) }), void 0) }), void 0))] }), void 0));
193
+ return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }, void 0) }, el.value)); }) }), void 0) }), void 0))] }), void 0));
194
194
  }
195
195
  var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-right: ", ";\n\n ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
196
196
  var theme = _a.theme;
@@ -1,19 +1,13 @@
1
1
  /// <reference types="react" />
2
- import type { FillIconNameKeys, LineIconNameKeys, PDSValueOption } from '../../../common/types';
3
- declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
4
- iconName: FillIconNameKeys | LineIconNameKeys;
5
- iconFillType?: 'fill' | 'line';
6
- state?: 'normal' | 'disabled';
7
- iconColorTheme?: 'none' | 'red';
8
- };
2
+ import type { PDSValueOption, SegmentedButtonGroupValueOption } from '../../../common/types';
9
3
  export declare type SegmentedButtonGroupProps = {
10
4
  size?: 'large' | 'medium' | 'small';
11
5
  value: PDSValueOption['value'] | PDSValueOption['value'][];
12
6
  valueArray: SegmentedButtonGroupValueOption[];
13
- selectedType?: 'single' | 'multi';
7
+ selectionType?: 'single' | 'multi';
14
8
  state?: 'normal' | 'disabled';
15
9
  onClick?: (value: PDSValueOption['value']) => void;
16
10
  onMouseDown?: (value: PDSValueOption['value']) => void;
17
11
  };
18
- declare function SegmentedButtonGroup({ size, value, valueArray, selectedType, state, onClick, onMouseDown }: SegmentedButtonGroupProps): JSX.Element;
12
+ declare function SegmentedButtonGroup({ size, value, valueArray, selectionType, state, onClick, onMouseDown }: SegmentedButtonGroupProps): JSX.Element;
19
13
  export default SegmentedButtonGroup;
@@ -38,7 +38,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
38
38
  var components_1 = require("../../../hybrid/components");
39
39
  var styled_components_1 = __importStar(require("styled-components"));
40
40
  function SegmentedButtonGroup(_a) {
41
- var _b = _a.size, size = _b === void 0 ? 'medium' : _b, value = _a.value, valueArray = _a.valueArray, _c = _a.selectedType, selectedType = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
41
+ var _b = _a.size, size = _b === void 0 ? 'medium' : _b, value = _a.value, valueArray = _a.valueArray, _c = _a.selectionType, selectionType = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
42
42
  var handleClick = function (value) {
43
43
  if (onClick) {
44
44
  onClick(value);
@@ -50,7 +50,7 @@ function SegmentedButtonGroup(_a) {
50
50
  }
51
51
  };
52
52
  var checkSelection = function (currentButtonValue) {
53
- if (selectedType === 'multi' && Array.isArray(value)) {
53
+ if (selectionType === 'multi' && Array.isArray(value)) {
54
54
  return value.includes(currentButtonValue);
55
55
  }
56
56
  return value === currentButtonValue;
@@ -67,62 +67,62 @@ function SegmentedButtonGroup(_a) {
67
67
  }
68
68
  return 'ui_cpnt_button_icon_enabled';
69
69
  };
70
- return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectedType: selectedType }, { children: valueArray.map(function (_a) {
70
+ return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectionType: selectionType }, { children: valueArray.map(function (_a) {
71
71
  var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d;
72
- return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0) }), String(currentButtonValue)));
72
+ return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0) }), String(currentButtonValue)));
73
73
  }) }), void 0));
74
74
  }
75
75
  var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"], ["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"])), function (_a) {
76
- var selectedType = _a.selectedType, theme = _a.theme;
77
- return selectedType === 'single' && theme.spacing.spacingA;
76
+ var selectionType = _a.selectionType, theme = _a.theme;
77
+ return selectionType === 'multi' && theme.spacing.spacingA;
78
78
  });
79
79
  var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: ", ";\n height: 48px;\n width: 48px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n border-radius: ", ";\n height: 48px;\n width: 48px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (_a) {
80
- var selectedType = _a.selectedType;
81
- return selectedType === 'single' && '14px';
80
+ var selectionType = _a.selectionType;
81
+ return selectionType === 'multi' && '14px';
82
82
  }, function (_a) {
83
- var selectedType = _a.selectedType;
84
- return selectedType === 'multi' && '14px';
83
+ var selectionType = _a.selectionType;
84
+ return selectionType === 'single' && '14px';
85
85
  }, function (_a) {
86
- var selectedType = _a.selectedType;
87
- return selectedType === 'multi' && '14px';
86
+ var selectionType = _a.selectionType;
87
+ return selectionType === 'single' && '14px';
88
88
  }, function (_a) {
89
- var selectedType = _a.selectedType;
90
- return selectedType === 'multi' && '14px';
89
+ var selectionType = _a.selectionType;
90
+ return selectionType === 'single' && '14px';
91
91
  }, function (_a) {
92
- var selectedType = _a.selectedType;
93
- return selectedType === 'multi' && '14px';
92
+ var selectionType = _a.selectionType;
93
+ return selectionType === 'single' && '14px';
94
94
  });
95
95
  var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: ", ";\n height: 40px;\n width: 40px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n border-radius: ", ";\n height: 40px;\n width: 40px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (_a) {
96
- var selectedType = _a.selectedType;
97
- return selectedType === 'single' && '12px';
96
+ var selectionType = _a.selectionType;
97
+ return selectionType === 'multi' && '12px';
98
98
  }, function (_a) {
99
- var selectedType = _a.selectedType;
100
- return selectedType === 'multi' && '12px';
99
+ var selectionType = _a.selectionType;
100
+ return selectionType === 'single' && '12px';
101
101
  }, function (_a) {
102
- var selectedType = _a.selectedType;
103
- return selectedType === 'multi' && '12px';
102
+ var selectionType = _a.selectionType;
103
+ return selectionType === 'single' && '12px';
104
104
  }, function (_a) {
105
- var selectedType = _a.selectedType;
106
- return selectedType === 'multi' && '12px';
105
+ var selectionType = _a.selectionType;
106
+ return selectionType === 'single' && '12px';
107
107
  }, function (_a) {
108
- var selectedType = _a.selectedType;
109
- return selectedType === 'multi' && '12px';
108
+ var selectionType = _a.selectionType;
109
+ return selectionType === 'single' && '12px';
110
110
  });
111
111
  var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: ", ";\n height: 32px;\n width: 32px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n border-radius: ", ";\n height: 32px;\n width: 32px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (_a) {
112
- var selectedType = _a.selectedType;
113
- return selectedType === 'single' && '10px';
112
+ var selectionType = _a.selectionType;
113
+ return selectionType === 'multi' && '10px';
114
114
  }, function (_a) {
115
- var selectedType = _a.selectedType;
116
- return selectedType === 'multi' && '10px';
115
+ var selectionType = _a.selectionType;
116
+ return selectionType === 'single' && '10px';
117
117
  }, function (_a) {
118
- var selectedType = _a.selectedType;
119
- return selectedType === 'multi' && '10px';
118
+ var selectionType = _a.selectionType;
119
+ return selectionType === 'single' && '10px';
120
120
  }, function (_a) {
121
- var selectedType = _a.selectedType;
122
- return selectedType === 'multi' && '10px';
121
+ var selectionType = _a.selectionType;
122
+ return selectionType === 'single' && '10px';
123
123
  }, function (_a) {
124
- var selectedType = _a.selectedType;
125
- return selectedType === 'multi' && '10px';
124
+ var selectionType = _a.selectionType;
125
+ return selectionType === 'single' && '10px';
126
126
  });
127
127
  var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n ", ";\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:hover:enabled:before {\n background-color: ", ";\n }\n\n &:active:enabled:before {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: default;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n ", ";\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:hover:enabled:before {\n background-color: ", ";\n }\n\n &:active:enabled:before {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: default;\n }\n"])), function (_a) {
128
128
  var isSelected = _a.isSelected, theme = _a.theme;
@@ -34,6 +34,7 @@ export declare type TextFieldProps = {
34
34
  autoComplete?: string;
35
35
  numberStepperMode?: 'none' | 'use';
36
36
  numberStep?: number;
37
+ fontWeight?: 'bold' | 'regular';
37
38
  deleteBtnMode?: 'none' | 'use';
38
39
  onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
39
40
  onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -44,5 +45,5 @@ export declare type TextFieldProps = {
44
45
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
45
46
  onTarget?: () => void;
46
47
  };
47
- declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
48
+ declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
48
49
  export default TextField;
@@ -46,7 +46,7 @@ var IconButton_1 = require("../IconButton");
46
46
  var TextLabel_1 = require("../TextLabel");
47
47
  function TextField(_a) {
48
48
  var _b;
49
- var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.deleteBtnMode, deleteBtnMode = _u === void 0 ? 'use' : _u, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
49
+ var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
50
50
  var basicThemeIconColors = {
51
51
  normal: 'ui_cpnt_button_icon_default',
52
52
  read_only: 'ui_cpnt_button_icon_default',
@@ -62,9 +62,9 @@ function TextField(_a) {
62
62
  read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
63
63
  disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
64
64
  };
65
- var _v = (0, react_1.useState)(false), isFocused = _v[0], setIsFocused = _v[1];
66
- var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, trigger = _w.trigger, errors = _w.formState.errors;
67
- var _x = register(name, validation), validateOnChange = _x.onChange, validateOnBlur = _x.onBlur;
65
+ var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
66
+ var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
67
+ var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
68
68
  var isError = Object.keys(errors).some(function (error) { return error === name; });
69
69
  var handleClickIBtn1 = function () {
70
70
  if (onClickIBtn1) {
@@ -119,10 +119,10 @@ function TextField(_a) {
119
119
  }
120
120
  var S_TextField = function () {
121
121
  if (textLineType === 'multi') {
122
- return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0));
122
+ return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0));
123
123
  }
124
124
  if (textLineType === 'auto') {
125
- return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0));
125
+ return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0));
126
126
  }
127
127
  if (textLineType === 'single') {
128
128
  var deleteIconColor = 'ui_cpnt_button_icon_disabled';
@@ -136,7 +136,7 @@ function TextField(_a) {
136
136
  break;
137
137
  }
138
138
  }
139
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
139
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
140
140
  {
141
141
  none: basicThemeIconColors[state],
142
142
  dark: darkThemeIconColors[state],
@@ -3,7 +3,7 @@ import type { PDSTextType, UiColors } from '../../../common';
3
3
  export declare type TextLabelProps = {
4
4
  text: PDSTextType;
5
5
  textAlign?: 'left' | 'center' | 'right';
6
- styleTheme?: 'displayBold' | 'wizardPageTitleBold' | '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' | 'form1Bold' | 'form2Regular' | 'form2Bold' | 'blog1Regular';
7
7
  colorOverride?: UiColors;
8
8
  colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
9
9
  singleLineMode?: 'none' | 'use';
@@ -19,20 +19,20 @@ export declare type TextLabelProps = {
19
19
  letterSpacing?: string;
20
20
  };
21
21
  export declare type TextStyleProps = {
22
- textAlign?: 'left' | 'center' | 'right';
23
- styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
22
+ textAlign?: TextLabelProps['textAlign'];
23
+ styleTheme?: TextLabelProps['styleTheme'];
24
24
  colorOverride?: UiColors;
25
- colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
26
- singleLineMode?: 'none' | 'use';
27
- ellipsisMode?: 'none' | 'use';
28
- lineLimit?: number;
29
- userSelectMode?: 'none' | 'use';
30
- customFontSize?: string;
31
- customFontWeight?: 'bold' | 'regular';
32
- textDecorationType?: 'none' | 'line_through';
33
- bulletPointMode?: 'none' | 'use';
34
- wordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
35
- $letterSpacing?: string;
25
+ colorTheme?: TextLabelProps['colorTheme'];
26
+ singleLineMode?: TextLabelProps['singleLineMode'];
27
+ ellipsisMode?: TextLabelProps['ellipsisMode'];
28
+ lineLimit?: TextLabelProps['lineLimit'];
29
+ userSelectMode?: TextLabelProps['userSelectMode'];
30
+ customFontSize?: TextLabelProps['customFontSize'];
31
+ customFontWeight?: TextLabelProps['customFontWeight'];
32
+ textDecorationType?: TextLabelProps['textDecorationType'];
33
+ bulletPointMode?: TextLabelProps['bulletPointMode'];
34
+ wordBreak?: TextLabelProps['wordBreak'];
35
+ $letterSpacing?: TextLabelProps['letterSpacing'];
36
36
  };
37
37
  declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode, wordBreak, letterSpacing }: TextLabelProps): JSX.Element;
38
38
  export default TextLabel;