@rio-cloud/uikit-mcp 1.1.1 → 1.1.3

package/dist/docs/components/accentBar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/accentBar
-*Captured:* 2025-12-12T14:20:52.490Z
+*Captured:* 2026-01-07T12:11:49.911Z
 
 The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.
 

package/dist/docs/components/activity.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/activity
-*Captured:* 2025-12-12T14:20:51.495Z
+*Captured:* 2026-01-07T12:11:48.559Z
 
 ## Activity
 

package/dist/docs/components/animatedNumber.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animatedNumber
-*Captured:* 2025-12-12T14:20:36.928Z
+*Captured:* 2026-01-07T12:11:33.899Z
 
 ## AnimatedNumber
 
@@ -59,11 +59,11 @@ export default () => (
 <div>
     <label>Default AnimatedNumber</label>
     <div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
-        <span class="">27</span>
+        <span class="">26</span>
     </div>
     <label>AnimatedNumber with prefix and unit</label>
     <div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">
-        <span class="">+6%</span>
+        <span class="">+5%</span>
     </div>
     <label>AnimatedNumber as simple timer</label>
     <div class="text-color-danger">

package/dist/docs/components/animatedTextReveal.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animatedTextReveal
-*Captured:* 2025-12-12T14:20:37.866Z
+*Captured:* 2026-01-07T12:11:35.101Z
 
 AnimatedTextReveal displays text that smoothly reveals from below while a subtle shimmer effect runs across it. It’s designed for attention-grabbing messages or live-updating content, combining a primary reveal motion with an optional continuous shimmer highlight.
 
@@ -136,7 +136,7 @@ export default () => {
                 <div class="text-uppercase text-size-12">Live stream</div>
             </div>
             <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
-                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.308534; transform: translateY(8.76697px);">System is thinking...</div>
+                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.347296; transform: translateY(8.69958px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -148,7 +148,7 @@ export default () => {
         <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with animated gradient</div>
         <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
             <div class="position-relative" aria-live="polite" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
-                <div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.308534; transform: translateY(8.76697px);">Processing your request...</div>
+                <div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.347296; transform: translateY(8.69958px);">Processing your request...</div>
             </div>
         </div>
     </div>
@@ -156,7 +156,7 @@ export default () => {
         <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with automatic cycling but without animated gradient</div>
         <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
             <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
-                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.47997px);">System is thinking...</div>
+                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.53618px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -164,7 +164,7 @@ export default () => {
         <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with custom styling</div>
         <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
             <div class="position-relative text-size-16" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest);">
-                <div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(3.47997px);">System is thinking...</div>
+                <div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(3.53618px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -173,7 +173,7 @@ export default () => {
         <div class="max-width-150">
             <button type="button" class="btn btn-primary btn-block btn-component" tabindex="0">
                 <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter);">
-                    <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.47997px);">Continue</div>
+                    <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.53618px);">Continue</div>
                 </div>
             </button>
         </div>

package/dist/docs/components/animations.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animations
-*Captured:* 2025-12-12T14:20:37.664Z
+*Captured:* 2026-01-07T12:11:35.058Z
 
 The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.
 
@@ -53,7 +53,7 @@ export default () => {
 #### HTML (html)
 
 ```html
-<div style="opacity: 0.863312;">
+<div style="opacity: 0.880618;">
     <div class="margin-10">
         <label>Some Data</label>
         <div>
@@ -161,13 +161,13 @@ export default () => (
     </div>
     <div style="opacity: 1;">
         <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.9233986243780237px 1px">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.9387635586608667px 1px">
             </path>
         </svg>
     </div>
     <div style="opacity: 1;">
         <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0px 1px">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.003376702225068584px 1px">
             </path>
         </svg>
     </div>
@@ -176,21 +176,21 @@ export default () => (
 
 ### Example: Example 3
 
-Add ItemItem LTM5U13MCY
+Add ItemItem YUWCXY4QCL
 
-Item 22I53GR1TM
+Item 18Z0QVGEMQ
 
-Item NFPHWUDEPD
+Item KQ9QJ25F3B
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
 
 #### Summary
 
-Add ItemItem LTM5U13MCY
+Add ItemItem YUWCXY4QCL
 
-Item 22I53GR1TM
+Item 18Z0QVGEMQ
 
-Item NFPHWUDEPD
+Item KQ9QJ25F3B
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
 
@@ -259,7 +259,7 @@ export default () => {
         <div style="height: auto;">
             <div style="opacity: 1;">
                 <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
-                    <div>Item LTM5U13MCY</div>
+                    <div>Item YUWCXY4QCL</div>
                     <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                         <span class="rioglyph rioglyph-remove text-size-14">
                         </span>
@@ -270,7 +270,7 @@ export default () => {
         <div style="height: auto;">
             <div style="opacity: 1;">
                 <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
-                    <div>Item 22I53GR1TM</div>
+                    <div>Item 18Z0QVGEMQ</div>
                     <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                         <span class="rioglyph rioglyph-remove text-size-14">
                         </span>
@@ -281,7 +281,7 @@ export default () => {
         <div style="height: auto;">
             <div style="opacity: 1;">
                 <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
-                    <div>Item NFPHWUDEPD</div>
+                    <div>Item KQ9QJ25F3B</div>
                     <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                         <span class="rioglyph rioglyph-remove text-size-14">
                         </span>
@@ -297,31 +297,31 @@ export default () => {
 
 ### Example: Example 4
 
-Load ItemsItem QJXBPX4FY1
+Load ItemsItem 4NYRNZDOEAJ
 
-Item L56N5K97ZOG
+Item 9XGVIHIZDRK
 
-Item Y280KNO84
+Item ZP0PGXK14B
 
-Item JE4VGX02E
+Item N4PC0EB2RM
 
-Item 6TU5EMVX6MF
+Item KO6IY6WXTC
 
-Item 451IDXN9WP
+Item KC0LC7DH2MH
 
 #### Summary
 
-Load ItemsItem QJXBPX4FY1
+Load ItemsItem 4NYRNZDOEAJ
 
-Item L56N5K97ZOG
+Item 9XGVIHIZDRK
 
-Item Y280KNO84
+Item ZP0PGXK14B
 
-Item JE4VGX02E
+Item N4PC0EB2RM
 
-Item 6TU5EMVX6MF
+Item KO6IY6WXTC
 
-Item 451IDXN9WP
+Item KC0LC7DH2MH
 
 #### React (tsx)
 
@@ -388,7 +388,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item QJXBPX4FY1</span>
+                            <span>Item 4NYRNZDOEAJ</span>
                         </div>
                     </span>
                 </span>
@@ -400,7 +400,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item L56N5K97ZOG</span>
+                            <span>Item 9XGVIHIZDRK</span>
                         </div>
                     </span>
                 </span>
@@ -412,7 +412,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item Y280KNO84</span>
+                            <span>Item ZP0PGXK14B</span>
                         </div>
                     </span>
                 </span>
@@ -424,7 +424,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item JE4VGX02E</span>
+                            <span>Item N4PC0EB2RM</span>
                         </div>
                     </span>
                 </span>
@@ -436,7 +436,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 6TU5EMVX6MF</span>
+                            <span>Item KO6IY6WXTC</span>
                         </div>
                     </span>
                 </span>
@@ -448,7 +448,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 451IDXN9WP</span>
+                            <span>Item KC0LC7DH2MH</span>
                         </div>
                     </span>
                 </span>

package/dist/docs/components/appHeader.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#components/appHeader
-*Captured:* 2025-12-12T14:20:08.636Z
+*Captured:* 2026-01-07T12:11:05.673Z
 
 This is the header component for all services. All navigation link components that are passed into the header should be based on react-router
 

package/dist/docs/components/appLayout.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#components/appLayout
-*Captured:* 2025-12-12T14:20:11.441Z
+*Captured:* 2026-01-07T12:11:08.760Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -1160,16 +1160,23 @@ Navigation 3
 
 4
 
-5
-2
-1
+4
+7
+4
+4
 
-Asset Group3
-Vehicle-2115Asset 1005
-Vehicle-2747Asset 1001
-Vehicle-5156Asset 1000
+Asset Group9
+Vehicle-1869Asset 1015
+Vehicle-3532Asset 1007
+Vehicle-3812Asset 1000
+Vehicle-5185Asset 1016
+Vehicle-6538Asset 1017
+Vehicle-7129Asset 1008
+Vehicle-7924Asset 1010
+Vehicle-8111Asset 1012
+Vehicle-9372Asset 1014
 
-Ungrouped5
+Ungrouped10
 
 200
 
@@ -1204,16 +1211,23 @@ Navigation 3
 
 4
 
-5
-2
-1
+4
+7
+4
+4
 
-Asset Group3
-Vehicle-2115Asset 1005
-Vehicle-2747Asset 1001
-Vehicle-5156Asset 1000
+Asset Group9
+Vehicle-1869Asset 1015
+Vehicle-3532Asset 1007
+Vehicle-3812Asset 1000
+Vehicle-5185Asset 1016
+Vehicle-6538Asset 1017
+Vehicle-7129Asset 1008
+Vehicle-7924Asset 1010
+Vehicle-8111Asset 1012
+Vehicle-9372Asset 1014
 
-Ungrouped5
+Ungrouped10
 
 200
 
@@ -1699,19 +1713,24 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                             <div class="display-flex justify-content-between align-items-start width-100pct">
                                                 <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
+                                                    </div>
+                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
+                                                        <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
+                                                        </span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1729,27 +1748,27 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Asset Group</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">9</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-trailer">
+                                                    <span class="rioglyph rioglyph-truck">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2115</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1005</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-1869</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1015</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1759,8 +1778,8 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2747</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1001</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3532</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1007</span>
                                                     </span>
                                                 </span>
                                             </div>
@@ -1771,14 +1790,104 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-trailer">
+                                                    <span class="rioglyph rioglyph-van">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5156</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3812</span>
                                                         <span class="TreeLabelNameTextSubline">Asset 1000</span>
                                                     </span>
                                                 </span>
                                             </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-truck">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5185</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1016</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9717">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-truck">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6538</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1017</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-van">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7129</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1008</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-bus">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7924</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1010</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9712">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-trailer">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-8111</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1012</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-trailer">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-9372</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1014</span>
+                                                    </span>
+                                                </span>
+                                            </div>
                                         </div>
                                         <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned">
                                             <div class="TreeNode from-group" data-key="unassigned">
@@ -1791,7 +1900,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Ungrouped</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">10</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>

package/dist/docs/components/appNavigationBar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Navigation
 *Source:* https://uikit.developers.rio.cloud/#components/appNavigationBar
-*Captured:* 2025-12-12T14:20:13.346Z
+*Captured:* 2026-01-07T12:11:10.227Z
 
 ## AppNavigationBar
 

package/dist/docs/components/areaCharts.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/areaCharts
-*Captured:* 2025-12-12T14:21:23.821Z
+*Captured:* 2026-01-07T12:12:20.105Z
 
 ## AreaChart
 
@@ -41,7 +41,7 @@ export default () => {
                     data={data}
                     dataKey={(entry: CustomData) => entry.name}
                     xAxisOptions={{ padding: { left: 30, right: 30 } }}
-                    areas={[<Area key='area' dataKey={entry => entry.value} />]}
+                    areas={[<Area key='area' dataKey={(entry: CustomData) => entry.value} />]}
                 />
             </div>
         </>
@@ -122,7 +122,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r3:">
-                                        <rect x="45" y="0" width="121.22393453963141" height="124">
+                                        <rect x="45" y="0" width="102.0384116723211" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -478,7 +478,7 @@ const data: CustomData[] = [
     <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
         <div style="width: 0px; height: 0px; overflow: visible;">
             <div width="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 268px;">
-                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(440.844px, 25px);">
                     <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                         <p class="recharts-tooltip-label" style="margin: 0px;">
                         </p>
@@ -562,7 +562,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:rg:">
-                                        <rect x="75" y="0" width="672.9312033270365" height="224">
+                                        <rect x="75" y="0" width="660.1873540818933" height="224">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -580,7 +580,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:rh:">
-                                        <rect x="75" y="0" width="672.9312033270365" height="224">
+                                        <rect x="75" y="0" width="660.1873540818933" height="224">
                                         </rect>
                                     </clipPath>
                                 </defs>