@rio-cloud/uikit-mcp 1.1.4 → 1.1.5

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 (191) hide show
  1. package/README.md +1 -0
  2. package/dist/doc-metadata.json +80 -80
  3. package/dist/docs/components/accentBar.md +34 -2
  4. package/dist/docs/components/activity.md +13 -2
  5. package/dist/docs/components/animatedNumber.md +16 -3
  6. package/dist/docs/components/animatedTextReveal.md +53 -7
  7. package/dist/docs/components/animations.md +30 -30
  8. package/dist/docs/components/appHeader.md +58 -2
  9. package/dist/docs/components/appLayout.md +543 -38
  10. package/dist/docs/components/appNavigationBar.md +54 -2
  11. package/dist/docs/components/areaCharts.md +4 -4
  12. package/dist/docs/components/aspectRatioPlaceholder.md +10 -2
  13. package/dist/docs/components/assetTree.md +1065 -218
  14. package/dist/docs/components/autosuggests.md +1 -1
  15. package/dist/docs/components/avatar.md +24 -2
  16. package/dist/docs/components/banner.md +2 -2
  17. package/dist/docs/components/barCharts.md +27 -27
  18. package/dist/docs/components/barList.md +21 -9
  19. package/dist/docs/components/basicMap.md +1 -1
  20. package/dist/docs/components/bottomSheet.md +99 -2
  21. package/dist/docs/components/button.md +161 -16
  22. package/dist/docs/components/buttonToolbar.md +9 -2
  23. package/dist/docs/components/calendarStripe.md +84 -110
  24. package/dist/docs/components/card.md +10 -2
  25. package/dist/docs/components/carousel.md +1 -1
  26. package/dist/docs/components/chartColors.md +1 -1
  27. package/dist/docs/components/chartsGettingStarted.md +1 -1
  28. package/dist/docs/components/chat.md +2 -2
  29. package/dist/docs/components/checkbox.md +51 -26
  30. package/dist/docs/components/clearableInput.md +17 -17
  31. package/dist/docs/components/collapse.md +27 -3
  32. package/dist/docs/components/composedCharts.md +15 -15
  33. package/dist/docs/components/contentLoader.md +125 -104
  34. package/dist/docs/components/dataTabs.md +189 -9
  35. package/dist/docs/components/datepickers.md +733 -721
  36. package/dist/docs/components/dialogs.md +361 -1
  37. package/dist/docs/components/divider.md +14 -2
  38. package/dist/docs/components/dropdowns.md +4533 -4352
  39. package/dist/docs/components/editableContent.md +186 -2
  40. package/dist/docs/components/expander.md +51 -4
  41. package/dist/docs/components/fade.md +41 -6
  42. package/dist/docs/components/fadeExpander.md +11 -2
  43. package/dist/docs/components/fadeUp.md +21 -3
  44. package/dist/docs/components/feedback.md +43 -2
  45. package/dist/docs/components/filePickers.md +44 -2
  46. package/dist/docs/components/formLabel.md +16 -2
  47. package/dist/docs/components/groupedItemList.md +53 -2
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +6 -2
  50. package/dist/docs/components/labeledElement.md +12 -2
  51. package/dist/docs/components/licensePlate.md +10 -2
  52. package/dist/docs/components/lineCharts.md +3 -3
  53. package/dist/docs/components/listMenu.md +72 -2
  54. package/dist/docs/components/loadMore.md +28 -2
  55. package/dist/docs/components/mainNavigation.md +1 -1
  56. package/dist/docs/components/mapCircle.md +1 -1
  57. package/dist/docs/components/mapCluster.md +1 -1
  58. package/dist/docs/components/mapContext.md +1 -1
  59. package/dist/docs/components/mapDraggableMarker.md +1 -1
  60. package/dist/docs/components/mapGettingStarted.md +1 -1
  61. package/dist/docs/components/mapInfoBubble.md +1 -1
  62. package/dist/docs/components/mapLayerGroup.md +1 -1
  63. package/dist/docs/components/mapMarker.md +1 -1
  64. package/dist/docs/components/mapPolygon.md +1 -1
  65. package/dist/docs/components/mapRoute.md +1 -1
  66. package/dist/docs/components/mapRouteGenerator.md +1 -1
  67. package/dist/docs/components/mapSettings.md +1 -1
  68. package/dist/docs/components/mapUtils.md +1 -1
  69. package/dist/docs/components/multiselects.md +1 -1
  70. package/dist/docs/components/noData.md +22 -2
  71. package/dist/docs/components/notifications.md +1 -1
  72. package/dist/docs/components/numbercontrol.md +50 -2
  73. package/dist/docs/components/onboarding.md +25 -1
  74. package/dist/docs/components/page.md +32 -2
  75. package/dist/docs/components/pager.md +14 -2
  76. package/dist/docs/components/pieCharts.md +36 -36
  77. package/dist/docs/components/popover.md +39 -1
  78. package/dist/docs/components/position.md +10 -2
  79. package/dist/docs/components/radialBarCharts.md +25 -25
  80. package/dist/docs/components/radiobutton.md +137 -9
  81. package/dist/docs/components/releaseNotes.md +18 -1
  82. package/dist/docs/components/resizer.md +13 -2
  83. package/dist/docs/components/responsiveColumnStripe.md +19 -2
  84. package/dist/docs/components/responsiveVideo.md +11 -2
  85. package/dist/docs/components/rioglyph.md +12 -2
  86. package/dist/docs/components/rules.md +94 -4
  87. package/dist/docs/components/saveableInput.md +399 -275
  88. package/dist/docs/components/selects.md +1 -1
  89. package/dist/docs/components/sidebar.md +38 -2
  90. package/dist/docs/components/sliders.md +37 -2
  91. package/dist/docs/components/smoothScrollbars.md +92 -2
  92. package/dist/docs/components/spinners.md +50 -2
  93. package/dist/docs/components/states.md +216 -1
  94. package/dist/docs/components/statsWidgets.md +122 -2
  95. package/dist/docs/components/statusBar.md +28 -2
  96. package/dist/docs/components/stepButton.md +8 -2
  97. package/dist/docs/components/steppedProgressBars.md +66 -2
  98. package/dist/docs/components/subNavigation.md +8 -1
  99. package/dist/docs/components/supportMarker.md +1 -1
  100. package/dist/docs/components/svgImage.md +12 -38
  101. package/dist/docs/components/switch.md +11 -2
  102. package/dist/docs/components/tables.md +1 -1
  103. package/dist/docs/components/tagManager.md +55 -1
  104. package/dist/docs/components/tags.md +32 -2
  105. package/dist/docs/components/teaser.md +29 -2
  106. package/dist/docs/components/timeline.md +1 -1
  107. package/dist/docs/components/timepicker.md +30 -2
  108. package/dist/docs/components/toggleButton.md +65 -7
  109. package/dist/docs/components/tooltip.md +26 -18
  110. package/dist/docs/components/virtualList.md +103 -77
  111. package/dist/docs/foundations.md +177 -177
  112. package/dist/docs/start/changelog.md +1 -1
  113. package/dist/docs/start/goodtoknow.md +1 -1
  114. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  115. package/dist/docs/start/guidelines/custom-css.md +1 -1
  116. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  117. package/dist/docs/start/guidelines/formatting.md +1 -1
  118. package/dist/docs/start/guidelines/iframe.md +2 -2
  119. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  120. package/dist/docs/start/guidelines/print-css.md +1 -1
  121. package/dist/docs/start/guidelines/spinner.md +81 -81
  122. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  123. package/dist/docs/start/guidelines/writing.md +1 -1
  124. package/dist/docs/start/howto.md +1 -1
  125. package/dist/docs/start/intro.md +1 -1
  126. package/dist/docs/start/responsiveness.md +1 -1
  127. package/dist/docs/templates/common-table.md +11 -11
  128. package/dist/docs/templates/detail-views.md +2 -2
  129. package/dist/docs/templates/expandable-details.md +1 -1
  130. package/dist/docs/templates/feature-cards.md +55 -55
  131. package/dist/docs/templates/form-summary.md +22 -22
  132. package/dist/docs/templates/form-toggle.md +1 -1
  133. package/dist/docs/templates/list-blocks.md +200 -200
  134. package/dist/docs/templates/loading-progress.md +1 -1
  135. package/dist/docs/templates/options-panel.md +1 -1
  136. package/dist/docs/templates/panel-variants.md +1 -1
  137. package/dist/docs/templates/progress-cards.md +1 -1
  138. package/dist/docs/templates/progress-success.md +1 -1
  139. package/dist/docs/templates/settings-form.md +23 -23
  140. package/dist/docs/templates/stats-blocks.md +16 -16
  141. package/dist/docs/templates/table-panel.md +1 -1
  142. package/dist/docs/templates/table-row-animation.md +1 -1
  143. package/dist/docs/templates/usage-cards.md +1 -1
  144. package/dist/docs/utilities/deviceUtils.md +1 -1
  145. package/dist/docs/utilities/featureToggles.md +1 -1
  146. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  147. package/dist/docs/utilities/routeUtils.md +1 -1
  148. package/dist/docs/utilities/useAfterMount.md +1 -1
  149. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  150. package/dist/docs/utilities/useAverage.md +1 -1
  151. package/dist/docs/utilities/useClickOutside.md +1 -1
  152. package/dist/docs/utilities/useClipboard.md +2 -2
  153. package/dist/docs/utilities/useCount.md +1 -1
  154. package/dist/docs/utilities/useDarkMode.md +1 -1
  155. package/dist/docs/utilities/useDebugInfo.md +4 -4
  156. package/dist/docs/utilities/useEffectOnce.md +1 -1
  157. package/dist/docs/utilities/useElapsedTime.md +1 -1
  158. package/dist/docs/utilities/useElementSize.md +1 -1
  159. package/dist/docs/utilities/useEsc.md +1 -1
  160. package/dist/docs/utilities/useEvent.md +1 -1
  161. package/dist/docs/utilities/useFocusTrap.md +1 -1
  162. package/dist/docs/utilities/useFullscreen.md +1 -1
  163. package/dist/docs/utilities/useHover.md +1 -1
  164. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  165. package/dist/docs/utilities/useInterval.md +1 -1
  166. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  167. package/dist/docs/utilities/useKey.md +1 -1
  168. package/dist/docs/utilities/useLocalStorage.md +1 -1
  169. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  170. package/dist/docs/utilities/useMax.md +1 -1
  171. package/dist/docs/utilities/useMin.md +1 -1
  172. package/dist/docs/utilities/useMutationObserver.md +1 -1
  173. package/dist/docs/utilities/useOnScreen.md +1 -1
  174. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  175. package/dist/docs/utilities/usePostMessage.md +1 -1
  176. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  177. package/dist/docs/utilities/usePrevious.md +1 -1
  178. package/dist/docs/utilities/useResizeObserver.md +1 -1
  179. package/dist/docs/utilities/useScrollPosition.md +1 -1
  180. package/dist/docs/utilities/useSearch.md +1 -1
  181. package/dist/docs/utilities/useSorting.md +1 -1
  182. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  183. package/dist/docs/utilities/useSum.md +1 -1
  184. package/dist/docs/utilities/useTableExport.md +51 -51
  185. package/dist/docs/utilities/useTableSelection.md +87 -87
  186. package/dist/docs/utilities/useTimeout.md +1 -1
  187. package/dist/docs/utilities/useToggle.md +1 -1
  188. package/dist/docs/utilities/useWindowResize.md +1 -1
  189. package/dist/index.mjs +8 -8
  190. package/dist/version.json +1 -1
  191. package/package.json +6 -6
package/dist/docs/components/contentLoader.md CHANGED
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/contentLoader
6
- *Captured:* 2026-01-14T09:07:28.499Z
6
+ *Captured:* 2026-02-03T14:04:42.653Z
7
7
 
8
8
  The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader
9
9
 
@@ -46,16 +46,16 @@ export default () => (
46
46
  ```html
47
47
  <div class="display-flex">
48
48
  <div>
49
- <svg aria-labelledby="6i9yzr9-aria" role="img" height="40" width="40" class="ContentLoader ">
50
- <title id="6i9yzr9-aria">Loading...</title>
51
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#6i9yzr9-diff)" style="fill: url(&quot;#6i9yzr9-animated-diff&quot;);">
49
+ <svg aria-labelledby="4dc0dbl-aria" role="img" height="40" width="40" class="ContentLoader ">
50
+ <title id="4dc0dbl-aria">Loading...</title>
51
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#4dc0dbl-diff)" style="fill: url(&quot;#4dc0dbl-animated-diff&quot;);">
52
52
  </rect>
53
53
  <defs>
54
- <clipPath id="6i9yzr9-diff">
54
+ <clipPath id="4dc0dbl-diff">
55
55
  <circle cx="20" cy="20" r="20">
56
56
  </circle>
57
57
  </clipPath>
58
- <linearGradient id="6i9yzr9-animated-diff" gradientTransform="translate(-2 0)">
58
+ <linearGradient id="4dc0dbl-animated-diff" gradientTransform="translate(-2 0)">
59
59
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
60
60
  </stop>
61
61
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -69,16 +69,16 @@ export default () => (
69
69
  </svg>
70
70
  </div>
71
71
  <div class="margin-left-15">
72
- <svg aria-labelledby="hwqbygfe-aria" role="img" height="14" width="100%" class="ContentLoader height-20 margin-bottom-10 ">
73
- <title id="hwqbygfe-aria">Loading...</title>
74
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#hwqbygfe-diff)" style="fill: url(&quot;#hwqbygfe-animated-diff&quot;);">
72
+ <svg aria-labelledby="3ceze2d-aria" role="img" height="14" width="100%" class="ContentLoader height-20 margin-bottom-10 ">
73
+ <title id="3ceze2d-aria">Loading...</title>
74
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#3ceze2d-diff)" style="fill: url(&quot;#3ceze2d-animated-diff&quot;);">
75
75
  </rect>
76
76
  <defs>
77
- <clipPath id="hwqbygfe-diff">
77
+ <clipPath id="3ceze2d-diff">
78
78
  <rect width="100%" height="100%" rx="3" ry="3">
79
79
  </rect>
80
80
  </clipPath>
81
- <linearGradient id="hwqbygfe-animated-diff" gradientTransform="translate(-2 0)">
81
+ <linearGradient id="3ceze2d-animated-diff" gradientTransform="translate(-2 0)">
82
82
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
83
83
  </stop>
84
84
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -90,16 +90,16 @@ export default () => (
90
90
  </linearGradient>
91
91
  </defs>
92
92
  </svg>
93
- <svg aria-labelledby="32g3h3b-aria" role="img" height="14" width="100%" class="ContentLoader ">
94
- <title id="32g3h3b-aria">Loading...</title>
95
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#32g3h3b-diff)" style="fill: url(&quot;#32g3h3b-animated-diff&quot;);">
93
+ <svg aria-labelledby="azupv27-aria" role="img" height="14" width="100%" class="ContentLoader ">
94
+ <title id="azupv27-aria">Loading...</title>
95
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#azupv27-diff)" style="fill: url(&quot;#azupv27-animated-diff&quot;);">
96
96
  </rect>
97
97
  <defs>
98
- <clipPath id="32g3h3b-diff">
98
+ <clipPath id="azupv27-diff">
99
99
  <rect width="100%" height="100%" rx="3" ry="3">
100
100
  </rect>
101
101
  </clipPath>
102
- <linearGradient id="32g3h3b-animated-diff" gradientTransform="translate(-2 0)">
102
+ <linearGradient id="azupv27-animated-diff" gradientTransform="translate(-2 0)">
103
103
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
104
104
  </stop>
105
105
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -111,16 +111,16 @@ export default () => (
111
111
  </linearGradient>
112
112
  </defs>
113
113
  </svg>
114
- <svg aria-labelledby="108omzj-aria" role="img" height="14" width="80%" class="ContentLoader ">
115
- <title id="108omzj-aria">Loading...</title>
116
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#108omzj-diff)" style="fill: url(&quot;#108omzj-animated-diff&quot;);">
114
+ <svg aria-labelledby="afletpt-aria" role="img" height="14" width="80%" class="ContentLoader ">
115
+ <title id="afletpt-aria">Loading...</title>
116
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#afletpt-diff)" style="fill: url(&quot;#afletpt-animated-diff&quot;);">
117
117
  </rect>
118
118
  <defs>
119
- <clipPath id="108omzj-diff">
119
+ <clipPath id="afletpt-diff">
120
120
  <rect width="100%" height="100%" rx="3" ry="3">
121
121
  </rect>
122
122
  </clipPath>
123
- <linearGradient id="108omzj-animated-diff" gradientTransform="translate(-2 0)">
123
+ <linearGradient id="afletpt-animated-diff" gradientTransform="translate(-2 0)">
124
124
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
125
125
  </stop>
126
126
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -132,16 +132,16 @@ export default () => (
132
132
  </linearGradient>
133
133
  </defs>
134
134
  </svg>
135
- <svg aria-labelledby="m86juik-aria" role="img" height="14" width="60%" class="ContentLoader ">
136
- <title id="m86juik-aria">Loading...</title>
137
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#m86juik-diff)" style="fill: url(&quot;#m86juik-animated-diff&quot;);">
135
+ <svg aria-labelledby="bngxj38-aria" role="img" height="14" width="60%" class="ContentLoader ">
136
+ <title id="bngxj38-aria">Loading...</title>
137
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#bngxj38-diff)" style="fill: url(&quot;#bngxj38-animated-diff&quot;);">
138
138
  </rect>
139
139
  <defs>
140
- <clipPath id="m86juik-diff">
140
+ <clipPath id="bngxj38-diff">
141
141
  <rect width="100%" height="100%" rx="3" ry="3">
142
142
  </rect>
143
143
  </clipPath>
144
- <linearGradient id="m86juik-animated-diff" gradientTransform="translate(-2 0)">
144
+ <linearGradient id="bngxj38-animated-diff" gradientTransform="translate(-2 0)">
145
145
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
146
146
  </stop>
147
147
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -161,7 +161,14 @@ export default () => (
161
161
 
162
162
  | Name | Type | Default | Description |
163
163
  | --- | --- | --- | --- |
164
- | type | 'rect' \| 'circle' | — | — |
164
+ | speed | number | 2 | Sets the animation speed. |
165
+ | height | string \| number | 14 | Sets the height of the svg element. |
166
+ | width | string \| number | 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 | 'rect' \| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |
169
+ | className | string | — | Additional class names to ab added to the wrapping svg element. |
170
+ | rx | number | — | Rect object prop. Used internally. |
171
+ | ry | number | — | Rect object prop. Used internally. |
165
172
 
166
173
  ### Example: Example 2
167
174
 
@@ -196,16 +203,16 @@ export default () => (
196
203
  ```html
197
204
  <div class="display-flex">
198
205
  <div>
199
- <svg aria-labelledby="cpnk8u8-aria" role="img" height="40" width="40" class="ContentLoader ">
200
- <title id="cpnk8u8-aria">Loading...</title>
201
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#cpnk8u8-diff)" style="fill: url(&quot;#cpnk8u8-animated-diff&quot;);">
206
+ <svg aria-labelledby="7ov0hcj-aria" role="img" height="40" width="40" class="ContentLoader ">
207
+ <title id="7ov0hcj-aria">Loading...</title>
208
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#7ov0hcj-diff)" style="fill: url(&quot;#7ov0hcj-animated-diff&quot;);">
202
209
  </rect>
203
210
  <defs>
204
- <clipPath id="cpnk8u8-diff">
211
+ <clipPath id="7ov0hcj-diff">
205
212
  <rect width="100%" height="100%" rx="3" ry="3">
206
213
  </rect>
207
214
  </clipPath>
208
- <linearGradient id="cpnk8u8-animated-diff" gradientTransform="translate(-2 0)">
215
+ <linearGradient id="7ov0hcj-animated-diff" gradientTransform="translate(-2 0)">
209
216
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
210
217
  </stop>
211
218
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -219,16 +226,16 @@ export default () => (
219
226
  </svg>
220
227
  </div>
221
228
  <div class="margin-left-15">
222
- <svg aria-labelledby="hj4jtn-aria" role="img" height="14" width="100%" class="ContentLoader ">
223
- <title id="hj4jtn-aria">Loading...</title>
224
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#hj4jtn-diff)" style="fill: url(&quot;#hj4jtn-animated-diff&quot;);">
229
+ <svg aria-labelledby="doy2tu-aria" role="img" height="14" width="100%" class="ContentLoader ">
230
+ <title id="doy2tu-aria">Loading...</title>
231
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#doy2tu-diff)" style="fill: url(&quot;#doy2tu-animated-diff&quot;);">
225
232
  </rect>
226
233
  <defs>
227
- <clipPath id="hj4jtn-diff">
234
+ <clipPath id="doy2tu-diff">
228
235
  <rect width="100%" height="100%" rx="3" ry="3">
229
236
  </rect>
230
237
  </clipPath>
231
- <linearGradient id="hj4jtn-animated-diff" gradientTransform="translate(-2 0)">
238
+ <linearGradient id="doy2tu-animated-diff" gradientTransform="translate(-2 0)">
232
239
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
233
240
  </stop>
234
241
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -240,16 +247,16 @@ export default () => (
240
247
  </linearGradient>
241
248
  </defs>
242
249
  </svg>
243
- <svg aria-labelledby="inejw0t-aria" role="img" height="14" width="100%" class="ContentLoader ">
244
- <title id="inejw0t-aria">Loading...</title>
245
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#inejw0t-diff)" style="fill: url(&quot;#inejw0t-animated-diff&quot;);">
250
+ <svg aria-labelledby="28z5ulq-aria" role="img" height="14" width="100%" class="ContentLoader ">
251
+ <title id="28z5ulq-aria">Loading...</title>
252
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#28z5ulq-diff)" style="fill: url(&quot;#28z5ulq-animated-diff&quot;);">
246
253
  </rect>
247
254
  <defs>
248
- <clipPath id="inejw0t-diff">
255
+ <clipPath id="28z5ulq-diff">
249
256
  <rect width="100%" height="100%" rx="3" ry="3">
250
257
  </rect>
251
258
  </clipPath>
252
- <linearGradient id="inejw0t-animated-diff" gradientTransform="translate(-2 0)">
259
+ <linearGradient id="28z5ulq-animated-diff" gradientTransform="translate(-2 0)">
253
260
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
254
261
  </stop>
255
262
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -269,7 +276,14 @@ export default () => (
269
276
 
270
277
  | Name | Type | Default | Description |
271
278
  | --- | --- | --- | --- |
272
- | type | 'rect' \| 'circle' | — | — |
279
+ | speed | number | 2 | Sets the animation speed. |
280
+ | height | string \| number | 14 | Sets the height of the svg element. |
281
+ | width | string \| number | 100% | Sets the width of the svg element. |
282
+ | radius | number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
283
+ | type | 'rect' \| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |
284
+ | className | string | — | Additional class names to ab added to the wrapping svg element. |
285
+ | rx | number | — | Rect object prop. Used internally. |
286
+ | ry | number | — | Rect object prop. Used internally. |
273
287
 
274
288
  ### Example: Example 3
275
289
 
@@ -365,16 +379,16 @@ export default () => (
365
379
  <tbody>
366
380
  <tr>
367
381
  <td>
368
- <svg aria-labelledby="xdi0wxr-aria" role="img" height="14" width="100%" class="ContentLoader ">
369
- <title id="xdi0wxr-aria">Loading...</title>
370
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#xdi0wxr-diff)" style="fill: url(&quot;#xdi0wxr-animated-diff&quot;);">
382
+ <svg aria-labelledby="8l4bkkh-aria" role="img" height="14" width="100%" class="ContentLoader ">
383
+ <title id="8l4bkkh-aria">Loading...</title>
384
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#8l4bkkh-diff)" style="fill: url(&quot;#8l4bkkh-animated-diff&quot;);">
371
385
  </rect>
372
386
  <defs>
373
- <clipPath id="xdi0wxr-diff">
387
+ <clipPath id="8l4bkkh-diff">
374
388
  <rect width="100%" height="100%" rx="3" ry="3">
375
389
  </rect>
376
390
  </clipPath>
377
- <linearGradient id="xdi0wxr-animated-diff" gradientTransform="translate(-2 0)">
391
+ <linearGradient id="8l4bkkh-animated-diff" gradientTransform="translate(-2 0)">
378
392
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
379
393
  </stop>
380
394
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -388,16 +402,16 @@ export default () => (
388
402
  </svg>
389
403
  </td>
390
404
  <td>
391
- <svg aria-labelledby="l6gfcoc-aria" role="img" height="14" width="100%" class="ContentLoader ">
392
- <title id="l6gfcoc-aria">Loading...</title>
393
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#l6gfcoc-diff)" style="fill: url(&quot;#l6gfcoc-animated-diff&quot;);">
405
+ <svg aria-labelledby="ijyao0c-aria" role="img" height="14" width="100%" class="ContentLoader ">
406
+ <title id="ijyao0c-aria">Loading...</title>
407
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ijyao0c-diff)" style="fill: url(&quot;#ijyao0c-animated-diff&quot;);">
394
408
  </rect>
395
409
  <defs>
396
- <clipPath id="l6gfcoc-diff">
410
+ <clipPath id="ijyao0c-diff">
397
411
  <rect width="100%" height="100%" rx="3" ry="3">
398
412
  </rect>
399
413
  </clipPath>
400
- <linearGradient id="l6gfcoc-animated-diff" gradientTransform="translate(-2 0)">
414
+ <linearGradient id="ijyao0c-animated-diff" gradientTransform="translate(-2 0)">
401
415
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
402
416
  </stop>
403
417
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -411,16 +425,16 @@ export default () => (
411
425
  </svg>
412
426
  </td>
413
427
  <td>
414
- <svg aria-labelledby="kn62qbd-aria" role="img" height="14" width="100%" class="ContentLoader ">
415
- <title id="kn62qbd-aria">Loading...</title>
416
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#kn62qbd-diff)" style="fill: url(&quot;#kn62qbd-animated-diff&quot;);">
428
+ <svg aria-labelledby="plevuw-aria" role="img" height="14" width="100%" class="ContentLoader ">
429
+ <title id="plevuw-aria">Loading...</title>
430
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#plevuw-diff)" style="fill: url(&quot;#plevuw-animated-diff&quot;);">
417
431
  </rect>
418
432
  <defs>
419
- <clipPath id="kn62qbd-diff">
433
+ <clipPath id="plevuw-diff">
420
434
  <rect width="100%" height="100%" rx="3" ry="3">
421
435
  </rect>
422
436
  </clipPath>
423
- <linearGradient id="kn62qbd-animated-diff" gradientTransform="translate(-2 0)">
437
+ <linearGradient id="plevuw-animated-diff" gradientTransform="translate(-2 0)">
424
438
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
425
439
  </stop>
426
440
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -434,16 +448,16 @@ export default () => (
434
448
  </svg>
435
449
  </td>
436
450
  <td>
437
- <svg aria-labelledby="1zc0dm-aria" role="img" height="14" width="100%" class="ContentLoader ">
438
- <title id="1zc0dm-aria">Loading...</title>
439
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#1zc0dm-diff)" style="fill: url(&quot;#1zc0dm-animated-diff&quot;);">
451
+ <svg aria-labelledby="m439n3h-aria" role="img" height="14" width="100%" class="ContentLoader ">
452
+ <title id="m439n3h-aria">Loading...</title>
453
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#m439n3h-diff)" style="fill: url(&quot;#m439n3h-animated-diff&quot;);">
440
454
  </rect>
441
455
  <defs>
442
- <clipPath id="1zc0dm-diff">
456
+ <clipPath id="m439n3h-diff">
443
457
  <rect width="100%" height="100%" rx="3" ry="3">
444
458
  </rect>
445
459
  </clipPath>
446
- <linearGradient id="1zc0dm-animated-diff" gradientTransform="translate(-2 0)">
460
+ <linearGradient id="m439n3h-animated-diff" gradientTransform="translate(-2 0)">
447
461
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
448
462
  </stop>
449
463
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -459,16 +473,16 @@ export default () => (
459
473
  </tr>
460
474
  <tr>
461
475
  <td>
462
- <svg aria-labelledby="fsdshhh-aria" role="img" height="14" width="100%" class="ContentLoader ">
463
- <title id="fsdshhh-aria">Loading...</title>
464
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#fsdshhh-diff)" style="fill: url(&quot;#fsdshhh-animated-diff&quot;);">
476
+ <svg aria-labelledby="2bskwie-aria" role="img" height="14" width="100%" class="ContentLoader ">
477
+ <title id="2bskwie-aria">Loading...</title>
478
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#2bskwie-diff)" style="fill: url(&quot;#2bskwie-animated-diff&quot;);">
465
479
  </rect>
466
480
  <defs>
467
- <clipPath id="fsdshhh-diff">
481
+ <clipPath id="2bskwie-diff">
468
482
  <rect width="100%" height="100%" rx="3" ry="3">
469
483
  </rect>
470
484
  </clipPath>
471
- <linearGradient id="fsdshhh-animated-diff" gradientTransform="translate(-2 0)">
485
+ <linearGradient id="2bskwie-animated-diff" gradientTransform="translate(-2 0)">
472
486
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
473
487
  </stop>
474
488
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -482,16 +496,16 @@ export default () => (
482
496
  </svg>
483
497
  </td>
484
498
  <td>
485
- <svg aria-labelledby="y7r759c-aria" role="img" height="14" width="100%" class="ContentLoader ">
486
- <title id="y7r759c-aria">Loading...</title>
487
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#y7r759c-diff)" style="fill: url(&quot;#y7r759c-animated-diff&quot;);">
499
+ <svg aria-labelledby="q62k5bf-aria" role="img" height="14" width="100%" class="ContentLoader ">
500
+ <title id="q62k5bf-aria">Loading...</title>
501
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#q62k5bf-diff)" style="fill: url(&quot;#q62k5bf-animated-diff&quot;);">
488
502
  </rect>
489
503
  <defs>
490
- <clipPath id="y7r759c-diff">
504
+ <clipPath id="q62k5bf-diff">
491
505
  <rect width="100%" height="100%" rx="3" ry="3">
492
506
  </rect>
493
507
  </clipPath>
494
- <linearGradient id="y7r759c-animated-diff" gradientTransform="translate(-2 0)">
508
+ <linearGradient id="q62k5bf-animated-diff" gradientTransform="translate(-2 0)">
495
509
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
496
510
  </stop>
497
511
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -505,16 +519,16 @@ export default () => (
505
519
  </svg>
506
520
  </td>
507
521
  <td>
508
- <svg aria-labelledby="w2v4wa6-aria" role="img" height="14" width="100%" class="ContentLoader ">
509
- <title id="w2v4wa6-aria">Loading...</title>
510
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#w2v4wa6-diff)" style="fill: url(&quot;#w2v4wa6-animated-diff&quot;);">
522
+ <svg aria-labelledby="kvhxofth-aria" role="img" height="14" width="100%" class="ContentLoader ">
523
+ <title id="kvhxofth-aria">Loading...</title>
524
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#kvhxofth-diff)" style="fill: url(&quot;#kvhxofth-animated-diff&quot;);">
511
525
  </rect>
512
526
  <defs>
513
- <clipPath id="w2v4wa6-diff">
527
+ <clipPath id="kvhxofth-diff">
514
528
  <rect width="100%" height="100%" rx="3" ry="3">
515
529
  </rect>
516
530
  </clipPath>
517
- <linearGradient id="w2v4wa6-animated-diff" gradientTransform="translate(-2 0)">
531
+ <linearGradient id="kvhxofth-animated-diff" gradientTransform="translate(-2 0)">
518
532
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
519
533
  </stop>
520
534
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -528,16 +542,16 @@ export default () => (
528
542
  </svg>
529
543
  </td>
530
544
  <td>
531
- <svg aria-labelledby="zukvnw-aria" role="img" height="14" width="100%" class="ContentLoader ">
532
- <title id="zukvnw-aria">Loading...</title>
533
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#zukvnw-diff)" style="fill: url(&quot;#zukvnw-animated-diff&quot;);">
545
+ <svg aria-labelledby="0b79py6-aria" role="img" height="14" width="100%" class="ContentLoader ">
546
+ <title id="0b79py6-aria">Loading...</title>
547
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#0b79py6-diff)" style="fill: url(&quot;#0b79py6-animated-diff&quot;);">
534
548
  </rect>
535
549
  <defs>
536
- <clipPath id="zukvnw-diff">
550
+ <clipPath id="0b79py6-diff">
537
551
  <rect width="100%" height="100%" rx="3" ry="3">
538
552
  </rect>
539
553
  </clipPath>
540
- <linearGradient id="zukvnw-animated-diff" gradientTransform="translate(-2 0)">
554
+ <linearGradient id="0b79py6-animated-diff" gradientTransform="translate(-2 0)">
541
555
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
542
556
  </stop>
543
557
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -553,16 +567,16 @@ export default () => (
553
567
  </tr>
554
568
  <tr>
555
569
  <td>
556
- <svg aria-labelledby="ul3ksfp-aria" role="img" height="14" width="100%" class="ContentLoader ">
557
- <title id="ul3ksfp-aria">Loading...</title>
558
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ul3ksfp-diff)" style="fill: url(&quot;#ul3ksfp-animated-diff&quot;);">
570
+ <svg aria-labelledby="crmfun-aria" role="img" height="14" width="100%" class="ContentLoader ">
571
+ <title id="crmfun-aria">Loading...</title>
572
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#crmfun-diff)" style="fill: url(&quot;#crmfun-animated-diff&quot;);">
559
573
  </rect>
560
574
  <defs>
561
- <clipPath id="ul3ksfp-diff">
575
+ <clipPath id="crmfun-diff">
562
576
  <rect width="100%" height="100%" rx="3" ry="3">
563
577
  </rect>
564
578
  </clipPath>
565
- <linearGradient id="ul3ksfp-animated-diff" gradientTransform="translate(-2 0)">
579
+ <linearGradient id="crmfun-animated-diff" gradientTransform="translate(-2 0)">
566
580
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
567
581
  </stop>
568
582
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -576,16 +590,16 @@ export default () => (
576
590
  </svg>
577
591
  </td>
578
592
  <td>
579
- <svg aria-labelledby="krdyw9s-aria" role="img" height="14" width="100%" class="ContentLoader ">
580
- <title id="krdyw9s-aria">Loading...</title>
581
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#krdyw9s-diff)" style="fill: url(&quot;#krdyw9s-animated-diff&quot;);">
593
+ <svg aria-labelledby="ldz0sd9-aria" role="img" height="14" width="100%" class="ContentLoader ">
594
+ <title id="ldz0sd9-aria">Loading...</title>
595
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ldz0sd9-diff)" style="fill: url(&quot;#ldz0sd9-animated-diff&quot;);">
582
596
  </rect>
583
597
  <defs>
584
- <clipPath id="krdyw9s-diff">
598
+ <clipPath id="ldz0sd9-diff">
585
599
  <rect width="100%" height="100%" rx="3" ry="3">
586
600
  </rect>
587
601
  </clipPath>
588
- <linearGradient id="krdyw9s-animated-diff" gradientTransform="translate(-2 0)">
602
+ <linearGradient id="ldz0sd9-animated-diff" gradientTransform="translate(-2 0)">
589
603
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
590
604
  </stop>
591
605
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -599,16 +613,16 @@ export default () => (
599
613
  </svg>
600
614
  </td>
601
615
  <td>
602
- <svg aria-labelledby="qmrql17-aria" role="img" height="14" width="100%" class="ContentLoader ">
603
- <title id="qmrql17-aria">Loading...</title>
604
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#qmrql17-diff)" style="fill: url(&quot;#qmrql17-animated-diff&quot;);">
616
+ <svg aria-labelledby="mu40wqo-aria" role="img" height="14" width="100%" class="ContentLoader ">
617
+ <title id="mu40wqo-aria">Loading...</title>
618
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#mu40wqo-diff)" style="fill: url(&quot;#mu40wqo-animated-diff&quot;);">
605
619
  </rect>
606
620
  <defs>
607
- <clipPath id="qmrql17-diff">
621
+ <clipPath id="mu40wqo-diff">
608
622
  <rect width="100%" height="100%" rx="3" ry="3">
609
623
  </rect>
610
624
  </clipPath>
611
- <linearGradient id="qmrql17-animated-diff" gradientTransform="translate(-2 0)">
625
+ <linearGradient id="mu40wqo-animated-diff" gradientTransform="translate(-2 0)">
612
626
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
613
627
  </stop>
614
628
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -622,16 +636,16 @@ export default () => (
622
636
  </svg>
623
637
  </td>
624
638
  <td>
625
- <svg aria-labelledby="usjpdsn-aria" role="img" height="14" width="100%" class="ContentLoader ">
626
- <title id="usjpdsn-aria">Loading...</title>
627
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#usjpdsn-diff)" style="fill: url(&quot;#usjpdsn-animated-diff&quot;);">
639
+ <svg aria-labelledby="2flepe-aria" role="img" height="14" width="100%" class="ContentLoader ">
640
+ <title id="2flepe-aria">Loading...</title>
641
+ <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#2flepe-diff)" style="fill: url(&quot;#2flepe-animated-diff&quot;);">
628
642
  </rect>
629
643
  <defs>
630
- <clipPath id="usjpdsn-diff">
644
+ <clipPath id="2flepe-diff">
631
645
  <rect width="100%" height="100%" rx="3" ry="3">
632
646
  </rect>
633
647
  </clipPath>
634
- <linearGradient id="usjpdsn-animated-diff" gradientTransform="translate(-2 0)">
648
+ <linearGradient id="2flepe-animated-diff" gradientTransform="translate(-2 0)">
635
649
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
636
650
  </stop>
637
651
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -653,4 +667,11 @@ export default () => (
653
667
 
654
668
  | Name | Type | Default | Description |
655
669
  | --- | --- | --- | --- |
656
- | type | 'rect' \| 'circle' | — | — |
670
+ | speed | number | 2 | Sets the animation speed. |
671
+ | height | string \| number | 14 | Sets the height of the svg element. |
672
+ | width | string \| number | 100% | Sets the width of the svg element. |
673
+ | radius | number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
674
+ | type | 'rect' \| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |
675
+ | className | string | — | Additional class names to ab added to the wrapping svg element. |
676
+ | rx | number | — | Rect object prop. Used internally. |
677
+ | ry | number | — | Rect object prop. Used internally. |