@itcase/ui 1.9.58 → 1.9.60

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 (257) hide show
  1. package/dist/{Avatar_cjs_BIHJrAbQ.js → Avatar_cjs_rB8eleZS.js} +5 -8
  2. package/dist/{Avatar_es_CtP68jPM.js → Avatar_es_eDWRG48M.js} +2 -5
  3. package/dist/{Button_cjs_BCcz3-Fw.js → Button_cjs_cNwSkY7f.js} +7 -13
  4. package/dist/{Button_es_DAzeb-vJ.js → Button_es_egCg1YEe.js} +2 -8
  5. package/dist/{ChipsGroup_cjs_C27x9x9O.js → ChipsGroup_cjs_DvFJapnM.js} +7 -11
  6. package/dist/{ChipsGroup_es_BTe1MYhV.js → ChipsGroup_es_C7tQ_vNa.js} +1 -5
  7. package/dist/{DatePicker_cjs_Dvw_cGFH.js → DatePicker_cjs_B03pbJ0K.js} +10 -14
  8. package/dist/{DatePicker_es_t3u6yddn.js → DatePicker_es_DIuTzpna.js} +4 -8
  9. package/dist/{Group_cjs_BLGSskb3.js → Group_cjs_DtBLfpiv.js} +4 -6
  10. package/dist/{Group_es_CP-uIchb.js → Group_es_BUkLNi2_.js} +1 -3
  11. package/dist/{Image_cjs_Hvjp2QDB.js → Image_cjs_BSwaz7r5.js} +4 -6
  12. package/dist/{Image_es_DpOCNWpn.js → Image_es_DhPg4srf.js} +1 -3
  13. package/dist/{Input_cjs_BQIi1N63.js → Input_cjs_Cr6u1JXB.js} +3 -4
  14. package/dist/{Input_es_BYbc2X9M.js → Input_es_Da2Yhzcz.js} +1 -2
  15. package/dist/{Label_cjs_RI5tFcPt.js → Label_cjs_DMOG-8Eu.js} +5 -9
  16. package/dist/{Label_es_CNRTIAWo.js → Label_es_DZn7Ulmk.js} +1 -5
  17. package/dist/{Loader_cjs_CJpdLndn.js → Loader_cjs_Bi6IoQFb.js} +5 -8
  18. package/dist/{Loader_es_CqlLujBJ.js → Loader_es_BZMRBcgn.js} +1 -4
  19. package/dist/{Overlay_cjs_BK_0yTLw.js → Overlay_cjs_bR_cRWP3.js} +4 -6
  20. package/dist/{Overlay_es_DOO535JM.js → Overlay_es_BVxlUWXu.js} +1 -3
  21. package/dist/{SelectContainer_cjs_DJ_IUDjE.js → SelectContainer_cjs_DSMCeePO.js} +17 -22
  22. package/dist/{SelectContainer_es_BYBGTq-u.js → SelectContainer_es_D2Yz1Qwi.js} +3 -8
  23. package/dist/cjs/components/Accordion.js +7 -22
  24. package/dist/cjs/components/Avatar.js +4 -18
  25. package/dist/cjs/components/AvatarStack.js +8 -22
  26. package/dist/cjs/components/Badge.js +5 -19
  27. package/dist/cjs/components/Breadcrumbs.js +7 -21
  28. package/dist/cjs/components/Button.js +4 -18
  29. package/dist/cjs/components/Cell.js +6 -20
  30. package/dist/cjs/components/Checkbox.js +7 -15
  31. package/dist/cjs/components/Checkmark.js +5 -19
  32. package/dist/cjs/components/Chips.js +2 -16
  33. package/dist/cjs/components/Choice.js +7 -21
  34. package/dist/cjs/components/Code.js +5 -10
  35. package/dist/cjs/components/CookiesWarning.js +7 -21
  36. package/dist/cjs/components/Dadata.js +4 -9
  37. package/dist/cjs/components/DatePeriod.js +18 -33
  38. package/dist/cjs/components/DatePicker.js +7 -21
  39. package/dist/cjs/components/Divider.js +6 -14
  40. package/dist/cjs/components/Dot.js +4 -10
  41. package/dist/cjs/components/Drawer.js +6 -21
  42. package/dist/cjs/components/Dropdown.js +5 -21
  43. package/dist/cjs/components/Dropzone.js +11 -25
  44. package/dist/cjs/components/Flex.js +6 -12
  45. package/dist/cjs/components/Grid.js +8 -14
  46. package/dist/cjs/components/Group.js +3 -10
  47. package/dist/cjs/components/HTMLContent.js +4 -10
  48. package/dist/cjs/components/HeroTitle.js +5 -19
  49. package/dist/cjs/components/Icon.js +5 -19
  50. package/dist/cjs/components/Image.js +4 -12
  51. package/dist/cjs/components/Input.js +4 -9
  52. package/dist/cjs/components/InputNumber.js +6 -20
  53. package/dist/cjs/components/InputPassword.js +6 -20
  54. package/dist/cjs/components/Label.js +2 -16
  55. package/dist/cjs/components/Link.js +6 -14
  56. package/dist/cjs/components/List.js +8 -16
  57. package/dist/cjs/components/Loader.js +3 -11
  58. package/dist/cjs/components/Logo.js +8 -18
  59. package/dist/cjs/components/MenuItem.js +5 -19
  60. package/dist/cjs/components/Modal.js +7 -21
  61. package/dist/cjs/components/ModalSheetBottom.js +5 -19
  62. package/dist/cjs/components/Notification.js +11 -25
  63. package/dist/cjs/components/Overlay.js +3 -10
  64. package/dist/cjs/components/Pagination.js +8 -24
  65. package/dist/cjs/components/Radio.js +5 -13
  66. package/dist/cjs/components/RangeSlider.js +4 -10
  67. package/dist/cjs/components/Response.js +10 -24
  68. package/dist/cjs/components/SVGContent.js +5 -14
  69. package/dist/cjs/components/ScrollOnDrag.js +4 -10
  70. package/dist/cjs/components/ScrollToView.js +4 -10
  71. package/dist/cjs/components/Search.js +7 -21
  72. package/dist/cjs/components/Segmented.js +6 -20
  73. package/dist/cjs/components/Select.js +5 -20
  74. package/dist/cjs/components/Swiper.js +6 -20
  75. package/dist/cjs/components/Switch.js +5 -13
  76. package/dist/cjs/components/Tab.js +8 -23
  77. package/dist/cjs/components/Text.js +6 -14
  78. package/dist/cjs/components/Textarea.js +5 -10
  79. package/dist/cjs/components/Tile.js +5 -19
  80. package/dist/cjs/components/Title.js +5 -19
  81. package/dist/cjs/components/Tooltip.js +5 -19
  82. package/dist/cjs/components/Video.js +5 -9
  83. package/dist/cjs/components/Warning.js +5 -19
  84. package/dist/cjs/context/Notifications.js +16 -188
  85. package/dist/cjs/context/UIContext.js +14 -71
  86. package/dist/cjs/context/UrlAssetPrefix.js +15 -13
  87. package/dist/cjs/hoc/urlWithAssetPrefix.js +14 -73
  88. package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +14 -25
  89. package/dist/cjs/hooks/useAppearanceConfig.js +12 -2
  90. package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +10 -124
  91. package/dist/cjs/hooks/useDevicePropsGenerator.js +6 -9
  92. package/dist/cjs/hooks/useDeviceTargetClass.js +8 -4
  93. package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js +13 -116
  94. package/dist/cjs/hooks/useMediaQueries.js +11 -2
  95. package/dist/cjs/hooks/useStyles/styleAttributes.js +15 -168
  96. package/dist/cjs/hooks/useStyles/useStyles.js +10 -196
  97. package/dist/cjs/hooks/useStyles.js +7 -10
  98. package/dist/cjs/hooks.js +15 -6
  99. package/dist/cjs/utils/mergeAppearanceKeys.js +15 -15
  100. package/dist/cjs/utils/setViewportProperty.js +15 -5
  101. package/dist/cjs/utils.js +14 -4
  102. package/dist/components/Accordion.js +1 -16
  103. package/dist/components/Avatar.js +4 -18
  104. package/dist/components/AvatarStack.js +4 -18
  105. package/dist/components/Badge/index.js +1 -1
  106. package/dist/components/Badge.js +2 -16
  107. package/dist/components/Breadcrumbs.js +1 -15
  108. package/dist/components/Button.js +4 -18
  109. package/dist/components/Cell.js +2 -16
  110. package/dist/components/Checkbox.js +4 -12
  111. package/dist/components/Checkmark.js +1 -15
  112. package/dist/components/Chips.js +2 -16
  113. package/dist/components/Choice.js +2 -16
  114. package/dist/components/Code.js +3 -8
  115. package/dist/components/CookiesWarning.js +4 -18
  116. package/dist/components/Dadata.js +4 -9
  117. package/dist/components/DatePeriod.js +12 -27
  118. package/dist/components/DatePicker.js +7 -21
  119. package/dist/components/Divider.js +3 -11
  120. package/dist/components/Dot.js +2 -8
  121. package/dist/components/Drawer.js +3 -18
  122. package/dist/components/Dropdown.js +1 -17
  123. package/dist/components/Dropzone.js +7 -21
  124. package/dist/components/Flex.js +2 -8
  125. package/dist/components/Grid.js +2 -8
  126. package/dist/components/Group.js +3 -10
  127. package/dist/components/HTMLContent.js +2 -8
  128. package/dist/components/HeroTitle.js +1 -15
  129. package/dist/components/Icon.js +2 -16
  130. package/dist/components/Image.js +4 -12
  131. package/dist/components/Input.js +4 -9
  132. package/dist/components/InputNumber.js +4 -18
  133. package/dist/components/InputPassword/index.js +1 -1
  134. package/dist/components/InputPassword.js +3 -17
  135. package/dist/components/Label.js +2 -16
  136. package/dist/components/Link/index.js +1 -1
  137. package/dist/components/Link.js +2 -10
  138. package/dist/components/List.js +2 -10
  139. package/dist/components/Loader.js +3 -11
  140. package/dist/components/Logo.js +3 -13
  141. package/dist/components/MenuItem.js +1 -15
  142. package/dist/components/Modal/index.js +1 -1
  143. package/dist/components/Modal.js +3 -17
  144. package/dist/components/ModalSheetBottom.js +1 -15
  145. package/dist/components/Notification/index.js +1 -1
  146. package/dist/components/Notification.js +5 -19
  147. package/dist/components/Overlay.js +3 -10
  148. package/dist/components/Pagination.js +1 -17
  149. package/dist/components/Radio.js +2 -10
  150. package/dist/components/RangeSlider.js +2 -8
  151. package/dist/components/Response.js +5 -19
  152. package/dist/components/SVGContent.js +2 -11
  153. package/dist/components/ScrollOnDrag.js +2 -8
  154. package/dist/components/ScrollToView.js +2 -8
  155. package/dist/components/Search/index.js +1 -1
  156. package/dist/components/Search.js +1 -15
  157. package/dist/components/Segmented.js +2 -16
  158. package/dist/components/Select.js +5 -20
  159. package/dist/components/Swiper.js +2 -16
  160. package/dist/components/Switch.js +2 -10
  161. package/dist/components/Tab.js +2 -17
  162. package/dist/components/Text.js +3 -11
  163. package/dist/components/Textarea.js +3 -8
  164. package/dist/components/Tile.js +1 -15
  165. package/dist/components/Title.js +2 -16
  166. package/dist/components/Tooltip.js +2 -16
  167. package/dist/components/Video.js +4 -8
  168. package/dist/components/Warning.js +1 -15
  169. package/dist/hooks/useAppearanceConfig.js +11 -1
  170. package/dist/hooks/useDevicePropsGenerator.js +5 -8
  171. package/dist/hooks/useMediaQueries.js +10 -1
  172. package/dist/hooks/useStyles.js +6 -9
  173. package/dist/hooks.js +12 -7
  174. package/dist/primitives_cjs_CnyJ13MJ.js +2715 -0
  175. package/dist/primitives_es_BjyEnscF.js +2672 -0
  176. package/dist/types/components/Accordion/index.d.ts +1 -0
  177. package/dist/types/components/Avatar/index.d.ts +1 -0
  178. package/dist/types/components/AvatarStack/index.d.ts +1 -0
  179. package/dist/types/components/Badge/index.d.ts +2 -1
  180. package/dist/types/components/Breadcrumbs/index.d.ts +1 -0
  181. package/dist/types/components/Button/Button.d.ts +45 -45
  182. package/dist/types/components/Button/index.d.ts +1 -0
  183. package/dist/types/components/Cell/index.d.ts +1 -0
  184. package/dist/types/components/Checkbox/index.d.ts +1 -0
  185. package/dist/types/components/Checkmark/index.d.ts +1 -0
  186. package/dist/types/components/Choice/index.d.ts +1 -0
  187. package/dist/types/components/Code/index.d.ts +1 -0
  188. package/dist/types/components/CookiesWarning/index.d.ts +1 -0
  189. package/dist/types/components/Dadata/index.d.ts +1 -0
  190. package/dist/types/components/DatePeriod/index.d.ts +1 -0
  191. package/dist/types/components/DatePicker/index.d.ts +1 -0
  192. package/dist/types/components/Divider/index.d.ts +1 -0
  193. package/dist/types/components/Dot/index.d.ts +1 -0
  194. package/dist/types/components/Drawer/index.d.ts +1 -0
  195. package/dist/types/components/Dropdown/index.d.ts +1 -0
  196. package/dist/types/components/Dropzone/index.d.ts +1 -0
  197. package/dist/types/components/Flex/index.d.ts +1 -0
  198. package/dist/types/components/Grid/index.d.ts +1 -0
  199. package/dist/types/components/Group/Group.d.ts +5 -5
  200. package/dist/types/components/Group/index.d.ts +1 -0
  201. package/dist/types/components/HTMLContent/index.d.ts +1 -0
  202. package/dist/types/components/HeroTitle/index.d.ts +1 -0
  203. package/dist/types/components/Icon/Icon.d.ts +2 -2
  204. package/dist/types/components/Icon/index.d.ts +1 -0
  205. package/dist/types/components/Image/index.d.ts +1 -0
  206. package/dist/types/components/Input/index.d.ts +1 -0
  207. package/dist/types/components/InputPassword/index.d.ts +2 -1
  208. package/dist/types/components/Label/index.d.ts +1 -0
  209. package/dist/types/components/Link/index.d.ts +2 -1
  210. package/dist/types/components/List/index.d.ts +1 -0
  211. package/dist/types/components/Loader/index.d.ts +1 -0
  212. package/dist/types/components/Logo/index.d.ts +1 -0
  213. package/dist/types/components/MenuItem/index.d.ts +1 -0
  214. package/dist/types/components/Modal/Modal.d.ts +16 -16
  215. package/dist/types/components/Modal/index.d.ts +2 -1
  216. package/dist/types/components/ModalSheetBottom/ModalSheetBottom.d.ts +7 -7
  217. package/dist/types/components/ModalSheetBottom/index.d.ts +1 -0
  218. package/dist/types/components/Notification/index.d.ts +2 -1
  219. package/dist/types/components/Overlay/index.d.ts +1 -0
  220. package/dist/types/components/Pagination/index.d.ts +1 -0
  221. package/dist/types/components/Radio/index.d.ts +1 -0
  222. package/dist/types/components/RangeSlider/index.d.ts +1 -0
  223. package/dist/types/components/Response/Response.d.ts +33 -33
  224. package/dist/types/components/Response/index.d.ts +1 -0
  225. package/dist/types/components/SVGContent/SVGContent.d.ts +1 -1
  226. package/dist/types/components/SVGContent/index.d.ts +1 -0
  227. package/dist/types/components/ScrollOnDrag/index.d.ts +1 -0
  228. package/dist/types/components/ScrollToView/index.d.ts +1 -0
  229. package/dist/types/components/Scrollbar/index.d.ts +1 -0
  230. package/dist/types/components/Search/SearchInput.d.ts +19 -19
  231. package/dist/types/components/Search/index.d.ts +2 -1
  232. package/dist/types/components/Segmented/index.d.ts +1 -0
  233. package/dist/types/components/Select/index.d.ts +1 -0
  234. package/dist/types/components/Swiper/index.d.ts +1 -0
  235. package/dist/types/components/Switch/Switch.d.ts +4 -4
  236. package/dist/types/components/Switch/index.d.ts +1 -0
  237. package/dist/types/components/Tab/index.d.ts +1 -0
  238. package/dist/types/components/Text/index.d.ts +1 -0
  239. package/dist/types/components/Textarea/index.d.ts +1 -0
  240. package/dist/types/components/Tile/index.d.ts +1 -0
  241. package/dist/types/components/Title/index.d.ts +1 -0
  242. package/dist/types/components/Tooltip/Tooltip.d.ts +6 -6
  243. package/dist/types/components/Tooltip/index.d.ts +1 -0
  244. package/dist/types/components/Video/index.d.ts +1 -0
  245. package/dist/types/components/Warning/index.d.ts +1 -0
  246. package/dist/utils.js +12 -2
  247. package/package.json +1 -1
  248. package/dist/Divider_cjs_C5Ou2Kqa.js +0 -104
  249. package/dist/Divider_es_D2snK_vn.js +0 -100
  250. package/dist/DropdownItem_cjs_k28TIoDU.js +0 -230
  251. package/dist/DropdownItem_es_DjPgbwtU.js +0 -225
  252. package/dist/Icon_cjs_DTvdhr8B.js +0 -1099
  253. package/dist/Icon_es_kewxGRUB.js +0 -1086
  254. package/dist/Link_cjs_Dn7UhCYe.js +0 -277
  255. package/dist/Link_es_BDAmhIzd.js +0 -272
  256. package/dist/Text_cjs_erTy2pUN.js +0 -68
  257. package/dist/Text_es_DVNvU0m0.js +0 -64
@@ -1,1099 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var React = require('react');
5
- var clsx = require('clsx');
6
- var SVG = require('react-inlinesvg');
7
- var Link = require('./Link_cjs_Dn7UhCYe.js');
8
- var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
9
- var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
10
- var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
11
- var Text = require('./Text_cjs_erTy2pUN.js');
12
- var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
13
- var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
14
-
15
- const badgeAppearanceAccent = {
16
- accentPrimary: {
17
- fill: 'accentPrimary',
18
- borderColor: 'accentBorderQuaternary',
19
- textColor: 'accentTextPrimary',
20
- dotFill: 'accentItemPrimary',
21
- iconFill: 'accentItemPrimary',
22
- },
23
- accentQuaternary: {
24
- fill: 'accentQuaternary',
25
- borderColor: 'accentBorderQuaternary',
26
- textColor: 'accentTextPrimary',
27
- dotFill: 'accentItemPrimary',
28
- iconFill: 'accentItemPrimary',
29
- },
30
- accentSecondary: {
31
- fill: 'accentSecondary',
32
- borderColor: 'accentBorderQuaternary',
33
- textColor: 'accentTextQuaternary',
34
- dotFill: 'accentItemQuaternary',
35
- iconFill: 'accentItemQuaternary',
36
- },
37
- accentTertiary: {
38
- fill: 'accentTertiary',
39
- borderColor: 'accentBorderSecondary',
40
- textColor: 'accentTextSecondary',
41
- dotFill: 'accentItemSecondary',
42
- iconFill: 'accentItemSecondary',
43
- },
44
- };
45
-
46
- const badgeAppearanceDanger = {
47
- dangerPrimary: {
48
- fill: 'dangerPrimary',
49
- borderColor: 'dangerBorderPrimary',
50
- textColor: 'dangerTextPrimary',
51
- dotFill: 'dangerItemPrimary',
52
- iconFill: 'dangerItemPrimary',
53
- },
54
- };
55
-
56
- const badgeAppearanceDisabled = {
57
- disabledPrimary: {
58
- fill: 'surfacePrimary',
59
- borderColor: 'surfaceBorderPrimary',
60
- textColor: 'surfaceTextPrimary',
61
- iconFill: 'surfaceItemPrimary',
62
- },
63
- };
64
-
65
- const badgeAppearanceError = {
66
- errorPrimary: {
67
- fill: 'errorPrimary',
68
- fillHover: 'errorHoverPrimary',
69
- textColor: 'errorTextPrimary',
70
- iconFill: 'errorItemPrimary',
71
- },
72
- };
73
-
74
- const badgeAppearanceExtra = {
75
- extraPrimary: {
76
- fill: 'extraPrimary',
77
- borderColor: 'extraBorderSecondary',
78
- textColor: 'extraTextPrimary',
79
- dotFill: 'extraItemPrimary',
80
- iconFill: 'extraItemPrimary',
81
- },
82
- };
83
-
84
- const badgeAppearanceInfo = {
85
- infoPrimary: {
86
- fill: 'infoPrimary',
87
- borderColor: 'infoBorderSecondary',
88
- textColor: 'infoTextPrimary',
89
- dotFill: 'infoItemPrimary',
90
- iconFill: 'infoItemPrimary',
91
- },
92
- infoSecondary: {
93
- fill: 'infoSecondary',
94
- borderColor: 'infoBorderSecondary',
95
- textColor: 'infoTextSecondary',
96
- dotFill: 'infoItemSecondary',
97
- },
98
- };
99
-
100
- const badgeAppearanceShape = {
101
- circular: {
102
- shape: 'circular',
103
- },
104
- rounded: {
105
- shape: 'rounded',
106
- },
107
- roundedXL: {
108
- shape: 'rounded',
109
- shapeStrength: '2m',
110
- },
111
- roundedL: {
112
- shape: 'rounded',
113
- shapeStrength: '1_5m',
114
- },
115
- roundedM: {
116
- shape: 'rounded',
117
- shapeStrength: '1m',
118
- },
119
- roundedS: {
120
- shape: 'rounded',
121
- shapeStrength: '0_5m',
122
- },
123
- };
124
-
125
- const badgeAppearanceSize = {
126
- sizeXXL: {
127
- size: 'xxl',
128
- textSize: 'xl',
129
- iconSize: '24',
130
- },
131
- sizeXL: {
132
- size: 'xl',
133
- textSize: 'l',
134
- iconSize: '24',
135
- },
136
- sizeL: {
137
- size: 'l',
138
- textSize: 'l',
139
- iconSize: '24',
140
- },
141
- sizeM: {
142
- size: 'm',
143
- textSize: 'm',
144
- iconSize: '24',
145
- },
146
- sizeS: {
147
- size: 's',
148
- textSize: 's',
149
- iconSize: '24',
150
- },
151
- sizeXS: {
152
- size: 'xs',
153
- textSize: 'xs',
154
- iconSize: '24',
155
- },
156
- sizeXXS: {
157
- size: 'xxs',
158
- textSize: 'xs',
159
- iconSize: '24',
160
- },
161
- };
162
-
163
- const badgeAppearanceSpecial = {
164
- specialPrimary: {
165
- fill: 'specialPrimary',
166
- borderColor: 'specialBorderSecondary',
167
- textColor: 'specialTextPrimary',
168
- dotFill: 'specialItemPrimary',
169
- iconFill: 'specialItemPrimary',
170
- },
171
- };
172
-
173
- const badgeAppearanceStyle = {
174
- solid: {
175
- borderColor: 'none',
176
- },
177
- outlined: {
178
- fill: 'none',
179
- },
180
- full: {},
181
- ghost: {
182
- fill: 'none',
183
- borderColor: 'none',
184
- },
185
- };
186
-
187
- const badgeAppearanceSuccess = {
188
- successPrimary: {
189
- fill: 'successPrimary',
190
- borderColor: 'successBorderPrimary',
191
- textColor: 'successTextPrimary',
192
- dotFill: 'successItemPrimary',
193
- iconFill: 'successItemPrimary',
194
- },
195
- };
196
-
197
- const badgeAppearanceSurface = {
198
- surfacePrimary: {
199
- fill: 'surfacePrimary',
200
- borderColor: 'surfaceBorderTertiary',
201
- textColor: 'surfaceTextPrimary',
202
- dotFill: 'surfaceItemPrimary',
203
- iconFill: 'surfaceItemPrimary',
204
- },
205
- surfaceQuaternary: {
206
- fill: 'accentPrimary',
207
- borderColor: 'surfaceBorderPrimary',
208
- textColor: 'surfaceTextPrimary',
209
- },
210
- surfaceSecondary: {
211
- fill: 'surfaceSecondary',
212
- borderColor: 'surfaceBorderSecondary',
213
- textColor: 'surfaceTextPrimary',
214
- },
215
- surfaceTertiary: {
216
- fill: 'surfaceTertiary',
217
- borderColor: 'surfaceBorderTertiary',
218
- textColor: 'surfaceTextPrimary',
219
- },
220
- };
221
-
222
- const badgeAppearanceWarning = {
223
- warningPrimary: {
224
- fill: 'warningPrimary',
225
- borderColor: 'warningBorderPrimary',
226
- textColor: 'warningTextPrimary',
227
- dotFill: 'warningItemPrimary',
228
- iconFill: 'warningItemPrimary',
229
- },
230
- };
231
-
232
- const badgeAppearance = {
233
- ...badgeAppearanceSize,
234
- ...badgeAppearanceShape,
235
- ...badgeAppearanceStyle,
236
- ...badgeAppearanceAccent,
237
- ...badgeAppearanceDanger,
238
- ...badgeAppearanceError,
239
- ...badgeAppearanceInfo,
240
- ...badgeAppearanceSpecial,
241
- ...badgeAppearanceExtra,
242
- ...badgeAppearanceSuccess,
243
- ...badgeAppearanceDisabled,
244
- ...badgeAppearanceSurface,
245
- ...badgeAppearanceWarning,
246
- };
247
-
248
- const badgeConfig = {
249
- appearance: badgeAppearance,
250
- setAppearance: (appearanceConfig) => {
251
- badgeConfig.appearance = appearanceConfig;
252
- },
253
- };
254
- function Badge(props) {
255
- const { appearance, className, dataTestId, dataTour, dot, icon, iconSrc, value, isSkeleton, children, } = props;
256
- const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, badgeConfig);
257
- const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
258
- const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColor, textSize, dotFillClass, iconFill, iconShape, iconSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
259
- const { styles: badgeStyles } = useStyles.useStyles(props);
260
- const badgeTypeClass = value
261
- ? icon
262
- ? dot
263
- ? 'badge_type_dot-icon-counter'
264
- : 'badge_type_icon-counter'
265
- : 'badge_type_counter'
266
- : icon
267
- ? 'badge_type_icon'
268
- : dot
269
- ? 'badge_type_dot'
270
- : 'badge_type_fill';
271
- return (jsxRuntime.jsxs("div", { className: clsx(className, 'badge', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, sizeClass && `badge_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, badgeTypeClass, isSkeleton && 'badge_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: badgeStyles, children: [dot && (jsxRuntime.jsx("div", { className: clsx('badge__dot', dotFillClass && `svg_fill_${dotFillClass}`), children: jsxRuntime.jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsxRuntime.jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
272
- (value && (jsxRuntime.jsx(Text.Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
273
- }
274
-
275
- const titleAppearanceAccent = {
276
- accentPrimary: {
277
- fill: 'accentPrimary',
278
- fillHover: 'accentHoverPrimary',
279
- },
280
- accentSecondary: {
281
- fill: 'accentPrimary',
282
- fillHover: 'accentHoverPrimary',
283
- },
284
- };
285
-
286
- const titleAppearanceDanger = {
287
- dangerPrimary: {
288
- fill: 'dangerPrimary',
289
- fillHover: 'dangerHoverPrimary',
290
- },
291
- };
292
-
293
- const titleAppearanceDisabled = {
294
- disabledPrimary: {
295
- fill: 'surfacePrimary',
296
- borderColor: 'errorBorderQuaternary',
297
- borderHover: 'errorBorderHoverQuaternary',
298
- textColor: 'surfaceTextQuaternary',
299
- iconBeforeFill: 'errorQuaternary',
300
- },
301
- disabledSecondary: {
302
- fill: 'surfaceSecondary',
303
- borderColor: 'surfaceBorderTertiary',
304
- borderHover: 'surfaceBorderHoverQuaternary',
305
- iconBeforeFill: 'surfaceQuaternary',
306
- },
307
- };
308
-
309
- const titleAppearanceError = {
310
- errorPrimary: {
311
- fill: 'errorPrimary',
312
- fillHover: 'errorHoverPrimary',
313
- textColor: 'errorTextPrimary',
314
- textColorHover: 'errorTextPrimary',
315
- },
316
- };
317
-
318
- const titleAppearanceExtra = {
319
- extraPrimary: {
320
- fill: 'extraPrimary',
321
- fillHover: 'extraHoverPrimary',
322
- textColor: 'extraTextPrimary',
323
- },
324
- };
325
-
326
- const titleAppearanceInfo = {
327
- infoPrimary: {
328
- fill: 'accentPrimary',
329
- fillHover: 'accentHoverPrimary',
330
- },
331
- infoSecondary: {
332
- fill: 'accentPrimary',
333
- fillHover: 'accentHoverPrimary',
334
- },
335
- };
336
-
337
- const titleAppearanceRequire = {
338
- requirePrimary: {
339
- fill: 'warningTertiary',
340
- borderColor: 'warningBorderQuaternary',
341
- borderHover: 'warningBorderQuaternary',
342
- textColor: 'surfaceTextPrimary',
343
- iconBeforeFill: 'warningQuaternary',
344
- },
345
- requireSecondary: {
346
- fill: 'surfaceSecondary',
347
- borderColor: 'surfaceBorderTertiary',
348
- borderHover: 'surfaceBorderQuaternary',
349
- iconBeforeFill: 'surfaceQuaternary',
350
- },
351
- };
352
-
353
- const titleAppearanceSize = {
354
- h1: {
355
- size: 'h1',
356
- iconAfterFillSize: '24',
357
- iconAfterSize: '24',
358
- iconBeforeFillSize: '24',
359
- iconBeforeSize: '24',
360
- },
361
- h2: {
362
- size: 'h2',
363
- iconAfterFillSize: '24',
364
- iconAfterSize: '24',
365
- iconBeforeFillSize: '24',
366
- iconBeforeSize: '24',
367
- },
368
- h3: {
369
- size: 'h3',
370
- iconAfterFillSize: '24',
371
- iconAfterSize: '24',
372
- iconBeforeFillSize: '24',
373
- iconBeforeSize: '24',
374
- },
375
- h4: {
376
- size: 'h4',
377
- iconAfterFillSize: '24',
378
- iconAfterSize: '24',
379
- iconBeforeFillSize: '24',
380
- iconBeforeSize: '24',
381
- },
382
- h5: {
383
- size: 'h5',
384
- iconAfterFillSize: '20',
385
- iconAfterSize: '20',
386
- iconBeforeFillSize: '20',
387
- iconBeforeSize: '20',
388
- },
389
- h6: {
390
- size: 'h6',
391
- iconAfterFillSize: '16',
392
- iconAfterSize: '16',
393
- iconBeforeFillSize: '16',
394
- iconBeforeSize: '16',
395
- },
396
- };
397
-
398
- const titleAppearanceSpecial = {
399
- specialPrimary: {
400
- fill: 'specialPrimary',
401
- fillHover: 'specialHoverPrimary',
402
- },
403
- };
404
-
405
- const titleAppearanceStyle = {
406
- solid: {},
407
- outlined: {
408
- fill: 'none',
409
- },
410
- full: {},
411
- ghost: {
412
- fill: 'none',
413
- },
414
- };
415
-
416
- const titleAppearanceSuccess = {
417
- successPrimary: {
418
- fill: 'successPrimary',
419
- fillHover: 'successHoverPrimary',
420
- },
421
- };
422
-
423
- const titleAppearanceSurface = {
424
- surfacePrimary: {
425
- fill: 'surfacePrimary',
426
- fillHover: 'surfaceHoverPrimary',
427
- },
428
- surfaceQuaternary: {
429
- fill: 'surfaceQuaternary',
430
- fillHover: 'surfaceHoverQuaternary',
431
- },
432
- surfaceSecondary: {
433
- fill: 'surfaceSecondary',
434
- fillHover: 'surfaceHoverSecondary',
435
- },
436
- surfaceTertiary: {
437
- fill: 'surfaceTertiary',
438
- fillHover: 'surfaceHoverTertiary',
439
- },
440
- };
441
-
442
- const titleAppearanceWarning = {
443
- warningPrimary: {
444
- fill: 'warningPrimary',
445
- fillHover: 'warningHoverPrimary',
446
- textColor: 'warningTextSecondary',
447
- textColorHover: 'warningTextSecondary',
448
- },
449
- };
450
-
451
- const titleAppearance = {
452
- ...titleAppearanceSize,
453
- ...titleAppearanceDisabled,
454
- ...titleAppearanceStyle,
455
- ...titleAppearanceAccent,
456
- ...titleAppearanceDanger,
457
- ...titleAppearanceError,
458
- ...titleAppearanceInfo,
459
- ...titleAppearanceSpecial,
460
- ...titleAppearanceExtra,
461
- ...titleAppearanceSuccess,
462
- ...titleAppearanceSurface,
463
- ...titleAppearanceWarning,
464
- ...titleAppearanceRequire,
465
- };
466
-
467
- const titleConfig = {
468
- appearance: titleAppearance,
469
- setAppearance: (appearanceConfig) => {
470
- titleConfig.appearance = appearanceConfig;
471
- },
472
- };
473
- function Title(props) {
474
- const { appearance, className, dataTestId, dataTour, text, afterWrapper, beforeWrapper, style, tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, children, } = props;
475
- const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, titleConfig, isDisabled);
476
- const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
477
- const { directionClass, size, fillClass, fillHoverClass, textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, widthClass, wrapperDirectionClass, onClickIconAfter, onClickIconBefore, } = propsGenerator;
478
- const { styles: titleStyles, wrapper: titleWrapperStyles } = useStyles.useStyles(props);
479
- const Tag = React.useMemo(() => {
480
- if (tag) {
481
- return tag;
482
- }
483
- return size ? size : 'span';
484
- }, [tag, size]);
485
- return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `title_size_${size}`, directionClass && `title_direction_${directionClass}`, isDisabled &&
486
- textColorDisabledClass &&
487
- `text-color_${textColorDisabledClass}`, !isActive &&
488
- !isDisabled &&
489
- textColorClass &&
490
- `text text-color_${textColorClass}`, isActive &&
491
- !isDisabled &&
492
- textColorActiveClass &&
493
- `text-color_active_${textColorActiveClass}`, !isActive &&
494
- !isDisabled &&
495
- textColorHoverClass &&
496
- `text-color_hover_${textColorHoverClass}`, isActive &&
497
- !isDisabled &&
498
- textColorActiveHoverClass &&
499
- `text-color_active_hover${textColorActiveHoverClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, titleStyles, style), onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, onClick: onClickIconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, onClick: onClickIconAfter }))] }), after] }));
500
- }
501
-
502
- const tooltipAppearanceDefault = {
503
- defaultPrimary: {
504
- fill: 'surfacePrimary',
505
- fillHover: 'surfaceHoverPrimary',
506
- titleColor: 'surfaceTextPrimary',
507
- borderColor: 'surfaceBorderPrimary',
508
- textColor: 'surfaceTextPrimary',
509
- },
510
- };
511
-
512
- const tooltipAppearanceDisabled = {
513
- disabledPrimary: {
514
- fill: 'disabledPrimary',
515
- fillHover: 'disabledHoverPrimary',
516
- titleColor: 'surfaceTextPrimary',
517
- textColor: 'surfaceTextPrimary',
518
- },
519
- };
520
-
521
- const tooltipAppearanceError = {
522
- errorPrimary: {
523
- fill: 'errorPrimary',
524
- fillHover: 'errorHoverPrimary',
525
- borderColor: 'errorBorderPrimary',
526
- titleColor: 'errorTextPrimary',
527
- textColor: 'errorTextPrimary',
528
- },
529
- };
530
-
531
- const tooltipAppearanceRequire = {
532
- requirePrimary: {
533
- fill: 'warningPrimary',
534
- fillHover: 'warningHoverPrimary',
535
- borderColor: 'warningBorderPrimary',
536
- titleColor: 'warningTextPrimary',
537
- textColor: 'warningTextPrimary',
538
- },
539
- };
540
-
541
- const tooltipAppearanceShape = {
542
- circular: {
543
- shape: 'circular',
544
- },
545
- rounded: {
546
- shape: 'rounded',
547
- },
548
- roundedXL: {
549
- shape: 'rounded',
550
- shapeStrength: '2m',
551
- },
552
- roundedL: {
553
- shape: 'rounded',
554
- shapeStrength: '1_5m',
555
- },
556
- roundedM: {
557
- shape: 'rounded',
558
- shapeStrength: '1m',
559
- },
560
- roundedS: {
561
- shape: 'rounded',
562
- shapeStrength: '0_5m',
563
- },
564
- };
565
-
566
- const tooltipAppearanceSize = {
567
- sizeL: {
568
- size: 'l',
569
- titleSize: 'h5',
570
- textSize: 's',
571
- },
572
- sizeM: {
573
- size: 'm',
574
- titleSize: 'h5',
575
- textSize: 's',
576
- },
577
- sizeS: {
578
- size: 's',
579
- titleSize: 'h5',
580
- textSize: 's',
581
- },
582
- };
583
-
584
- const tooltipAppearanceStyle = {
585
- solid: {
586
- borderColor: 'none',
587
- },
588
- outlined: {
589
- fill: 'none',
590
- },
591
- full: {},
592
- ghost: {
593
- fill: 'none',
594
- borderColor: 'none',
595
- },
596
- };
597
-
598
- const tooltipAppearanceSuccess = {
599
- successPrimary: {
600
- fill: 'successPrimary',
601
- fillHover: 'successHoverPrimary',
602
- borderColor: 'successBorderPrimary',
603
- titleColor: 'successTextPrimary',
604
- textColor: 'successTextPrimary',
605
- },
606
- };
607
-
608
- const tooltipAppearance = {
609
- ...tooltipAppearanceDefault,
610
- ...tooltipAppearanceSize,
611
- ...tooltipAppearanceDisabled,
612
- ...tooltipAppearanceRequire,
613
- ...tooltipAppearanceShape,
614
- ...tooltipAppearanceStyle,
615
- ...tooltipAppearanceError,
616
- ...tooltipAppearanceSuccess,
617
- };
618
-
619
- const tooltipConfig = {
620
- appearance: tooltipAppearance,
621
- setAppearance: (appearanceConfig) => {
622
- tooltipConfig.appearance = appearanceConfig;
623
- },
624
- };
625
- const Tooltip = React.forwardRef(function Tooltip(props, ref) {
626
- const { appearance, className, dataTestId, dataTour, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, isTooltipDisableState, children, } = props;
627
- const tooltipElementRef = React.useRef(null);
628
- const tooltipTimeoutHideRef = React.useRef(null);
629
- const tooltipTimeoutShowRef = React.useRef(null);
630
- const isTooltipCloseAnimationInProgressRef = React.useRef(false);
631
- const [isTooltipVisible, setIsTooltipVisible] = React.useState(initialIsVisible);
632
- const openTooltip = React.useCallback(() => {
633
- if (!isTooltipCloseAnimationInProgressRef.current) {
634
- if (tooltipTimeoutHideRef.current) {
635
- clearTimeout(tooltipTimeoutHideRef.current);
636
- }
637
- tooltipTimeoutShowRef.current = setTimeout(() => {
638
- setIsTooltipVisible(true);
639
- }, openTimeoutDelay);
640
- }
641
- }, [openTimeoutDelay]);
642
- const closeTooltip = React.useCallback(() => {
643
- if (tooltipTimeoutShowRef.current) {
644
- clearTimeout(tooltipTimeoutShowRef.current);
645
- }
646
- tooltipTimeoutHideRef.current = setTimeout(() => {
647
- setIsTooltipVisible((prevState) => {
648
- const newState = false;
649
- if (prevState === true) {
650
- isTooltipCloseAnimationInProgressRef.current = true;
651
- }
652
- return newState;
653
- });
654
- }, closeTimeoutDelay);
655
- }, [closeTimeoutDelay]);
656
- const onAnimationEnd = React.useCallback(() => {
657
- isTooltipCloseAnimationInProgressRef.current = false;
658
- }, []);
659
- React.useImperativeHandle(ref, () => ({
660
- get tooltipElement() {
661
- return tooltipElementRef.current;
662
- },
663
- openTooltip: openTooltip,
664
- closeTooltip: closeTooltip,
665
- isTooltipVisible: isTooltipVisible,
666
- }), [isTooltipVisible, openTooltip, closeTooltip]);
667
- const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, tooltipConfig);
668
- const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
669
- const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
670
- const { styles: tooltipStyles } = useStyles.useStyles(props);
671
- return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
672
- ? isTooltipVisible
673
- ? 'tooltip_state_open'
674
- : 'tooltip_state_close'
675
- : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsxRuntime.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntime.jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsxRuntime.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
676
- });
677
-
678
- const iconAppearanceAccent = {
679
- accentPrimary: {
680
- fill: 'accentPrimary',
681
- fillHover: 'accentHoverPrimary',
682
- borderColor: 'accentBorderPrimary',
683
- badgeAppearance: 'surfacePrimary',
684
- iconFill: 'accentItemPrimary',
685
- },
686
- accentSecondary: {
687
- fill: 'accentPrimary',
688
- fillHover: 'accentHoverPrimary',
689
- borderColor: 'accentBorderPrimary',
690
- iconFill: 'accentItemPrimary',
691
- },
692
- };
693
-
694
- const iconAppearanceDanger = {
695
- dangerPrimary: {
696
- fill: 'dangerPrimary',
697
- fillHover: 'dangerHoverPrimary',
698
- borderColor: 'dangerBorderSecondary',
699
- badgeAppearance: 'surfacePrimary',
700
- iconFill: 'dangerItemPrimary',
701
- },
702
- };
703
-
704
- const iconAppearanceDisabled = {
705
- disabledPrimary: {
706
- fill: 'surfacePrimary',
707
- borderColor: 'surfaceBorderPrimary',
708
- badgeAppearance: 'surfacePrimary',
709
- iconFill: 'surfaceItemQuaternary',
710
- },
711
- };
712
-
713
- const iconAppearanceError = {
714
- errorPrimary: {
715
- fill: 'errorPrimary',
716
- fillHover: 'errorHoverPrimary',
717
- borderColor: 'errorBorderPrimary',
718
- badgeAppearance: 'surfacePrimary',
719
- iconFill: 'errorItemPrimary',
720
- },
721
- };
722
-
723
- const iconAppearanceExtra = {
724
- extraPrimary: {
725
- fill: 'extraPrimary',
726
- fillHover: 'extraHoverPrimary',
727
- borderColor: 'extraBorderQuaternary',
728
- badgeAppearance: 'surfacePrimary',
729
- iconFill: 'extraItemPrimary',
730
- },
731
- };
732
-
733
- const iconAppearanceInfo = {
734
- infoPrimary: {
735
- fill: 'infoPrimary',
736
- borderColor: 'infoBorderPrimary',
737
- badgeAppearance: 'surfacePrimary',
738
- iconFill: 'infoItemPrimary',
739
- },
740
- infoSecondary: {
741
- fill: 'accentPrimary',
742
- fillHover: 'accentHoverPrimary',
743
- borderColor: 'accentBorderPrimary',
744
- iconFill: 'infoItemSecondary',
745
- },
746
- };
747
-
748
- const iconAppearanceShape = {
749
- circular: {
750
- shape: 'circular',
751
- },
752
- rounded: {
753
- shape: 'rounded',
754
- },
755
- roundedXL: {
756
- shape: 'rounded',
757
- shapeStrength: '2m',
758
- },
759
- roundedL: {
760
- shape: 'rounded',
761
- shapeStrength: '1_5m',
762
- },
763
- roundedM: {
764
- shape: 'rounded',
765
- shapeStrength: '1m',
766
- },
767
- roundedS: {
768
- shape: 'rounded',
769
- shapeStrength: '0_5m',
770
- },
771
- };
772
-
773
- const iconAppearanceSize = {
774
- size12_12: {
775
- fillSize: '12',
776
- badgeAppearanceSize: 'sizeXXS',
777
- badgeSize: 'xxs',
778
- iconSize: '12',
779
- },
780
- size14_12: {
781
- fillSize: '14',
782
- badgeAppearanceSize: 'sizeXXS',
783
- badgeSize: 'xxs',
784
- iconSize: '12',
785
- },
786
- size14_14: {
787
- fillSize: '14',
788
- badgeAppearanceSize: 'sizeXXS',
789
- badgeSize: 'xxs',
790
- iconSize: '14',
791
- },
792
- size16_12: {
793
- fillSize: '16',
794
- badgeAppearanceSize: 'sizeXXS',
795
- badgeSize: 'xxs',
796
- iconSize: '12',
797
- },
798
- size16_14: {
799
- fillSize: '16',
800
- badgeAppearanceSize: 'sizeXXS',
801
- badgeSize: 'xxs',
802
- iconSize: '14',
803
- },
804
- size16_16: {
805
- fillSize: '16',
806
- badgeAppearanceSize: 'sizeXXS',
807
- badgeSize: 'xxs',
808
- iconSize: '16',
809
- },
810
- size20_12: {
811
- fillSize: '20',
812
- badgeAppearanceSize: 'sizeXXS',
813
- badgeSize: 'xxs',
814
- iconSize: '12',
815
- },
816
- size20_14: {
817
- fillSize: '20',
818
- badgeAppearanceSize: 'sizeXXS',
819
- badgeSize: 'xxs',
820
- iconSize: '14',
821
- },
822
- size20_16: {
823
- fillSize: '20',
824
- badgeAppearanceSize: 'sizeXXS',
825
- badgeSize: 'xxs',
826
- iconSize: '16',
827
- },
828
- size20_20: {
829
- fillSize: '20',
830
- badgeAppearanceSize: 'sizeXXS',
831
- badgeSize: 'xxs',
832
- iconSize: '20',
833
- },
834
- size24_12: {
835
- fillSize: '24',
836
- badgeAppearanceSize: 'sizeXXS',
837
- badgeSize: 'xxs',
838
- iconSize: '12',
839
- },
840
- size24_14: {
841
- fillSize: '24',
842
- badgeAppearanceSize: 'sizeXXS',
843
- badgeSize: 'xxs',
844
- iconSize: '14',
845
- },
846
- size24_16: {
847
- fillSize: '24',
848
- badgeAppearanceSize: 'sizeXXS',
849
- badgeSize: 'xxs',
850
- iconSize: '16',
851
- },
852
- size24_20: {
853
- fillSize: '24',
854
- badgeAppearanceSize: 'sizeXXS',
855
- badgeSize: 'xxs',
856
- iconSize: '20',
857
- },
858
- size24_24: {
859
- fillSize: '24',
860
- badgeAppearanceSize: 'sizeXXS',
861
- badgeSize: 'xxs',
862
- iconSize: '24',
863
- },
864
- size32_12: {
865
- fillSize: '32',
866
- badgeAppearanceSize: 'sizeXXS',
867
- badgeSize: 'xxs',
868
- iconSize: '12',
869
- },
870
- size32_14: {
871
- fillSize: '32',
872
- badgeAppearanceSize: 'sizeXXS',
873
- badgeSize: 'xxs',
874
- iconSize: '14',
875
- },
876
- size32_16: {
877
- fillSize: '32',
878
- badgeAppearanceSize: 'sizeXXS',
879
- badgeSize: 'xxs',
880
- iconSize: '16',
881
- },
882
- size32_20: {
883
- fillSize: '32',
884
- badgeAppearanceSize: 'sizeXXS',
885
- badgeSize: 'xxs',
886
- iconSize: '20',
887
- },
888
- size32_24: {
889
- fillSize: '32',
890
- badgeAppearanceSize: 'sizeXXS',
891
- badgeSize: 'xxs',
892
- iconSize: '24',
893
- },
894
- size32_32: {
895
- fillSize: '32',
896
- badgeAppearanceSize: 'sizeXXS',
897
- badgeSize: 'xxs',
898
- iconSize: '32',
899
- },
900
- size40_12: {
901
- fillSize: '40',
902
- badgeAppearanceSize: 'sizeXXS',
903
- badgeSize: 'xxs',
904
- iconSize: '12',
905
- },
906
- size40_14: {
907
- fillSize: '40',
908
- badgeAppearanceSize: 'sizeXXS',
909
- badgeSize: 'xxs',
910
- iconSize: '14',
911
- },
912
- size40_16: {
913
- fillSize: '40',
914
- badgeAppearanceSize: 'sizeXXS',
915
- badgeSize: 'xxs',
916
- iconSize: '16',
917
- },
918
- size40_20: {
919
- fillSize: '40',
920
- badgeAppearanceSize: 'sizeXXS',
921
- badgeSize: 'xxs',
922
- iconSize: '20',
923
- },
924
- size40_24: {
925
- fillSize: '40',
926
- badgeAppearanceSize: 'sizeXXS',
927
- badgeSize: 'xxs',
928
- iconSize: '24',
929
- },
930
- size40_32: {
931
- fillSize: '40',
932
- badgeAppearanceSize: 'sizeXXS',
933
- badgeSize: 'xxs',
934
- iconSize: '32',
935
- },
936
- size40_40: {
937
- fillSize: '40',
938
- badgeAppearanceSize: 'sizeXXS',
939
- badgeSize: 'xxs',
940
- iconSize: '40',
941
- },
942
- };
943
-
944
- const iconAppearanceSpecial = {
945
- specialPrimary: {
946
- fill: 'specialPrimary',
947
- fillHover: 'specialHoverPrimary',
948
- borderColor: 'specialBorderQuaternary',
949
- badgeAppearance: 'surfacePrimary',
950
- iconFill: 'specialItemPrimary',
951
- },
952
- };
953
-
954
- const iconAppearanceStyle = {
955
- solid: {
956
- borderColor: 'none',
957
- },
958
- outlined: {
959
- fill: 'none',
960
- },
961
- full: {},
962
- ghost: {
963
- fill: 'none',
964
- borderColor: 'none',
965
- },
966
- };
967
-
968
- const iconAppearanceSuccess = {
969
- successPrimary: {
970
- fill: 'successPrimary',
971
- fillHover: 'successHoverPrimary',
972
- borderColor: 'successBorderPrimary',
973
- badgeAppearance: 'surfacePrimary',
974
- iconFill: 'successItemPrimary',
975
- },
976
- };
977
-
978
- const iconAppearanceSurface = {
979
- surfacePrimary: {
980
- fill: 'surfacePrimary',
981
- fillHover: 'surfaceHoverSecondary',
982
- borderColor: 'surfaceBorderTertiary',
983
- badgeAppearance: 'surfacePrimary',
984
- iconFill: 'surfaceItemPrimary',
985
- },
986
- surfaceQuaternary: {
987
- fill: 'surfaceQuaternary',
988
- fillHover: 'surfaceHoverQuaternary',
989
- badgeAppearance: 'accentPrimary',
990
- iconFill: 'surfaceItemPrimary',
991
- },
992
- surfaceSecondary: {
993
- fill: 'surfaceSecondary',
994
- fillHover: 'surfaceHoverSecondary',
995
- badgeAppearance: 'accentPrimary solid rounded',
996
- iconFill: 'surfaceItemPrimary',
997
- },
998
- surfaceTertiary: {
999
- fill: 'surfaceTertiary',
1000
- fillHover: 'surfaceHoverTertiary',
1001
- badgeAppearance: 'accentPrimary',
1002
- iconFill: 'surfaceItemPrimary',
1003
- },
1004
- };
1005
-
1006
- const iconAppearanceWarning = {
1007
- warningPrimary: {
1008
- fill: 'warningPrimary',
1009
- fillHover: 'warningHoverPrimary',
1010
- borderColor: 'warningBorderSecondary',
1011
- badgeAppearance: 'surfacePrimary',
1012
- iconFill: 'warningItemPrimary',
1013
- },
1014
- };
1015
-
1016
- const iconAppearance = {
1017
- ...iconAppearanceDisabled,
1018
- ...iconAppearanceSize,
1019
- ...iconAppearanceStyle,
1020
- ...iconAppearanceAccent,
1021
- ...iconAppearanceShape,
1022
- ...iconAppearanceDanger,
1023
- ...iconAppearanceError,
1024
- ...iconAppearanceInfo,
1025
- ...iconAppearanceSpecial,
1026
- ...iconAppearanceExtra,
1027
- ...iconAppearanceSuccess,
1028
- ...iconAppearanceSurface,
1029
- ...iconAppearanceWarning,
1030
- };
1031
-
1032
- const iconConfig = {
1033
- appearance: iconAppearance,
1034
- setAppearance: (appearanceConfig) => {
1035
- iconConfig.appearance = appearanceConfig;
1036
- },
1037
- };
1038
- const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
1039
- const { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
1040
- const ImageComponent = React.useMemo(() => {
1041
- if (SvgImage) {
1042
- const SvgComponent = SvgImage;
1043
- const sizes = {};
1044
- if (width) {
1045
- sizes.width = width;
1046
- }
1047
- if (height) {
1048
- sizes.height = height;
1049
- }
1050
- return jsxRuntime.jsx(SvgComponent, { ...sizes });
1051
- }
1052
- if (imageSrc) {
1053
- if (imageSrc.endsWith('.svg')) {
1054
- if (saveFillStroke) {
1055
- return jsxRuntime.jsx(SVG, { src: imageSrc });
1056
- }
1057
- return jsxRuntime.jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
1058
- }
1059
- return jsxRuntime.jsx("img", { src: imageSrc });
1060
- }
1061
- return null;
1062
- }, [SvgImage, imageSrc, width, height, saveFillStroke]);
1063
- const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, iconConfig, isDisabled);
1064
- const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
1065
- const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
1066
- const { styles: iconStyles } = useStyles.useStyles(props);
1067
- return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
1068
- ? fillClass && `fill_${fillClass}`
1069
- : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
1070
- ? fillHoverClass && `fill_hover_${fillHoverClass}`
1071
- : fillActiveHoverClass &&
1072
- `fill_active_hover_${fillActiveHoverClass}`, fillSizeClass && `icon_fill_size_${fillSizeClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, !isActive
1073
- ? iconFillClass && `icon_fill_${iconFillClass}`
1074
- : iconFillActiveClass && `icon_fill_active_${iconFillActiveClass}`, !isActive
1075
- ? iconFillHoverClass && `icon_fill_hover_${iconFillHoverClass}`
1076
- : iconFillActiveHoverClass &&
1077
- `icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
1078
- iconFillDisabledClass &&
1079
- `icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
1080
- `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
1081
- }));
1082
- const removeFillStroke = (code) => {
1083
- return code
1084
- .replace(/fill=".*?"/g, 'fill=""')
1085
- .replace(/stroke=".*?"/g, 'stroke=""');
1086
- };
1087
-
1088
- exports.Badge = Badge;
1089
- exports.Icon = Icon;
1090
- exports.Title = Title;
1091
- exports.Tooltip = Tooltip;
1092
- exports.badgeAppearance = badgeAppearance;
1093
- exports.badgeConfig = badgeConfig;
1094
- exports.iconAppearance = iconAppearance;
1095
- exports.iconConfig = iconConfig;
1096
- exports.titleAppearance = titleAppearance;
1097
- exports.titleConfig = titleConfig;
1098
- exports.tooltipAppearance = tooltipAppearance;
1099
- exports.tooltipConfig = tooltipConfig;