@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/contentLoader.md ADDED
@@ -0,0 +1,674 @@
1
+ # ContentLoader
2
+
3
+ *Category:* Components
4
+ *Section:* Content
5
+ *Source:* https://uikit.developers.rio.cloud/#components/contentLoader
6
+ *Captured:* 2025-12-12T14:20:41.281Z
7
+
8
+ The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader
9
+
10
+ ## ContentLoader
11
+
12
+ This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still allows for more complex configurations as all additional props are passed down to the third-party ContentLoader component. For individual customization, it allows passing svg components as rect or circle directly as children.
13
+
14
+ ### Example: Example 1
15
+
16
+ Loading...
17
+ Loading...Loading...Loading...Loading...
18
+
19
+ #### Summary
20
+
21
+ Loading...
22
+ Loading...Loading...Loading...Loading...
23
+
24
+ #### React (tsx)
25
+
26
+ ```tsx
27
+ import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';
28
+
29
+ export default () => (
30
+ <div className='display-flex'>
31
+ <div>
32
+ <ContentLoader type={ContentLoader.CIRCLE} radius={20} />
33
+ </div>
34
+ <div className='margin-left-15'>
35
+ <ContentLoader className='height-20 margin-bottom-10' />
36
+ <ContentLoader />
37
+ <ContentLoader width='80%' />
38
+ <ContentLoader width='60%' />
39
+ </div>
40
+ </div>
41
+ );
42
+ ```
43
+
44
+ #### HTML (html)
45
+
46
+ ```html
47
+ <div class="display-flex">
48
+ <div>
49
+ <svg aria-labelledby="4eaus6h-aria" role="img" height="40" width="40" class="ContentLoader ">
50
+ <title id="4eaus6h-aria">Loading...</title>
51
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#4eaus6h-diff)" style="fill: url(&quot;#4eaus6h-animated-diff&quot;);">
52
+ </rect>
53
+ <defs>
54
+ <clipPath id="4eaus6h-diff">
55
+ <circle cx="20" cy="20" r="20">
56
+ </circle>
57
+ </clipPath>
58
+ <linearGradient id="4eaus6h-animated-diff" gradientTransform="translate(-2 0)">
59
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
60
+ </stop>
61
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
62
+ </stop>
63
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
64
+ </stop>
65
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
66
+ </animateTransform>
67
+ </linearGradient>
68
+ </defs>
69
+ </svg>
70
+ </div>
71
+ <div class="margin-left-15">
72
+ <svg aria-labelledby="iftk3z-aria" role="img" height="14" width="100%" class="ContentLoader height-20 margin-bottom-10 ">
73
+ <title id="iftk3z-aria">Loading...</title>
74
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#iftk3z-diff)" style="fill: url(&quot;#iftk3z-animated-diff&quot;);">
75
+ </rect>
76
+ <defs>
77
+ <clipPath id="iftk3z-diff">
78
+ <rect width="100%" height="100%" rx="3" ry="3">
79
+ </rect>
80
+ </clipPath>
81
+ <linearGradient id="iftk3z-animated-diff" gradientTransform="translate(-2 0)">
82
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
83
+ </stop>
84
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
85
+ </stop>
86
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
87
+ </stop>
88
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
89
+ </animateTransform>
90
+ </linearGradient>
91
+ </defs>
92
+ </svg>
93
+ <svg aria-labelledby="5p8v425-aria" role="img" height="14" width="100%" class="ContentLoader ">
94
+ <title id="5p8v425-aria">Loading...</title>
95
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#5p8v425-diff)" style="fill: url(&quot;#5p8v425-animated-diff&quot;);">
96
+ </rect>
97
+ <defs>
98
+ <clipPath id="5p8v425-diff">
99
+ <rect width="100%" height="100%" rx="3" ry="3">
100
+ </rect>
101
+ </clipPath>
102
+ <linearGradient id="5p8v425-animated-diff" gradientTransform="translate(-2 0)">
103
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
104
+ </stop>
105
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
106
+ </stop>
107
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
108
+ </stop>
109
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
110
+ </animateTransform>
111
+ </linearGradient>
112
+ </defs>
113
+ </svg>
114
+ <svg aria-labelledby="9u12g5r-aria" role="img" height="14" width="80%" class="ContentLoader ">
115
+ <title id="9u12g5r-aria">Loading...</title>
116
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#9u12g5r-diff)" style="fill: url(&quot;#9u12g5r-animated-diff&quot;);">
117
+ </rect>
118
+ <defs>
119
+ <clipPath id="9u12g5r-diff">
120
+ <rect width="100%" height="100%" rx="3" ry="3">
121
+ </rect>
122
+ </clipPath>
123
+ <linearGradient id="9u12g5r-animated-diff" gradientTransform="translate(-2 0)">
124
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
125
+ </stop>
126
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
127
+ </stop>
128
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
129
+ </stop>
130
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
131
+ </animateTransform>
132
+ </linearGradient>
133
+ </defs>
134
+ </svg>
135
+ <svg aria-labelledby="93yav5p-aria" role="img" height="14" width="60%" class="ContentLoader ">
136
+ <title id="93yav5p-aria">Loading...</title>
137
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#93yav5p-diff)" style="fill: url(&quot;#93yav5p-animated-diff&quot;);">
138
+ </rect>
139
+ <defs>
140
+ <clipPath id="93yav5p-diff">
141
+ <rect width="100%" height="100%" rx="3" ry="3">
142
+ </rect>
143
+ </clipPath>
144
+ <linearGradient id="93yav5p-animated-diff" gradientTransform="translate(-2 0)">
145
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
146
+ </stop>
147
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
148
+ </stop>
149
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
150
+ </stop>
151
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
152
+ </animateTransform>
153
+ </linearGradient>
154
+ </defs>
155
+ </svg>
156
+ </div>
157
+ </div>
158
+ ```
159
+
160
+ #### Props
161
+
162
+ | Name | Type | Default | Description |
163
+ | --- | --- | --- | --- |
164
+ | speed | Number | 2 | Sets the animation speed. |
165
+ | height | Number / String | 14 | Sets the height of the svg element. |
166
+ | width | Number / String | 100% | Sets the width of the svg element. |
167
+ | radius | Number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
168
+ | type | String | ContentLoader.RECT | Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE |
169
+ | className | String | — | Additional class names to ab added to the wrapping svg element. |
170
+ | children | Node | — | Pass any svg elements for when you need further customizations. |
171
+
172
+ ### Example: Example 2
173
+
174
+ Loading...
175
+ Loading...Loading...
176
+
177
+ #### Summary
178
+
179
+ Loading...
180
+ Loading...Loading...
181
+
182
+ #### React (tsx)
183
+
184
+ ```tsx
185
+ import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';
186
+
187
+ export default () => (
188
+ <div className='display-flex'>
189
+ <div>
190
+ <ContentLoader height={40} width={40} />
191
+ </div>
192
+ <div className='margin-left-15'>
193
+ <ContentLoader />
194
+ <ContentLoader />
195
+ </div>
196
+ </div>
197
+ );
198
+ ```
199
+
200
+ #### HTML (html)
201
+
202
+ ```html
203
+ <div class="display-flex">
204
+ <div>
205
+ <svg aria-labelledby="7ij2ns-aria" role="img" height="40" width="40" class="ContentLoader ">
206
+ <title id="7ij2ns-aria">Loading...</title>
207
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#7ij2ns-diff)" style="fill: url(&quot;#7ij2ns-animated-diff&quot;);">
208
+ </rect>
209
+ <defs>
210
+ <clipPath id="7ij2ns-diff">
211
+ <rect width="100%" height="100%" rx="3" ry="3">
212
+ </rect>
213
+ </clipPath>
214
+ <linearGradient id="7ij2ns-animated-diff" gradientTransform="translate(-2 0)">
215
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
216
+ </stop>
217
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
218
+ </stop>
219
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
220
+ </stop>
221
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
222
+ </animateTransform>
223
+ </linearGradient>
224
+ </defs>
225
+ </svg>
226
+ </div>
227
+ <div class="margin-left-15">
228
+ <svg aria-labelledby="pna5ce7-aria" role="img" height="14" width="100%" class="ContentLoader ">
229
+ <title id="pna5ce7-aria">Loading...</title>
230
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#pna5ce7-diff)" style="fill: url(&quot;#pna5ce7-animated-diff&quot;);">
231
+ </rect>
232
+ <defs>
233
+ <clipPath id="pna5ce7-diff">
234
+ <rect width="100%" height="100%" rx="3" ry="3">
235
+ </rect>
236
+ </clipPath>
237
+ <linearGradient id="pna5ce7-animated-diff" gradientTransform="translate(-2 0)">
238
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
239
+ </stop>
240
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
241
+ </stop>
242
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
243
+ </stop>
244
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
245
+ </animateTransform>
246
+ </linearGradient>
247
+ </defs>
248
+ </svg>
249
+ <svg aria-labelledby="733w1ss-aria" role="img" height="14" width="100%" class="ContentLoader ">
250
+ <title id="733w1ss-aria">Loading...</title>
251
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#733w1ss-diff)" style="fill: url(&quot;#733w1ss-animated-diff&quot;);">
252
+ </rect>
253
+ <defs>
254
+ <clipPath id="733w1ss-diff">
255
+ <rect width="100%" height="100%" rx="3" ry="3">
256
+ </rect>
257
+ </clipPath>
258
+ <linearGradient id="733w1ss-animated-diff" gradientTransform="translate(-2 0)">
259
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
260
+ </stop>
261
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
262
+ </stop>
263
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
264
+ </stop>
265
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
266
+ </animateTransform>
267
+ </linearGradient>
268
+ </defs>
269
+ </svg>
270
+ </div>
271
+ </div>
272
+ ```
273
+
274
+ #### Props
275
+
276
+ | Name | Type | Default | Description |
277
+ | --- | --- | --- | --- |
278
+ | speed | Number | 2 | Sets the animation speed. |
279
+ | height | Number / String | 14 | Sets the height of the svg element. |
280
+ | width | Number / String | 100% | Sets the width of the svg element. |
281
+ | radius | Number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
282
+ | type | String | ContentLoader.RECT | Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE |
283
+ | className | String | — | Additional class names to ab added to the wrapping svg element. |
284
+ | children | Node | — | Pass any svg elements for when you need further customizations. |
285
+
286
+ ### Example: Example 3
287
+
288
+ Column 1Column 2Column 3Column 4
289
+
290
+ Loading...Loading...Loading...Loading...
291
+ Loading...Loading...Loading...Loading...
292
+ Loading...Loading...Loading...Loading...
293
+
294
+ #### Summary
295
+
296
+ Column 1Column 2Column 3Column 4
297
+
298
+ Loading...Loading...Loading...Loading...
299
+ Loading...Loading...Loading...Loading...
300
+ Loading...Loading...Loading...Loading...
301
+
302
+ #### React (tsx)
303
+
304
+ ```tsx
305
+ import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';
306
+
307
+ export default () => (
308
+ <table className='table table-bordered table-head-filled table-hover'>
309
+ <thead>
310
+ <tr>
311
+ <th>Column 1</th>
312
+ <th>Column 2</th>
313
+ <th>Column 3</th>
314
+ <th>Column 4</th>
315
+ </tr>
316
+ </thead>
317
+ <tbody>
318
+ <tr>
319
+ <td>
320
+ <ContentLoader />
321
+ </td>
322
+ <td>
323
+ <ContentLoader />
324
+ </td>
325
+ <td>
326
+ <ContentLoader />
327
+ </td>
328
+ <td>
329
+ <ContentLoader />
330
+ </td>
331
+ </tr>
332
+ <tr>
333
+ <td>
334
+ <ContentLoader />
335
+ </td>
336
+ <td>
337
+ <ContentLoader />
338
+ </td>
339
+ <td>
340
+ <ContentLoader />
341
+ </td>
342
+ <td>
343
+ <ContentLoader />
344
+ </td>
345
+ </tr>
346
+ <tr>
347
+ <td>
348
+ <ContentLoader />
349
+ </td>
350
+ <td>
351
+ <ContentLoader />
352
+ </td>
353
+ <td>
354
+ <ContentLoader />
355
+ </td>
356
+ <td>
357
+ <ContentLoader />
358
+ </td>
359
+ </tr>
360
+ </tbody>
361
+ </table>
362
+ );
363
+ ```
364
+
365
+ #### HTML (html)
366
+
367
+ ```html
368
+ <table class="table table-bordered table-head-filled table-hover">
369
+ <thead>
370
+ <tr>
371
+ <th>Column 1</th>
372
+ <th>Column 2</th>
373
+ <th>Column 3</th>
374
+ <th>Column 4</th>
375
+ </tr>
376
+ </thead>
377
+ <tbody>
378
+ <tr>
379
+ <td>
380
+ <svg aria-labelledby="prtlk5-aria" role="img" height="14" width="100%" class="ContentLoader ">
381
+ <title id="prtlk5-aria">Loading...</title>
382
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#prtlk5-diff)" style="fill: url(&quot;#prtlk5-animated-diff&quot;);">
383
+ </rect>
384
+ <defs>
385
+ <clipPath id="prtlk5-diff">
386
+ <rect width="100%" height="100%" rx="3" ry="3">
387
+ </rect>
388
+ </clipPath>
389
+ <linearGradient id="prtlk5-animated-diff" gradientTransform="translate(-2 0)">
390
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
391
+ </stop>
392
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
393
+ </stop>
394
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
395
+ </stop>
396
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
397
+ </animateTransform>
398
+ </linearGradient>
399
+ </defs>
400
+ </svg>
401
+ </td>
402
+ <td>
403
+ <svg aria-labelledby="c2xu1tk-aria" role="img" height="14" width="100%" class="ContentLoader ">
404
+ <title id="c2xu1tk-aria">Loading...</title>
405
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#c2xu1tk-diff)" style="fill: url(&quot;#c2xu1tk-animated-diff&quot;);">
406
+ </rect>
407
+ <defs>
408
+ <clipPath id="c2xu1tk-diff">
409
+ <rect width="100%" height="100%" rx="3" ry="3">
410
+ </rect>
411
+ </clipPath>
412
+ <linearGradient id="c2xu1tk-animated-diff" gradientTransform="translate(-2 0)">
413
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
414
+ </stop>
415
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
416
+ </stop>
417
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
418
+ </stop>
419
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
420
+ </animateTransform>
421
+ </linearGradient>
422
+ </defs>
423
+ </svg>
424
+ </td>
425
+ <td>
426
+ <svg aria-labelledby="8fdoxtm-aria" role="img" height="14" width="100%" class="ContentLoader ">
427
+ <title id="8fdoxtm-aria">Loading...</title>
428
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#8fdoxtm-diff)" style="fill: url(&quot;#8fdoxtm-animated-diff&quot;);">
429
+ </rect>
430
+ <defs>
431
+ <clipPath id="8fdoxtm-diff">
432
+ <rect width="100%" height="100%" rx="3" ry="3">
433
+ </rect>
434
+ </clipPath>
435
+ <linearGradient id="8fdoxtm-animated-diff" gradientTransform="translate(-2 0)">
436
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
437
+ </stop>
438
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
439
+ </stop>
440
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
441
+ </stop>
442
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
443
+ </animateTransform>
444
+ </linearGradient>
445
+ </defs>
446
+ </svg>
447
+ </td>
448
+ <td>
449
+ <svg aria-labelledby="m68g53-aria" role="img" height="14" width="100%" class="ContentLoader ">
450
+ <title id="m68g53-aria">Loading...</title>
451
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#m68g53-diff)" style="fill: url(&quot;#m68g53-animated-diff&quot;);">
452
+ </rect>
453
+ <defs>
454
+ <clipPath id="m68g53-diff">
455
+ <rect width="100%" height="100%" rx="3" ry="3">
456
+ </rect>
457
+ </clipPath>
458
+ <linearGradient id="m68g53-animated-diff" gradientTransform="translate(-2 0)">
459
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
460
+ </stop>
461
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
462
+ </stop>
463
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
464
+ </stop>
465
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
466
+ </animateTransform>
467
+ </linearGradient>
468
+ </defs>
469
+ </svg>
470
+ </td>
471
+ </tr>
472
+ <tr>
473
+ <td>
474
+ <svg aria-labelledby="tpetnxl-aria" role="img" height="14" width="100%" class="ContentLoader ">
475
+ <title id="tpetnxl-aria">Loading...</title>
476
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#tpetnxl-diff)" style="fill: url(&quot;#tpetnxl-animated-diff&quot;);">
477
+ </rect>
478
+ <defs>
479
+ <clipPath id="tpetnxl-diff">
480
+ <rect width="100%" height="100%" rx="3" ry="3">
481
+ </rect>
482
+ </clipPath>
483
+ <linearGradient id="tpetnxl-animated-diff" gradientTransform="translate(-2 0)">
484
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
485
+ </stop>
486
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
487
+ </stop>
488
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
489
+ </stop>
490
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
491
+ </animateTransform>
492
+ </linearGradient>
493
+ </defs>
494
+ </svg>
495
+ </td>
496
+ <td>
497
+ <svg aria-labelledby="d2s453o-aria" role="img" height="14" width="100%" class="ContentLoader ">
498
+ <title id="d2s453o-aria">Loading...</title>
499
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#d2s453o-diff)" style="fill: url(&quot;#d2s453o-animated-diff&quot;);">
500
+ </rect>
501
+ <defs>
502
+ <clipPath id="d2s453o-diff">
503
+ <rect width="100%" height="100%" rx="3" ry="3">
504
+ </rect>
505
+ </clipPath>
506
+ <linearGradient id="d2s453o-animated-diff" gradientTransform="translate(-2 0)">
507
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
508
+ </stop>
509
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
510
+ </stop>
511
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
512
+ </stop>
513
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
514
+ </animateTransform>
515
+ </linearGradient>
516
+ </defs>
517
+ </svg>
518
+ </td>
519
+ <td>
520
+ <svg aria-labelledby="s92p5oiu-aria" role="img" height="14" width="100%" class="ContentLoader ">
521
+ <title id="s92p5oiu-aria">Loading...</title>
522
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#s92p5oiu-diff)" style="fill: url(&quot;#s92p5oiu-animated-diff&quot;);">
523
+ </rect>
524
+ <defs>
525
+ <clipPath id="s92p5oiu-diff">
526
+ <rect width="100%" height="100%" rx="3" ry="3">
527
+ </rect>
528
+ </clipPath>
529
+ <linearGradient id="s92p5oiu-animated-diff" gradientTransform="translate(-2 0)">
530
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
531
+ </stop>
532
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
533
+ </stop>
534
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
535
+ </stop>
536
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
537
+ </animateTransform>
538
+ </linearGradient>
539
+ </defs>
540
+ </svg>
541
+ </td>
542
+ <td>
543
+ <svg aria-labelledby="sd6l3c7-aria" role="img" height="14" width="100%" class="ContentLoader ">
544
+ <title id="sd6l3c7-aria">Loading...</title>
545
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#sd6l3c7-diff)" style="fill: url(&quot;#sd6l3c7-animated-diff&quot;);">
546
+ </rect>
547
+ <defs>
548
+ <clipPath id="sd6l3c7-diff">
549
+ <rect width="100%" height="100%" rx="3" ry="3">
550
+ </rect>
551
+ </clipPath>
552
+ <linearGradient id="sd6l3c7-animated-diff" gradientTransform="translate(-2 0)">
553
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
554
+ </stop>
555
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
556
+ </stop>
557
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
558
+ </stop>
559
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
560
+ </animateTransform>
561
+ </linearGradient>
562
+ </defs>
563
+ </svg>
564
+ </td>
565
+ </tr>
566
+ <tr>
567
+ <td>
568
+ <svg aria-labelledby="ner1v7t-aria" role="img" height="14" width="100%" class="ContentLoader ">
569
+ <title id="ner1v7t-aria">Loading...</title>
570
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ner1v7t-diff)" style="fill: url(&quot;#ner1v7t-animated-diff&quot;);">
571
+ </rect>
572
+ <defs>
573
+ <clipPath id="ner1v7t-diff">
574
+ <rect width="100%" height="100%" rx="3" ry="3">
575
+ </rect>
576
+ </clipPath>
577
+ <linearGradient id="ner1v7t-animated-diff" gradientTransform="translate(-2 0)">
578
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
579
+ </stop>
580
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
581
+ </stop>
582
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
583
+ </stop>
584
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
585
+ </animateTransform>
586
+ </linearGradient>
587
+ </defs>
588
+ </svg>
589
+ </td>
590
+ <td>
591
+ <svg aria-labelledby="c4wuk3z-aria" role="img" height="14" width="100%" class="ContentLoader ">
592
+ <title id="c4wuk3z-aria">Loading...</title>
593
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#c4wuk3z-diff)" style="fill: url(&quot;#c4wuk3z-animated-diff&quot;);">
594
+ </rect>
595
+ <defs>
596
+ <clipPath id="c4wuk3z-diff">
597
+ <rect width="100%" height="100%" rx="3" ry="3">
598
+ </rect>
599
+ </clipPath>
600
+ <linearGradient id="c4wuk3z-animated-diff" gradientTransform="translate(-2 0)">
601
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
602
+ </stop>
603
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
604
+ </stop>
605
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
606
+ </stop>
607
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
608
+ </animateTransform>
609
+ </linearGradient>
610
+ </defs>
611
+ </svg>
612
+ </td>
613
+ <td>
614
+ <svg aria-labelledby="tenf6k-aria" role="img" height="14" width="100%" class="ContentLoader ">
615
+ <title id="tenf6k-aria">Loading...</title>
616
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#tenf6k-diff)" style="fill: url(&quot;#tenf6k-animated-diff&quot;);">
617
+ </rect>
618
+ <defs>
619
+ <clipPath id="tenf6k-diff">
620
+ <rect width="100%" height="100%" rx="3" ry="3">
621
+ </rect>
622
+ </clipPath>
623
+ <linearGradient id="tenf6k-animated-diff" gradientTransform="translate(-2 0)">
624
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
625
+ </stop>
626
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
627
+ </stop>
628
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
629
+ </stop>
630
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
631
+ </animateTransform>
632
+ </linearGradient>
633
+ </defs>
634
+ </svg>
635
+ </td>
636
+ <td>
637
+ <svg aria-labelledby="q8m1pe-aria" role="img" height="14" width="100%" class="ContentLoader ">
638
+ <title id="q8m1pe-aria">Loading...</title>
639
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#q8m1pe-diff)" style="fill: url(&quot;#q8m1pe-animated-diff&quot;);">
640
+ </rect>
641
+ <defs>
642
+ <clipPath id="q8m1pe-diff">
643
+ <rect width="100%" height="100%" rx="3" ry="3">
644
+ </rect>
645
+ </clipPath>
646
+ <linearGradient id="q8m1pe-animated-diff" gradientTransform="translate(-2 0)">
647
+ <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
648
+ </stop>
649
+ <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
650
+ </stop>
651
+ <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
652
+ </stop>
653
+ <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
654
+ </animateTransform>
655
+ </linearGradient>
656
+ </defs>
657
+ </svg>
658
+ </td>
659
+ </tr>
660
+ </tbody>
661
+ </table>
662
+ ```
663
+
664
+ #### Props
665
+
666
+ | Name | Type | Default | Description |
667
+ | --- | --- | --- | --- |
668
+ | speed | Number | 2 | Sets the animation speed. |
669
+ | height | Number / String | 14 | Sets the height of the svg element. |
670
+ | width | Number / String | 100% | Sets the width of the svg element. |
671
+ | radius | Number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
672
+ | type | String | ContentLoader.RECT | Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE |
673
+ | className | String | — | Additional class names to ab added to the wrapping svg element. |
674
+ | children | Node | — | Pass any svg elements for when you need further customizations. |