@rio-cloud/uikit-mcp 1.1.2 → 1.1.4

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