@skbkontur/react-ui 0.0.0-7feb61cdde → 0.0.0-80c5917afc

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 (379) hide show
  1. package/CHANGELOG.md +94 -0
  2. package/cjs/components/Autocomplete/Autocomplete.d.ts +5 -0
  3. package/cjs/components/Autocomplete/Autocomplete.js +18 -4
  4. package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
  5. package/cjs/components/Button/Button.d.ts +1 -1
  6. package/cjs/components/Button/Button.js +7 -2
  7. package/cjs/components/Button/Button.js.map +1 -1
  8. package/cjs/components/Button/Button.styles.js +6 -4
  9. package/cjs/components/Button/Button.styles.js.map +1 -1
  10. package/cjs/components/Button/getInnerLinkTheme.js +2 -3
  11. package/cjs/components/Button/getInnerLinkTheme.js.map +1 -1
  12. package/cjs/components/Calendar/Calendar.styles.js +1 -2
  13. package/cjs/components/Calendar/Calendar.styles.js.map +1 -1
  14. package/cjs/components/Calendar/DayCellView.js +1 -1
  15. package/cjs/components/Calendar/DayCellView.js.map +1 -1
  16. package/cjs/components/Calendar/DayCellView.styles.d.ts +1 -1
  17. package/cjs/components/Calendar/DayCellView.styles.js +4 -4
  18. package/cjs/components/Calendar/DayCellView.styles.js.map +1 -1
  19. package/cjs/components/Checkbox/Checkbox.d.ts +10 -0
  20. package/cjs/components/Checkbox/Checkbox.js +70 -15
  21. package/cjs/components/Checkbox/Checkbox.js.map +1 -1
  22. package/cjs/components/Checkbox/Checkbox.md +18 -0
  23. package/cjs/components/Checkbox/Checkbox.mixins.d.ts +2 -0
  24. package/cjs/components/Checkbox/Checkbox.mixins.js +35 -0
  25. package/cjs/components/Checkbox/Checkbox.mixins.js.map +1 -0
  26. package/cjs/components/Checkbox/Checkbox.styles.d.ts +6 -0
  27. package/cjs/components/Checkbox/Checkbox.styles.js +95 -34
  28. package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
  29. package/cjs/components/ComboBox/ComboBox.md +5 -3
  30. package/cjs/components/CurrencyInput/CurrencyHelper.d.ts +2 -0
  31. package/cjs/components/CurrencyInput/CurrencyHelper.js +21 -6
  32. package/cjs/components/CurrencyInput/CurrencyHelper.js.map +1 -1
  33. package/cjs/components/DateInput/DateInput.d.ts +3 -0
  34. package/cjs/components/DateInput/DateInput.js +11 -3
  35. package/cjs/components/DateInput/DateInput.js.map +1 -1
  36. package/cjs/components/Dropdown/getDropdownTheme.js +3 -1
  37. package/cjs/components/Dropdown/getDropdownTheme.js.map +1 -1
  38. package/cjs/components/DropdownMenu/DropdownMenu.d.ts +1 -1
  39. package/cjs/components/DropdownMenu/DropdownMenu.js +4 -1
  40. package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
  41. package/cjs/components/DropdownMenu/DropdownMenu.md +28 -0
  42. package/cjs/components/DropdownMenu/getDropdownMenuTheme.js +5 -1
  43. package/cjs/components/DropdownMenu/getDropdownMenuTheme.js.map +1 -1
  44. package/cjs/components/FileUploader/FileUploader.styles.js +3 -2
  45. package/cjs/components/FileUploader/FileUploader.styles.js.map +1 -1
  46. package/cjs/components/GlobalLoader/GlobalLoader.js +6 -2
  47. package/cjs/components/GlobalLoader/GlobalLoader.js.map +1 -1
  48. package/cjs/components/GlobalLoader/GlobalLoaderView.d.ts +2 -1
  49. package/cjs/components/GlobalLoader/GlobalLoaderView.js +6 -4
  50. package/cjs/components/GlobalLoader/GlobalLoaderView.js.map +1 -1
  51. package/cjs/components/Input/Input.d.ts +1 -5
  52. package/cjs/components/Input/Input.js +4 -5
  53. package/cjs/components/Input/Input.js.map +1 -1
  54. package/cjs/components/Input/Input.styles.js +3 -2
  55. package/cjs/components/Input/Input.styles.js.map +1 -1
  56. package/cjs/components/Kebab/Kebab.d.ts +1 -1
  57. package/cjs/components/Kebab/Kebab.js +6 -1
  58. package/cjs/components/Kebab/Kebab.js.map +1 -1
  59. package/cjs/components/Kebab/Kebab.md +28 -0
  60. package/cjs/components/Link/Link.js +4 -2
  61. package/cjs/components/Link/Link.js.map +1 -1
  62. package/cjs/components/Link/Link.mixins.d.ts +1 -2
  63. package/cjs/components/Link/Link.mixins.js +5 -16
  64. package/cjs/components/Link/Link.mixins.js.map +1 -1
  65. package/cjs/components/Link/Link.styles.d.ts +2 -0
  66. package/cjs/components/Link/Link.styles.js +58 -38
  67. package/cjs/components/Link/Link.styles.js.map +1 -1
  68. package/cjs/components/Modal/ModalFooter.js +1 -1
  69. package/cjs/components/Modal/ModalFooter.js.map +1 -1
  70. package/cjs/components/Modal/ModalHeader.js +1 -1
  71. package/cjs/components/Modal/ModalHeader.js.map +1 -1
  72. package/cjs/components/Radio/Radio.styles.js +6 -2
  73. package/cjs/components/Radio/Radio.styles.js.map +1 -1
  74. package/cjs/components/ScrollContainer/ScrollContainer.d.ts +3 -2
  75. package/cjs/components/ScrollContainer/ScrollContainer.js +2 -1
  76. package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
  77. package/cjs/components/Select/Select.d.ts +7 -5
  78. package/cjs/components/Select/Select.js +15 -6
  79. package/cjs/components/Select/Select.js.map +1 -1
  80. package/cjs/components/Select/Select.styles.js +3 -2
  81. package/cjs/components/Select/Select.styles.js.map +1 -1
  82. package/cjs/components/Select/selectTheme.js +4 -1
  83. package/cjs/components/Select/selectTheme.js.map +1 -1
  84. package/cjs/components/Tabs/Tab.d.ts +1 -0
  85. package/cjs/components/Tabs/Tab.js +15 -1
  86. package/cjs/components/Tabs/Tab.js.map +1 -1
  87. package/cjs/components/Tabs/Tab.styles.d.ts +9 -3
  88. package/cjs/components/Tabs/Tab.styles.js +106 -68
  89. package/cjs/components/Tabs/Tab.styles.js.map +1 -1
  90. package/cjs/components/Tabs/Tabs.d.ts +8 -2
  91. package/cjs/components/Tabs/Tabs.js +15 -1
  92. package/cjs/components/Tabs/Tabs.js.map +1 -1
  93. package/cjs/components/Tabs/Tabs.md +32 -0
  94. package/cjs/components/Tabs/Tabs.styles.d.ts +3 -1
  95. package/cjs/components/Tabs/Tabs.styles.js +23 -7
  96. package/cjs/components/Tabs/Tabs.styles.js.map +1 -1
  97. package/cjs/components/Tabs/TabsContext.d.ts +2 -1
  98. package/cjs/components/Tabs/TabsContext.js +2 -0
  99. package/cjs/components/Tabs/TabsContext.js.map +1 -1
  100. package/cjs/components/Tabs/helpers.d.ts +6 -0
  101. package/cjs/components/Tabs/helpers.js +30 -0
  102. package/cjs/components/Tabs/helpers.js.map +1 -0
  103. package/cjs/components/Textarea/Textarea.styles.js +2 -2
  104. package/cjs/components/Textarea/Textarea.styles.js.map +1 -1
  105. package/cjs/components/Toast/ToastView.styles.js +2 -2
  106. package/cjs/components/Toast/ToastView.styles.js.map +1 -1
  107. package/cjs/components/Toggle/Toggle.d.ts +11 -1
  108. package/cjs/components/Toggle/Toggle.js +102 -2
  109. package/cjs/components/Toggle/Toggle.js.map +1 -1
  110. package/cjs/components/Toggle/Toggle.md +16 -2
  111. package/cjs/components/Toggle/Toggle.mixins.d.ts +7 -0
  112. package/cjs/components/Toggle/Toggle.mixins.js +90 -0
  113. package/cjs/components/Toggle/Toggle.mixins.js.map +1 -0
  114. package/cjs/components/Toggle/Toggle.styles.d.ts +21 -1
  115. package/cjs/components/Toggle/Toggle.styles.js +172 -56
  116. package/cjs/components/Toggle/Toggle.styles.js.map +1 -1
  117. package/cjs/components/TokenInput/TokenInput.d.ts +2 -0
  118. package/cjs/components/TokenInput/TokenInput.js +8 -2
  119. package/cjs/components/TokenInput/TokenInput.js.map +1 -1
  120. package/cjs/components/TokenInput/TokenInput.md +26 -35
  121. package/cjs/components/TokenInput/TokenInput.styles.js +2 -1
  122. package/cjs/components/TokenInput/TokenInput.styles.js.map +1 -1
  123. package/cjs/components/TokenInput/TokenInputMenu.d.ts +7 -0
  124. package/cjs/components/TokenInput/TokenInputMenu.js +9 -1
  125. package/cjs/components/TokenInput/TokenInputMenu.js.map +1 -1
  126. package/cjs/components/TooltipMenu/TooltipMenu.d.ts +1 -1
  127. package/cjs/components/TooltipMenu/TooltipMenu.js +8 -2
  128. package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
  129. package/cjs/components/TooltipMenu/TooltipMenu.md +28 -0
  130. package/cjs/internal/CloseButtonIcon/CloseButtonIcon.styles.js +2 -1
  131. package/cjs/internal/CloseButtonIcon/CloseButtonIcon.styles.js.map +1 -1
  132. package/cjs/internal/CustomComboBox/ComboBoxMenu.d.ts +1 -0
  133. package/cjs/internal/CustomComboBox/ComboBoxMenu.js +10 -1
  134. package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
  135. package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +4 -0
  136. package/cjs/internal/CustomComboBox/ComboBoxView.js +11 -3
  137. package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
  138. package/cjs/internal/CustomComboBox/CustomComboBox.js +13 -11
  139. package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
  140. package/cjs/internal/DateSelect/DateSelect.js +1 -1
  141. package/cjs/internal/DateSelect/DateSelect.js.map +1 -1
  142. package/cjs/internal/DateSelect/DateSelect.styles.d.ts +3 -0
  143. package/cjs/internal/DateSelect/DateSelect.styles.js +15 -3
  144. package/cjs/internal/DateSelect/DateSelect.styles.js.map +1 -1
  145. package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +3 -2
  146. package/cjs/internal/DropdownContainer/DropdownContainer.js +6 -1
  147. package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
  148. package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +1 -4
  149. package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js +7 -5
  150. package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js.map +1 -1
  151. package/cjs/internal/InputLikeText/InputLikeText.d.ts +1 -0
  152. package/cjs/internal/InputLikeText/InputLikeText.js +16 -4
  153. package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
  154. package/cjs/internal/InternalMenu/InternalMenu.d.ts +13 -4
  155. package/cjs/internal/InternalMenu/InternalMenu.js +15 -5
  156. package/cjs/internal/InternalMenu/InternalMenu.js.map +1 -1
  157. package/cjs/internal/InternalMenu/InternalMenu.styles.d.ts +1 -0
  158. package/cjs/internal/InternalMenu/InternalMenu.styles.js +13 -7
  159. package/cjs/internal/InternalMenu/InternalMenu.styles.js.map +1 -1
  160. package/cjs/internal/InternalMenu/isIconPaddingEnabled.d.ts +2 -0
  161. package/cjs/internal/InternalMenu/isIconPaddingEnabled.js +9 -0
  162. package/cjs/internal/InternalMenu/isIconPaddingEnabled.js.map +1 -0
  163. package/cjs/internal/Menu/Menu.d.ts +42 -8
  164. package/cjs/internal/Menu/Menu.js +272 -78
  165. package/cjs/internal/Menu/Menu.js.map +1 -1
  166. package/cjs/internal/Menu/Menu.styles.d.ts +6 -1
  167. package/cjs/internal/Menu/Menu.styles.js +42 -8
  168. package/cjs/internal/Menu/Menu.styles.js.map +1 -1
  169. package/cjs/internal/MobilePopup/MobilePopup.d.ts +2 -2
  170. package/cjs/internal/MobilePopup/MobilePopup.js +1 -1
  171. package/cjs/internal/MobilePopup/MobilePopup.js.map +1 -1
  172. package/cjs/internal/Popup/Popup.d.ts +7 -2
  173. package/cjs/internal/Popup/Popup.js +13 -3
  174. package/cjs/internal/Popup/Popup.js.map +1 -1
  175. package/cjs/internal/PopupMenu/PopupMenu.d.ts +4 -1
  176. package/cjs/internal/PopupMenu/PopupMenu.js +29 -4
  177. package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
  178. package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  179. package/cjs/internal/themes/DefaultTheme.d.ts +114 -17
  180. package/cjs/internal/themes/DefaultTheme.js +244 -68
  181. package/cjs/internal/themes/DefaultTheme.js.map +1 -1
  182. package/cjs/internal/themes/Theme2022.d.ts +19 -3
  183. package/cjs/internal/themes/Theme2022.js +33 -13
  184. package/cjs/internal/themes/Theme2022.js.map +1 -1
  185. package/cjs/internal/themes/Theme2022Dark.d.ts +0 -4
  186. package/cjs/internal/themes/Theme2022Dark.js +3 -14
  187. package/cjs/internal/themes/Theme2022Dark.js.map +1 -1
  188. package/cjs/typings/html.d.ts +0 -1
  189. package/components/Autocomplete/Autocomplete/Autocomplete.js +13 -3
  190. package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
  191. package/components/Autocomplete/Autocomplete.d.ts +5 -0
  192. package/components/Button/Button/Button.js +2 -0
  193. package/components/Button/Button/Button.js.map +1 -1
  194. package/components/Button/Button.d.ts +1 -1
  195. package/components/Button/Button.styles/Button.styles.js +2 -2
  196. package/components/Button/Button.styles/Button.styles.js.map +1 -1
  197. package/components/Button/getInnerLinkTheme/getInnerLinkTheme.js +2 -3
  198. package/components/Button/getInnerLinkTheme/getInnerLinkTheme.js.map +1 -1
  199. package/components/Calendar/Calendar.styles/Calendar.styles.js +1 -1
  200. package/components/Calendar/Calendar.styles/Calendar.styles.js.map +1 -1
  201. package/components/Calendar/DayCellView/DayCellView.js +1 -1
  202. package/components/Calendar/DayCellView/DayCellView.js.map +1 -1
  203. package/components/Calendar/DayCellView.styles/DayCellView.styles.js +2 -2
  204. package/components/Calendar/DayCellView.styles/DayCellView.styles.js.map +1 -1
  205. package/components/Calendar/DayCellView.styles.d.ts +1 -1
  206. package/components/Checkbox/Checkbox/Checkbox.js +56 -8
  207. package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
  208. package/components/Checkbox/Checkbox.d.ts +10 -0
  209. package/components/Checkbox/Checkbox.md +18 -0
  210. package/components/Checkbox/Checkbox.mixins/Checkbox.mixins.js +17 -0
  211. package/components/Checkbox/Checkbox.mixins/Checkbox.mixins.js.map +1 -0
  212. package/components/Checkbox/Checkbox.mixins/package.json +6 -0
  213. package/components/Checkbox/Checkbox.mixins.d.ts +2 -0
  214. package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +39 -25
  215. package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
  216. package/components/Checkbox/Checkbox.styles.d.ts +6 -0
  217. package/components/ComboBox/ComboBox.md +5 -3
  218. package/components/CurrencyInput/CurrencyHelper/CurrencyHelper.js +32 -4
  219. package/components/CurrencyInput/CurrencyHelper/CurrencyHelper.js.map +1 -1
  220. package/components/CurrencyInput/CurrencyHelper.d.ts +2 -0
  221. package/components/DateInput/DateInput/DateInput.js +5 -1
  222. package/components/DateInput/DateInput/DateInput.js.map +1 -1
  223. package/components/DateInput/DateInput.d.ts +3 -0
  224. package/components/Dropdown/getDropdownTheme/getDropdownTheme.js +3 -1
  225. package/components/Dropdown/getDropdownTheme/getDropdownTheme.js.map +1 -1
  226. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +1 -0
  227. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
  228. package/components/DropdownMenu/DropdownMenu.d.ts +1 -1
  229. package/components/DropdownMenu/DropdownMenu.md +28 -0
  230. package/components/DropdownMenu/getDropdownMenuTheme/getDropdownMenuTheme.js +5 -1
  231. package/components/DropdownMenu/getDropdownMenuTheme/getDropdownMenuTheme.js.map +1 -1
  232. package/components/FileUploader/FileUploader.styles/FileUploader.styles.js +1 -1
  233. package/components/FileUploader/FileUploader.styles/FileUploader.styles.js.map +1 -1
  234. package/components/GlobalLoader/GlobalLoader/GlobalLoader.js +5 -1
  235. package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map +1 -1
  236. package/components/GlobalLoader/GlobalLoaderView/GlobalLoaderView.js +6 -2
  237. package/components/GlobalLoader/GlobalLoaderView/GlobalLoaderView.js.map +1 -1
  238. package/components/GlobalLoader/GlobalLoaderView.d.ts +2 -1
  239. package/components/Input/Input/Input.js +3 -1
  240. package/components/Input/Input/Input.js.map +1 -1
  241. package/components/Input/Input.d.ts +1 -5
  242. package/components/Input/Input.styles/Input.styles.js +2 -2
  243. package/components/Input/Input.styles/Input.styles.js.map +1 -1
  244. package/components/Kebab/Kebab/Kebab.js +4 -1
  245. package/components/Kebab/Kebab/Kebab.js.map +1 -1
  246. package/components/Kebab/Kebab.d.ts +1 -1
  247. package/components/Kebab/Kebab.md +28 -0
  248. package/components/Link/Link/Link.js +4 -4
  249. package/components/Link/Link/Link.js.map +1 -1
  250. package/components/Link/Link.mixins/Link.mixins.js +2 -5
  251. package/components/Link/Link.mixins/Link.mixins.js.map +1 -1
  252. package/components/Link/Link.mixins.d.ts +1 -2
  253. package/components/Link/Link.styles/Link.styles.js +29 -21
  254. package/components/Link/Link.styles/Link.styles.js.map +1 -1
  255. package/components/Link/Link.styles.d.ts +2 -0
  256. package/components/Modal/ModalFooter/ModalFooter.js +1 -1
  257. package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
  258. package/components/Modal/ModalHeader/ModalHeader.js +1 -1
  259. package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
  260. package/components/Radio/Radio.styles/Radio.styles.js +2 -2
  261. package/components/Radio/Radio.styles/Radio.styles.js.map +1 -1
  262. package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
  263. package/components/ScrollContainer/ScrollContainer.d.ts +3 -2
  264. package/components/Select/Select/Select.js +15 -7
  265. package/components/Select/Select/Select.js.map +1 -1
  266. package/components/Select/Select.d.ts +7 -5
  267. package/components/Select/Select.styles/Select.styles.js +1 -1
  268. package/components/Select/Select.styles/Select.styles.js.map +1 -1
  269. package/components/Select/selectTheme/selectTheme.js +3 -1
  270. package/components/Select/selectTheme/selectTheme.js.map +1 -1
  271. package/components/Tabs/Tab/Tab.js +3 -3
  272. package/components/Tabs/Tab/Tab.js.map +1 -1
  273. package/components/Tabs/Tab.d.ts +1 -0
  274. package/components/Tabs/Tab.styles/Tab.styles.js +52 -23
  275. package/components/Tabs/Tab.styles/Tab.styles.js.map +1 -1
  276. package/components/Tabs/Tab.styles.d.ts +9 -3
  277. package/components/Tabs/Tabs/Tabs.js +11 -3
  278. package/components/Tabs/Tabs/Tabs.js.map +1 -1
  279. package/components/Tabs/Tabs.d.ts +8 -2
  280. package/components/Tabs/Tabs.md +32 -0
  281. package/components/Tabs/Tabs.styles/Tabs.styles.js +15 -4
  282. package/components/Tabs/Tabs.styles/Tabs.styles.js.map +1 -1
  283. package/components/Tabs/Tabs.styles.d.ts +3 -1
  284. package/components/Tabs/TabsContext/TabsContext.js +1 -0
  285. package/components/Tabs/TabsContext/TabsContext.js.map +1 -1
  286. package/components/Tabs/TabsContext.d.ts +2 -1
  287. package/components/Tabs/helpers/helpers.js +25 -0
  288. package/components/Tabs/helpers/helpers.js.map +1 -0
  289. package/components/Tabs/helpers/package.json +6 -0
  290. package/components/Tabs/helpers.d.ts +6 -0
  291. package/components/Textarea/Textarea.styles/Textarea.styles.js +1 -1
  292. package/components/Textarea/Textarea.styles/Textarea.styles.js.map +1 -1
  293. package/components/Toast/ToastView.styles/ToastView.styles.js +1 -1
  294. package/components/Toast/ToastView.styles/ToastView.styles.js.map +1 -1
  295. package/components/Toggle/Toggle/Toggle.js +112 -9
  296. package/components/Toggle/Toggle/Toggle.js.map +1 -1
  297. package/components/Toggle/Toggle.d.ts +11 -1
  298. package/components/Toggle/Toggle.md +16 -2
  299. package/components/Toggle/Toggle.mixins/Toggle.mixins.js +35 -0
  300. package/components/Toggle/Toggle.mixins/Toggle.mixins.js.map +1 -0
  301. package/components/Toggle/Toggle.mixins/package.json +6 -0
  302. package/components/Toggle/Toggle.mixins.d.ts +7 -0
  303. package/components/Toggle/Toggle.styles/Toggle.styles.js +85 -31
  304. package/components/Toggle/Toggle.styles/Toggle.styles.js.map +1 -1
  305. package/components/Toggle/Toggle.styles.d.ts +21 -1
  306. package/components/TokenInput/TokenInput/TokenInput.js +9 -3
  307. package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
  308. package/components/TokenInput/TokenInput.d.ts +2 -0
  309. package/components/TokenInput/TokenInput.md +26 -35
  310. package/components/TokenInput/TokenInput.styles/TokenInput.styles.js +1 -1
  311. package/components/TokenInput/TokenInput.styles/TokenInput.styles.js.map +1 -1
  312. package/components/TokenInput/TokenInputMenu/TokenInputMenu.js +1 -0
  313. package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map +1 -1
  314. package/components/TokenInput/TokenInputMenu.d.ts +7 -0
  315. package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +7 -2
  316. package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
  317. package/components/TooltipMenu/TooltipMenu.d.ts +1 -1
  318. package/components/TooltipMenu/TooltipMenu.md +28 -0
  319. package/internal/CloseButtonIcon/CloseButtonIcon.styles/CloseButtonIcon.styles.js +1 -1
  320. package/internal/CloseButtonIcon/CloseButtonIcon.styles/CloseButtonIcon.styles.js.map +1 -1
  321. package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +5 -0
  322. package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
  323. package/internal/CustomComboBox/ComboBoxMenu.d.ts +1 -0
  324. package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +10 -3
  325. package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
  326. package/internal/CustomComboBox/ComboBoxView.d.ts +4 -0
  327. package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +23 -20
  328. package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
  329. package/internal/DateSelect/DateSelect/DateSelect.js +2 -1
  330. package/internal/DateSelect/DateSelect/DateSelect.js.map +1 -1
  331. package/internal/DateSelect/DateSelect.styles/DateSelect.styles.js +5 -2
  332. package/internal/DateSelect/DateSelect.styles/DateSelect.styles.js.map +1 -1
  333. package/internal/DateSelect/DateSelect.styles.d.ts +3 -0
  334. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +2 -0
  335. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
  336. package/internal/DropdownContainer/DropdownContainer.d.ts +3 -2
  337. package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js +5 -4
  338. package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js.map +1 -1
  339. package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +1 -4
  340. package/internal/InputLikeText/InputLikeText/InputLikeText.js +20 -8
  341. package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
  342. package/internal/InputLikeText/InputLikeText.d.ts +1 -0
  343. package/internal/InternalMenu/InternalMenu/InternalMenu.js +11 -6
  344. package/internal/InternalMenu/InternalMenu/InternalMenu.js.map +1 -1
  345. package/internal/InternalMenu/InternalMenu.d.ts +13 -4
  346. package/internal/InternalMenu/InternalMenu.styles/InternalMenu.styles.js +10 -7
  347. package/internal/InternalMenu/InternalMenu.styles/InternalMenu.styles.js.map +1 -1
  348. package/internal/InternalMenu/InternalMenu.styles.d.ts +1 -0
  349. package/internal/InternalMenu/isIconPaddingEnabled/isIconPaddingEnabled.js +6 -0
  350. package/internal/InternalMenu/isIconPaddingEnabled/isIconPaddingEnabled.js.map +1 -0
  351. package/internal/InternalMenu/isIconPaddingEnabled/package.json +6 -0
  352. package/internal/InternalMenu/isIconPaddingEnabled.d.ts +2 -0
  353. package/internal/Menu/Menu/Menu.js +197 -42
  354. package/internal/Menu/Menu/Menu.js.map +1 -1
  355. package/internal/Menu/Menu.d.ts +42 -8
  356. package/internal/Menu/Menu.styles/Menu.styles.js +20 -5
  357. package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
  358. package/internal/Menu/Menu.styles.d.ts +6 -1
  359. package/internal/MobilePopup/MobilePopup/MobilePopup.js +1 -0
  360. package/internal/MobilePopup/MobilePopup/MobilePopup.js.map +1 -1
  361. package/internal/MobilePopup/MobilePopup.d.ts +2 -2
  362. package/internal/Popup/Popup/Popup.js +9 -3
  363. package/internal/Popup/Popup/Popup.js.map +1 -1
  364. package/internal/Popup/Popup.d.ts +7 -2
  365. package/internal/PopupMenu/PopupMenu/PopupMenu.js +27 -5
  366. package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
  367. package/internal/PopupMenu/PopupMenu.d.ts +4 -1
  368. package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  369. package/internal/themes/DefaultTheme/DefaultTheme.js +320 -88
  370. package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
  371. package/internal/themes/DefaultTheme.d.ts +114 -17
  372. package/internal/themes/Theme2022/Theme2022.js +59 -44
  373. package/internal/themes/Theme2022/Theme2022.js.map +1 -1
  374. package/internal/themes/Theme2022.d.ts +19 -3
  375. package/internal/themes/Theme2022Dark/Theme2022Dark.js +1 -18
  376. package/internal/themes/Theme2022Dark/Theme2022Dark.js.map +1 -1
  377. package/internal/themes/Theme2022Dark.d.ts +0 -4
  378. package/package.json +3 -3
  379. package/typings/html.d.ts +0 -1
@@ -5,65 +5,94 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
5
5
  import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
6
6
  import { shift } from "../../../lib/styles/DimensionFunctions";
7
7
  import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
8
+ import { fontSize, lineHeight, paddingX, paddingY } from "../helpers";
8
9
  export var globalClasses = prefix('tab')({
9
10
  focus: 'focus'
10
11
  });
11
12
  export var styles = memoizeStyle({
12
- root: function root(t) {
13
- var paddingTop = t.tabPaddingY;
14
- var paddingBottom = "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")";
15
- return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n border-bottom: ", " solid transparent;\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: inline-block;\n font-size: ", ";\n line-height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding-bottom: ", ";\n padding-top: ", ";\n position: relative;\n text-decoration: inherit;\n transition: border-bottom 0.2s ease-out;\n\n &:hover {\n outline: inherit;\n border-bottom: ", " solid ", ";\n }\n\n &:focus {\n outline: inherit;\n }\n "])), t.tabBorderWidth, t.tabTextColorDefault, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
13
+ rootSmall: function rootSmall(t) {
14
+ return tabRoot(t, 'small');
16
15
  },
17
- vertical: function vertical(t) {
18
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n border-bottom: none;\n border-left: ", " solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ", ";\n padding-right: ", ";\n\n &:hover {\n border-bottom: none;\n border-left: ", " solid ", ";\n }\n\n .", " {\n bottom: 0;\n left: -", ";\n right: 0;\n }\n "])), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
16
+ rootMedium: function rootMedium(t) {
17
+ return tabRoot(t, 'medium');
19
18
  },
20
- focus: function focus(t) {
21
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n border: ", " solid ", ";\n bottom: -", ";\n left: -", ";\n position: absolute;\n right: -", ";\n top: 0;\n "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, t.tabPaddingX, t.tabPaddingX);
19
+ rootLarge: function rootLarge(t) {
20
+ return tabRoot(t, 'large');
21
+ },
22
+ verticalSmall: function verticalSmall(t) {
23
+ return tabVertical(t, 'small');
24
+ },
25
+ verticalMedium: function verticalMedium(t) {
26
+ return tabVertical(t, 'medium');
27
+ },
28
+ verticalLarge: function verticalLarge(t) {
29
+ return tabVertical(t, 'large');
30
+ },
31
+ focusSmall: function focusSmall(t) {
32
+ return tabFocus(t, 'small');
33
+ },
34
+ focusMedium: function focusMedium(t) {
35
+ return tabFocus(t, 'medium');
36
+ },
37
+ focusLarge: function focusLarge(t) {
38
+ return tabFocus(t, 'large');
22
39
  },
23
40
  disabled: function disabled(t) {
24
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n color: rgba(\n ", ",\n ", ",\n ", ",\n 0.5\n );\n cursor: default;\n "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
41
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n color: rgba(\n ", ",\n ", ",\n ", ",\n 0.5\n );\n cursor: default;\n "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
25
42
  },
26
43
  active: function active() {
27
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n cursor: default;\n "])));
44
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n cursor: default;\n "])));
28
45
  }
29
46
  });
30
47
  export var horizontalStyles = memoizeStyle({
31
48
  active: function active(t) {
32
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom: ", " solid transparent;\n }\n "])), t.tabBorderWidth);
49
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom: ", " solid transparent;\n }\n "])), t.tabBorderWidth);
33
50
  },
34
51
  disabled: function disabled() {
35
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: transparent;\n }\n "])));
52
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: transparent;\n }\n "])));
36
53
  },
37
54
  primary: function primary(t) {
38
- return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverPrimary);
55
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverPrimary);
39
56
  },
40
57
  success: function success(t) {
41
- return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverSuccess);
58
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverSuccess);
42
59
  },
43
60
  warning: function warning(t) {
44
- return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverWarning);
61
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverWarning);
45
62
  },
46
63
  error: function error(t) {
47
- return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverError);
64
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-bottom-color: ", ";\n }\n "])), t.tabColorHoverError);
48
65
  }
49
66
  });
50
67
  export var verticalStyles = memoizeStyle({
51
68
  active: function active(t) {
52
- return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left: ", " solid transparent;\n }\n "])), t.tabBorderWidth);
69
+ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left: ", " solid transparent;\n }\n "])), t.tabBorderWidth);
53
70
  },
54
71
  disabled: function disabled() {
55
- return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: transparent;\n }\n "])));
72
+ return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: transparent;\n }\n "])));
56
73
  },
57
74
  primary: function primary(t) {
58
- return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverPrimary);
75
+ return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverPrimary);
59
76
  },
60
77
  success: function success(t) {
61
- return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverSuccess);
78
+ return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverSuccess);
62
79
  },
63
80
  warning: function warning(t) {
64
- return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverWarning);
81
+ return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverWarning);
65
82
  },
66
83
  error: function error(t) {
67
- return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverError);
84
+ return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-left-color: ", ";\n }\n "])), t.tabColorHoverError);
68
85
  }
69
- });
86
+ });
87
+
88
+ function tabRoot(t, size) {
89
+ return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " solid transparent;\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: inline-block;\n font-size: ", ";\n line-height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding-bottom: calc(", " - ", ");\n padding-top: ", ";\n position: relative;\n text-decoration: inherit;\n transition: border-bottom ", " ", ";\n\n &:hover {\n outline: inherit;\n border-bottom: ", " solid ", ";\n }\n\n &:focus {\n outline: inherit;\n }\n "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
90
+ }
91
+
92
+ function tabVertical(t, size) {
93
+ return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n border-bottom: none;\n border-left: ", " solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ", ";\n padding-right: ", ";\n\n &:hover {\n border-bottom: none;\n border-left: ", " solid ", ";\n }\n\n .", " {\n bottom: 0;\n left: -", ";\n right: 0;\n }\n "])), t.tabBorderWidth, shift(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
94
+ }
95
+
96
+ function tabFocus(t, size) {
97
+ return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n border: ", " solid ", ";\n bottom: -", ";\n left: -", ";\n position: absolute;\n right: -", ";\n top: 0;\n "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
98
+ }
@@ -1 +1 @@
1
- {"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","tabTextColorDefault","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","red","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('tab')({\n focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const paddingTop = t.tabPaddingY;\n const paddingBottom = `calc(${t.tabPaddingY} - ${t.tabBorderWidth})`;\n return css`\n border-bottom: ${t.tabBorderWidth} solid transparent;\n box-sizing: border-box;\n color: ${t.tabTextColorDefault};\n cursor: pointer;\n display: inline-block;\n font-size: ${t.tabFontSize};\n line-height: ${t.tabLineHeight};\n margin-left: ${t.tabPaddingX};\n margin-right: ${t.tabPaddingX};\n padding-bottom: ${paddingBottom};\n padding-top: ${paddingTop};\n position: relative;\n text-decoration: inherit;\n transition: border-bottom 0.2s ease-out;\n\n &:hover {\n outline: inherit;\n border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n &:focus {\n outline: inherit;\n }\n `;\n },\n\n vertical(t: Theme) {\n return css`\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n padding-right: ${t.tabPaddingX};\n\n &:hover {\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n .${globalClasses.focus} {\n bottom: 0;\n left: -${t.tabBorderWidth};\n right: 0;\n }\n `;\n },\n\n focus(t: Theme) {\n return css`\n border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n bottom: -${t.tabBorderWidth};\n left: -${t.tabPaddingX};\n position: absolute;\n right: -${t.tabPaddingX};\n top: 0;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: rgba(\n ${ColorFunctions.red(t.tabTextColorDefault)},\n ${ColorFunctions.green(t.tabTextColorDefault)},\n ${ColorFunctions.blue(t.tabTextColorDefault)},\n 0.5\n );\n cursor: default;\n `;\n },\n\n active() {\n return css`\n cursor: default;\n `;\n },\n});\n\nexport const horizontalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-bottom: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-bottom-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nexport const verticalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-left: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-left-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n"]}
1
+ {"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","fontSize","lineHeight","paddingX","paddingY","globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","red","tabTextColorDefault","green","blue","active","horizontalStyles","tabBorderWidth","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles","size","transitionDuration","transitionTimingFunction","tabColorHover","tabOutlineWidth","tabColorFocus"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { TabSize } from './Tab';\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n rootSmall(t: Theme) {\n return tabRoot(t, 'small');\n },\n\n rootMedium(t: Theme) {\n return tabRoot(t, 'medium');\n },\n\n rootLarge(t: Theme) {\n return tabRoot(t, 'large');\n },\n\n verticalSmall(t: Theme) {\n return tabVertical(t, 'small');\n },\n\n verticalMedium(t: Theme) {\n return tabVertical(t, 'medium');\n },\n\n verticalLarge(t: Theme) {\n return tabVertical(t, 'large');\n },\n\n focusSmall(t: Theme) {\n return tabFocus(t, 'small');\n },\n\n focusMedium(t: Theme) {\n return tabFocus(t, 'medium');\n },\n\n focusLarge(t: Theme) {\n return tabFocus(t, 'large');\n },\n\n disabled(t: Theme) {\n return css`\n color: rgba(\n ${ColorFunctions.red(t.tabTextColorDefault)},\n ${ColorFunctions.green(t.tabTextColorDefault)},\n ${ColorFunctions.blue(t.tabTextColorDefault)},\n 0.5\n );\n cursor: default;\n `;\n },\n\n active() {\n return css`\n cursor: default;\n `;\n },\n});\n\nexport const horizontalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-bottom: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-bottom-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nexport const verticalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-left: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-left-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nfunction tabRoot(t: Theme, size: TabSize) {\n return css`\n border-bottom: ${t.tabBorderWidth} solid transparent;\n box-sizing: border-box;\n color: ${t.tabTextColorDefault};\n cursor: pointer;\n display: inline-block;\n font-size: ${fontSize(t, size)};\n line-height: ${lineHeight(t, size)};\n margin-left: ${paddingX(t, size)};\n margin-right: ${paddingX(t, size)};\n padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n padding-top: ${paddingY(t, size)};\n position: relative;\n text-decoration: inherit;\n transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n &:hover {\n outline: inherit;\n border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n &:focus {\n outline: inherit;\n }\n `;\n}\n\nfunction tabVertical(t: Theme, size: TabSize) {\n return css`\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n padding-right: ${paddingX(t, size)};\n\n &:hover {\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n .${globalClasses.focus} {\n bottom: 0;\n left: -${t.tabBorderWidth};\n right: 0;\n }\n `;\n}\n\nfunction tabFocus(t: Theme, size: TabSize) {\n return css`\n border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n bottom: -${t.tabBorderWidth};\n left: -${paddingX(t, size)};\n position: absolute;\n right: -${paddingX(t, size)};\n top: 0;\n `;\n}\n"]}
@@ -3,9 +3,15 @@ export declare const globalClasses: {
3
3
  focus: string;
4
4
  };
5
5
  export declare const styles: {
6
- root(t: Theme): string;
7
- vertical(t: Theme): string;
8
- focus(t: Theme): string;
6
+ rootSmall(t: Theme): string;
7
+ rootMedium(t: Theme): string;
8
+ rootLarge(t: Theme): string;
9
+ verticalSmall(t: Theme): string;
10
+ verticalMedium(t: Theme): string;
11
+ verticalLarge(t: Theme): string;
12
+ focusSmall(t: Theme): string;
13
+ focusMedium(t: Theme): string;
14
+ focusLarge(t: Theme): string;
9
15
  disabled(t: Theme): string;
10
16
  active(): string;
11
17
  };
@@ -119,14 +119,20 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
119
119
  children = _this$props2.children,
120
120
  indicatorClassName = _this$props2.indicatorClassName,
121
121
  ariaDescribedby = _this$props2['aria-describedby'];
122
- var vertical = this.getProps().vertical;
122
+
123
+ var _this$getProps = this.getProps(),
124
+ vertical = _this$getProps.vertical,
125
+ size = _this$getProps.size;
126
+
123
127
  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
128
+ var _cx;
129
+
124
130
  _this2.theme = theme;
125
131
  return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
126
132
  rootNodeRef: _this2.setRootNode
127
133
  }, _this2.props), /*#__PURE__*/React.createElement("div", {
128
134
  "data-tid": TabsDataTids.root,
129
- className: cx(styles.root(_this2.theme), vertical && styles.vertical()),
135
+ className: cx((_cx = {}, _cx[styles.rootSmall(_this2.theme)] = size === 'small', _cx[styles.rootMedium(_this2.theme)] = size === 'medium', _cx[styles.rootLarge(_this2.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
130
136
  style: {
131
137
  width: width
132
138
  },
@@ -135,6 +141,7 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
135
141
  value: {
136
142
  vertical: vertical,
137
143
  activeTab: value,
144
+ size: size,
138
145
  getTab: _this2.getTab,
139
146
  addTab: _this2.addTab,
140
147
  removeTab: _this2.removeTab,
@@ -152,5 +159,6 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
152
159
 
153
160
  return Tabs;
154
161
  }(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = {
155
- vertical: false
162
+ vertical: false,
163
+ size: 'large'
156
164
  }, _class2.Tab = Tab, _temp)) || _class;
@@ -1 +1 @@
1
- {"version":3,"sources":["Tabs.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","theme","setRootNode","activeTab","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n getNode: () => Tab<T> | null;\n id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n /**\n * Tab component should be child of Tabs component\n */\n children?: React.ReactNode;\n\n /**\n * Classname of indicator\n */\n indicatorClassName?: string;\n\n /**\n * Tabs change event\n */\n onValueChange?: (value: T) => void;\n\n /**\n * Active tab identifier\n */\n value: T;\n\n /**\n * Vertical indicator\n * @default false\n */\n vertical?: boolean;\n\n /**\n * Width of tabs container\n */\n width?: number | string;\n\n /**\n * Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n root: 'Tabs__root',\n indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical'>>;\n\n/**\n * Tabs wrapper\n *\n * contains static property `Tab`\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n public static __KONTUR_REACT_UI__ = 'Tabs';\n\n public static defaultProps: DefaultProps = {\n vertical: false,\n };\n\n private getProps = createPropsGetter(Tabs.defaultProps);\n\n public static Tab = Tab;\n\n private theme!: Theme;\n\n private tabs: Array<TabType<T>> = [];\n\n private tabUpdates = {\n on: (cb: () => void) => {\n const index = this.listeners.push(cb);\n return () => {\n this.listeners.splice(index, 1);\n };\n },\n };\n\n private listeners: Array<typeof emptyHandler> = [];\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n const vertical = this.getProps().vertical;\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TabsDataTids.root}\n className={cx(styles.root(this.theme), vertical && styles.vertical())}\n style={{ width }}\n aria-describedby={ariaDescribedby}\n >\n <TabsContext.Provider\n value={{\n vertical,\n activeTab: value,\n getTab: this.getTab,\n addTab: this.addTab,\n removeTab: this.removeTab,\n notifyUpdate: this.notifyUpdate,\n shiftFocus: this.shiftFocus,\n switchTab: this.switchTab,\n }}\n >\n {children}\n <Indicator\n className={indicatorClassName}\n tabUpdates={this.tabUpdates}\n vertical={this.getProps().vertical}\n />\n </TabsContext.Provider>\n </div>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n const { tabs } = this;\n const index = tabs.findIndex((x) => x.id === fromTab);\n const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n const tab = tabs[newIndex];\n\n const tabNode = tab.getNode();\n const htmlNode = getRootNode(tabNode);\n\n if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\n htmlNode.focus();\n }\n };\n\n private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n this.listeners.forEach((cb) => cb());\n };\n\n private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n const { onValueChange, value } = this.props;\n if (id !== value && onValueChange) {\n onValueChange(id);\n }\n };\n\n private getTab: TabsContextType<T>['getTab'] = (id) => {\n const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n return getNode && getNode();\n };\n\n private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n this.tabs = this.tabs.concat({ id, getNode });\n };\n\n private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n this.tabs = this.tabs.filter((tab) => tab.id !== id);\n };\n}\n"]}
1
+ {"version":3,"sources":["Tabs.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","size","theme","setRootNode","rootSmall","rootMedium","rootLarge","activeTab","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab, TabSize } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n getNode: () => Tab<T> | null;\n id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n /**\n * Tab component should be child of Tabs component\n */\n children?: React.ReactNode;\n\n /**\n * Classname of indicator\n */\n indicatorClassName?: string;\n\n /**\n * Tabs change event\n */\n onValueChange?: (value: T) => void;\n\n /**\n * Задаёт размер контрола.\n *\n * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n */\n size?: TabSize;\n\n /**\n * Active tab identifier\n */\n value: T;\n\n /**\n * Vertical indicator\n * @default false\n */\n vertical?: boolean;\n\n /**\n * Width of tabs container\n */\n width?: number | string;\n\n /**\n * Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n root: 'Tabs__root',\n indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Tabs wrapper\n *\n * contains static property `Tab`\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n public static __KONTUR_REACT_UI__ = 'Tabs';\n\n public static defaultProps: DefaultProps = {\n vertical: false,\n size: 'large',\n };\n\n private getProps = createPropsGetter(Tabs.defaultProps);\n\n public static Tab = Tab;\n\n private theme!: Theme;\n\n private tabs: Array<TabType<T>> = [];\n\n private tabUpdates = {\n on: (cb: () => void) => {\n const index = this.listeners.push(cb);\n return () => {\n this.listeners.splice(index, 1);\n };\n },\n };\n\n private listeners: Array<typeof emptyHandler> = [];\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n const { vertical, size } = this.getProps();\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TabsDataTids.root}\n className={cx({\n [styles.rootSmall(this.theme)]: size === 'small',\n [styles.rootMedium(this.theme)]: size === 'medium',\n [styles.rootLarge(this.theme)]: size === 'large',\n [styles.vertical()]: vertical,\n })}\n style={{ width }}\n aria-describedby={ariaDescribedby}\n >\n <TabsContext.Provider\n value={{\n vertical,\n activeTab: value,\n size,\n getTab: this.getTab,\n addTab: this.addTab,\n removeTab: this.removeTab,\n notifyUpdate: this.notifyUpdate,\n shiftFocus: this.shiftFocus,\n switchTab: this.switchTab,\n }}\n >\n {children}\n <Indicator\n className={indicatorClassName}\n tabUpdates={this.tabUpdates}\n vertical={this.getProps().vertical}\n />\n </TabsContext.Provider>\n </div>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n const { tabs } = this;\n const index = tabs.findIndex((x) => x.id === fromTab);\n const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n const tab = tabs[newIndex];\n\n const tabNode = tab.getNode();\n const htmlNode = getRootNode(tabNode);\n\n if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\n htmlNode.focus();\n }\n };\n\n private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n this.listeners.forEach((cb) => cb());\n };\n\n private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n const { onValueChange, value } = this.props;\n if (id !== value && onValueChange) {\n onValueChange(id);\n }\n };\n\n private getTab: TabsContextType<T>['getTab'] = (id) => {\n const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n return getNode && getNode();\n };\n\n private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n this.tabs = this.tabs.concat({ id, getNode });\n };\n\n private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n this.tabs = this.tabs.filter((tab) => tab.id !== id);\n };\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  import React, { AriaAttributes } from 'react';
2
2
  import { CommonProps } from '../../internal/CommonWrapper';
3
- import { Tab } from './Tab';
3
+ import { Tab, TabSize } from './Tab';
4
4
  declare type ValueBaseType = string;
5
5
  export interface TabsProps<T extends ValueBaseType = string> extends CommonProps {
6
6
  /**
@@ -15,6 +15,12 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
15
15
  * Tabs change event
16
16
  */
17
17
  onValueChange?: (value: T) => void;
18
+ /**
19
+ * Задаёт размер контрола.
20
+ *
21
+ * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
22
+ */
23
+ size?: TabSize;
18
24
  /**
19
25
  * Active tab identifier
20
26
  */
@@ -37,7 +43,7 @@ export declare const TabsDataTids: {
37
43
  readonly root: "Tabs__root";
38
44
  readonly indicatorRoot: "Indicator__root";
39
45
  };
40
- declare type DefaultProps = Required<Pick<TabsProps, 'vertical'>>;
46
+ declare type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
41
47
  /**
42
48
  * Tabs wrapper
43
49
  *
@@ -34,3 +34,35 @@ const TabLink = ({ id, children }) => (
34
34
  <TabLink id="/alps">🗻 Alps</TabLink>
35
35
  </Tabs>;
36
36
  ```
37
+
38
+ У табов есть 3 стандартных размера
39
+ ```jsx harmony
40
+ const [active, setActive] = React.useState('fuji');
41
+ const renderCaption = (caption) => <span style={{display: "inline-block", width: 60}}>{caption}</span>;
42
+ <div>
43
+ <div>
44
+ {renderCaption("small")}
45
+ <Tabs value={active} onValueChange={setActive} size="small">
46
+ <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
47
+ <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
48
+ <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
49
+ </Tabs>
50
+ </div>
51
+ <div>
52
+ {renderCaption("medium")}
53
+ <Tabs value={active} onValueChange={setActive} size="medium">
54
+ <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
55
+ <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
56
+ <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
57
+ </Tabs>
58
+ </div>
59
+ <div>
60
+ {renderCaption("large")}
61
+ <Tabs value={active} onValueChange={setActive} size="large">
62
+ <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
63
+ <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
64
+ <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
65
+ </Tabs>
66
+ </div>
67
+ </div>;
68
+ ```
@@ -3,11 +3,22 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
3
3
  var _templateObject, _templateObject2;
4
4
 
5
5
  import { css, memoizeStyle } from "../../../lib/theming/Emotion";
6
+ import { paddingX } from "../helpers";
6
7
  export var styles = memoizeStyle({
7
- root: function root(t) {
8
- return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin: 0 -", ";\n padding: 0;\n position: relative;\n "])), t.tabsMarginX);
8
+ rootSmall: function rootSmall(t) {
9
+ return tabsRoot(t, 'small');
10
+ },
11
+ rootMedium: function rootMedium(t) {
12
+ return tabsRoot(t, 'medium');
13
+ },
14
+ rootLarge: function rootLarge(t) {
15
+ return tabsRoot(t, 'large');
9
16
  },
10
17
  vertical: function vertical() {
11
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n margin: 0;\n "])));
18
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n margin: 0;\n "])));
12
19
  }
13
- });
20
+ });
21
+
22
+ function tabsRoot(t, size) {
23
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin: 0 -", ";\n padding: 0;\n position: relative;\n "])), paddingX(t, size));
24
+ }
@@ -1 +1 @@
1
- {"version":3,"sources":["Tabs.styles.ts"],"names":["css","memoizeStyle","styles","root","t","tabsMarginX","vertical"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;;AAEeI,IAAAA,CAAC,CAACC,WAFjB;;;;AAMD,GARgC;;AAUjCC,EAAAA,QAViC,sBAUtB;AACT,WAAON,GAAP;;;AAGD,GAdgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-block;\n margin: 0 -${t.tabsMarginX};\n padding: 0;\n position: relative;\n `;\n },\n\n vertical() {\n return css`\n margin: 0;\n `;\n },\n});\n"]}
1
+ {"version":3,"sources":["Tabs.styles.ts"],"names":["css","memoizeStyle","paddingX","styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","size"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;;AAIA,SAASC,QAAT,QAAyB,WAAzB;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,EAAAA,SADiC,qBACvBC,CADuB,EACb;AAClB,WAAOC,QAAQ,CAACD,CAAD,EAAI,OAAJ,CAAf;AACD,GAHgC;;AAKjCE,EAAAA,UALiC,sBAKtBF,CALsB,EAKZ;AACnB,WAAOC,QAAQ,CAACD,CAAD,EAAI,QAAJ,CAAf;AACD,GAPgC;;AASjCG,EAAAA,SATiC,qBASvBH,CATuB,EASb;AAClB,WAAOC,QAAQ,CAACD,CAAD,EAAI,OAAJ,CAAf;AACD,GAXgC;;AAajCI,EAAAA,QAbiC,sBAatB;AACT,WAAOT,GAAP;;;AAGD,GAjBgC,EAAD,CAA3B;;;AAoBP,SAASM,QAAT,CAAkBD,CAAlB,EAA4BK,IAA5B,EAA2C;AACzC,SAAOV,GAAP;;AAEeE,EAAAA,QAAQ,CAACG,CAAD,EAAIK,IAAJ,CAFvB;;;;AAMD","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { TabSize } from './Tab';\nimport { paddingX } from './helpers';\n\nexport const styles = memoizeStyle({\n rootSmall(t: Theme) {\n return tabsRoot(t, 'small');\n },\n\n rootMedium(t: Theme) {\n return tabsRoot(t, 'medium');\n },\n\n rootLarge(t: Theme) {\n return tabsRoot(t, 'large');\n },\n\n vertical() {\n return css`\n margin: 0;\n `;\n },\n});\n\nfunction tabsRoot(t: Theme, size: TabSize) {\n return css`\n display: inline-block;\n margin: 0 -${paddingX(t, size)};\n padding: 0;\n position: relative;\n `;\n}\n"]}
@@ -1,5 +1,7 @@
1
1
  import { Theme } from '../../lib/theming/Theme';
2
2
  export declare const styles: {
3
- root(t: Theme): string;
3
+ rootSmall(t: Theme): string;
4
+ rootMedium(t: Theme): string;
5
+ rootLarge(t: Theme): string;
4
6
  vertical(): string;
5
7
  };
@@ -3,6 +3,7 @@ import { emptyHandler } from "../../../lib/utils";
3
3
  export var TabsContextDefaultValue = {
4
4
  vertical: false,
5
5
  activeTab: '',
6
+ size: 'large',
6
7
  getTab: emptyHandler,
7
8
  addTab: emptyHandler,
8
9
  notifyUpdate: emptyHandler,
@@ -1 +1 @@
1
- {"version":3,"sources":["TabsContext.ts"],"names":["React","emptyHandler","TabsContextDefaultValue","vertical","activeTab","getTab","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,iBAA7B;;;;;;;;;;;;;;;AAeA,OAAO,IAAMC,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,MAAM,EAAEJ,YAH8C;AAItDK,EAAAA,MAAM,EAAEL,YAJ8C;AAKtDM,EAAAA,YAAY,EAAEN,YALwC;AAMtDO,EAAAA,SAAS,EAAEP,YAN2C;AAOtDQ,EAAAA,UAAU,EAAER,YAP0C;AAQtDS,EAAAA,SAAS,EAAET,YAR2C,EAAjD;;AAUP,OAAO,IAAMU,WAAW,gBAAGX,KAAK,CAACY,aAAN,CAAqCV,uBAArC,CAApB;;AAEPS,WAAW,CAACE,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\n\nimport { Tab } from './Tab';\n\nexport interface TabsContextType<T extends string = any> {\n vertical: boolean;\n activeTab: T;\n getTab: (id: T) => Tab<T> | null | void;\n addTab: (id: T, getNode: () => Tab<T>) => void;\n notifyUpdate: () => void;\n removeTab: (id: T) => void;\n shiftFocus: (fromTab: T, delta: number) => void;\n switchTab: (id: T) => void;\n}\n\nexport const TabsContextDefaultValue: TabsContextType = {\n vertical: false,\n activeTab: '',\n getTab: emptyHandler,\n addTab: emptyHandler,\n notifyUpdate: emptyHandler,\n removeTab: emptyHandler,\n shiftFocus: emptyHandler,\n switchTab: emptyHandler,\n};\nexport const TabsContext = React.createContext<TabsContextType>(TabsContextDefaultValue);\n\nTabsContext.displayName = 'TabsContext';\n"]}
1
+ {"version":3,"sources":["TabsContext.ts"],"names":["React","emptyHandler","TabsContextDefaultValue","vertical","activeTab","size","getTab","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,iBAA7B;;;;;;;;;;;;;;;;AAgBA,OAAO,IAAMC,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,IAAI,EAAE,OAHgD;AAItDC,EAAAA,MAAM,EAAEL,YAJ8C;AAKtDM,EAAAA,MAAM,EAAEN,YAL8C;AAMtDO,EAAAA,YAAY,EAAEP,YANwC;AAOtDQ,EAAAA,SAAS,EAAER,YAP2C;AAQtDS,EAAAA,UAAU,EAAET,YAR0C;AAStDU,EAAAA,SAAS,EAAEV,YAT2C,EAAjD;;AAWP,OAAO,IAAMW,WAAW,gBAAGZ,KAAK,CAACa,aAAN,CAAqCX,uBAArC,CAApB;;AAEPU,WAAW,CAACE,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\n\nimport { Tab, TabSize } from './Tab';\n\nexport interface TabsContextType<T extends string = any> {\n vertical: boolean;\n activeTab: T;\n size: TabSize;\n getTab: (id: T) => Tab<T> | null | void;\n addTab: (id: T, getNode: () => Tab<T>) => void;\n notifyUpdate: () => void;\n removeTab: (id: T) => void;\n shiftFocus: (fromTab: T, delta: number) => void;\n switchTab: (id: T) => void;\n}\n\nexport const TabsContextDefaultValue: TabsContextType = {\n vertical: false,\n activeTab: '',\n size: 'large',\n getTab: emptyHandler,\n addTab: emptyHandler,\n notifyUpdate: emptyHandler,\n removeTab: emptyHandler,\n shiftFocus: emptyHandler,\n switchTab: emptyHandler,\n};\nexport const TabsContext = React.createContext<TabsContextType>(TabsContextDefaultValue);\n\nTabsContext.displayName = 'TabsContext';\n"]}
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
- import { Tab } from './Tab';
2
+ import { Tab, TabSize } from './Tab';
3
3
  export interface TabsContextType<T extends string = any> {
4
4
  vertical: boolean;
5
5
  activeTab: T;
6
+ size: TabSize;
6
7
  getTab: (id: T) => Tab<T> | null | void;
7
8
  addTab: (id: T, getNode: () => Tab<T>) => void;
8
9
  notifyUpdate: () => void;
@@ -0,0 +1,25 @@
1
+ export function fontSize(t, size) {
2
+ return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);
3
+ }
4
+ export function lineHeight(t, size) {
5
+ return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);
6
+ }
7
+ export function paddingX(t, size) {
8
+ return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);
9
+ }
10
+ export function paddingY(t, size) {
11
+ return mapSize(size, t.tabPaddingYSmall, t.tabPaddingYMedium, t.tabPaddingYLarge);
12
+ }
13
+
14
+ function mapSize(size, small, medium, large) {
15
+ switch (size) {
16
+ case 'small':
17
+ return small;
18
+
19
+ case 'medium':
20
+ return medium;
21
+
22
+ case 'large':
23
+ return large;
24
+ }
25
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["helpers.ts"],"names":["fontSize","t","size","mapSize","tabFontSizeSmall","tabFontSizeMedium","tabFontSizeLarge","lineHeight","tabLineHeightSmall","tabLineHeightMedium","tabLineHeightLarge","paddingX","tabPaddingXSmall","tabPaddingXMedium","tabPaddingXLarge","paddingY","tabPaddingYSmall","tabPaddingYMedium","tabPaddingYLarge","small","medium","large"],"mappings":";;;;AAIA,OAAO,SAASA,QAAT,CAAkBC,CAAlB,EAA4BC,IAA5B,EAA2C;AAChD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACG,gBAAT,EAA2BH,CAAC,CAACI,iBAA7B,EAAgDJ,CAAC,CAACK,gBAAlD,CAAd;AACD;;AAED,OAAO,SAASC,UAAT,CAAoBN,CAApB,EAA8BC,IAA9B,EAA6C;AAClD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACO,kBAAT,EAA6BP,CAAC,CAACQ,mBAA/B,EAAoDR,CAAC,CAACS,kBAAtD,CAAd;AACD;;AAED,OAAO,SAASC,QAAT,CAAkBV,CAAlB,EAA4BC,IAA5B,EAA2C;AAChD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACW,gBAAT,EAA2BX,CAAC,CAACY,iBAA7B,EAAgDZ,CAAC,CAACa,gBAAlD,CAAd;AACD;;AAED,OAAO,SAASC,QAAT,CAAkBd,CAAlB,EAA4BC,IAA5B,EAA2C;AAChD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACe,gBAAT,EAA2Bf,CAAC,CAACgB,iBAA7B,EAAgDhB,CAAC,CAACiB,gBAAlD,CAAd;AACD;;AAED,SAASf,OAAT,CAAoBD,IAApB,EAAmCiB,KAAnC,EAA6CC,MAA7C,EAAwDC,KAAxD,EAAkE;AAChE,UAAQnB,IAAR;AACE,SAAK,OAAL;AACE,aAAOiB,KAAP;AACF,SAAK,QAAL;AACE,aAAOC,MAAP;AACF,SAAK,OAAL;AACE,aAAOC,KAAP,CANJ;;AAQD","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\n\nimport { TabSize } from './Tab';\n\nexport function fontSize(t: Theme, size: TabSize) {\n return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);\n}\n\nexport function lineHeight(t: Theme, size: TabSize) {\n return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);\n}\n\nexport function paddingX(t: Theme, size: TabSize) {\n return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);\n}\n\nexport function paddingY(t: Theme, size: TabSize) {\n return mapSize(size, t.tabPaddingYSmall, t.tabPaddingYMedium, t.tabPaddingYLarge);\n}\n\nfunction mapSize<T>(size: TabSize, small: T, medium: T, large: T) {\n switch (size) {\n case 'small':\n return small;\n case 'medium':\n return medium;\n case 'large':\n return large;\n }\n}\n"]}
@@ -0,0 +1,6 @@
1
+ {
2
+ "main": "../../../cjs/components/Tabs/helpers.js",
3
+ "module": "helpers",
4
+ "types": "../helpers.d.ts",
5
+ "sideEffects": false
6
+ }
@@ -0,0 +1,6 @@
1
+ import { Theme } from '../../lib/theming/Theme';
2
+ import { TabSize } from './Tab';
3
+ export declare function fontSize(t: Theme, size: TabSize): string;
4
+ export declare function lineHeight(t: Theme, size: TabSize): string;
5
+ export declare function paddingX(t: Theme, size: TabSize): string;
6
+ export declare function paddingY(t: Theme, size: TabSize): string;
@@ -8,7 +8,7 @@ export var styles = memoizeStyle({
8
8
  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: inline-block;\n font-size: ", ";\n line-height: ", ";\n position: relative;\n "])), t.textareaFontSize, t.textareaLineHeight);
9
9
  },
10
10
  textarea: function textarea(t) {
11
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n -webkit-appearance: none;\n background: ", ";\n background-clip: ", ";\n border: ", " solid ", ";\n border-top-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n max-width: 100%;\n min-width: ", ";\n min-height: ", ";\n outline: none;\n padding: ", " ", ";\n transition: height 0.2s ease-out;\n vertical-align: middle;\n width: 100%;\n border-radius: ", ";\n white-space: pre-wrap;\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 0 ", " ", ";\n position: relative;\n z-index: 2;\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:-moz-placeholder {\n color: ", ";\n }\n\n &::-moz-placeholder {\n color: ", ";\n }\n "])), t.textareaBg, t.textareaBackgroundClip, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.textareaMinHeight, t.textareaPaddingY, t.textareaPaddingX, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaPlaceholderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
11
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n -webkit-appearance: none;\n background: ", ";\n background-clip: ", ";\n border: ", " solid ", ";\n border-top-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n max-width: 100%;\n min-width: ", ";\n min-height: ", ";\n outline: none;\n padding: ", " ", ";\n transition: border-color ", " ", ", height 0.2s ease-out;\n vertical-align: middle;\n width: 100%;\n border-radius: ", ";\n white-space: pre-wrap;\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 0 ", " ", ";\n position: relative;\n z-index: 2;\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:-moz-placeholder {\n color: ", ";\n }\n\n &::-moz-placeholder {\n color: ", ";\n }\n "])), t.textareaBg, t.textareaBackgroundClip, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.textareaMinHeight, t.textareaPaddingY, t.textareaPaddingX, t.transitionDuration, t.transitionTimingFunction, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaPlaceholderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
12
12
  },
13
13
  hovering: function hovering(t) {
14
14
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n &:enabled:hover:not(:focus) {\n border-color: ", ";\n }\n "])), t.textareaBorderColorHover);
@@ -1 +1 @@
1
- {"version":3,"sources":["Textarea.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","hovering","textareaBorderColorHover","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-block;\n font-size: ${t.textareaFontSize};\n line-height: ${t.textareaLineHeight};\n position: relative;\n `;\n },\n\n textarea(t: Theme) {\n return css`\n -webkit-appearance: none;\n background: ${t.textareaBg};\n background-clip: ${t.textareaBackgroundClip};\n border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n border-top-color: ${t.textareaBorderTopColor};\n box-shadow: ${t.textareaShadow};\n box-sizing: border-box;\n color: ${t.textareaColor};\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n max-width: 100%;\n min-width: ${t.textareaWidth};\n min-height: ${t.textareaMinHeight};\n outline: none;\n padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\n transition: height 0.2s ease-out;\n vertical-align: middle;\n width: 100%;\n border-radius: ${t.textareaBorderRadius};\n white-space: pre-wrap;\n\n &:focus {\n border-color: ${t.textareaBorderColorFocus};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n position: relative;\n z-index: 2;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorLight};\n }\n }\n\n &::placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &:-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &::-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n `;\n },\n\n hovering(t: Theme) {\n return css`\n &:enabled:hover:not(:focus) {\n border-color: ${t.textareaBorderColorHover};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n &:focus {\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n &:focus {\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: ${t.textareaTextColorDisabled};\n background: ${t.textareaDisabledBg};\n border-color: ${t.textareaDisabledBorderColor};\n box-shadow: none;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorDisabled};\n }\n `;\n },\n\n fake() {\n return css`\n height: 0;\n left: 0;\n position: absolute;\n top: 0;\n visibility: hidden;\n width: 100%;\n `;\n },\n\n placeholder() {\n return css`\n -ms-user-select: none;\n color: #aaa;\n left: 12px;\n overflow: hidden;\n position: absolute;\n right: 12px;\n top: 9px;\n user-select: none;\n z-index: 3;\n `;\n },\n\n counterContainer(t: Theme) {\n return css`\n position: absolute;\n top: 0;\n border: ${t.textareaBorderWidth} solid transparent;\n box-sizing: content-box;\n `;\n },\n\n counter(t: Theme) {\n return css`\n position: absolute;\n z-index: 3;\n text-align: right;\n background: ${t.textareaCounterBg};\n color: ${t.textareaCounterColor};\n border-radius: 2px;\n right: ${t.textareaPaddingX};\n bottom: ${t.textareaPaddingY};\n `;\n },\n\n counterError(t: Theme) {\n return css`\n color: ${t.textareaCounterErrorColor};\n `;\n },\n\n counterHelp() {\n return css`\n margin-left: 4px;\n cursor: pointer;\n `;\n },\n\n disableAnimations() {\n return css`\n transition: none;\n `;\n },\n});\n"]}
1
+ {"version":3,"sources":["Textarea.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","transitionDuration","transitionTimingFunction","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","hovering","textareaBorderColorHover","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-block;\n font-size: ${t.textareaFontSize};\n line-height: ${t.textareaLineHeight};\n position: relative;\n `;\n },\n\n textarea(t: Theme) {\n return css`\n -webkit-appearance: none;\n background: ${t.textareaBg};\n background-clip: ${t.textareaBackgroundClip};\n border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n border-top-color: ${t.textareaBorderTopColor};\n box-shadow: ${t.textareaShadow};\n box-sizing: border-box;\n color: ${t.textareaColor};\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n max-width: 100%;\n min-width: ${t.textareaWidth};\n min-height: ${t.textareaMinHeight};\n outline: none;\n padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\n transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction}, height 0.2s ease-out;\n vertical-align: middle;\n width: 100%;\n border-radius: ${t.textareaBorderRadius};\n white-space: pre-wrap;\n\n &:focus {\n border-color: ${t.textareaBorderColorFocus};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n position: relative;\n z-index: 2;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorLight};\n }\n }\n\n &::placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &:-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &::-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n `;\n },\n\n hovering(t: Theme) {\n return css`\n &:enabled:hover:not(:focus) {\n border-color: ${t.textareaBorderColorHover};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n &:focus {\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n &:focus {\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: ${t.textareaTextColorDisabled};\n background: ${t.textareaDisabledBg};\n border-color: ${t.textareaDisabledBorderColor};\n box-shadow: none;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorDisabled};\n }\n `;\n },\n\n fake() {\n return css`\n height: 0;\n left: 0;\n position: absolute;\n top: 0;\n visibility: hidden;\n width: 100%;\n `;\n },\n\n placeholder() {\n return css`\n -ms-user-select: none;\n color: #aaa;\n left: 12px;\n overflow: hidden;\n position: absolute;\n right: 12px;\n top: 9px;\n user-select: none;\n z-index: 3;\n `;\n },\n\n counterContainer(t: Theme) {\n return css`\n position: absolute;\n top: 0;\n border: ${t.textareaBorderWidth} solid transparent;\n box-sizing: content-box;\n `;\n },\n\n counter(t: Theme) {\n return css`\n position: absolute;\n z-index: 3;\n text-align: right;\n background: ${t.textareaCounterBg};\n color: ${t.textareaCounterColor};\n border-radius: 2px;\n right: ${t.textareaPaddingX};\n bottom: ${t.textareaPaddingY};\n `;\n },\n\n counterError(t: Theme) {\n return css`\n color: ${t.textareaCounterErrorColor};\n `;\n },\n\n counterHelp() {\n return css`\n margin-left: 4px;\n cursor: pointer;\n `;\n },\n\n disableAnimations() {\n return css`\n transition: none;\n `;\n },\n});\n"]}
@@ -38,7 +38,7 @@ export var styles = memoizeStyle({
38
38
 
39
39
  var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
40
40
  var padding = isTheme2022(t) ? paddingTop + " " + paddingBottom : paddingTop + " 0 " + paddingBottom;
41
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n cursor: pointer;\n display: inline-block;\n font-weight: 600;\n\n margin: -", " ", " -", " ", ";\n\n padding: ", ";\n\n &:hover {\n background: ", ";\n text-decoration: ", ";\n }\n\n &:active {\n background: ", ";\n }\n "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, padding, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
41
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n cursor: pointer;\n display: inline-block;\n font-weight: 600;\n\n margin: -", " ", " -", " ", ";\n\n padding: ", ";\n transition: background ", " ", ";\n &:hover {\n background: ", ";\n text-decoration: ", ";\n }\n\n &:active {\n background: ", ";\n }\n "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
42
42
  },
43
43
  close: function close(t) {
44
44
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n box-sizing: content-box !important; // fix \"reset.css\" problem\n color: ", ";\n cursor: pointer;\n display: inline-block;\n height: ", ";\n line-height: 0;\n padding: ", ";\n text-align: center;\n width: ", ";\n\n &:hover {\n color: ", ";\n }\n "])), t.toastCloseColor, t.toastCloseSize, t.toastClosePadding, t.toastCloseSize, t.toastCloseHoverColor);
@@ -1 +1 @@
1
- {"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","isTheme2022","getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","padding","toastLinkColor","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOA,OAAO,IAAMC,MAAM,GAAGT,YAAY,CAAC;AACjCU,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,WAAOd,GAAP;AACgBY,IAAAA,CAAC,CAACG,OADlB;AAEmBH,IAAAA,CAAC,CAACI,iBAFrB;AAGYJ,IAAAA,CAAC,CAACK,WAHd;AAIWL,IAAAA,CAAC,CAACM,UAJb;;AAMeN,IAAAA,CAAC,CAACO,aANjB;AAOiBP,IAAAA,CAAC,CAACQ,eAPnB;;AASaP,IAAAA,UATb,EAS2BD,CAAC,CAACS,aAT7B,EAS8CP,aAT9C;;AAWSF,IAAAA,CAAC,CAACU,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBX,CAlByB,EAkBf;AAChB,WAAOZ,GAAP;;;;;;;AAOmBY,IAAAA,CAAC,CAACI,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBZ,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,WAAOd,GAAP;;AAEaa,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bd,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMa,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWrB,QAAQ,CAACI,CAAC,CAACS,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,QAAMS,OAAO,GAAG5B,WAAW,CAACU,CAAD,CAAX,GAAoBC,UAApB,SAAkCC,aAAlC,GAAuDD,UAAvD,WAAuEC,aAAvF;;AAEA,WAAOd,GAAP;AACWY,IAAAA,CAAC,CAACmB,cADb;;;;;AAMalB,IAAAA,UANb,EAM2Bc,WAN3B,EAM2Cb,aAN3C,EAM4DF,CAAC,CAACS,aAN9D;;AAQaS,IAAAA,OARb;;;AAWkBlB,IAAAA,CAAC,CAACoB,gBAXpB;AAYuBpB,IAAAA,CAAC,CAACqB,4BAZzB;;;;AAgBkBrB,IAAAA,CAAC,CAACsB,iBAhBpB;;;AAmBD,GA9DgC;;AAgEjCC,EAAAA,KAhEiC,iBAgE3BvB,CAhE2B,EAgEjB;AACd,WAAOZ,GAAP;;AAEWY,IAAAA,CAAC,CAACwB,eAFb;;;AAKYxB,IAAAA,CAAC,CAACyB,cALd;;AAOazB,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,CAACyB,cATb;;;AAYazB,IAAAA,CAAC,CAAC0B,oBAZf;;;AAeD,GAhFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n const paddingY = parseInt(toastPaddingY);\n const compensation = parseInt(fontFamilyCompensationBaseline);\n return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n background: ${t.toastBg};\n border-radius: ${t.toastBorderRadius};\n border: ${t.toastBorder};\n color: ${t.toastColor};\n display: inline-flex;\n font-size: ${t.toastFontSize};\n line-height: ${t.toastLineHeight};\n opacity: 1;\n padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n position: relative;\n top: ${t.toastTop};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n text-align: center;\n border-radius: ${t.toastBorderRadius};\n `;\n },\n\n closeWrapper(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n display: flex;\n margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n `;\n },\n\n link(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n const padding = isTheme2022(t) ? `${paddingTop} ${paddingBottom}` : `${paddingTop} 0 ${paddingBottom}`;\n\n return css`\n color: ${t.toastLinkColor};\n cursor: pointer;\n display: inline-block;\n font-weight: 600;\n\n margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n padding: ${padding};\n\n &:hover {\n background: ${t.toastLinkBgHover};\n text-decoration: ${t.toastLinkTextDecorationHover};\n }\n\n &:active {\n background: ${t.toastLinkBgActive};\n }\n `;\n },\n\n close(t: Theme) {\n return css`\n box-sizing: content-box !important; // fix \"reset.css\" problem\n color: ${t.toastCloseColor};\n cursor: pointer;\n display: inline-block;\n height: ${t.toastCloseSize};\n line-height: 0;\n padding: ${t.toastClosePadding};\n text-align: center;\n width: ${t.toastCloseSize};\n\n &:hover {\n color: ${t.toastCloseHoverColor};\n }\n `;\n },\n});\n"]}
1
+ {"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","isTheme2022","getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","padding","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOA,OAAO,IAAMC,MAAM,GAAGT,YAAY,CAAC;AACjCU,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,WAAOd,GAAP;AACgBY,IAAAA,CAAC,CAACG,OADlB;AAEmBH,IAAAA,CAAC,CAACI,iBAFrB;AAGYJ,IAAAA,CAAC,CAACK,WAHd;AAIWL,IAAAA,CAAC,CAACM,UAJb;;AAMeN,IAAAA,CAAC,CAACO,aANjB;AAOiBP,IAAAA,CAAC,CAACQ,eAPnB;;AASaP,IAAAA,UATb,EAS2BD,CAAC,CAACS,aAT7B,EAS8CP,aAT9C;;AAWSF,IAAAA,CAAC,CAACU,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBX,CAlByB,EAkBf;AAChB,WAAOZ,GAAP;;;;;;;AAOmBY,IAAAA,CAAC,CAACI,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBZ,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,WAAOd,GAAP;;AAEaa,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bd,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMa,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWrB,QAAQ,CAACI,CAAC,CAACS,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,QAAMS,OAAO,GAAG5B,WAAW,CAACU,CAAD,CAAX,GAAoBC,UAApB,SAAkCC,aAAlC,GAAuDD,UAAvD,WAAuEC,aAAvF;;AAEA,WAAOd,GAAP;AACWY,IAAAA,CAAC,CAACmB,cADb;;;;;AAMalB,IAAAA,UANb,EAM2Bc,WAN3B,EAM2Cb,aAN3C,EAM4DF,CAAC,CAACS,aAN9D;;AAQaS,IAAAA,OARb;AAS2BlB,IAAAA,CAAC,CAACoB,kBAT7B,EASmDpB,CAAC,CAACqB,wBATrD;;AAWkBrB,IAAAA,CAAC,CAACsB,gBAXpB;AAYuBtB,IAAAA,CAAC,CAACuB,4BAZzB;;;;AAgBkBvB,IAAAA,CAAC,CAACwB,iBAhBpB;;;AAmBD,GA9DgC;;AAgEjCC,EAAAA,KAhEiC,iBAgE3BzB,CAhE2B,EAgEjB;AACd,WAAOZ,GAAP;;AAEWY,IAAAA,CAAC,CAAC0B,eAFb;;;AAKY1B,IAAAA,CAAC,CAAC2B,cALd;;AAOa3B,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,CAAC2B,cATb;;;AAYa3B,IAAAA,CAAC,CAAC4B,oBAZf;;;AAeD,GAhFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n const paddingY = parseInt(toastPaddingY);\n const compensation = parseInt(fontFamilyCompensationBaseline);\n return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n background: ${t.toastBg};\n border-radius: ${t.toastBorderRadius};\n border: ${t.toastBorder};\n color: ${t.toastColor};\n display: inline-flex;\n font-size: ${t.toastFontSize};\n line-height: ${t.toastLineHeight};\n opacity: 1;\n padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n position: relative;\n top: ${t.toastTop};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n text-align: center;\n border-radius: ${t.toastBorderRadius};\n `;\n },\n\n closeWrapper(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n display: flex;\n margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n `;\n },\n\n link(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n const padding = isTheme2022(t) ? `${paddingTop} ${paddingBottom}` : `${paddingTop} 0 ${paddingBottom}`;\n\n return css`\n color: ${t.toastLinkColor};\n cursor: pointer;\n display: inline-block;\n font-weight: 600;\n\n margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n padding: ${padding};\n transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n &:hover {\n background: ${t.toastLinkBgHover};\n text-decoration: ${t.toastLinkTextDecorationHover};\n }\n\n &:active {\n background: ${t.toastLinkBgActive};\n }\n `;\n },\n\n close(t: Theme) {\n return css`\n box-sizing: content-box !important; // fix \"reset.css\" problem\n color: ${t.toastCloseColor};\n cursor: pointer;\n display: inline-block;\n height: ${t.toastCloseSize};\n line-height: 0;\n padding: ${t.toastClosePadding};\n text-align: center;\n width: ${t.toastCloseSize};\n\n &:hover {\n color: ${t.toastCloseHoverColor};\n }\n `;\n },\n});\n"]}