@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

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 (388) hide show
  1. package/README.md +75 -39
  2. package/dist/doc-metadata.json +1872 -0
  3. package/dist/docs/components/accentBar.md +582 -0
  4. package/dist/docs/components/activity.md +330 -0
  5. package/dist/docs/components/animatedNumber.md +88 -0
  6. package/dist/docs/components/animatedTextReveal.md +381 -0
  7. package/dist/docs/components/animations.md +459 -0
  8. package/dist/docs/components/appHeader.md +737 -0
  9. package/dist/docs/components/appLayout.md +2033 -0
  10. package/dist/docs/components/appNavigationBar.md +274 -0
  11. package/dist/docs/components/areaCharts.md +828 -0
  12. package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
  13. package/dist/docs/components/assetTree.md +3132 -0
  14. package/dist/docs/components/autosuggests.md +1177 -0
  15. package/dist/docs/components/avatar.md +206 -0
  16. package/dist/docs/components/banner.md +668 -0
  17. package/dist/docs/components/barCharts.md +2765 -0
  18. package/dist/docs/components/barList.md +517 -0
  19. package/dist/docs/components/basicMap.md +167 -0
  20. package/dist/docs/components/bottomSheet.md +721 -0
  21. package/dist/docs/components/button.md +775 -0
  22. package/dist/docs/components/buttonToolbar.md +134 -0
  23. package/dist/docs/components/calendarStripe.md +533 -0
  24. package/dist/docs/components/card.md +86 -0
  25. package/dist/docs/components/carousel.md +128 -0
  26. package/dist/docs/components/chartColors.md +716 -0
  27. package/dist/docs/components/chartsGettingStarted.md +28 -0
  28. package/dist/docs/components/chat.md +935 -0
  29. package/dist/docs/components/checkbox.md +996 -0
  30. package/dist/docs/components/clearableInput.md +806 -0
  31. package/dist/docs/components/collapse.md +189 -0
  32. package/dist/docs/components/composedCharts.md +424 -0
  33. package/dist/docs/components/contentLoader.md +674 -0
  34. package/dist/docs/components/dataTabs.md +1251 -0
  35. package/dist/docs/components/datepickers.md +2543 -0
  36. package/dist/docs/components/dialogs.md +2244 -0
  37. package/dist/docs/components/divider.md +219 -0
  38. package/dist/docs/components/dropdowns.md +17538 -0
  39. package/dist/docs/components/editableContent.md +1127 -0
  40. package/dist/docs/components/expander.md +970 -0
  41. package/dist/docs/components/fade.md +836 -0
  42. package/dist/docs/components/fadeExpander.md +180 -0
  43. package/dist/docs/components/fadeUp.md +396 -0
  44. package/dist/docs/components/feedback.md +758 -0
  45. package/dist/docs/components/filePickers.md +370 -0
  46. package/dist/docs/components/formLabel.md +251 -0
  47. package/dist/docs/components/fullscreenMap.md +10 -0
  48. package/dist/docs/components/groupedItemList.md +1001 -0
  49. package/dist/docs/components/iconList.md +306 -0
  50. package/dist/docs/components/imagePreloader.md +167 -0
  51. package/dist/docs/components/labeledElement.md +115 -0
  52. package/dist/docs/components/licensePlate.md +412 -0
  53. package/dist/docs/components/lineCharts.md +2014 -0
  54. package/dist/docs/components/listMenu.md +392 -0
  55. package/dist/docs/components/loadMore.md +219 -0
  56. package/dist/docs/components/mainNavigation.md +129 -0
  57. package/dist/docs/components/mapCircle.md +93 -0
  58. package/dist/docs/components/mapCluster.md +337 -0
  59. package/dist/docs/components/mapContext.md +284 -0
  60. package/dist/docs/components/mapDraggableMarker.md +150 -0
  61. package/dist/docs/components/mapGettingStarted.md +39 -0
  62. package/dist/docs/components/mapInfoBubble.md +135 -0
  63. package/dist/docs/components/mapLayerGroup.md +94 -0
  64. package/dist/docs/components/mapMarker.md +1814 -0
  65. package/dist/docs/components/mapPolygon.md +959 -0
  66. package/dist/docs/components/mapRoute.md +3816 -0
  67. package/dist/docs/components/mapRouteGenerator.md +6 -0
  68. package/dist/docs/components/mapSettings.md +1040 -0
  69. package/dist/docs/components/mapUtils.md +132 -0
  70. package/dist/docs/components/multiselects.md +1921 -0
  71. package/dist/docs/components/noData.md +210 -0
  72. package/dist/docs/components/notifications.md +314 -0
  73. package/dist/docs/components/numbercontrol.md +706 -0
  74. package/dist/docs/components/onboarding.md +297 -0
  75. package/dist/docs/components/page.md +241 -0
  76. package/dist/docs/components/pager.md +133 -0
  77. package/dist/docs/components/pieCharts.md +1284 -0
  78. package/dist/docs/components/popover.md +222 -0
  79. package/dist/docs/components/position.md +50 -0
  80. package/dist/docs/components/radialBarCharts.md +3663 -0
  81. package/dist/docs/components/radiobutton.md +1271 -0
  82. package/dist/docs/components/releaseNotes.md +135 -0
  83. package/dist/docs/components/resizer.md +162 -0
  84. package/dist/docs/components/responsiveColumnStripe.md +435 -0
  85. package/dist/docs/components/responsiveVideo.md +71 -0
  86. package/dist/docs/components/rioglyph.md +331 -0
  87. package/dist/docs/components/rules.md +965 -0
  88. package/dist/docs/components/saveableInput.md +1721 -0
  89. package/dist/docs/components/selects.md +1993 -0
  90. package/dist/docs/components/sidebar.md +332 -0
  91. package/dist/docs/components/sliders.md +376 -0
  92. package/dist/docs/components/smoothScrollbars.md +1180 -0
  93. package/dist/docs/components/spinners.md +506 -0
  94. package/dist/docs/components/states.md +1176 -0
  95. package/dist/docs/components/statsWidgets.md +636 -0
  96. package/dist/docs/components/statusBar.md +644 -0
  97. package/dist/docs/components/stepButton.md +61 -0
  98. package/dist/docs/components/steppedProgressBars.md +1064 -0
  99. package/dist/docs/components/subNavigation.md +470 -0
  100. package/dist/docs/components/supportMarker.md +115 -0
  101. package/dist/docs/components/svgImage.md +248 -0
  102. package/dist/docs/components/switch.md +554 -0
  103. package/dist/docs/components/tables.md +8 -0
  104. package/dist/docs/components/tagManager.md +476 -0
  105. package/dist/docs/components/tags.md +785 -0
  106. package/dist/docs/components/teaser.md +925 -0
  107. package/dist/docs/components/timeline.md +514 -0
  108. package/dist/docs/components/timepicker.md +262 -0
  109. package/dist/docs/components/toggleButton.md +178 -0
  110. package/dist/docs/components/tooltip.md +454 -0
  111. package/dist/docs/components/virtualList.md +486 -0
  112. package/dist/docs/foundations.md +20901 -0
  113. package/dist/docs/start/changelog.md +714 -0
  114. package/dist/docs/start/goodtoknow.md +14 -0
  115. package/dist/docs/start/guidelines/color-combinations.md +678 -0
  116. package/dist/docs/start/guidelines/custom-css.md +42 -0
  117. package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
  118. package/dist/docs/start/guidelines/formatting.md +587 -0
  119. package/dist/docs/start/guidelines/iframe.md +323 -0
  120. package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
  121. package/dist/docs/start/guidelines/print-css.md +36 -0
  122. package/dist/docs/start/guidelines/spinner.md +710 -0
  123. package/dist/docs/start/guidelines/supported-browsers.md +10 -0
  124. package/dist/docs/start/guidelines/writing.md +635 -0
  125. package/dist/docs/start/howto.md +187 -0
  126. package/dist/docs/start/intro.md +43 -0
  127. package/dist/docs/start/responsiveness.md +98 -0
  128. package/dist/docs/templates/common-table.md +1111 -0
  129. package/dist/docs/templates/detail-views.md +942 -0
  130. package/dist/docs/templates/expandable-details.md +228 -0
  131. package/dist/docs/templates/feature-cards.md +549 -0
  132. package/dist/docs/templates/form-summary.md +199 -0
  133. package/dist/docs/templates/form-toggle.md +367 -0
  134. package/dist/docs/templates/list-blocks.md +1021 -0
  135. package/dist/docs/templates/loading-progress.md +109 -0
  136. package/dist/docs/templates/options-panel.md +152 -0
  137. package/dist/docs/templates/panel-variants.md +164 -0
  138. package/dist/docs/templates/progress-cards.md +607 -0
  139. package/dist/docs/templates/progress-success.md +142 -0
  140. package/dist/docs/templates/settings-form.md +434 -0
  141. package/dist/docs/templates/stats-blocks.md +1381 -0
  142. package/dist/docs/templates/table-panel.md +184 -0
  143. package/dist/docs/templates/table-row-animation.md +317 -0
  144. package/dist/docs/templates/usage-cards.md +227 -0
  145. package/dist/docs/utilities/deviceUtils.md +123 -0
  146. package/dist/docs/utilities/featureToggles.md +90 -0
  147. package/dist/docs/utilities/fuelTypeUtils.md +186 -0
  148. package/dist/docs/utilities/routeUtils.md +138 -0
  149. package/dist/docs/utilities/useAfterMount.md +66 -0
  150. package/dist/docs/utilities/useAutoAnimate.md +193 -0
  151. package/dist/docs/utilities/useAverage.md +95 -0
  152. package/dist/docs/utilities/useClickOutside.md +61 -0
  153. package/dist/docs/utilities/useClipboard.md +93 -0
  154. package/dist/docs/utilities/useCount.md +178 -0
  155. package/dist/docs/utilities/useDarkMode.md +49 -0
  156. package/dist/docs/utilities/useDebugInfo.md +126 -0
  157. package/dist/docs/utilities/useEffectOnce.md +58 -0
  158. package/dist/docs/utilities/useElapsedTime.md +58 -0
  159. package/dist/docs/utilities/useElementSize.md +71 -0
  160. package/dist/docs/utilities/useEsc.md +58 -0
  161. package/dist/docs/utilities/useEvent.md +64 -0
  162. package/dist/docs/utilities/useFocusTrap.md +85 -0
  163. package/dist/docs/utilities/useFullscreen.md +198 -0
  164. package/dist/docs/utilities/useHover.md +55 -0
  165. package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
  166. package/dist/docs/utilities/useInterval.md +85 -0
  167. package/dist/docs/utilities/useIsFocusWithin.md +114 -0
  168. package/dist/docs/utilities/useKey.md +151 -0
  169. package/dist/docs/utilities/useLocalStorage.md +91 -0
  170. package/dist/docs/utilities/useLocationSuggestions.md +114 -0
  171. package/dist/docs/utilities/useMax.md +62 -0
  172. package/dist/docs/utilities/useMin.md +78 -0
  173. package/dist/docs/utilities/useMutationObserver.md +113 -0
  174. package/dist/docs/utilities/useOnScreen.md +138 -0
  175. package/dist/docs/utilities/useOnlineStatus.md +49 -0
  176. package/dist/docs/utilities/usePostMessage.md +117 -0
  177. package/dist/docs/utilities/usePostMessageSender.md +257 -0
  178. package/dist/docs/utilities/usePrevious.md +101 -0
  179. package/dist/docs/utilities/useResizeObserver.md +151 -0
  180. package/dist/docs/utilities/useScrollPosition.md +252 -0
  181. package/dist/docs/utilities/useSearch.md +228 -0
  182. package/dist/docs/utilities/useSorting.md +389 -0
  183. package/dist/docs/utilities/useStateWithValidation.md +83 -0
  184. package/dist/docs/utilities/useSum.md +155 -0
  185. package/dist/docs/utilities/useTableExport.md +404 -0
  186. package/dist/docs/utilities/useTableSelection.md +1120 -0
  187. package/dist/docs/utilities/useTimeout.md +55 -0
  188. package/dist/docs/utilities/useToggle.md +115 -0
  189. package/dist/docs/utilities/useWindowResize.md +70 -0
  190. package/dist/index.mjs +271 -0
  191. package/dist/search-synonyms.json +134 -0
  192. package/dist/version.json +4 -0
  193. package/package.json +23 -19
  194. package/bin/uikit-mcp.mjs +0 -23
  195. package/data/pages/Components/components/accentbar.json +0 -207
  196. package/data/pages/Components/components/activity.json +0 -87
  197. package/data/pages/Components/components/animatednumber.json +0 -99
  198. package/data/pages/Components/components/animations.json +0 -87
  199. package/data/pages/Components/components/appheader.json +0 -291
  200. package/data/pages/Components/components/applayout.json +0 -1198
  201. package/data/pages/Components/components/appnavigationbar.json +0 -327
  202. package/data/pages/Components/components/areacharts.json +0 -563
  203. package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
  204. package/data/pages/Components/components/assettree.json +0 -3080
  205. package/data/pages/Components/components/autosuggests.json +0 -710
  206. package/data/pages/Components/components/avatar.json +0 -157
  207. package/data/pages/Components/components/banner.json +0 -599
  208. package/data/pages/Components/components/barcharts.json +0 -1507
  209. package/data/pages/Components/components/barlist.json +0 -223
  210. package/data/pages/Components/components/basicmap.json +0 -68
  211. package/data/pages/Components/components/bottomsheet.json +0 -601
  212. package/data/pages/Components/components/button.json +0 -583
  213. package/data/pages/Components/components/buttontoolbar.json +0 -63
  214. package/data/pages/Components/components/calendarstripe.json +0 -235
  215. package/data/pages/Components/components/card.json +0 -69
  216. package/data/pages/Components/components/carousel.json +0 -39
  217. package/data/pages/Components/components/chartcolors.json +0 -34
  218. package/data/pages/Components/components/chartsgettingstarted.json +0 -32
  219. package/data/pages/Components/components/chat.json +0 -39
  220. package/data/pages/Components/components/checkbox.json +0 -847
  221. package/data/pages/Components/components/clearableinput.json +0 -789
  222. package/data/pages/Components/components/collapse.json +0 -175
  223. package/data/pages/Components/components/composedcharts.json +0 -159
  224. package/data/pages/Components/components/contentloader.json +0 -233
  225. package/data/pages/Components/components/datatabs.json +0 -680
  226. package/data/pages/Components/components/datepickers.json +0 -287
  227. package/data/pages/Components/components/dialogs.json +0 -1492
  228. package/data/pages/Components/components/divider.json +0 -93
  229. package/data/pages/Components/components/dropdowns.json +0 -936
  230. package/data/pages/Components/components/editablecontent.json +0 -1117
  231. package/data/pages/Components/components/expander.json +0 -377
  232. package/data/pages/Components/components/fade.json +0 -403
  233. package/data/pages/Components/components/fadeexpander.json +0 -75
  234. package/data/pages/Components/components/fadeup.json +0 -127
  235. package/data/pages/Components/components/feedback.json +0 -269
  236. package/data/pages/Components/components/filepickers.json +0 -269
  237. package/data/pages/Components/components/formlabel.json +0 -115
  238. package/data/pages/Components/components/fullscreenmap.json +0 -22
  239. package/data/pages/Components/components/groupeditemlist.json +0 -323
  240. package/data/pages/Components/components/iconlist.json +0 -45
  241. package/data/pages/Components/components/imagepreloader.json +0 -81
  242. package/data/pages/Components/components/labeledelement.json +0 -75
  243. package/data/pages/Components/components/licenseplate.json +0 -69
  244. package/data/pages/Components/components/linecharts.json +0 -987
  245. package/data/pages/Components/components/listmenu.json +0 -313
  246. package/data/pages/Components/components/loadmore.json +0 -175
  247. package/data/pages/Components/components/mainnavigation.json +0 -39
  248. package/data/pages/Components/components/mapcircle.json +0 -34
  249. package/data/pages/Components/components/mapcluster.json +0 -51
  250. package/data/pages/Components/components/mapcontext.json +0 -105
  251. package/data/pages/Components/components/mapdraggablemarker.json +0 -34
  252. package/data/pages/Components/components/mapgettingstarted.json +0 -27
  253. package/data/pages/Components/components/mapgroup.json +0 -1198
  254. package/data/pages/Components/components/mapinfobubble.json +0 -34
  255. package/data/pages/Components/components/maplayergroup.json +0 -34
  256. package/data/pages/Components/components/mapmarker.json +0 -700
  257. package/data/pages/Components/components/mappolygon.json +0 -45
  258. package/data/pages/Components/components/maproute.json +0 -623
  259. package/data/pages/Components/components/maproutegenerator.json +0 -16
  260. package/data/pages/Components/components/mapsettings.json +0 -51
  261. package/data/pages/Components/components/maputils.json +0 -34
  262. package/data/pages/Components/components/multiselects.json +0 -1451
  263. package/data/pages/Components/components/nodata.json +0 -139
  264. package/data/pages/Components/components/notifications.json +0 -65
  265. package/data/pages/Components/components/numbercontrol.json +0 -301
  266. package/data/pages/Components/components/onboarding.json +0 -302
  267. package/data/pages/Components/components/page.json +0 -197
  268. package/data/pages/Components/components/pager.json +0 -93
  269. package/data/pages/Components/components/piecharts.json +0 -731
  270. package/data/pages/Components/components/popover.json +0 -251
  271. package/data/pages/Components/components/position.json +0 -69
  272. package/data/pages/Components/components/radialbarcharts.json +0 -1304
  273. package/data/pages/Components/components/radiobutton.json +0 -1105
  274. package/data/pages/Components/components/releasenotes.json +0 -44
  275. package/data/pages/Components/components/resizer.json +0 -93
  276. package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
  277. package/data/pages/Components/components/responsivevideo.json +0 -75
  278. package/data/pages/Components/components/rioglyph.json +0 -93
  279. package/data/pages/Components/components/rules.json +0 -410
  280. package/data/pages/Components/components/saveableinput.json +0 -703
  281. package/data/pages/Components/components/selects.json +0 -701
  282. package/data/pages/Components/components/sidebar.json +0 -243
  283. package/data/pages/Components/components/sliders.json +0 -235
  284. package/data/pages/Components/components/smoothscrollbars.json +0 -335
  285. package/data/pages/Components/components/spinners.json +0 -343
  286. package/data/pages/Components/components/states.json +0 -1705
  287. package/data/pages/Components/components/statswidgets.json +0 -314
  288. package/data/pages/Components/components/statusbar.json +0 -177
  289. package/data/pages/Components/components/stepbutton.json +0 -57
  290. package/data/pages/Components/components/steppedprogressbars.json +0 -417
  291. package/data/pages/Components/components/subnavigation.json +0 -107
  292. package/data/pages/Components/components/supportmarker.json +0 -45
  293. package/data/pages/Components/components/svgimage.json +0 -81
  294. package/data/pages/Components/components/switch.json +0 -111
  295. package/data/pages/Components/components/tables.json +0 -144
  296. package/data/pages/Components/components/tagmanager.json +0 -86
  297. package/data/pages/Components/components/tags.json +0 -146
  298. package/data/pages/Components/components/teaser.json +0 -188
  299. package/data/pages/Components/components/timeline.json +0 -45
  300. package/data/pages/Components/components/timepicker.json +0 -163
  301. package/data/pages/Components/components/togglebutton.json +0 -247
  302. package/data/pages/Components/components/tooltip.json +0 -270
  303. package/data/pages/Components/components/virtuallist.json +0 -175
  304. package/data/pages/Foundations/foundations.json +0 -2475
  305. package/data/pages/Getting-started/start/changelog.json +0 -22
  306. package/data/pages/Getting-started/start/goodtoknow.json +0 -32
  307. package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
  308. package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
  309. package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
  310. package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
  311. package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
  312. package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
  313. package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
  314. package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
  315. package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
  316. package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
  317. package/data/pages/Getting-started/start/howto.json +0 -72
  318. package/data/pages/Getting-started/start/intro.json +0 -37
  319. package/data/pages/Getting-started/start/responsiveness.json +0 -52
  320. package/data/pages/Templates/templates/common-table.json +0 -39
  321. package/data/pages/Templates/templates/detail-views.json +0 -71
  322. package/data/pages/Templates/templates/expandable-details.json +0 -39
  323. package/data/pages/Templates/templates/feature-cards.json +0 -103
  324. package/data/pages/Templates/templates/form-summary.json +0 -39
  325. package/data/pages/Templates/templates/form-toggle.json +0 -39
  326. package/data/pages/Templates/templates/list-blocks.json +0 -119
  327. package/data/pages/Templates/templates/loading-progress.json +0 -39
  328. package/data/pages/Templates/templates/options-panel.json +0 -39
  329. package/data/pages/Templates/templates/panel-variants.json +0 -39
  330. package/data/pages/Templates/templates/progress-cards.json +0 -71
  331. package/data/pages/Templates/templates/progress-success.json +0 -39
  332. package/data/pages/Templates/templates/settings-form.json +0 -39
  333. package/data/pages/Templates/templates/stats-blocks.json +0 -135
  334. package/data/pages/Templates/templates/table-panel.json +0 -39
  335. package/data/pages/Templates/templates/table-row-animation.json +0 -39
  336. package/data/pages/Templates/templates/usage-cards.json +0 -39
  337. package/data/pages/Utilities/utilities/deviceutils.json +0 -39
  338. package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
  339. package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
  340. package/data/pages/Utilities/utilities/routeutils.json +0 -34
  341. package/data/pages/Utilities/utilities/useaftermount.json +0 -63
  342. package/data/pages/Utilities/utilities/useaverage.json +0 -86
  343. package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
  344. package/data/pages/Utilities/utilities/useclipboard.json +0 -57
  345. package/data/pages/Utilities/utilities/usecount.json +0 -92
  346. package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
  347. package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
  348. package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
  349. package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
  350. package/data/pages/Utilities/utilities/useelementsize.json +0 -63
  351. package/data/pages/Utilities/utilities/useesc.json +0 -57
  352. package/data/pages/Utilities/utilities/useevent.json +0 -75
  353. package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
  354. package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
  355. package/data/pages/Utilities/utilities/usehover.json +0 -57
  356. package/data/pages/Utilities/utilities/useinterval.json +0 -63
  357. package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
  358. package/data/pages/Utilities/utilities/usekey.json +0 -75
  359. package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
  360. package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
  361. package/data/pages/Utilities/utilities/usemax.json +0 -86
  362. package/data/pages/Utilities/utilities/usemin.json +0 -86
  363. package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
  364. package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
  365. package/data/pages/Utilities/utilities/useonscreen.json +0 -63
  366. package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
  367. package/data/pages/Utilities/utilities/useprevious.json +0 -63
  368. package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
  369. package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
  370. package/data/pages/Utilities/utilities/usesearch.json +0 -197
  371. package/data/pages/Utilities/utilities/usesorting.json +0 -139
  372. package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
  373. package/data/pages/Utilities/utilities/usesum.json +0 -86
  374. package/data/pages/Utilities/utilities/usetableexport.json +0 -87
  375. package/data/pages/Utilities/utilities/usetableselection.json +0 -311
  376. package/data/pages/Utilities/utilities/usetimeout.json +0 -63
  377. package/data/pages/Utilities/utilities/usetoggle.json +0 -75
  378. package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
  379. package/data/version.json +0 -4
  380. package/docs/content-schema.md +0 -147
  381. package/docs/navigation-inventory.json +0 -1310
  382. package/docs/search-synonyms.json +0 -43
  383. package/server/index.mjs +0 -268
  384. package/server/lib/load-docs.mjs +0 -48
  385. package/server/lib/normalise-doc.mjs +0 -220
  386. package/server/lib/render-markdown.mjs +0 -82
  387. package/server/lib/search-index.mjs +0 -49
  388. package/server/lib/types.js +0 -99
package/dist/docs/components/smoothScrollbars.md ADDED
@@ -0,0 +1,1180 @@
1
+ # SmoothScrollbars
2
+
3
+ *Category:* Components
4
+ *Section:* Misc
5
+ *Source:* https://uikit.developers.rio.cloud/#components/smoothScrollbars
6
+ *Captured:* 2025-12-12T14:21:04.049Z
7
+
8
+ ## SmoothScrollbars
9
+
10
+ > Note: SmoothScrollbars only work for elements with a certain height.Padding cannot be part of the SmoothScrollbars element and must be added to the child.Mac scrollbars are only visible if a hardware mouse is connected.
11
+
12
+ ### Example: Always visible
13
+
14
+ Always visible
15
+ default
16
+
17
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
18
+
19
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
20
+
21
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
22
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
23
+
24
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
25
+
26
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
27
+
28
+ #### Summary
29
+
30
+ Always visible
31
+ default
32
+
33
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
34
+
35
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
36
+
37
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
38
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
39
+
40
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
41
+
42
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
43
+
44
+ #### React (tsx)
45
+
46
+ ```tsx
47
+ import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';
48
+
49
+ import { dummyTextLong } from '../../../utils/data';
50
+
51
+ export default () => (
52
+ <div>
53
+ <SmoothScrollbars className='height-200'>
54
+ <div className='padding-x-50 padding-top-20 padding-bottom-50'>
55
+ <div className='display-flex align-items-baseline gap-10'>
56
+ <h3>Always visible</h3>
57
+ <div>
58
+ <code>default</code>
59
+ </div>
60
+ </div>
61
+ {dummyTextLong} {dummyTextLong}
62
+ </div>
63
+ </SmoothScrollbars>
64
+ </div>
65
+ );
66
+ ```
67
+
68
+ #### HTML (html)
69
+
70
+ ```html
71
+ <div>
72
+ <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
73
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
74
+ <div class="scrollbar-content-wrapper">
75
+ <div class="padding-x-50 padding-top-20 padding-bottom-50">
76
+ <div class="display-flex align-items-baseline gap-10">
77
+ <h3>Always visible</h3>
78
+ <div>
79
+ <code>default</code>
80
+ </div>
81
+ </div>
82
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
83
+
84
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
85
+
86
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
87
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
88
+
89
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
90
+
91
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
96
+ <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
97
+ </div>
98
+ </div>
99
+ <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
100
+ <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ ```
106
+
107
+ #### Props
108
+
109
+ | Name | Type | Default | Description |
110
+ | --- | --- | --- | --- |
111
+ | slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |
112
+ | largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |
113
+ | trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |
114
+ | className | String | — | Additional classes to be set on the wrapper element |
115
+
116
+ ### Example: Slide in on hover
117
+
118
+ Slide in on hover
119
+ slideIn
120
+
121
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
122
+
123
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
124
+
125
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
126
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
127
+
128
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
129
+
130
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
131
+
132
+ #### Summary
133
+
134
+ Slide in on hover
135
+ slideIn
136
+
137
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
138
+
139
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
140
+
141
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
142
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
143
+
144
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
145
+
146
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
147
+
148
+ #### React (tsx)
149
+
150
+ ```tsx
151
+ import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';
152
+
153
+ import { dummyTextLong } from '../../../utils/data';
154
+
155
+ export default () => (
156
+ <div>
157
+ <SmoothScrollbars slideIn className='height-200'>
158
+ <div className='padding-x-50 padding-top-20 padding-bottom-50'>
159
+ <div className='display-flex align-items-baseline gap-10'>
160
+ <h3>Slide in on hover</h3>
161
+ <div>
162
+ <code>slideIn</code>
163
+ </div>
164
+ </div>
165
+ {dummyTextLong} {dummyTextLong}
166
+ </div>
167
+ </SmoothScrollbars>
168
+ </div>
169
+ );
170
+ ```
171
+
172
+ #### HTML (html)
173
+
174
+ ```html
175
+ <div>
176
+ <div class="height-200 scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
177
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
178
+ <div class="scrollbar-content-wrapper">
179
+ <div class="padding-x-50 padding-top-20 padding-bottom-50">
180
+ <div class="display-flex align-items-baseline gap-10">
181
+ <h3>Slide in on hover</h3>
182
+ <div>
183
+ <code>slideIn</code>
184
+ </div>
185
+ </div>
186
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
187
+
188
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
189
+
190
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
191
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
192
+
193
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
194
+
195
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
196
+ </div>
197
+ </div>
198
+ </div>
199
+ <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
200
+ <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
201
+ </div>
202
+ </div>
203
+ <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
204
+ <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ ```
210
+
211
+ #### Props
212
+
213
+ | Name | Type | Default | Description |
214
+ | --- | --- | --- | --- |
215
+ | slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |
216
+ | largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |
217
+ | trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |
218
+ | className | String | — | Additional classes to be set on the wrapper element |
219
+
220
+ ### Example: Larger track
221
+
222
+ Larger track
223
+ largeTrack
224
+
225
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
226
+
227
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
228
+
229
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
230
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
231
+
232
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
233
+
234
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
235
+
236
+ #### Summary
237
+
238
+ Larger track
239
+ largeTrack
240
+
241
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
242
+
243
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
244
+
245
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
246
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
247
+
248
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
249
+
250
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
251
+
252
+ #### React (tsx)
253
+
254
+ ```tsx
255
+ import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';
256
+
257
+ import { dummyTextLong } from '../../../utils/data';
258
+
259
+ export default () => (
260
+ <div>
261
+ <SmoothScrollbars largeTrack className='height-200'>
262
+ <div className='padding-x-50 padding-top-20 padding-bottom-50'>
263
+ <div className='display-flex align-items-baseline gap-10'>
264
+ <h3>Larger track</h3>
265
+ <div>
266
+ <code>largeTrack</code>
267
+ </div>
268
+ </div>
269
+ {dummyTextLong} {dummyTextLong}
270
+ </div>
271
+ </SmoothScrollbars>
272
+ </div>
273
+ );
274
+ ```
275
+
276
+ #### HTML (html)
277
+
278
+ ```html
279
+ <div>
280
+ <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
281
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
282
+ <div class="scrollbar-content-wrapper">
283
+ <div class="padding-x-50 padding-top-20 padding-bottom-50">
284
+ <div class="display-flex align-items-baseline gap-10">
285
+ <h3>Larger track</h3>
286
+ <div>
287
+ <code>largeTrack</code>
288
+ </div>
289
+ </div>
290
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
291
+
292
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
293
+
294
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
295
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
296
+
297
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
298
+
299
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
300
+ </div>
301
+ </div>
302
+ </div>
303
+ <div class="scrollbar-track-horizontal scrollbar-track-size-large" style="position: absolute; height: 6px; display: none;">
304
+ <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
305
+ </div>
306
+ </div>
307
+ <div class="scrollbar-track-vertical scrollbar-track-size-large" style="position: absolute; width: 6px; display: none;">
308
+ <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ ```
314
+
315
+ #### Props
316
+
317
+ | Name | Type | Default | Description |
318
+ | --- | --- | --- | --- |
319
+ | slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |
320
+ | largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |
321
+ | trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |
322
+ | className | String | — | Additional classes to be set on the wrapper element |
323
+
324
+ ### Example: Track with offset
325
+
326
+ Track with offset
327
+ trackOffset
328
+
329
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
330
+
331
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
332
+
333
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
334
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
335
+
336
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
337
+
338
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
339
+
340
+ #### Summary
341
+
342
+ Track with offset
343
+ trackOffset
344
+
345
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
346
+
347
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
348
+
349
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
350
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
351
+
352
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
353
+
354
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
355
+
356
+ #### React (tsx)
357
+
358
+ ```tsx
359
+ import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';
360
+
361
+ import { dummyTextLong } from '../../../utils/data';
362
+
363
+ export default () => (
364
+ <div>
365
+ <SmoothScrollbars largeTrack trackOffset className='height-200'>
366
+ <div className='padding-x-50 padding-top-20 padding-bottom-50'>
367
+ <div className='display-flex align-items-baseline gap-10'>
368
+ <h3>Track with offset</h3>
369
+ <div>
370
+ <code>trackOffset</code>
371
+ </div>
372
+ </div>
373
+ {dummyTextLong} {dummyTextLong}
374
+ </div>
375
+ </SmoothScrollbars>
376
+ </div>
377
+ );
378
+ ```
379
+
380
+ #### HTML (html)
381
+
382
+ ```html
383
+ <div>
384
+ <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
385
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
386
+ <div class="scrollbar-content-wrapper">
387
+ <div class="padding-x-50 padding-top-20 padding-bottom-50">
388
+ <div class="display-flex align-items-baseline gap-10">
389
+ <h3>Track with offset</h3>
390
+ <div>
391
+ <code>trackOffset</code>
392
+ </div>
393
+ </div>
394
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
395
+
396
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
397
+
398
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
399
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
400
+
401
+ In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
402
+
403
+ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
404
+ </div>
405
+ </div>
406
+ </div>
407
+ <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
408
+ <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
409
+ </div>
410
+ </div>
411
+ <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
412
+ <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ ```
418
+
419
+ #### Props
420
+
421
+ | Name | Type | Default | Description |
422
+ | --- | --- | --- | --- |
423
+ | slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |
424
+ | largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |
425
+ | trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |
426
+ | className | String | — | Additional classes to be set on the wrapper element |
427
+
428
+ ### Example: Horizontal Example
429
+
430
+ Horizontal Example
431
+
432
+ #### Summary
433
+
434
+ Horizontal Example
435
+
436
+ #### React (tsx)
437
+
438
+ ```tsx
439
+ import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';
440
+
441
+ export default () => (
442
+ <div>
443
+ <SmoothScrollbars className='height-200'>
444
+ <div className='padding-x-50 padding-top-20 padding-bottom-50'>
445
+ <div className='display-flex align-items-baseline gap-10'>
446
+ <h3>Horizontal Example</h3>
447
+ </div>
448
+ <div className='display-flex gap-10'>
449
+ <div className='gap-10 padding-25 bg-lighter display-flex'>
450
+ {[...Array(100)].map(() => (
451
+ <span className='rioglyph rioglyph-arrow-right text-size-20' key={crypto.randomUUID()} />
452
+ ))}
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </SmoothScrollbars>
457
+ </div>
458
+ );
459
+ ```
460
+
461
+ #### HTML (html)
462
+
463
+ ```html
464
+ <div>
465
+ <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
466
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
467
+ <div class="scrollbar-content-wrapper">
468
+ <div class="padding-x-50 padding-top-20 padding-bottom-50">
469
+ <div class="display-flex align-items-baseline gap-10">
470
+ <h3>Horizontal Example</h3>
471
+ </div>
472
+ <div class="display-flex gap-10">
473
+ <div class="gap-10 padding-25 bg-lighter display-flex">
474
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
475
+ </span>
476
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
477
+ </span>
478
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
479
+ </span>
480
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
481
+ </span>
482
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
483
+ </span>
484
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
485
+ </span>
486
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
487
+ </span>
488
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
489
+ </span>
490
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
491
+ </span>
492
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
493
+ </span>
494
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
495
+ </span>
496
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
497
+ </span>
498
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
499
+ </span>
500
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
501
+ </span>
502
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
503
+ </span>
504
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
505
+ </span>
506
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
507
+ </span>
508
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
509
+ </span>
510
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
511
+ </span>
512
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
513
+ </span>
514
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
515
+ </span>
516
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
517
+ </span>
518
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
519
+ </span>
520
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
521
+ </span>
522
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
523
+ </span>
524
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
525
+ </span>
526
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
527
+ </span>
528
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
529
+ </span>
530
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
531
+ </span>
532
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
533
+ </span>
534
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
535
+ </span>
536
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
537
+ </span>
538
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
539
+ </span>
540
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
541
+ </span>
542
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
543
+ </span>
544
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
545
+ </span>
546
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
547
+ </span>
548
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
549
+ </span>
550
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
551
+ </span>
552
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
553
+ </span>
554
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
555
+ </span>
556
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
557
+ </span>
558
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
559
+ </span>
560
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
561
+ </span>
562
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
563
+ </span>
564
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
565
+ </span>
566
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
567
+ </span>
568
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
569
+ </span>
570
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
571
+ </span>
572
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
573
+ </span>
574
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
575
+ </span>
576
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
577
+ </span>
578
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
579
+ </span>
580
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
581
+ </span>
582
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
583
+ </span>
584
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
585
+ </span>
586
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
587
+ </span>
588
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
589
+ </span>
590
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
591
+ </span>
592
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
593
+ </span>
594
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
595
+ </span>
596
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
597
+ </span>
598
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
599
+ </span>
600
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
601
+ </span>
602
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
603
+ </span>
604
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
605
+ </span>
606
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
607
+ </span>
608
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
609
+ </span>
610
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
611
+ </span>
612
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
613
+ </span>
614
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
615
+ </span>
616
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
617
+ </span>
618
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
619
+ </span>
620
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
621
+ </span>
622
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
623
+ </span>
624
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
625
+ </span>
626
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
627
+ </span>
628
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
629
+ </span>
630
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
631
+ </span>
632
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
633
+ </span>
634
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
635
+ </span>
636
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
637
+ </span>
638
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
639
+ </span>
640
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
641
+ </span>
642
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
643
+ </span>
644
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
645
+ </span>
646
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
647
+ </span>
648
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
649
+ </span>
650
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
651
+ </span>
652
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
653
+ </span>
654
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
655
+ </span>
656
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
657
+ </span>
658
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
659
+ </span>
660
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
661
+ </span>
662
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
663
+ </span>
664
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
665
+ </span>
666
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
667
+ </span>
668
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
669
+ </span>
670
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
671
+ </span>
672
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
673
+ </span>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
680
+ <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
681
+ </div>
682
+ </div>
683
+ <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
684
+ <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </div>
689
+ ```
690
+
691
+ #### Props
692
+
693
+ | Name | Type | Default | Description |
694
+ | --- | --- | --- | --- |
695
+ | slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |
696
+ | largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |
697
+ | trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |
698
+ | className | String | — | Additional classes to be set on the wrapper element |
699
+
700
+ ### Example: Full Example
701
+
702
+ Full Example
703
+
704
+ #### Summary
705
+
706
+ Full Example
707
+
708
+ #### React (tsx)
709
+
710
+ ```tsx
711
+ import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';
712
+
713
+ // eslint-disable-next-line no-bitwise
714
+ const dummyItems = [...Array(40)].map(() => ~~(Math.random() * 40));
715
+
716
+ export default () => (
717
+ <div>
718
+ <SmoothScrollbars slideIn largeTrack trackOffset className='height-200'>
719
+ <div className='padding-x-50 padding-top-20 padding-bottom-50'>
720
+ <div className='display-flex align-items-baseline gap-10'>
721
+ <h3>Full Example</h3>
722
+ </div>
723
+ <div className='display-flex gap-10'>
724
+ <div className='gap-10 padding-25 bg-lighter display-flex flex-column'>
725
+ {[...Array(100)].map(() => (
726
+ <span className='rioglyph rioglyph-arrow-down text-size-20' key={crypto.randomUUID()} />
727
+ ))}
728
+ </div>
729
+ <div className='gap-10 padding-25 bg-lighter display-flex'>
730
+ {[...Array(100)].map(() => (
731
+ <span className='rioglyph rioglyph-arrow-right text-size-20' key={crypto.randomUUID()} />
732
+ ))}
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </SmoothScrollbars>
737
+ </div>
738
+ );
739
+ ```
740
+
741
+ #### HTML (html)
742
+
743
+ ```html
744
+ <div>
745
+ <div class="height-200 scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
746
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
747
+ <div class="scrollbar-content-wrapper">
748
+ <div class="padding-x-50 padding-top-20 padding-bottom-50">
749
+ <div class="display-flex align-items-baseline gap-10">
750
+ <h3>Full Example</h3>
751
+ </div>
752
+ <div class="display-flex gap-10">
753
+ <div class="gap-10 padding-25 bg-lighter display-flex flex-column">
754
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
755
+ </span>
756
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
757
+ </span>
758
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
759
+ </span>
760
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
761
+ </span>
762
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
763
+ </span>
764
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
765
+ </span>
766
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
767
+ </span>
768
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
769
+ </span>
770
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
771
+ </span>
772
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
773
+ </span>
774
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
775
+ </span>
776
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
777
+ </span>
778
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
779
+ </span>
780
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
781
+ </span>
782
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
783
+ </span>
784
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
785
+ </span>
786
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
787
+ </span>
788
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
789
+ </span>
790
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
791
+ </span>
792
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
793
+ </span>
794
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
795
+ </span>
796
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
797
+ </span>
798
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
799
+ </span>
800
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
801
+ </span>
802
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
803
+ </span>
804
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
805
+ </span>
806
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
807
+ </span>
808
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
809
+ </span>
810
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
811
+ </span>
812
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
813
+ </span>
814
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
815
+ </span>
816
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
817
+ </span>
818
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
819
+ </span>
820
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
821
+ </span>
822
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
823
+ </span>
824
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
825
+ </span>
826
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
827
+ </span>
828
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
829
+ </span>
830
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
831
+ </span>
832
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
833
+ </span>
834
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
835
+ </span>
836
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
837
+ </span>
838
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
839
+ </span>
840
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
841
+ </span>
842
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
843
+ </span>
844
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
845
+ </span>
846
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
847
+ </span>
848
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
849
+ </span>
850
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
851
+ </span>
852
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
853
+ </span>
854
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
855
+ </span>
856
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
857
+ </span>
858
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
859
+ </span>
860
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
861
+ </span>
862
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
863
+ </span>
864
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
865
+ </span>
866
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
867
+ </span>
868
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
869
+ </span>
870
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
871
+ </span>
872
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
873
+ </span>
874
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
875
+ </span>
876
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
877
+ </span>
878
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
879
+ </span>
880
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
881
+ </span>
882
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
883
+ </span>
884
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
885
+ </span>
886
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
887
+ </span>
888
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
889
+ </span>
890
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
891
+ </span>
892
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
893
+ </span>
894
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
895
+ </span>
896
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
897
+ </span>
898
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
899
+ </span>
900
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
901
+ </span>
902
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
903
+ </span>
904
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
905
+ </span>
906
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
907
+ </span>
908
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
909
+ </span>
910
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
911
+ </span>
912
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
913
+ </span>
914
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
915
+ </span>
916
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
917
+ </span>
918
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
919
+ </span>
920
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
921
+ </span>
922
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
923
+ </span>
924
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
925
+ </span>
926
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
927
+ </span>
928
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
929
+ </span>
930
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
931
+ </span>
932
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
933
+ </span>
934
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
935
+ </span>
936
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
937
+ </span>
938
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
939
+ </span>
940
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
941
+ </span>
942
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
943
+ </span>
944
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
945
+ </span>
946
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
947
+ </span>
948
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
949
+ </span>
950
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
951
+ </span>
952
+ <span class="rioglyph rioglyph-arrow-down text-size-20">
953
+ </span>
954
+ </div>
955
+ <div class="gap-10 padding-25 bg-lighter display-flex">
956
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
957
+ </span>
958
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
959
+ </span>
960
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
961
+ </span>
962
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
963
+ </span>
964
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
965
+ </span>
966
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
967
+ </span>
968
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
969
+ </span>
970
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
971
+ </span>
972
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
973
+ </span>
974
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
975
+ </span>
976
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
977
+ </span>
978
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
979
+ </span>
980
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
981
+ </span>
982
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
983
+ </span>
984
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
985
+ </span>
986
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
987
+ </span>
988
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
989
+ </span>
990
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
991
+ </span>
992
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
993
+ </span>
994
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
995
+ </span>
996
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
997
+ </span>
998
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
999
+ </span>
1000
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1001
+ </span>
1002
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1003
+ </span>
1004
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1005
+ </span>
1006
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1007
+ </span>
1008
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1009
+ </span>
1010
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1011
+ </span>
1012
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1013
+ </span>
1014
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1015
+ </span>
1016
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1017
+ </span>
1018
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1019
+ </span>
1020
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1021
+ </span>
1022
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1023
+ </span>
1024
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1025
+ </span>
1026
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1027
+ </span>
1028
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1029
+ </span>
1030
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1031
+ </span>
1032
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1033
+ </span>
1034
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1035
+ </span>
1036
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1037
+ </span>
1038
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1039
+ </span>
1040
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1041
+ </span>
1042
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1043
+ </span>
1044
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1045
+ </span>
1046
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1047
+ </span>
1048
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1049
+ </span>
1050
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1051
+ </span>
1052
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1053
+ </span>
1054
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1055
+ </span>
1056
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1057
+ </span>
1058
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1059
+ </span>
1060
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1061
+ </span>
1062
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1063
+ </span>
1064
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1065
+ </span>
1066
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1067
+ </span>
1068
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1069
+ </span>
1070
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1071
+ </span>
1072
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1073
+ </span>
1074
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1075
+ </span>
1076
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1077
+ </span>
1078
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1079
+ </span>
1080
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1081
+ </span>
1082
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1083
+ </span>
1084
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1085
+ </span>
1086
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1087
+ </span>
1088
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1089
+ </span>
1090
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1091
+ </span>
1092
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1093
+ </span>
1094
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1095
+ </span>
1096
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1097
+ </span>
1098
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1099
+ </span>
1100
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1101
+ </span>
1102
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1103
+ </span>
1104
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1105
+ </span>
1106
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1107
+ </span>
1108
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1109
+ </span>
1110
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1111
+ </span>
1112
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1113
+ </span>
1114
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1115
+ </span>
1116
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1117
+ </span>
1118
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1119
+ </span>
1120
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1121
+ </span>
1122
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1123
+ </span>
1124
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1125
+ </span>
1126
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1127
+ </span>
1128
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1129
+ </span>
1130
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1131
+ </span>
1132
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1133
+ </span>
1134
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1135
+ </span>
1136
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1137
+ </span>
1138
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1139
+ </span>
1140
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1141
+ </span>
1142
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1143
+ </span>
1144
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1145
+ </span>
1146
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1147
+ </span>
1148
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1149
+ </span>
1150
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1151
+ </span>
1152
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1153
+ </span>
1154
+ <span class="rioglyph rioglyph-arrow-right text-size-20">
1155
+ </span>
1156
+ </div>
1157
+ </div>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
1162
+ <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
1163
+ </div>
1164
+ </div>
1165
+ <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
1166
+ <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
1167
+ </div>
1168
+ </div>
1169
+ </div>
1170
+ </div>
1171
+ ```
1172
+
1173
+ #### Props
1174
+
1175
+ | Name | Type | Default | Description |
1176
+ | --- | --- | --- | --- |
1177
+ | slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |
1178
+ | largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |
1179
+ | trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |
1180
+ | className | String | — | Additional classes to be set on the wrapper element |