rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

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 (484) hide show
  1. package/AutoComplete/styles/index.css +112 -62
  2. package/AutoComplete/styles/index.less +1 -1
  3. package/Box/styles/index.css +12 -0
  4. package/CHANGELOG.md +24 -0
  5. package/Calendar/styles/index.css +11 -9
  6. package/Calendar/styles/index.less +3 -1
  7. package/Cascader/styles/index.css +112 -62
  8. package/CheckPicker/styles/index.css +112 -62
  9. package/CheckPicker/styles/index.less +1 -1
  10. package/CheckTree/styles/index.css +113 -63
  11. package/CheckTree/styles/index.less +1 -1
  12. package/CheckTreePicker/styles/index.css +113 -63
  13. package/DateInput/styles/index.css +0 -7
  14. package/DatePicker/styles/index.css +122 -74
  15. package/DatePicker/styles/index.less +5 -11
  16. package/DateRangeInput/styles/index.css +0 -7
  17. package/DateRangePicker/styles/index.css +132 -78
  18. package/DateRangePicker/styles/index.less +10 -4
  19. package/Divider/styles/index.css +2 -2
  20. package/Divider/styles/index.less +2 -2
  21. package/Grid/styles/columns.less +1 -2
  22. package/Grid/styles/grid-framework.less +1 -0
  23. package/Grid/styles/index.css +9 -4
  24. package/Grid/styles/row.less +2 -2
  25. package/Input/styles/index.css +0 -7
  26. package/Input/styles/index.less +0 -6
  27. package/Input/styles/mixin.less +0 -4
  28. package/InputGroup/styles/index.css +1 -1
  29. package/InputGroup/styles/index.less +1 -1
  30. package/InputNumber/styles/index.css +1 -8
  31. package/InputPicker/styles/index.css +121 -70
  32. package/InputPicker/styles/index.less +4 -4
  33. package/Link/package.json +7 -0
  34. package/Link/styles/index.css +32 -0
  35. package/Link/styles/index.less +39 -0
  36. package/Message/styles/index.css +9 -0
  37. package/Message/styles/index.less +11 -0
  38. package/MultiCascadeTree/styles/index.css +112 -62
  39. package/MultiCascader/styles/index.css +112 -62
  40. package/Nav/styles/index.css +1 -0
  41. package/Nav/styles/index.less +1 -0
  42. package/Pagination/styles/index.css +114 -64
  43. package/PasswordInput/package.json +7 -0
  44. package/PasswordInput/styles/index.css +172 -0
  45. package/PasswordInput/styles/index.less +1 -0
  46. package/PasswordStrengthMeter/package.json +7 -0
  47. package/PasswordStrengthMeter/styles/index.css +33 -0
  48. package/PasswordStrengthMeter/styles/index.less +39 -0
  49. package/README.md +3 -3
  50. package/RadioGroup/styles/index.css +1 -0
  51. package/RadioGroup/styles/index.less +1 -0
  52. package/RangeSlider/styles/index.css +76 -43
  53. package/Rate/styles/index.css +48 -34
  54. package/Rate/styles/index.less +32 -21
  55. package/SelectPicker/styles/index.css +112 -62
  56. package/SelectPicker/styles/index.less +1 -1
  57. package/Slider/styles/index.css +76 -43
  58. package/Slider/styles/index.less +95 -48
  59. package/Tabs/styles/index.css +1 -0
  60. package/TagInput/styles/index.css +152 -91
  61. package/TagInput/styles/index.less +1 -1
  62. package/TagPicker/styles/index.css +151 -90
  63. package/TagPicker/styles/index.less +52 -41
  64. package/Textarea/package.json +7 -0
  65. package/Textarea/styles/index.css +6 -0
  66. package/Textarea/styles/index.less +7 -0
  67. package/TimePicker/styles/index.css +122 -74
  68. package/TimeRangePicker/styles/index.css +132 -78
  69. package/Toggle/styles/index.css +146 -87
  70. package/Toggle/styles/index.less +66 -38
  71. package/Tree/styles/index.css +113 -63
  72. package/Tree/styles/index.less +1 -1
  73. package/TreePicker/styles/index.css +113 -63
  74. package/cjs/AutoComplete/AutoComplete.d.ts +1 -1
  75. package/cjs/AutoComplete/AutoComplete.js +13 -11
  76. package/cjs/Avatar/Avatar.d.ts +3 -4
  77. package/cjs/Breadcrumb/Breadcrumb.js +2 -2
  78. package/cjs/Breadcrumb/BreadcrumbItem.js +1 -1
  79. package/cjs/Button/Button.js +9 -10
  80. package/cjs/Calendar/CalendarProvider.js +0 -0
  81. package/cjs/Calendar/hooks/useCalendar.js +0 -0
  82. package/cjs/Carousel/Carousel.js +2 -2
  83. package/cjs/Cascader/Cascader.js +42 -45
  84. package/cjs/Cascader/useActive.d.ts +6 -4
  85. package/cjs/Cascader/useActive.js +10 -8
  86. package/cjs/CheckPicker/CheckPicker.js +38 -41
  87. package/cjs/CheckTreePicker/CheckTreePicker.js +20 -22
  88. package/cjs/CustomProvider/CustomProvider.d.ts +1 -4
  89. package/cjs/CustomProvider/types.d.ts +10 -2
  90. package/cjs/DatePicker/DatePicker.d.ts +1 -1
  91. package/cjs/DatePicker/DatePicker.js +28 -25
  92. package/cjs/DatePicker/utils.d.ts +3 -3
  93. package/cjs/DatePicker/utils.js +3 -3
  94. package/cjs/DateRangePicker/DateRangePicker.js +39 -33
  95. package/cjs/DateRangePicker/utils.js +0 -0
  96. package/cjs/Divider/Divider.d.ts +3 -2
  97. package/cjs/Divider/Divider.js +2 -2
  98. package/cjs/Form/hooks/useFormValidate.js +0 -0
  99. package/cjs/Form/hooks/useSchemaModel.js +2 -54
  100. package/cjs/Form/utils/constructFlatSchema.d.ts +4 -0
  101. package/cjs/Form/utils/constructFlatSchema.js +41 -0
  102. package/cjs/FormControl/hooks/useField.js +0 -0
  103. package/cjs/FormControl/utils.js +0 -0
  104. package/cjs/Grid/Row.d.ts +2 -2
  105. package/cjs/Grid/Row.js +2 -20
  106. package/cjs/Grid/types.d.ts +1 -0
  107. package/cjs/Grid/utils/styles.d.ts +6 -0
  108. package/cjs/Grid/utils/styles.js +43 -0
  109. package/cjs/Image/Image.js +12 -11
  110. package/cjs/Image/hooks/useImage.d.ts +2 -0
  111. package/cjs/Image/hooks/useImage.js +19 -43
  112. package/cjs/InlineEdit/InlineEdit.js +3 -1
  113. package/cjs/InlineEdit/useEditState.d.ts +2 -0
  114. package/cjs/InlineEdit/useEditState.js +8 -0
  115. package/cjs/Input/Input.d.ts +3 -12
  116. package/cjs/Input/Input.js +12 -73
  117. package/cjs/InputPicker/InputPicker.js +27 -28
  118. package/cjs/Link/ExternalLinkIcon.d.ts +3 -0
  119. package/cjs/Link/ExternalLinkIcon.js +23 -0
  120. package/cjs/Link/Link.d.ts +14 -0
  121. package/cjs/Link/Link.js +52 -0
  122. package/cjs/Link/index.d.ts +4 -0
  123. package/cjs/Link/index.js +11 -0
  124. package/cjs/List/List.js +6 -2
  125. package/cjs/List/helper/useSortHelper.d.ts +7 -5
  126. package/cjs/List/helper/useSortHelper.js +109 -16
  127. package/cjs/List/helper/utils.js +14 -6
  128. package/cjs/MultiCascader/MultiCascader.js +40 -43
  129. package/cjs/Nav/NavItem.js +1 -1
  130. package/cjs/Nav/NavMegaMenu.d.ts +5 -0
  131. package/cjs/Nav/NavMegaMenu.js +5 -0
  132. package/cjs/Navbar/NavbarItem.js +1 -1
  133. package/cjs/Navbar/NavbarMegaMenu.js +1 -1
  134. package/cjs/PasswordInput/PasswordInput.d.ts +14 -0
  135. package/cjs/PasswordInput/PasswordInput.js +71 -0
  136. package/cjs/PasswordInput/index.d.ts +4 -0
  137. package/cjs/PasswordInput/index.js +11 -0
  138. package/cjs/PasswordStrengthMeter/PasswordStrengthMeter.d.ts +12 -0
  139. package/cjs/PasswordStrengthMeter/PasswordStrengthMeter.js +50 -0
  140. package/cjs/PasswordStrengthMeter/index.d.ts +4 -0
  141. package/cjs/PasswordStrengthMeter/index.js +11 -0
  142. package/cjs/RangeSlider/RangeSlider.js +18 -3
  143. package/cjs/Rate/Character.d.ts +4 -3
  144. package/cjs/Rate/Character.js +19 -15
  145. package/cjs/Rate/Rate.d.ts +10 -2
  146. package/cjs/Rate/Rate.js +47 -42
  147. package/cjs/Rate/types.d.ts +8 -0
  148. package/cjs/Rate/types.js +4 -0
  149. package/cjs/Rate/useRatingStates.d.ts +20 -0
  150. package/cjs/Rate/useRatingStates.js +48 -0
  151. package/cjs/Rate/utils.d.ts +14 -3
  152. package/cjs/Rate/utils.js +50 -9
  153. package/cjs/SelectPicker/SelectPicker.js +45 -46
  154. package/cjs/Sidenav/ExpandedSidenavDropdownItem.js +1 -1
  155. package/cjs/Sidenav/SidenavItem.js +1 -1
  156. package/cjs/Slider/Graduated.d.ts +4 -0
  157. package/cjs/Slider/Graduated.js +43 -20
  158. package/cjs/Slider/Handle.d.ts +1 -1
  159. package/cjs/Slider/Handle.js +12 -12
  160. package/cjs/Slider/Slider.d.ts +16 -1
  161. package/cjs/Slider/Slider.js +7 -2
  162. package/cjs/Slider/useDrag.d.ts +1 -0
  163. package/cjs/Slider/useDrag.js +8 -3
  164. package/cjs/Steps/Steps.js +2 -2
  165. package/cjs/Tabs/Tabs.js +2 -2
  166. package/cjs/Textarea/Textarea.d.ts +32 -0
  167. package/cjs/Textarea/Textarea.js +51 -0
  168. package/cjs/Textarea/index.d.ts +4 -0
  169. package/cjs/Textarea/index.js +11 -0
  170. package/cjs/Timeline/Timeline.js +2 -2
  171. package/cjs/Toggle/Toggle.d.ts +10 -1
  172. package/cjs/Toggle/Toggle.js +12 -9
  173. package/cjs/TreePicker/TreePicker.js +18 -19
  174. package/cjs/index.d.ts +4 -1
  175. package/cjs/index.js +24 -6
  176. package/cjs/internals/Box/Box.d.ts +4 -0
  177. package/cjs/internals/Box/Box.js +1 -1
  178. package/cjs/internals/Box/utils.js +5 -1
  179. package/cjs/internals/InputBase/InputBase.d.ts +45 -0
  180. package/cjs/internals/InputBase/InputBase.js +96 -0
  181. package/cjs/internals/InputBase/index.d.ts +3 -0
  182. package/cjs/internals/InputBase/index.js +8 -0
  183. package/cjs/internals/Overlay/Modal.d.ts +1 -1
  184. package/cjs/internals/Overlay/OverlayTrigger.d.ts +4 -3
  185. package/cjs/internals/Overlay/OverlayTrigger.js +8 -3
  186. package/cjs/internals/Picker/Listbox.js +7 -9
  187. package/cjs/internals/Picker/PickerDrawer.d.ts +8 -0
  188. package/cjs/internals/Picker/PickerDrawer.js +31 -0
  189. package/cjs/internals/Picker/PickerPopup.js +5 -3
  190. package/cjs/internals/Picker/PickerToggle.d.ts +1 -0
  191. package/cjs/internals/Picker/PickerToggle.js +10 -3
  192. package/cjs/internals/Picker/PickerToggleTrigger.d.ts +51 -11
  193. package/cjs/internals/Picker/PickerToggleTrigger.js +59 -13
  194. package/cjs/internals/Picker/hooks/index.d.ts +0 -1
  195. package/cjs/internals/Picker/hooks/index.js +2 -4
  196. package/cjs/internals/Picker/hooks/useCombobox.d.ts +1 -0
  197. package/cjs/internals/Picker/hooks/useCombobox.js +3 -1
  198. package/cjs/internals/Picker/index.d.ts +1 -2
  199. package/cjs/internals/Picker/index.js +10 -12
  200. package/{esm → cjs/internals}/SafeAnchor/SafeAnchor.d.ts +2 -2
  201. package/cjs/{SafeAnchor → internals/SafeAnchor}/SafeAnchor.js +3 -3
  202. package/cjs/internals/Tree/TreeView.js +3 -4
  203. package/cjs/internals/hooks/useRootClose.js +4 -4
  204. package/cjs/internals/index.d.ts +4 -0
  205. package/cjs/internals/index.js +13 -1
  206. package/cjs/internals/types/html.d.ts +2 -0
  207. package/cjs/internals/utils/{dom.d.ts → html/dom.d.ts} +1 -0
  208. package/cjs/internals/utils/{dom.js → html/dom.js} +8 -0
  209. package/cjs/internals/utils/{events.js → html/events.js} +0 -0
  210. package/cjs/internals/utils/{htmlPropsUtils.js → html/htmlPropsUtils.js} +0 -0
  211. package/cjs/internals/utils/html/index.d.ts +4 -0
  212. package/cjs/internals/utils/html/index.js +28 -0
  213. package/cjs/internals/utils/{safeSetSelection.js → html/safeSetSelection.js} +1 -1
  214. package/cjs/internals/utils/index.d.ts +3 -15
  215. package/cjs/internals/utils/index.js +20 -49
  216. package/cjs/internals/utils/{ReactChildren.d.ts → react/ReactChildren.d.ts} +2 -8
  217. package/cjs/internals/utils/{ReactChildren.js → react/ReactChildren.js} +5 -25
  218. package/cjs/internals/utils/react/ReactIs.d.ts +7 -0
  219. package/cjs/internals/utils/react/ReactIs.js +26 -0
  220. package/{esm/internals/utils → cjs/internals/utils/react}/createComponent.d.ts +2 -2
  221. package/cjs/internals/utils/{createComponent.js → react/createComponent.js} +3 -3
  222. package/cjs/internals/utils/{deprecateComponent.js → react/deprecateComponent.js} +1 -1
  223. package/cjs/internals/utils/{forwardRef.d.ts → react/forwardRef.d.ts} +1 -1
  224. package/cjs/internals/utils/react/index.d.ts +7 -0
  225. package/cjs/internals/utils/react/index.js +46 -0
  226. package/cjs/internals/utils/{mergeRefs.js → react/mergeRefs.js} +0 -0
  227. package/cjs/internals/utils/{getStringLength.d.ts → string/getStringLength.d.ts} +0 -1
  228. package/cjs/internals/utils/{getStringLength.js → string/getStringLength.js} +1 -3
  229. package/cjs/internals/utils/string/index.d.ts +4 -0
  230. package/cjs/internals/utils/string/index.js +28 -0
  231. package/cjs/internals/utils/{stringifyReactNode.js → string/stringifyReactNode.js} +0 -0
  232. package/cjs/internals/utils/{tplTransform.js → string/tplTransform.js} +0 -0
  233. package/cjs/locales/en_GB.js +2 -2
  234. package/cjs/locales/en_US.js +2 -2
  235. package/cjs/locales/index.js +0 -0
  236. package/cjs/locales/pl_PL.js +2 -3
  237. package/cjs/useBreakpointValue/useBreakpointValue.d.ts +6 -2
  238. package/cjs/useBreakpointValue/useBreakpointValue.js +9 -4
  239. package/cjs/useMediaQuery/breakpoints.d.ts +24 -0
  240. package/cjs/useMediaQuery/breakpoints.js +248 -0
  241. package/cjs/useMediaQuery/index.d.ts +1 -1
  242. package/cjs/useMediaQuery/types.d.ts +45 -0
  243. package/cjs/useMediaQuery/types.js +4 -0
  244. package/cjs/useMediaQuery/useMediaQuery.d.ts +4 -13
  245. package/cjs/useMediaQuery/useMediaQuery.js +30 -12
  246. package/cjs/useToaster/useToaster.d.ts +1 -1
  247. package/cjs/useToaster/useToaster.js +1 -1
  248. package/dist/rsuite-no-reset-rtl.css +565 -276
  249. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  250. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  251. package/dist/rsuite-no-reset.css +565 -276
  252. package/dist/rsuite-no-reset.min.css +1 -1
  253. package/dist/rsuite-no-reset.min.css.map +1 -1
  254. package/dist/rsuite-rtl.css +565 -276
  255. package/dist/rsuite-rtl.min.css +1 -1
  256. package/dist/rsuite-rtl.min.css.map +1 -1
  257. package/dist/rsuite.css +565 -276
  258. package/dist/rsuite.js +508 -211
  259. package/dist/rsuite.js.map +1 -1
  260. package/dist/rsuite.min.css +1 -1
  261. package/dist/rsuite.min.css.map +1 -1
  262. package/dist/rsuite.min.js +1 -1
  263. package/dist/rsuite.min.js.map +1 -1
  264. package/esm/AutoComplete/AutoComplete.d.ts +1 -1
  265. package/esm/AutoComplete/AutoComplete.js +13 -11
  266. package/esm/Avatar/Avatar.d.ts +3 -4
  267. package/esm/Breadcrumb/Breadcrumb.js +3 -3
  268. package/esm/Breadcrumb/BreadcrumbItem.js +1 -1
  269. package/esm/Button/Button.js +10 -11
  270. package/esm/Calendar/CalendarProvider.js +0 -0
  271. package/esm/Calendar/hooks/useCalendar.js +0 -0
  272. package/esm/Carousel/Carousel.js +3 -3
  273. package/esm/Cascader/Cascader.js +43 -46
  274. package/esm/Cascader/useActive.d.ts +6 -4
  275. package/esm/Cascader/useActive.js +10 -8
  276. package/esm/CheckPicker/CheckPicker.js +39 -42
  277. package/esm/CheckTreePicker/CheckTreePicker.js +21 -23
  278. package/esm/CustomProvider/CustomProvider.d.ts +1 -4
  279. package/esm/CustomProvider/types.d.ts +10 -2
  280. package/esm/DatePicker/DatePicker.d.ts +1 -1
  281. package/esm/DatePicker/DatePicker.js +29 -26
  282. package/esm/DatePicker/utils.d.ts +3 -3
  283. package/esm/DatePicker/utils.js +4 -4
  284. package/esm/DateRangePicker/DateRangePicker.js +35 -29
  285. package/esm/DateRangePicker/utils.js +0 -0
  286. package/esm/Divider/Divider.d.ts +3 -2
  287. package/esm/Divider/Divider.js +2 -2
  288. package/esm/Form/hooks/useFormValidate.js +0 -0
  289. package/esm/Form/hooks/useSchemaModel.js +3 -55
  290. package/esm/Form/utils/constructFlatSchema.d.ts +4 -0
  291. package/esm/Form/utils/constructFlatSchema.js +37 -0
  292. package/esm/FormControl/hooks/useField.js +0 -0
  293. package/esm/FormControl/utils.js +0 -0
  294. package/esm/Grid/Row.d.ts +2 -2
  295. package/esm/Grid/Row.js +2 -20
  296. package/esm/Grid/types.d.ts +1 -0
  297. package/esm/Grid/utils/styles.d.ts +6 -0
  298. package/esm/Grid/utils/styles.js +37 -0
  299. package/esm/Image/Image.js +12 -11
  300. package/esm/Image/hooks/useImage.d.ts +2 -0
  301. package/esm/Image/hooks/useImage.js +20 -43
  302. package/esm/InlineEdit/InlineEdit.js +3 -1
  303. package/esm/InlineEdit/useEditState.d.ts +2 -0
  304. package/esm/InlineEdit/useEditState.js +8 -0
  305. package/esm/Input/Input.d.ts +3 -12
  306. package/esm/Input/Input.js +12 -74
  307. package/esm/InputPicker/InputPicker.js +28 -29
  308. package/esm/Link/ExternalLinkIcon.d.ts +3 -0
  309. package/esm/Link/ExternalLinkIcon.js +18 -0
  310. package/esm/Link/Link.d.ts +14 -0
  311. package/esm/Link/Link.js +47 -0
  312. package/esm/Link/index.d.ts +4 -0
  313. package/esm/Link/index.js +8 -0
  314. package/esm/List/List.js +6 -2
  315. package/esm/List/helper/useSortHelper.d.ts +7 -5
  316. package/esm/List/helper/useSortHelper.js +109 -16
  317. package/esm/List/helper/utils.js +14 -6
  318. package/esm/MultiCascader/MultiCascader.js +41 -44
  319. package/esm/Nav/NavItem.js +1 -1
  320. package/esm/Nav/NavMegaMenu.d.ts +5 -0
  321. package/esm/Nav/NavMegaMenu.js +5 -0
  322. package/esm/Navbar/NavbarItem.js +1 -1
  323. package/esm/Navbar/NavbarMegaMenu.js +1 -1
  324. package/esm/PasswordInput/PasswordInput.d.ts +14 -0
  325. package/esm/PasswordInput/PasswordInput.js +66 -0
  326. package/esm/PasswordInput/index.d.ts +4 -0
  327. package/esm/PasswordInput/index.js +8 -0
  328. package/esm/PasswordStrengthMeter/PasswordStrengthMeter.d.ts +12 -0
  329. package/esm/PasswordStrengthMeter/PasswordStrengthMeter.js +45 -0
  330. package/esm/PasswordStrengthMeter/index.d.ts +4 -0
  331. package/esm/PasswordStrengthMeter/index.js +8 -0
  332. package/esm/RangeSlider/RangeSlider.js +18 -3
  333. package/esm/Rate/Character.d.ts +4 -3
  334. package/esm/Rate/Character.js +20 -16
  335. package/esm/Rate/Rate.d.ts +10 -2
  336. package/esm/Rate/Rate.js +49 -42
  337. package/esm/Rate/types.d.ts +8 -0
  338. package/esm/Rate/types.js +2 -0
  339. package/esm/Rate/useRatingStates.d.ts +20 -0
  340. package/esm/Rate/useRatingStates.js +43 -0
  341. package/esm/Rate/utils.d.ts +14 -3
  342. package/esm/Rate/utils.js +46 -7
  343. package/esm/SelectPicker/SelectPicker.js +46 -47
  344. package/esm/Sidenav/ExpandedSidenavDropdownItem.js +1 -1
  345. package/esm/Sidenav/SidenavItem.js +1 -1
  346. package/esm/Slider/Graduated.d.ts +4 -0
  347. package/esm/Slider/Graduated.js +43 -20
  348. package/esm/Slider/Handle.d.ts +1 -1
  349. package/esm/Slider/Handle.js +12 -12
  350. package/esm/Slider/Slider.d.ts +16 -1
  351. package/esm/Slider/Slider.js +7 -2
  352. package/esm/Slider/useDrag.d.ts +1 -0
  353. package/esm/Slider/useDrag.js +8 -3
  354. package/esm/Steps/Steps.js +3 -3
  355. package/esm/Tabs/Tabs.js +3 -3
  356. package/esm/Textarea/Textarea.d.ts +32 -0
  357. package/esm/Textarea/Textarea.js +46 -0
  358. package/esm/Textarea/index.d.ts +4 -0
  359. package/esm/Textarea/index.js +8 -0
  360. package/esm/Timeline/Timeline.js +3 -3
  361. package/esm/Toggle/Toggle.d.ts +10 -1
  362. package/esm/Toggle/Toggle.js +12 -9
  363. package/esm/TreePicker/TreePicker.js +19 -20
  364. package/esm/index.d.ts +4 -1
  365. package/esm/index.js +4 -1
  366. package/esm/internals/Box/Box.d.ts +4 -0
  367. package/esm/internals/Box/Box.js +1 -1
  368. package/esm/internals/Box/utils.js +5 -1
  369. package/esm/internals/InputBase/InputBase.d.ts +45 -0
  370. package/esm/internals/InputBase/InputBase.js +89 -0
  371. package/esm/internals/InputBase/index.d.ts +3 -0
  372. package/esm/internals/InputBase/index.js +3 -0
  373. package/esm/internals/Overlay/Modal.d.ts +1 -1
  374. package/esm/internals/Overlay/OverlayTrigger.d.ts +4 -3
  375. package/esm/internals/Overlay/OverlayTrigger.js +8 -2
  376. package/esm/internals/Picker/Listbox.js +8 -10
  377. package/esm/internals/Picker/PickerDrawer.d.ts +8 -0
  378. package/esm/internals/Picker/PickerDrawer.js +26 -0
  379. package/esm/internals/Picker/PickerPopup.js +5 -3
  380. package/esm/internals/Picker/PickerToggle.d.ts +1 -0
  381. package/esm/internals/Picker/PickerToggle.js +10 -3
  382. package/esm/internals/Picker/PickerToggleTrigger.d.ts +51 -11
  383. package/esm/internals/Picker/PickerToggleTrigger.js +59 -12
  384. package/esm/internals/Picker/hooks/index.d.ts +0 -1
  385. package/esm/internals/Picker/hooks/index.js +1 -2
  386. package/esm/internals/Picker/hooks/useCombobox.d.ts +1 -0
  387. package/esm/internals/Picker/hooks/useCombobox.js +3 -1
  388. package/esm/internals/Picker/index.d.ts +1 -2
  389. package/esm/internals/Picker/index.js +1 -2
  390. package/{cjs → esm/internals}/SafeAnchor/SafeAnchor.d.ts +2 -2
  391. package/esm/{SafeAnchor → internals/SafeAnchor}/SafeAnchor.js +3 -3
  392. package/esm/internals/Tree/TreeView.js +4 -5
  393. package/esm/internals/hooks/useRootClose.js +1 -1
  394. package/esm/internals/index.d.ts +4 -0
  395. package/esm/internals/index.js +5 -0
  396. package/esm/internals/types/html.d.ts +2 -0
  397. package/esm/internals/utils/{dom.d.ts → html/dom.d.ts} +1 -0
  398. package/esm/internals/utils/{dom.js → html/dom.js} +7 -0
  399. package/esm/internals/utils/{events.js → html/events.js} +0 -0
  400. package/esm/internals/utils/{htmlPropsUtils.js → html/htmlPropsUtils.js} +0 -0
  401. package/esm/internals/utils/html/index.d.ts +4 -0
  402. package/esm/internals/utils/html/index.js +5 -0
  403. package/esm/internals/utils/{safeSetSelection.js → html/safeSetSelection.js} +1 -1
  404. package/esm/internals/utils/index.d.ts +3 -15
  405. package/esm/internals/utils/index.js +3 -14
  406. package/esm/internals/utils/{ReactChildren.d.ts → react/ReactChildren.d.ts} +2 -8
  407. package/esm/internals/utils/{ReactChildren.js → react/ReactChildren.js} +3 -21
  408. package/esm/internals/utils/react/ReactIs.d.ts +7 -0
  409. package/esm/internals/utils/react/ReactIs.js +22 -0
  410. package/{cjs/internals/utils → esm/internals/utils/react}/createComponent.d.ts +2 -2
  411. package/esm/internals/utils/{createComponent.js → react/createComponent.js} +3 -3
  412. package/esm/internals/utils/{deprecateComponent.js → react/deprecateComponent.js} +1 -1
  413. package/esm/internals/utils/{forwardRef.d.ts → react/forwardRef.d.ts} +1 -1
  414. package/esm/internals/utils/react/index.d.ts +7 -0
  415. package/esm/internals/utils/react/index.js +8 -0
  416. package/esm/internals/utils/{mergeRefs.js → react/mergeRefs.js} +0 -0
  417. package/esm/internals/utils/{getStringLength.d.ts → string/getStringLength.d.ts} +0 -1
  418. package/esm/internals/utils/{getStringLength.js → string/getStringLength.js} +1 -2
  419. package/esm/internals/utils/string/index.d.ts +4 -0
  420. package/esm/internals/utils/string/index.js +5 -0
  421. package/esm/internals/utils/{stringifyReactNode.js → string/stringifyReactNode.js} +0 -0
  422. package/esm/internals/utils/{tplTransform.js → string/tplTransform.js} +0 -0
  423. package/esm/locales/en_GB.js +2 -2
  424. package/esm/locales/en_US.js +2 -2
  425. package/esm/locales/index.js +0 -0
  426. package/esm/locales/pl_PL.js +1 -1
  427. package/esm/useBreakpointValue/useBreakpointValue.d.ts +6 -2
  428. package/esm/useBreakpointValue/useBreakpointValue.js +9 -4
  429. package/esm/useMediaQuery/breakpoints.d.ts +24 -0
  430. package/esm/useMediaQuery/breakpoints.js +244 -0
  431. package/esm/useMediaQuery/index.d.ts +1 -1
  432. package/esm/useMediaQuery/types.d.ts +45 -0
  433. package/esm/useMediaQuery/types.js +2 -0
  434. package/esm/useMediaQuery/useMediaQuery.d.ts +4 -13
  435. package/esm/useMediaQuery/useMediaQuery.js +29 -11
  436. package/esm/useToaster/useToaster.d.ts +1 -1
  437. package/esm/useToaster/useToaster.js +1 -1
  438. package/internals/Box/styles/index.less +4 -0
  439. package/internals/Picker/styles/index.less +105 -23
  440. package/internals/Picker/styles/mixin.less +6 -6
  441. package/package.json +3 -2
  442. package/styles/color-modes/dark.less +2 -2
  443. package/styles/color-modes/high-contrast.less +2 -2
  444. package/styles/color-modes/light.less +2 -2
  445. package/styles/index.less +3 -0
  446. package/styles/root.less +2 -0
  447. package/styles/variables.less +0 -24
  448. package/SafeAnchor/package.json +0 -7
  449. package/cjs/Form/hooks/useFormClassNames.d.ts +0 -5
  450. package/cjs/Form/hooks/useFormClassNames.js +0 -29
  451. package/cjs/internals/Picker/hooks/usePickerClassName.d.ts +0 -19
  452. package/cjs/internals/Picker/hooks/usePickerClassName.js +0 -45
  453. package/esm/Form/hooks/useFormClassNames.d.ts +0 -5
  454. package/esm/Form/hooks/useFormClassNames.js +0 -25
  455. package/esm/internals/Picker/hooks/usePickerClassName.d.ts +0 -19
  456. package/esm/internals/Picker/hooks/usePickerClassName.js +0 -40
  457. /package/cjs/{SafeAnchor → internals/SafeAnchor}/index.d.ts +0 -0
  458. /package/cjs/{SafeAnchor → internals/SafeAnchor}/index.js +0 -0
  459. /package/cjs/internals/utils/{events.d.ts → html/events.d.ts} +0 -0
  460. /package/cjs/internals/utils/{htmlPropsUtils.d.ts → html/htmlPropsUtils.d.ts} +0 -0
  461. /package/cjs/internals/utils/{safeSetSelection.d.ts → html/safeSetSelection.d.ts} +0 -0
  462. /package/cjs/internals/utils/{deprecateComponent.d.ts → react/deprecateComponent.d.ts} +0 -0
  463. /package/cjs/internals/utils/{forwardRef.js → react/forwardRef.js} +0 -0
  464. /package/cjs/internals/utils/{getDOMNode.d.ts → react/getDOMNode.d.ts} +0 -0
  465. /package/cjs/internals/utils/{getDOMNode.js → react/getDOMNode.js} +0 -0
  466. /package/cjs/internals/utils/{mergeRefs.d.ts → react/mergeRefs.d.ts} +0 -0
  467. /package/cjs/internals/utils/{getSafeRegExpString.d.ts → string/getSafeRegExpString.d.ts} +0 -0
  468. /package/cjs/internals/utils/{getSafeRegExpString.js → string/getSafeRegExpString.js} +0 -0
  469. /package/cjs/internals/utils/{stringifyReactNode.d.ts → string/stringifyReactNode.d.ts} +0 -0
  470. /package/cjs/internals/utils/{tplTransform.d.ts → string/tplTransform.d.ts} +0 -0
  471. /package/esm/{SafeAnchor → internals/SafeAnchor}/index.d.ts +0 -0
  472. /package/esm/{SafeAnchor → internals/SafeAnchor}/index.js +0 -0
  473. /package/esm/internals/utils/{events.d.ts → html/events.d.ts} +0 -0
  474. /package/esm/internals/utils/{htmlPropsUtils.d.ts → html/htmlPropsUtils.d.ts} +0 -0
  475. /package/esm/internals/utils/{safeSetSelection.d.ts → html/safeSetSelection.d.ts} +0 -0
  476. /package/esm/internals/utils/{deprecateComponent.d.ts → react/deprecateComponent.d.ts} +0 -0
  477. /package/esm/internals/utils/{forwardRef.js → react/forwardRef.js} +0 -0
  478. /package/esm/internals/utils/{getDOMNode.d.ts → react/getDOMNode.d.ts} +0 -0
  479. /package/esm/internals/utils/{getDOMNode.js → react/getDOMNode.js} +0 -0
  480. /package/esm/internals/utils/{mergeRefs.d.ts → react/mergeRefs.d.ts} +0 -0
  481. /package/esm/internals/utils/{getSafeRegExpString.d.ts → string/getSafeRegExpString.d.ts} +0 -0
  482. /package/esm/internals/utils/{getSafeRegExpString.js → string/getSafeRegExpString.js} +0 -0
  483. /package/esm/internals/utils/{stringifyReactNode.d.ts → string/stringifyReactNode.d.ts} +0 -0
  484. /package/esm/internals/utils/{tplTransform.d.ts → string/tplTransform.d.ts} +0 -0
@@ -1593,9 +1593,6 @@
1593
1593
  background-color: var(--rs-input-disabled-bg);
1594
1594
  color: var(--rs-text-disabled);
1595
1595
  }
1596
- textarea.rs-input {
1597
- height: auto;
1598
- }
1599
1596
  .rs-input.rs-input-xs {
1600
1597
  --rs-input-font-size: var(--rs-input-font-size-xs);
1601
1598
  --rs-input-line-height: var(--rs-input-line-height-xs);
@@ -1620,10 +1617,6 @@ textarea.rs-input {
1620
1617
  --rs-input-padding-block: var(--rs-input-padding-block-lg);
1621
1618
  --rs-input-padding-inline: var(--rs-input-padding-inline-lg);
1622
1619
  }
1623
- textarea.rs-input {
1624
- overflow: auto;
1625
- resize: vertical;
1626
- }
1627
1620
  .rs-input-group {
1628
1621
  --rs-input-group-input-height-xs: calc(24px - 2px);
1629
1622
  --rs-input-group-input-height-sm: calc(30px - 2px);
@@ -1702,7 +1695,7 @@ textarea.rs-input {
1702
1695
  .rs-input-group .rs-input-number,
1703
1696
  .rs-input-group .rs-input-group-addon,
1704
1697
  .rs-input-group .rs-input-group-btn,
1705
- .rs-input-group .rs-picker-date .rs-picker-toggle {
1698
+ .rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
1706
1699
  border: none;
1707
1700
  border-radius: var(--rs-radius-none);
1708
1701
  outline: none;
@@ -1852,22 +1845,22 @@ textarea.rs-input {
1852
1845
  stroke: var(--rs-close-button-hover-color);
1853
1846
  stroke-width: 1;
1854
1847
  }
1855
- .rs-picker-subtle .picker-subtle-toggle {
1848
+ .rs-picker[data-variant='subtle'] .picker-subtle-toggle {
1856
1849
  --rs-picker-toggle-border-width: 0px;
1857
1850
  position: relative;
1858
1851
  z-index: 5;
1859
1852
  }
1860
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle {
1853
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
1861
1854
  cursor: not-allowed;
1862
1855
  }
1863
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover,
1864
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus,
1865
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active {
1856
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover,
1857
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus,
1858
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active {
1866
1859
  background: none;
1867
1860
  }
1868
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover::after,
1869
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus::after,
1870
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active::after {
1861
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover::after,
1862
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus::after,
1863
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active::after {
1871
1864
  display: none;
1872
1865
  }
1873
1866
  .rs-picker {
@@ -1875,25 +1868,23 @@ textarea.rs-input {
1875
1868
  --rs-picker-loader-size: 20px;
1876
1869
  --rs-picker-toggle-border-width: 1px;
1877
1870
  --rs-picker-toggle-bg: var(--rs-input-bg);
1878
- }
1879
- .rs-picker-toggle-wrapper {
1880
1871
  display: inline-block;
1881
1872
  vertical-align: middle;
1882
1873
  max-width: 100%;
1883
1874
  }
1884
- .rs-picker-block {
1875
+ .rs-picker[data-block='true'] {
1885
1876
  display: block;
1886
1877
  width: 100%;
1887
1878
  }
1888
- .rs-picker-disabled {
1879
+ .rs-picker[data-disabled='true'] {
1889
1880
  cursor: not-allowed;
1890
1881
  }
1891
- .rs-picker-disabled .rs-picker-toggle-value,
1892
- .rs-picker-disabled .rs-picker-toggle-indicator,
1893
- .rs-picker-disabled .rs-picker-tag-list .rs-tag {
1882
+ .rs-picker[data-disabled='true'] .rs-picker-toggle-value,
1883
+ .rs-picker[data-disabled='true'] .rs-picker-toggle-indicator,
1884
+ .rs-picker[data-disabled='true'] .rs-picker-tag-list .rs-tag {
1894
1885
  color: var(--rs-text-disabled) !important;
1895
1886
  }
1896
- .rs-picker-disabled .rs-picker-value-count {
1887
+ .rs-picker[data-disabled='true'] .rs-picker-value-count {
1897
1888
  opacity: 0.5;
1898
1889
  }
1899
1890
  .rs-picker-toggle .rs-picker-toggle-placeholder {
@@ -1903,10 +1894,6 @@ textarea.rs-input {
1903
1894
  .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
1904
1895
  color: var(--rs-picker-value);
1905
1896
  }
1906
- .rs-picker-countable .rs-picker-toggle-value {
1907
- display: flex;
1908
- align-items: center;
1909
- }
1910
1897
  .rs-picker-value-list {
1911
1898
  flex: 0 1 auto;
1912
1899
  overflow: hidden;
@@ -1917,11 +1904,12 @@ textarea.rs-input {
1917
1904
  margin-inline: var(--rs-picker-value-count-margin);
1918
1905
  background-color: var(--rs-picker-count-bg);
1919
1906
  color: var(--rs-picker-count-text);
1907
+ flex-shrink: 0;
1920
1908
  }
1921
1909
  .rs-picker-value-separator {
1922
1910
  margin: 0 var(--rs-spacing) 0 0;
1923
1911
  }
1924
- .rs-picker:not(.rs-picker-disabled):hover,
1912
+ .rs-picker:not([data-disabled='true']):hover,
1925
1913
  .rs-picker.rs-picker-focused {
1926
1914
  border-color: var(--rs-input-focus-border);
1927
1915
  }
@@ -1957,6 +1945,7 @@ textarea.rs-input {
1957
1945
  --rs-picker-popup-shadow: var(--rs-shadow-md);
1958
1946
  --rs-picker-popup-position-x: var(--rs-position-x);
1959
1947
  --rs-picker-popup-position-y: var(--rs-position-y);
1948
+ --rs-picker-min-width: 0;
1960
1949
  position: absolute;
1961
1950
  top: var(--rs-picker-popup-position-y);
1962
1951
  left: var(--rs-picker-popup-position-x) /* rtl:ignore */;
@@ -1970,6 +1959,7 @@ textarea.rs-input {
1970
1959
  background-color: var(--rs-bg-overlay);
1971
1960
  box-shadow: var(--rs-picker-popup-shadow);
1972
1961
  padding-block: var(--rs-picker-popup-border-radius);
1962
+ min-width: var(--rs-picker-min-width);
1973
1963
  }
1974
1964
  .rs-theme-high-contrast .rs-picker-popup {
1975
1965
  border: 1px solid var(--rs-border-primary);
@@ -1995,37 +1985,74 @@ textarea.rs-input {
1995
1985
  color: var(--rs-text-secondary);
1996
1986
  cursor: default;
1997
1987
  }
1998
- .rs-picker-default .rs-picker-toggle {
1988
+ .rs-picker-popup .rs-picker-listbox {
1989
+ max-height: var(--rs-picker-listbox-max-height);
1990
+ }
1991
+ .rs-picker-popup[data-breakpoint='xs'] {
1992
+ min-width: unset;
1993
+ width: 100%;
1994
+ height: 100%;
1995
+ overflow: auto;
1996
+ }
1997
+ .rs-picker-popup[data-breakpoint='xs'] .rs-picker-listbox {
1998
+ height: unset;
1999
+ max-height: unset;
2000
+ }
2001
+ .rs-picker-popup[data-breakpoint='xs'] .rs-tree,
2002
+ .rs-picker-popup[data-breakpoint='xs'] .rs-check-tree {
2003
+ display: flex;
2004
+ flex-direction: column;
2005
+ }
2006
+ .rs-picker-popup[data-breakpoint='xs'] .rs-tree-view,
2007
+ .rs-picker-popup[data-breakpoint='xs'] .rs-check-tree-view {
2008
+ max-height: unset;
2009
+ flex: 1 1 auto;
2010
+ }
2011
+ .rs-picker-popup[data-breakpoint='xs'] .rs-calendar-table {
2012
+ width: 100%;
2013
+ }
2014
+ .rs-picker-popup[data-breakpoint='xs'] .rs-picker-box {
2015
+ width: 100%;
2016
+ height: 100%;
2017
+ flex: 1;
2018
+ display: flex;
2019
+ flex-direction: column;
2020
+ }
2021
+ .rs-picker-popup[data-breakpoint='xs'].rs-picker-popup-date .rs-calendar,
2022
+ .rs-picker-popup[data-breakpoint='xs'] .rs-picker-daterange-panel-only-time .rs-calendar {
2023
+ height: 348px;
2024
+ }
2025
+ [data-variant='default'] .rs-picker-toggle {
1999
2026
  color: var(--rs-text-primary);
2000
2027
  border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
2001
2028
  }
2002
- .rs-picker-disabled .rs-picker-toggle {
2029
+ [data-disabled='true'] .rs-picker-toggle {
2003
2030
  cursor: not-allowed;
2004
2031
  }
2005
- .rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):hover,
2006
- .rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):focus {
2032
+ .rs-picker-toggle [data-variant='default']:not([data-disabled='true']):hover,
2033
+ .rs-picker-toggle [data-variant='default']:not([data-disabled='true']):focus {
2007
2034
  border-color: var(--rs-input-focus-border);
2008
2035
  }
2009
- .rs-picker-subtle .rs-picker-toggle {
2036
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle {
2010
2037
  --rs-picker-toggle-border-width: 0px;
2011
2038
  position: relative;
2012
2039
  z-index: 5;
2013
2040
  }
2014
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle {
2041
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
2015
2042
  cursor: not-allowed;
2016
2043
  }
2017
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover,
2018
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus,
2019
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active {
2044
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover,
2045
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus,
2046
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active {
2020
2047
  background: none;
2021
2048
  }
2022
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover::after,
2023
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus::after,
2024
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active::after {
2049
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover::after,
2050
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus::after,
2051
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active::after {
2025
2052
  display: none;
2026
2053
  }
2027
2054
  .rs-picker-toggle-label {
2028
- color: var(--rs-text-primary);
2055
+ color: var(--rs-text-secondary);
2029
2056
  }
2030
2057
  .rs-picker-toggle .rs-picker-toggle-stack {
2031
2058
  flex: 1 1 auto;
@@ -2064,44 +2091,67 @@ textarea.rs-input {
2064
2091
  .rs-picker-toggle-read-only {
2065
2092
  opacity: 0;
2066
2093
  }
2067
- .rs-picker-default .rs-picker-toggle {
2094
+ .rs-picker-toggle .rs-picker[data-variant='default'],
2095
+ .rs-picker-toggle {
2068
2096
  transition: border-color ease-in-out 0.15s;
2069
2097
  }
2070
- .rs-theme-high-contrast .rs-picker-default .rs-picker-toggle {
2098
+ .rs-theme-high-contrast .rs-picker-toggle .rs-picker[data-variant='default'],
2099
+ .rs-theme-high-contrast .rs-picker-toggle {
2071
2100
  transition: none;
2072
2101
  }
2073
- .rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
2074
- .rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
2075
- .rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active {
2102
+ .rs-picker-toggle .rs-picker[data-variant='default']:hover,
2103
+ :not([data-disabled='true']) .rs-picker-toggle:hover,
2104
+ .rs-picker-toggle .rs-picker[data-variant='default']:focus,
2105
+ :not([data-disabled='true']) .rs-picker-toggle:focus,
2106
+ .rs-picker-toggle .rs-picker[data-variant='default']-active,
2107
+ :not([data-disabled='true']) .rs-picker-toggle-active {
2076
2108
  border-color: var(--rs-input-focus-border);
2077
2109
  }
2078
- .rs-picker-subtle .rs-picker-toggle {
2110
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle {
2079
2111
  color: var(--rs-btn-subtle-text);
2080
2112
  background-color: transparent;
2081
2113
  transition: none;
2082
2114
  }
2083
- .rs-picker-subtle .rs-picker-toggle:hover {
2115
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle:hover {
2084
2116
  color: var(--rs-btn-subtle-hover-text);
2085
2117
  background-color: var(--rs-btn-subtle-hover-bg);
2086
2118
  }
2087
- .rs-picker-subtle .rs-picker-toggle:active,
2088
- .rs-picker-subtle .rs-picker-toggle.rs-btn-active {
2119
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle:active,
2120
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-active {
2089
2121
  color: var(--rs-btn-subtle-active-text);
2090
2122
  background-color: var(--rs-btn-subtle-active-bg);
2091
2123
  }
2092
- .rs-picker-subtle .rs-picker-toggle:disabled,
2093
- .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
2124
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
2125
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
2094
2126
  color: var(--rs-btn-subtle-disabled-text);
2095
2127
  background: none;
2096
2128
  }
2097
- .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
2098
- .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
2129
+ .rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
2130
+ .rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
2099
2131
  border-color: var(--rs-btn-default-disabled-boreder-color);
2100
2132
  }
2101
- .rs-picker-subtle .rs-picker-toggle-active {
2133
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle-active {
2102
2134
  background-color: var(--rs-btn-subtle-hover-bg);
2103
2135
  color: var(--rs-btn-subtle-hover-text);
2104
2136
  }
2137
+ .rs-picker-toggle[data-size='lg'] .rs-picker-clean .rs-icon {
2138
+ width: 16px;
2139
+ height: 16px;
2140
+ }
2141
+ .rs-picker-toggle[data-size='sm'] .rs-picker-clean {
2142
+ height: 18px;
2143
+ }
2144
+ .rs-picker-toggle[data-size='xs'] .rs-picker-clean {
2145
+ height: 18px;
2146
+ }
2147
+ .rs-picker-toggle[data-size='xs'] .rs-picker-clean .rs-icon {
2148
+ width: 12px;
2149
+ height: 12px;
2150
+ }
2151
+ .rs-picker-toggle[data-countable='true'] .rs-picker-toggle-value {
2152
+ display: flex;
2153
+ align-items: center;
2154
+ }
2105
2155
  .rs-picker-toggle.rs-btn {
2106
2156
  text-align: start;
2107
2157
  display: inline-flex;
@@ -2135,18 +2185,18 @@ textarea.rs-input {
2135
2185
  font-size: var(--rs-font-size-md);
2136
2186
  color: var(--rs-text-secondary);
2137
2187
  }
2138
- .rs-picker-default .rs-btn,
2188
+ .rs-picker[data-variant='default'] .rs-btn,
2139
2189
  .rs-picker-input .rs-btn,
2140
- .rs-picker-default .rs-picker-toggle,
2190
+ .rs-picker[data-variant='default'] .rs-picker-toggle,
2141
2191
  .rs-picker-input .rs-picker-toggle {
2142
2192
  background-color: var(--rs-picker-toggle-bg);
2143
2193
  }
2144
- .rs-picker-default.rs-picker-disabled,
2145
- .rs-picker-input.rs-picker-disabled {
2194
+ .rs-picker[data-variant='default'][data-disabled='true'],
2195
+ .rs-picker-input[data-disabled='true'] {
2146
2196
  --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
2147
2197
  }
2148
- .rs-picker-default.rs-picker-disabled .rs-input-group,
2149
- .rs-picker-input.rs-picker-disabled .rs-input-group {
2198
+ .rs-picker[data-variant='default'][data-disabled='true'] .rs-input-group,
2199
+ .rs-picker-input[data-disabled='true'] .rs-input-group {
2150
2200
  pointer-events: none;
2151
2201
  }
2152
2202
  .rs-check-item {
@@ -1770,9 +1770,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
1770
1770
  background-color: var(--rs-input-disabled-bg);
1771
1771
  color: var(--rs-text-disabled);
1772
1772
  }
1773
- textarea.rs-input {
1774
- height: auto;
1775
- }
1776
1773
  .rs-input.rs-input-xs {
1777
1774
  --rs-input-font-size: var(--rs-input-font-size-xs);
1778
1775
  --rs-input-line-height: var(--rs-input-line-height-xs);
@@ -1797,10 +1794,6 @@ textarea.rs-input {
1797
1794
  --rs-input-padding-block: var(--rs-input-padding-block-lg);
1798
1795
  --rs-input-padding-inline: var(--rs-input-padding-inline-lg);
1799
1796
  }
1800
- textarea.rs-input {
1801
- overflow: auto;
1802
- resize: vertical;
1803
- }
1804
1797
  .rs-input-group {
1805
1798
  --rs-input-group-input-height-xs: calc(24px - 2px);
1806
1799
  --rs-input-group-input-height-sm: calc(30px - 2px);
@@ -1879,7 +1872,7 @@ textarea.rs-input {
1879
1872
  .rs-input-group .rs-input-number,
1880
1873
  .rs-input-group .rs-input-group-addon,
1881
1874
  .rs-input-group .rs-input-group-btn,
1882
- .rs-input-group .rs-picker-date .rs-picker-toggle {
1875
+ .rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
1883
1876
  border: none;
1884
1877
  border-radius: var(--rs-radius-none);
1885
1878
  outline: none;
@@ -2035,22 +2028,22 @@ textarea.rs-input {
2035
2028
  stroke: var(--rs-close-button-hover-color);
2036
2029
  stroke-width: 1;
2037
2030
  }
2038
- .rs-picker-subtle .picker-subtle-toggle {
2031
+ .rs-picker[data-variant='subtle'] .picker-subtle-toggle {
2039
2032
  --rs-picker-toggle-border-width: 0px;
2040
2033
  position: relative;
2041
2034
  z-index: 5;
2042
2035
  }
2043
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle {
2036
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
2044
2037
  cursor: not-allowed;
2045
2038
  }
2046
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover,
2047
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus,
2048
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active {
2039
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover,
2040
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus,
2041
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active {
2049
2042
  background: none;
2050
2043
  }
2051
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover::after,
2052
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus::after,
2053
- .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active::after {
2044
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover::after,
2045
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus::after,
2046
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active::after {
2054
2047
  display: none;
2055
2048
  }
2056
2049
  .rs-picker {
@@ -2058,25 +2051,23 @@ textarea.rs-input {
2058
2051
  --rs-picker-loader-size: 20px;
2059
2052
  --rs-picker-toggle-border-width: 1px;
2060
2053
  --rs-picker-toggle-bg: var(--rs-input-bg);
2061
- }
2062
- .rs-picker-toggle-wrapper {
2063
2054
  display: inline-block;
2064
2055
  vertical-align: middle;
2065
2056
  max-width: 100%;
2066
2057
  }
2067
- .rs-picker-block {
2058
+ .rs-picker[data-block='true'] {
2068
2059
  display: block;
2069
2060
  width: 100%;
2070
2061
  }
2071
- .rs-picker-disabled {
2062
+ .rs-picker[data-disabled='true'] {
2072
2063
  cursor: not-allowed;
2073
2064
  }
2074
- .rs-picker-disabled .rs-picker-toggle-value,
2075
- .rs-picker-disabled .rs-picker-toggle-indicator,
2076
- .rs-picker-disabled .rs-picker-tag-list .rs-tag {
2065
+ .rs-picker[data-disabled='true'] .rs-picker-toggle-value,
2066
+ .rs-picker[data-disabled='true'] .rs-picker-toggle-indicator,
2067
+ .rs-picker[data-disabled='true'] .rs-picker-tag-list .rs-tag {
2077
2068
  color: var(--rs-text-disabled) !important;
2078
2069
  }
2079
- .rs-picker-disabled .rs-picker-value-count {
2070
+ .rs-picker[data-disabled='true'] .rs-picker-value-count {
2080
2071
  opacity: 0.5;
2081
2072
  }
2082
2073
  .rs-picker-toggle .rs-picker-toggle-placeholder {
@@ -2086,10 +2077,6 @@ textarea.rs-input {
2086
2077
  .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
2087
2078
  color: var(--rs-picker-value);
2088
2079
  }
2089
- .rs-picker-countable .rs-picker-toggle-value {
2090
- display: flex;
2091
- align-items: center;
2092
- }
2093
2080
  .rs-picker-value-list {
2094
2081
  flex: 0 1 auto;
2095
2082
  overflow: hidden;
@@ -2100,11 +2087,12 @@ textarea.rs-input {
2100
2087
  margin-inline: var(--rs-picker-value-count-margin);
2101
2088
  background-color: var(--rs-picker-count-bg);
2102
2089
  color: var(--rs-picker-count-text);
2090
+ flex-shrink: 0;
2103
2091
  }
2104
2092
  .rs-picker-value-separator {
2105
2093
  margin: 0 var(--rs-spacing) 0 0;
2106
2094
  }
2107
- .rs-picker:not(.rs-picker-disabled):hover,
2095
+ .rs-picker:not([data-disabled='true']):hover,
2108
2096
  .rs-picker.rs-picker-focused {
2109
2097
  border-color: var(--rs-input-focus-border);
2110
2098
  }
@@ -2140,6 +2128,7 @@ textarea.rs-input {
2140
2128
  --rs-picker-popup-shadow: var(--rs-shadow-md);
2141
2129
  --rs-picker-popup-position-x: var(--rs-position-x);
2142
2130
  --rs-picker-popup-position-y: var(--rs-position-y);
2131
+ --rs-picker-min-width: 0;
2143
2132
  position: absolute;
2144
2133
  top: var(--rs-picker-popup-position-y);
2145
2134
  left: var(--rs-picker-popup-position-x) /* rtl:ignore */;
@@ -2153,6 +2142,7 @@ textarea.rs-input {
2153
2142
  background-color: var(--rs-bg-overlay);
2154
2143
  box-shadow: var(--rs-picker-popup-shadow);
2155
2144
  padding-block: var(--rs-picker-popup-border-radius);
2145
+ min-width: var(--rs-picker-min-width);
2156
2146
  }
2157
2147
  .rs-theme-high-contrast .rs-picker-popup {
2158
2148
  border: 1px solid var(--rs-border-primary);
@@ -2178,37 +2168,74 @@ textarea.rs-input {
2178
2168
  color: var(--rs-text-secondary);
2179
2169
  cursor: default;
2180
2170
  }
2181
- .rs-picker-default .rs-picker-toggle {
2171
+ .rs-picker-popup .rs-picker-listbox {
2172
+ max-height: var(--rs-picker-listbox-max-height);
2173
+ }
2174
+ .rs-picker-popup[data-breakpoint='xs'] {
2175
+ min-width: unset;
2176
+ width: 100%;
2177
+ height: 100%;
2178
+ overflow: auto;
2179
+ }
2180
+ .rs-picker-popup[data-breakpoint='xs'] .rs-picker-listbox {
2181
+ height: unset;
2182
+ max-height: unset;
2183
+ }
2184
+ .rs-picker-popup[data-breakpoint='xs'] .rs-tree,
2185
+ .rs-picker-popup[data-breakpoint='xs'] .rs-check-tree {
2186
+ display: flex;
2187
+ flex-direction: column;
2188
+ }
2189
+ .rs-picker-popup[data-breakpoint='xs'] .rs-tree-view,
2190
+ .rs-picker-popup[data-breakpoint='xs'] .rs-check-tree-view {
2191
+ max-height: unset;
2192
+ flex: 1 1 auto;
2193
+ }
2194
+ .rs-picker-popup[data-breakpoint='xs'] .rs-calendar-table {
2195
+ width: 100%;
2196
+ }
2197
+ .rs-picker-popup[data-breakpoint='xs'] .rs-picker-box {
2198
+ width: 100%;
2199
+ height: 100%;
2200
+ flex: 1;
2201
+ display: flex;
2202
+ flex-direction: column;
2203
+ }
2204
+ .rs-picker-popup[data-breakpoint='xs'].rs-picker-popup-date .rs-calendar,
2205
+ .rs-picker-popup[data-breakpoint='xs'] .rs-picker-daterange-panel-only-time .rs-calendar {
2206
+ height: 348px;
2207
+ }
2208
+ [data-variant='default'] .rs-picker-toggle {
2182
2209
  color: var(--rs-text-primary);
2183
2210
  border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
2184
2211
  }
2185
- .rs-picker-disabled .rs-picker-toggle {
2212
+ [data-disabled='true'] .rs-picker-toggle {
2186
2213
  cursor: not-allowed;
2187
2214
  }
2188
- .rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):hover,
2189
- .rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):focus {
2215
+ .rs-picker-toggle [data-variant='default']:not([data-disabled='true']):hover,
2216
+ .rs-picker-toggle [data-variant='default']:not([data-disabled='true']):focus {
2190
2217
  border-color: var(--rs-input-focus-border);
2191
2218
  }
2192
- .rs-picker-subtle .rs-picker-toggle {
2219
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle {
2193
2220
  --rs-picker-toggle-border-width: 0px;
2194
2221
  position: relative;
2195
2222
  z-index: 5;
2196
2223
  }
2197
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle {
2224
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
2198
2225
  cursor: not-allowed;
2199
2226
  }
2200
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover,
2201
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus,
2202
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active {
2227
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover,
2228
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus,
2229
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active {
2203
2230
  background: none;
2204
2231
  }
2205
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover::after,
2206
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus::after,
2207
- .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active::after {
2232
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover::after,
2233
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus::after,
2234
+ .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active::after {
2208
2235
  display: none;
2209
2236
  }
2210
2237
  .rs-picker-toggle-label {
2211
- color: var(--rs-text-primary);
2238
+ color: var(--rs-text-secondary);
2212
2239
  }
2213
2240
  .rs-picker-toggle .rs-picker-toggle-stack {
2214
2241
  flex: 1 1 auto;
@@ -2247,44 +2274,67 @@ textarea.rs-input {
2247
2274
  .rs-picker-toggle-read-only {
2248
2275
  opacity: 0;
2249
2276
  }
2250
- .rs-picker-default .rs-picker-toggle {
2277
+ .rs-picker-toggle .rs-picker[data-variant='default'],
2278
+ .rs-picker-toggle {
2251
2279
  transition: border-color ease-in-out 0.15s;
2252
2280
  }
2253
- .rs-theme-high-contrast .rs-picker-default .rs-picker-toggle {
2281
+ .rs-theme-high-contrast .rs-picker-toggle .rs-picker[data-variant='default'],
2282
+ .rs-theme-high-contrast .rs-picker-toggle {
2254
2283
  transition: none;
2255
2284
  }
2256
- .rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
2257
- .rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
2258
- .rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active {
2285
+ .rs-picker-toggle .rs-picker[data-variant='default']:hover,
2286
+ :not([data-disabled='true']) .rs-picker-toggle:hover,
2287
+ .rs-picker-toggle .rs-picker[data-variant='default']:focus,
2288
+ :not([data-disabled='true']) .rs-picker-toggle:focus,
2289
+ .rs-picker-toggle .rs-picker[data-variant='default']-active,
2290
+ :not([data-disabled='true']) .rs-picker-toggle-active {
2259
2291
  border-color: var(--rs-input-focus-border);
2260
2292
  }
2261
- .rs-picker-subtle .rs-picker-toggle {
2293
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle {
2262
2294
  color: var(--rs-btn-subtle-text);
2263
2295
  background-color: transparent;
2264
2296
  transition: none;
2265
2297
  }
2266
- .rs-picker-subtle .rs-picker-toggle:hover {
2298
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle:hover {
2267
2299
  color: var(--rs-btn-subtle-hover-text);
2268
2300
  background-color: var(--rs-btn-subtle-hover-bg);
2269
2301
  }
2270
- .rs-picker-subtle .rs-picker-toggle:active,
2271
- .rs-picker-subtle .rs-picker-toggle.rs-btn-active {
2302
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle:active,
2303
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-active {
2272
2304
  color: var(--rs-btn-subtle-active-text);
2273
2305
  background-color: var(--rs-btn-subtle-active-bg);
2274
2306
  }
2275
- .rs-picker-subtle .rs-picker-toggle:disabled,
2276
- .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
2307
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
2308
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
2277
2309
  color: var(--rs-btn-subtle-disabled-text);
2278
2310
  background: none;
2279
2311
  }
2280
- .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
2281
- .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
2312
+ .rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
2313
+ .rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
2282
2314
  border-color: var(--rs-btn-default-disabled-boreder-color);
2283
2315
  }
2284
- .rs-picker-subtle .rs-picker-toggle-active {
2316
+ .rs-picker[data-variant='subtle'] .rs-picker-toggle-active {
2285
2317
  background-color: var(--rs-btn-subtle-hover-bg);
2286
2318
  color: var(--rs-btn-subtle-hover-text);
2287
2319
  }
2320
+ .rs-picker-toggle[data-size='lg'] .rs-picker-clean .rs-icon {
2321
+ width: 16px;
2322
+ height: 16px;
2323
+ }
2324
+ .rs-picker-toggle[data-size='sm'] .rs-picker-clean {
2325
+ height: 18px;
2326
+ }
2327
+ .rs-picker-toggle[data-size='xs'] .rs-picker-clean {
2328
+ height: 18px;
2329
+ }
2330
+ .rs-picker-toggle[data-size='xs'] .rs-picker-clean .rs-icon {
2331
+ width: 12px;
2332
+ height: 12px;
2333
+ }
2334
+ .rs-picker-toggle[data-countable='true'] .rs-picker-toggle-value {
2335
+ display: flex;
2336
+ align-items: center;
2337
+ }
2288
2338
  .rs-picker-toggle.rs-btn {
2289
2339
  text-align: start;
2290
2340
  display: inline-flex;
@@ -2318,18 +2368,18 @@ textarea.rs-input {
2318
2368
  font-size: var(--rs-font-size-md);
2319
2369
  color: var(--rs-text-secondary);
2320
2370
  }
2321
- .rs-picker-default .rs-btn,
2371
+ .rs-picker[data-variant='default'] .rs-btn,
2322
2372
  .rs-picker-input .rs-btn,
2323
- .rs-picker-default .rs-picker-toggle,
2373
+ .rs-picker[data-variant='default'] .rs-picker-toggle,
2324
2374
  .rs-picker-input .rs-picker-toggle {
2325
2375
  background-color: var(--rs-picker-toggle-bg);
2326
2376
  }
2327
- .rs-picker-default.rs-picker-disabled,
2328
- .rs-picker-input.rs-picker-disabled {
2377
+ .rs-picker[data-variant='default'][data-disabled='true'],
2378
+ .rs-picker-input[data-disabled='true'] {
2329
2379
  --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
2330
2380
  }
2331
- .rs-picker-default.rs-picker-disabled .rs-input-group,
2332
- .rs-picker-input.rs-picker-disabled .rs-input-group {
2381
+ .rs-picker[data-variant='default'][data-disabled='true'] .rs-input-group,
2382
+ .rs-picker-input[data-disabled='true'] .rs-input-group {
2333
2383
  pointer-events: none;
2334
2384
  }
2335
2385
  .rs-check-item {
@@ -1659,6 +1659,7 @@
1659
1659
  }
1660
1660
  .rs-nav-justified {
1661
1661
  display: flex;
1662
+ width: 100%;
1662
1663
  }
1663
1664
  .rs-nav-justified > .rs-nav-item,
1664
1665
  .rs-nav-justified > .rs-dropdown {
@@ -352,6 +352,7 @@
352
352
  // Justified
353
353
  .rs-nav-justified {
354
354
  display: flex;
355
+ width: 100%;
355
356
 
356
357
  > .rs-nav-item,
357
358
  > .rs-dropdown {