@rio-cloud/uikit-mcp 1.1.3 → 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 +97 -97
  3. package/dist/docs/components/accentBar.md +5 -5
  4. package/dist/docs/components/activity.md +7 -7
  5. package/dist/docs/components/animatedNumber.md +10 -10
  6. package/dist/docs/components/animatedTextReveal.md +42 -43
  7. package/dist/docs/components/animations.md +42 -34
  8. package/dist/docs/components/appHeader.md +20 -35
  9. package/dist/docs/components/appLayout.md +198 -221
  10. package/dist/docs/components/appNavigationBar.md +21 -21
  11. package/dist/docs/components/areaCharts.md +38 -38
  12. package/dist/docs/components/aspectRatioPlaceholder.md +4 -5
  13. package/dist/docs/components/assetTree.md +887 -614
  14. package/dist/docs/components/autosuggests.md +4 -4
  15. package/dist/docs/components/avatar.md +7 -7
  16. package/dist/docs/components/banner.md +2 -2
  17. package/dist/docs/components/barCharts.md +173 -173
  18. package/dist/docs/components/barList.md +19 -41
  19. package/dist/docs/components/basicMap.md +1 -1
  20. package/dist/docs/components/bottomSheet.md +74 -74
  21. package/dist/docs/components/button.md +161 -71
  22. package/dist/docs/components/buttonToolbar.md +3 -3
  23. package/dist/docs/components/calendarStripe.md +71 -123
  24. package/dist/docs/components/card.md +4 -4
  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 +56 -131
  30. package/dist/docs/components/clearableInput.md +23 -127
  31. package/dist/docs/components/collapse.md +14 -16
  32. package/dist/docs/components/composedCharts.md +31 -31
  33. package/dist/docs/components/contentLoader.md +125 -122
  34. package/dist/docs/components/dataTabs.md +103 -93
  35. package/dist/docs/components/datepickers.md +734 -764
  36. package/dist/docs/components/dialogs.md +299 -186
  37. package/dist/docs/components/divider.md +4 -4
  38. package/dist/docs/components/dropdowns.md +4555 -4498
  39. package/dist/docs/components/editableContent.md +97 -97
  40. package/dist/docs/components/expander.md +56 -56
  41. package/dist/docs/components/fade.md +41 -41
  42. package/dist/docs/components/fadeExpander.md +4 -4
  43. package/dist/docs/components/fadeUp.md +8 -10
  44. package/dist/docs/components/feedback.md +22 -21
  45. package/dist/docs/components/filePickers.md +25 -25
  46. package/dist/docs/components/formLabel.md +5 -7
  47. package/dist/docs/components/groupedItemList.md +37 -37
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +6 -6
  50. package/dist/docs/components/labeledElement.md +4 -3
  51. package/dist/docs/components/licensePlate.md +2 -2
  52. package/dist/docs/components/lineCharts.md +58 -58
  53. package/dist/docs/components/listMenu.md +63 -41
  54. package/dist/docs/components/loadMore.md +17 -17
  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 +339 -345
  64. package/dist/docs/components/mapPolygon.md +16 -20
  65. package/dist/docs/components/mapRoute.md +14 -20
  66. package/dist/docs/components/mapRouteGenerator.md +1 -1
  67. package/dist/docs/components/mapSettings.md +263 -274
  68. package/dist/docs/components/mapUtils.md +3 -5
  69. package/dist/docs/components/multiselects.md +1 -1
  70. package/dist/docs/components/noData.md +11 -11
  71. package/dist/docs/components/notifications.md +1 -1
  72. package/dist/docs/components/numbercontrol.md +39 -37
  73. package/dist/docs/components/onboarding.md +18 -38
  74. package/dist/docs/components/page.md +16 -16
  75. package/dist/docs/components/pager.md +8 -8
  76. package/dist/docs/components/pieCharts.md +124 -124
  77. package/dist/docs/components/popover.md +37 -53
  78. package/dist/docs/components/position.md +4 -4
  79. package/dist/docs/components/radialBarCharts.md +506 -506
  80. package/dist/docs/components/radiobutton.md +209 -191
  81. package/dist/docs/components/releaseNotes.md +9 -3
  82. package/dist/docs/components/resizer.md +7 -8
  83. package/dist/docs/components/responsiveColumnStripe.md +11 -11
  84. package/dist/docs/components/responsiveVideo.md +5 -5
  85. package/dist/docs/components/rioglyph.md +11 -11
  86. package/dist/docs/components/rules.md +118 -92
  87. package/dist/docs/components/saveableInput.md +366 -356
  88. package/dist/docs/components/selects.md +9996 -15
  89. package/dist/docs/components/sidebar.md +22 -23
  90. package/dist/docs/components/sliders.md +26 -26
  91. package/dist/docs/components/smoothScrollbars.md +61 -25
  92. package/dist/docs/components/spinners.md +32 -30
  93. package/dist/docs/components/states.md +236 -245
  94. package/dist/docs/components/statsWidgets.md +37 -28
  95. package/dist/docs/components/statusBar.md +22 -22
  96. package/dist/docs/components/stepButton.md +2 -2
  97. package/dist/docs/components/steppedProgressBars.md +45 -45
  98. package/dist/docs/components/subNavigation.md +3 -3
  99. package/dist/docs/components/supportMarker.md +1 -1
  100. package/dist/docs/components/svgImage.md +2 -38
  101. package/dist/docs/components/switch.md +11 -11
  102. package/dist/docs/components/tables.md +1 -1
  103. package/dist/docs/components/tagManager.md +40 -40
  104. package/dist/docs/components/tags.md +21 -20
  105. package/dist/docs/components/teaser.md +22 -23
  106. package/dist/docs/components/timeline.md +1 -1
  107. package/dist/docs/components/timepicker.md +17 -13
  108. package/dist/docs/components/toggleButton.md +65 -29
  109. package/dist/docs/components/tooltip.md +27 -50
  110. package/dist/docs/components/virtualList.md +75 -75
  111. package/dist/docs/foundations.md +167 -167
  112. package/dist/docs/start/changelog.md +23 -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 +80 -27
  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 +9 -9
  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 +197 -197
  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 +41 -41
  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 +6 -3
  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 +59 -23
  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 +7 -5
  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 +58 -2
  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 +54 -54
  185. package/dist/docs/utilities/useTableSelection.md +93 -93
  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 +2 -2
  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-07T12:11:38.358Z
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="sa1mqhw-aria" role="img" height="40" width="40" class="ContentLoader ">
50
- <title id="sa1mqhw-aria">Loading...</title>
51
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#sa1mqhw-diff)" style="fill: url(&quot;#sa1mqhw-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="sa1mqhw-diff">
54
+ <clipPath id="4dc0dbl-diff">
55
55
  <circle cx="20" cy="20" r="20">
56
56
  </circle>
57
57
  </clipPath>
58
- <linearGradient id="sa1mqhw-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="rtpsxrk-aria" role="img" height="14" width="100%" class="ContentLoader height-20 margin-bottom-10 ">
73
- <title id="rtpsxrk-aria">Loading...</title>
74
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#rtpsxrk-diff)" style="fill: url(&quot;#rtpsxrk-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="rtpsxrk-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="rtpsxrk-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="7vkd25n-aria" role="img" height="14" width="100%" class="ContentLoader ">
94
- <title id="7vkd25n-aria">Loading...</title>
95
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#7vkd25n-diff)" style="fill: url(&quot;#7vkd25n-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="7vkd25n-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="7vkd25n-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="sywqt5-aria" role="img" height="14" width="80%" class="ContentLoader ">
115
- <title id="sywqt5-aria">Loading...</title>
116
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#sywqt5-diff)" style="fill: url(&quot;#sywqt5-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="sywqt5-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="sywqt5-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="ky3yw7s-aria" role="img" height="14" width="60%" class="ContentLoader ">
136
- <title id="ky3yw7s-aria">Loading...</title>
137
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ky3yw7s-diff)" style="fill: url(&quot;#ky3yw7s-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="ky3yw7s-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="ky3yw7s-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,13 +161,14 @@ 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
+ | 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. |
171
172
 
172
173
  ### Example: Example 2
173
174
 
@@ -202,16 +203,16 @@ export default () => (
202
203
  ```html
203
204
  <div class="display-flex">
204
205
  <div>
205
- <svg aria-labelledby="8lmkaqj-aria" role="img" height="40" width="40" class="ContentLoader ">
206
- <title id="8lmkaqj-aria">Loading...</title>
207
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#8lmkaqj-diff)" style="fill: url(&quot;#8lmkaqj-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;);">
208
209
  </rect>
209
210
  <defs>
210
- <clipPath id="8lmkaqj-diff">
211
+ <clipPath id="7ov0hcj-diff">
211
212
  <rect width="100%" height="100%" rx="3" ry="3">
212
213
  </rect>
213
214
  </clipPath>
214
- <linearGradient id="8lmkaqj-animated-diff" gradientTransform="translate(-2 0)">
215
+ <linearGradient id="7ov0hcj-animated-diff" gradientTransform="translate(-2 0)">
215
216
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
216
217
  </stop>
217
218
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -225,16 +226,16 @@ export default () => (
225
226
  </svg>
226
227
  </div>
227
228
  <div class="margin-left-15">
228
- <svg aria-labelledby="k1bues-aria" role="img" height="14" width="100%" class="ContentLoader ">
229
- <title id="k1bues-aria">Loading...</title>
230
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#k1bues-diff)" style="fill: url(&quot;#k1bues-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;);">
231
232
  </rect>
232
233
  <defs>
233
- <clipPath id="k1bues-diff">
234
+ <clipPath id="doy2tu-diff">
234
235
  <rect width="100%" height="100%" rx="3" ry="3">
235
236
  </rect>
236
237
  </clipPath>
237
- <linearGradient id="k1bues-animated-diff" gradientTransform="translate(-2 0)">
238
+ <linearGradient id="doy2tu-animated-diff" gradientTransform="translate(-2 0)">
238
239
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
239
240
  </stop>
240
241
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -246,16 +247,16 @@ export default () => (
246
247
  </linearGradient>
247
248
  </defs>
248
249
  </svg>
249
- <svg aria-labelledby="u0chmzc-aria" role="img" height="14" width="100%" class="ContentLoader ">
250
- <title id="u0chmzc-aria">Loading...</title>
251
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#u0chmzc-diff)" style="fill: url(&quot;#u0chmzc-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;);">
252
253
  </rect>
253
254
  <defs>
254
- <clipPath id="u0chmzc-diff">
255
+ <clipPath id="28z5ulq-diff">
255
256
  <rect width="100%" height="100%" rx="3" ry="3">
256
257
  </rect>
257
258
  </clipPath>
258
- <linearGradient id="u0chmzc-animated-diff" gradientTransform="translate(-2 0)">
259
+ <linearGradient id="28z5ulq-animated-diff" gradientTransform="translate(-2 0)">
259
260
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
260
261
  </stop>
261
262
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -275,13 +276,14 @@ export default () => (
275
276
 
276
277
  | Name | Type | Default | Description |
277
278
  | --- | --- | --- | --- |
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. |
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. |
285
287
 
286
288
  ### Example: Example 3
287
289
 
@@ -377,16 +379,16 @@ export default () => (
377
379
  <tbody>
378
380
  <tr>
379
381
  <td>
380
- <svg aria-labelledby="lf2vbz-aria" role="img" height="14" width="100%" class="ContentLoader ">
381
- <title id="lf2vbz-aria">Loading...</title>
382
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#lf2vbz-diff)" style="fill: url(&quot;#lf2vbz-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;);">
383
385
  </rect>
384
386
  <defs>
385
- <clipPath id="lf2vbz-diff">
387
+ <clipPath id="8l4bkkh-diff">
386
388
  <rect width="100%" height="100%" rx="3" ry="3">
387
389
  </rect>
388
390
  </clipPath>
389
- <linearGradient id="lf2vbz-animated-diff" gradientTransform="translate(-2 0)">
391
+ <linearGradient id="8l4bkkh-animated-diff" gradientTransform="translate(-2 0)">
390
392
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
391
393
  </stop>
392
394
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -400,16 +402,16 @@ export default () => (
400
402
  </svg>
401
403
  </td>
402
404
  <td>
403
- <svg aria-labelledby="980uep-aria" role="img" height="14" width="100%" class="ContentLoader ">
404
- <title id="980uep-aria">Loading...</title>
405
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#980uep-diff)" style="fill: url(&quot;#980uep-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;);">
406
408
  </rect>
407
409
  <defs>
408
- <clipPath id="980uep-diff">
410
+ <clipPath id="ijyao0c-diff">
409
411
  <rect width="100%" height="100%" rx="3" ry="3">
410
412
  </rect>
411
413
  </clipPath>
412
- <linearGradient id="980uep-animated-diff" gradientTransform="translate(-2 0)">
414
+ <linearGradient id="ijyao0c-animated-diff" gradientTransform="translate(-2 0)">
413
415
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
414
416
  </stop>
415
417
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -423,16 +425,16 @@ export default () => (
423
425
  </svg>
424
426
  </td>
425
427
  <td>
426
- <svg aria-labelledby="ue9a1h7-aria" role="img" height="14" width="100%" class="ContentLoader ">
427
- <title id="ue9a1h7-aria">Loading...</title>
428
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ue9a1h7-diff)" style="fill: url(&quot;#ue9a1h7-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;);">
429
431
  </rect>
430
432
  <defs>
431
- <clipPath id="ue9a1h7-diff">
433
+ <clipPath id="plevuw-diff">
432
434
  <rect width="100%" height="100%" rx="3" ry="3">
433
435
  </rect>
434
436
  </clipPath>
435
- <linearGradient id="ue9a1h7-animated-diff" gradientTransform="translate(-2 0)">
437
+ <linearGradient id="plevuw-animated-diff" gradientTransform="translate(-2 0)">
436
438
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
437
439
  </stop>
438
440
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -446,16 +448,16 @@ export default () => (
446
448
  </svg>
447
449
  </td>
448
450
  <td>
449
- <svg aria-labelledby="njphy9n-aria" role="img" height="14" width="100%" class="ContentLoader ">
450
- <title id="njphy9n-aria">Loading...</title>
451
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#njphy9n-diff)" style="fill: url(&quot;#njphy9n-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;);">
452
454
  </rect>
453
455
  <defs>
454
- <clipPath id="njphy9n-diff">
456
+ <clipPath id="m439n3h-diff">
455
457
  <rect width="100%" height="100%" rx="3" ry="3">
456
458
  </rect>
457
459
  </clipPath>
458
- <linearGradient id="njphy9n-animated-diff" gradientTransform="translate(-2 0)">
460
+ <linearGradient id="m439n3h-animated-diff" gradientTransform="translate(-2 0)">
459
461
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
460
462
  </stop>
461
463
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -471,16 +473,16 @@ export default () => (
471
473
  </tr>
472
474
  <tr>
473
475
  <td>
474
- <svg aria-labelledby="nqwiqgl-aria" role="img" height="14" width="100%" class="ContentLoader ">
475
- <title id="nqwiqgl-aria">Loading...</title>
476
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#nqwiqgl-diff)" style="fill: url(&quot;#nqwiqgl-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;);">
477
479
  </rect>
478
480
  <defs>
479
- <clipPath id="nqwiqgl-diff">
481
+ <clipPath id="2bskwie-diff">
480
482
  <rect width="100%" height="100%" rx="3" ry="3">
481
483
  </rect>
482
484
  </clipPath>
483
- <linearGradient id="nqwiqgl-animated-diff" gradientTransform="translate(-2 0)">
485
+ <linearGradient id="2bskwie-animated-diff" gradientTransform="translate(-2 0)">
484
486
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
485
487
  </stop>
486
488
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -494,16 +496,16 @@ export default () => (
494
496
  </svg>
495
497
  </td>
496
498
  <td>
497
- <svg aria-labelledby="j7hzgyb-aria" role="img" height="14" width="100%" class="ContentLoader ">
498
- <title id="j7hzgyb-aria">Loading...</title>
499
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#j7hzgyb-diff)" style="fill: url(&quot;#j7hzgyb-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;);">
500
502
  </rect>
501
503
  <defs>
502
- <clipPath id="j7hzgyb-diff">
504
+ <clipPath id="q62k5bf-diff">
503
505
  <rect width="100%" height="100%" rx="3" ry="3">
504
506
  </rect>
505
507
  </clipPath>
506
- <linearGradient id="j7hzgyb-animated-diff" gradientTransform="translate(-2 0)">
508
+ <linearGradient id="q62k5bf-animated-diff" gradientTransform="translate(-2 0)">
507
509
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
508
510
  </stop>
509
511
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -517,16 +519,16 @@ export default () => (
517
519
  </svg>
518
520
  </td>
519
521
  <td>
520
- <svg aria-labelledby="varp6gc-aria" role="img" height="14" width="100%" class="ContentLoader ">
521
- <title id="varp6gc-aria">Loading...</title>
522
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#varp6gc-diff)" style="fill: url(&quot;#varp6gc-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;);">
523
525
  </rect>
524
526
  <defs>
525
- <clipPath id="varp6gc-diff">
527
+ <clipPath id="kvhxofth-diff">
526
528
  <rect width="100%" height="100%" rx="3" ry="3">
527
529
  </rect>
528
530
  </clipPath>
529
- <linearGradient id="varp6gc-animated-diff" gradientTransform="translate(-2 0)">
531
+ <linearGradient id="kvhxofth-animated-diff" gradientTransform="translate(-2 0)">
530
532
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
531
533
  </stop>
532
534
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -540,16 +542,16 @@ export default () => (
540
542
  </svg>
541
543
  </td>
542
544
  <td>
543
- <svg aria-labelledby="n9oc2jn-aria" role="img" height="14" width="100%" class="ContentLoader ">
544
- <title id="n9oc2jn-aria">Loading...</title>
545
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#n9oc2jn-diff)" style="fill: url(&quot;#n9oc2jn-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;);">
546
548
  </rect>
547
549
  <defs>
548
- <clipPath id="n9oc2jn-diff">
550
+ <clipPath id="0b79py6-diff">
549
551
  <rect width="100%" height="100%" rx="3" ry="3">
550
552
  </rect>
551
553
  </clipPath>
552
- <linearGradient id="n9oc2jn-animated-diff" gradientTransform="translate(-2 0)">
554
+ <linearGradient id="0b79py6-animated-diff" gradientTransform="translate(-2 0)">
553
555
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
554
556
  </stop>
555
557
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -565,16 +567,16 @@ export default () => (
565
567
  </tr>
566
568
  <tr>
567
569
  <td>
568
- <svg aria-labelledby="zeo34m-aria" role="img" height="14" width="100%" class="ContentLoader ">
569
- <title id="zeo34m-aria">Loading...</title>
570
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#zeo34m-diff)" style="fill: url(&quot;#zeo34m-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;);">
571
573
  </rect>
572
574
  <defs>
573
- <clipPath id="zeo34m-diff">
575
+ <clipPath id="crmfun-diff">
574
576
  <rect width="100%" height="100%" rx="3" ry="3">
575
577
  </rect>
576
578
  </clipPath>
577
- <linearGradient id="zeo34m-animated-diff" gradientTransform="translate(-2 0)">
579
+ <linearGradient id="crmfun-animated-diff" gradientTransform="translate(-2 0)">
578
580
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
579
581
  </stop>
580
582
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -588,16 +590,16 @@ export default () => (
588
590
  </svg>
589
591
  </td>
590
592
  <td>
591
- <svg aria-labelledby="fg6364d-aria" role="img" height="14" width="100%" class="ContentLoader ">
592
- <title id="fg6364d-aria">Loading...</title>
593
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#fg6364d-diff)" style="fill: url(&quot;#fg6364d-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;);">
594
596
  </rect>
595
597
  <defs>
596
- <clipPath id="fg6364d-diff">
598
+ <clipPath id="ldz0sd9-diff">
597
599
  <rect width="100%" height="100%" rx="3" ry="3">
598
600
  </rect>
599
601
  </clipPath>
600
- <linearGradient id="fg6364d-animated-diff" gradientTransform="translate(-2 0)">
602
+ <linearGradient id="ldz0sd9-animated-diff" gradientTransform="translate(-2 0)">
601
603
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
602
604
  </stop>
603
605
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -611,16 +613,16 @@ export default () => (
611
613
  </svg>
612
614
  </td>
613
615
  <td>
614
- <svg aria-labelledby="qgbkd8p-aria" role="img" height="14" width="100%" class="ContentLoader ">
615
- <title id="qgbkd8p-aria">Loading...</title>
616
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#qgbkd8p-diff)" style="fill: url(&quot;#qgbkd8p-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;);">
617
619
  </rect>
618
620
  <defs>
619
- <clipPath id="qgbkd8p-diff">
621
+ <clipPath id="mu40wqo-diff">
620
622
  <rect width="100%" height="100%" rx="3" ry="3">
621
623
  </rect>
622
624
  </clipPath>
623
- <linearGradient id="qgbkd8p-animated-diff" gradientTransform="translate(-2 0)">
625
+ <linearGradient id="mu40wqo-animated-diff" gradientTransform="translate(-2 0)">
624
626
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
625
627
  </stop>
626
628
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -634,16 +636,16 @@ export default () => (
634
636
  </svg>
635
637
  </td>
636
638
  <td>
637
- <svg aria-labelledby="mkvwzhj-aria" role="img" height="14" width="100%" class="ContentLoader ">
638
- <title id="mkvwzhj-aria">Loading...</title>
639
- <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#mkvwzhj-diff)" style="fill: url(&quot;#mkvwzhj-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;);">
640
642
  </rect>
641
643
  <defs>
642
- <clipPath id="mkvwzhj-diff">
644
+ <clipPath id="2flepe-diff">
643
645
  <rect width="100%" height="100%" rx="3" ry="3">
644
646
  </rect>
645
647
  </clipPath>
646
- <linearGradient id="mkvwzhj-animated-diff" gradientTransform="translate(-2 0)">
648
+ <linearGradient id="2flepe-animated-diff" gradientTransform="translate(-2 0)">
647
649
  <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
648
650
  </stop>
649
651
  <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -665,10 +667,11 @@ export default () => (
665
667
 
666
668
  | Name | Type | Default | Description |
667
669
  | --- | --- | --- | --- |
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. |
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. |