@rio-cloud/uikit-mcp 1.1.4 → 1.1.5

package/dist/docs/components/statsWidgets.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/statsWidgets
-*Captured:* 2026-01-14T09:07:36.188Z
+*Captured:* 2026-02-03T14:04:52.361Z
 
 ## StatsWidgets
 
@@ -319,6 +319,46 @@ export default () => (
 </div>
 ```
 
+#### Props: StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidget
+
+### StatsWidget
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |
+| hasFilter | boolean | false | Defines whether a filter is active for this widget. |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidgetBody
+
+### StatsWidgetBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidgetNumber
+
+### StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string \| number \| ReactNode | 0 | The value to be shown. |
+| total | string \| number \| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |
+| label | string \| ReactNode | — | The label shown below the number. |
+| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |
+| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |
+| className | string | — | Additional class names to be added to the element. |
+
 ### Example: Example 2
 
 Current activity
@@ -409,6 +449,46 @@ export default () => (
 </div>
 ```
 
+#### Props: StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidget
+
+### StatsWidget
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |
+| hasFilter | boolean | false | Defines whether a filter is active for this widget. |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidgetBody
+
+### StatsWidgetBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidgetNumber
+
+### StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string \| number \| ReactNode | 0 | The value to be shown. |
+| total | string \| number \| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |
+| label | string \| ReactNode | — | The label shown below the number. |
+| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |
+| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |
+| className | string | — | Additional class names to be added to the element. |
+
 ### Example: Example 3
 
 Notifications
@@ -522,4 +602,44 @@ export default () => {
         </div>
     </div>
 </div>
-```
+```
+
+#### Props: StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidget
+
+### StatsWidget
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |
+| hasFilter | boolean | false | Defines whether a filter is active for this widget. |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidgetBody
+
+### StatsWidgetBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |
+| className | string | — | Additional class names to be added to the element. |
+
+#### Props: StatsWidgetNumber
+
+### StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string \| number \| ReactNode | 0 | The value to be shown. |
+| total | string \| number \| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |
+| label | string \| ReactNode | — | The label shown below the number. |
+| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |
+| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |
+| className | string | — | Additional class names to be added to the element. |

package/dist/docs/components/statusBar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#components/statusBar
-*Captured:* 2026-01-14T09:07:23.120Z
+*Captured:* 2026-02-03T14:04:36.984Z
 
 Flexible component to showcase various states based on progress bars.
 
@@ -615,4 +615,30 @@ export default () => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | StatusBarIcon | — | The icon to be shown next to the progress bar. |
+| └name | string | — | The class name of the icon i.e. "rioglyph-cruise-control". |
+| └alignment | 'left' \| 'right' | 'left' | The position of the icon. |
+| └color | string | 'text-color-gray' | The text color class name for the icon. |
+| └className | string | — | Optional class names for the icon. |
+| label | StatusBarLabel | — | The label to be shown for the progress bar. |
+| └value | string \| React.ReactNode | — | The label content. |
+| └alignment | 'left' \| 'top' \| 'right' | 'right' | The position of the icon. |
+| └weight | 'light' \| 'bold' | 'bold' | The text weight of the label. |
+| └color | string | 'text-color-gray' | The text color class name for the label. |
+| └className | string | — | Optional class names for the label. |
+| progress | StatusBarProgress[] | — | List of progress bars which will be stacked in given order if there are multiple. |
+| └percentage | number | 0 | The percentage of the progress. |
+| └color | string | 'progress-bar-info' | The color class name for the label. |
+| └tooltip | string \| React.ReactNode | — | Optional tooltip content to be shown for the progress bar. |
+| └tooltipPosition | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | The position of the tooltip for the progress bar. |
+| └tooltipDelay | number | 50 | The delay in milliseconds for when the tooltip is shown when hovering the progress bar. |
+| └className | string | — | Optional class names for the progress bar. |
+| size | 'small' \| 'large' | 'small' | The size of the icon and progress bar. Possible values are: 'small' 'large' |
+| useProgressDivider | boolean | true | Uses a divider for multiple progress bars when defined. |
+| className | string | — | Optional class names for the wrapper element. |

package/dist/docs/components/stepButton.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/stepButton
-*Captured:* 2026-01-14T09:07:03.860Z
+*Captured:* 2026-02-03T14:04:18.368Z
 
 The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.
 
@@ -52,4 +52,10 @@ export default () => (
             </span>Next</button>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| direction | 'next' \| 'previous' | 'next' | Defines the chevron icon for the respective direction. |

package/dist/docs/components/steppedProgressBars.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#components/steppedProgressBars
-*Captured:* 2026-01-14T09:07:25.434Z
+*Captured:* 2026-02-03T14:04:39.685Z
 
 ## SteppedProgressBar - Circle
 
@@ -227,6 +227,22 @@ const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | string \| ReactNode | — | The label shown below the step element. |
+| └labelClassName | string | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | number | — | Index of the selected navigation item. |
+| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
+| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
+| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
 ## SteppedProgressBar - Rectangle
 
 ### Example: Example 2
@@ -463,6 +479,22 @@ const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | string \| ReactNode | — | The label shown below the step element. |
+| └labelClassName | string | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | number | — | Index of the selected navigation item. |
+| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
+| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
+| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
 ## SteppedProgressBar - Rectangle with custom content
 
 ### Example: Example 3
@@ -766,6 +798,22 @@ const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | string \| ReactNode | — | The label shown below the step element. |
+| └labelClassName | string | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | number | — | Index of the selected navigation item. |
+| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
+| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
+| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
 ## SteppedProgressBar - Road Sign
 
 ### Example: Example 4
@@ -997,4 +1045,20 @@ const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | string \| ReactNode | — | The label shown below the step element. |
+| └labelClassName | string | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | number | — | Index of the selected navigation item. |
+| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
+| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
+| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
+| className | string | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/subNavigation.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Navigation
 *Source:* https://uikit.developers.rio.cloud/#components/subNavigation
-*Captured:* 2026-01-14T09:06:55.741Z
+*Captured:* 2026-02-03T14:04:08.677Z
 
 ## SubNavigation
 
@@ -76,6 +76,13 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| navItems | ModulePropType[] | — | List of navigation items with key and route prop. The route prop is a react-router NavLink component with an active style. |
+| className | string | — | Additional classes for the wrapper element. |
+
 ## SubNavigation with offset
 
 ### Example: Example 2

package/dist/docs/components/supportMarker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/supportMarker
-*Captured:* 2026-01-14T09:07:50.269Z
+*Captured:* 2026-02-03T14:05:06.241Z
 
 You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!
 

package/dist/docs/components/svgImage.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/svgImage
-*Captured:* 2026-01-14T09:07:51.711Z
+*Captured:* 2026-02-03T14:05:07.374Z
 
 This component helps to render SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes. It uses the defined UIKIT CSS variables to automatically adapt to dark mode. When customizing colors, make sure to use existing CSS color variable names.
 
@@ -106,42 +106,6 @@ export default () => (
             </path>
         </g>
     </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="120" height="120" viewBox="0 0 250 250" version="1.1" xml:space="preserve" class="" style="fill-rule: evenodd; clip-rule: evenodd; stroke-miterlimit: 2;">
-        <g id="abstract-product" transform="matrix(3.96558,0,0,3.96558,-877.753,-267.258)">
-            <path d="M273.364,103.915C273.364,116.618 263.066,126.915 250.364,126.915C237.662,126.915 227.364,116.618 227.364,103.915C227.364,91.213 237.662,80.916 250.364,80.916C263.066,80.916 273.364,91.213 273.364,103.915Z" style="fill: var(--gray-lighter); fill-rule: nonzero;">
-            </path>
-            <path d="M229.364,79.916L229.364,85.916" style="fill: none; stroke: var(--gray); stroke-width: 2.1px;">
-            </path>
-            <path d="M232.364,82.916L226.364,82.916" style="fill: none; stroke: var(--gray); stroke-width: 2.1px;">
-            </path>
-            <path d="M240.364,69.916L240.364,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.1px;">
-            </path>
-            <path d="M243.364,72.916L237.364,72.916" style="fill: none; stroke: var(--gray); stroke-width: 2.1px;">
-            </path>
-            <path d="M269.133,103.237L263.251,106.027L262.929,106.149C262.512,105.406 261.802,104.915 260.814,104.915L254.814,104.915C253.439,104.915 251.348,102.915 249.692,102.915L243.814,102.915C241.397,102.915 239.238,104.894 238.021,106.027C236.141,107.907 232.364,111.703 232.364,111.703L241.556,120.905C243.059,119.403 244.829,117.915 246.364,117.915L258.364,117.915C260.237,117.915 262.101,117.34 263.425,116.016L273.376,106.065L276.205,98.995C274.481,97.271 270.547,99.113 269.133,103.237Z" style="fill: var(--color-white); fill-rule: nonzero;">
-            </path>
-            <path d="M250.364,110.915L260.814,110.915C262.471,110.915 263.364,109.61 263.364,107.954L263.364,107.935C263.364,106.277 262.471,104.915 260.814,104.915L254.814,104.915C253.439,104.915 251.348,102.915 249.692,102.915L243.814,102.915C241.397,102.915 239.238,104.894 238.021,106.027C236.141,107.907 232.364,111.703 232.364,111.703L241.556,120.905C243.059,119.403 244.829,117.915 246.364,117.915L258.364,117.915C260.237,117.915 262.101,117.34 263.425,116.016L273.376,106.065L276.205,98.995C274.481,97.271 270.547,99.113 269.133,103.237L263.251,106.027" style="fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;">
-            </path>
-            <path d="M231.364,108.915L225.364,114.915L238.364,127.915L244.363,121.915L231.364,108.915Z" style="fill: var(--color-highlight-lighter); fill-rule: nonzero;">
-            </path>
-            <path d="M231.364,108.915L225.364,114.915L238.364,127.915L244.363,121.915L231.364,108.915Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linejoin: round;">
-            </path>
-            <path d="M232.911,116.368L230.911,114.368" style="fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;">
-            </path>
-            <path d="M266.138,82.263L257.884,75.646C257.627,75.44 257.187,75.342 256.808,75.479L247.08,79.268C246.64,79.355 246.28,79.7 246.21,80.169L244.687,90.446C244.623,90.904 244.7,91.377 245.031,91.643L253.286,98.26C253.603,98.515 253.846,98.674 254.163,98.552L264.147,94.671C264.685,94.462 264.911,94.235 264.984,93.74L266.536,83.275C266.582,82.962 266.428,82.495 266.138,82.263Z" style="fill: var(--color-highlight-lighter); fill-rule: nonzero;">
-            </path>
-            <path d="M266.138,82.263L257.884,75.646C257.627,75.44 257.187,75.342 256.808,75.479L247.08,79.268C246.64,79.355 246.28,79.7 246.21,80.169L244.687,90.446C244.623,90.904 244.7,91.377 245.031,91.643L253.286,98.26C253.603,98.515 253.846,98.674 254.163,98.552L264.147,94.671C264.685,94.462 264.911,94.235 264.984,93.74L266.536,83.275C266.582,82.962 266.428,82.495 266.138,82.263Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.1px;">
-            </path>
-            <path d="M256.605,78.558L255.223,86.846L248.116,89.437" style="fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;">
-            </path>
-            <path d="M255.223,86.846L262.06,92.26" style="fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;">
-            </path>
-            <path d="M277.364,87.916L277.364,93.916" style="fill: none; stroke: var(--gray); stroke-width: 2.1px;">
-            </path>
-            <path d="M280.364,90.916L274.364,90.916" style="fill: none; stroke: var(--gray); stroke-width: 2.1px;">
-            </path>
-        </g>
-    </svg>
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="120" height="120" viewBox="0 0 250 250" version="1.1" xml:space="preserve" class="" style="fill-rule: evenodd; clip-rule: evenodd; stroke-miterlimit: 2;">
         <g transform="matrix(3.83333,0,0,3.83333,-417.263,-254.174)">
             <g id="delivery">
@@ -235,4 +199,14 @@ export default () => (
         </g>
     </svg>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | string | — | The name of the image file without extension. |
+| size | number | 150 | The height and width of the SVG image in pixels. |
+| baseUrl | string | 'https://cdn.rio.cloud/riosvg' | The CDN base URL where the images are located. |
+| colorMap | ColorOverridesMap | — | Customize color using the color map and define the CSS variable name that shall be used. |
+| className | string | — | Additional class names added to the SVG element. |

package/dist/docs/components/switch.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/switch
-*Captured:* 2026-01-14T09:07:06.086Z
+*Captured:* 2026-02-03T14:04:20.481Z
 
 ## Switch
 
@@ -542,4 +542,13 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| color | string | — | — |
+| keyName | string | — | Optional key that is used as key and as the id on the internal input. |
+| onChange | (toggleState: boolean) => void | — | Callback function triggered when clicking the button. |
+| checked | boolean | false | Set active / inactive state. |
+| color | string | 'primary' | Defines the color of the switch. Possible values are: 'primary' 'secondary' 'info' 'success' 'warning' 'danger' |
+| minWidth | number | 40 | The min-width of the switch. |
+| disabled | boolean | false | Disables the component. |
+| enabledText | string | — | The text used for the ON state. |
+| disabledText | string | — | The text used for the OFF state. |
+| labelPosition | 'left' \| 'right' | — | Defines the position of the switch label. Defaults to 'right' when children are present. Possible values are 'left' and 'right'. |
+| className | string | — | Additional class names added to the SVG element. |

package/dist/docs/components/tables.md

@@ -3,6 +3,6 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/tables
-*Captured:* 2026-01-14T09:07:35.439Z
+*Captured:* 2026-02-03T14:04:50.602Z
 
 The toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.

package/dist/docs/components/tagManager.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/tagManager
-*Captured:* 2026-01-14T09:07:53.401Z
+*Captured:* 2026-02-03T14:05:09.350Z
 
 The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.
 
@@ -155,6 +155,24 @@ export default () => {
 </div>
 ```
 
+#### Props (json)
+
+```json
+[
+ {
+     label: 'Foo',
+ },
+ {
+     label: 'Bar',
+     toAdd: true,
+ },
+ {
+     label: 'Lorem ipsum',
+     toRemove: true,
+ }
+]
+```
+
 ### Example: Example 2
 
 Lorem
@@ -257,6 +275,24 @@ export default () => {
 </div>
 ```
 
+#### Props (json)
+
+```json
+[
+ {
+     label: 'Foo',
+ },
+ {
+     label: 'Bar',
+     toAdd: true,
+ },
+ {
+     label: 'Lorem ipsum',
+     toRemove: true,
+ }
+]
+```
+
 ### Example: Fleet groups
 
 Fleet groups
@@ -419,4 +455,22 @@ export default () => {
     </div>
     <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
 </div>
+```
+
+#### Props (json)
+
+```json
+[
+ {
+     label: 'Foo',
+ },
+ {
+     label: 'Bar',
+     toAdd: true,
+ },
+ {
+     label: 'Lorem ipsum',
+     toRemove: true,
+ }
+]
 ```

package/dist/docs/components/tags.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/tags
-*Captured:* 2026-01-14T09:07:53.247Z
+*Captured:* 2026-02-03T14:05:08.958Z
 
 ## Tag
 
@@ -753,4 +753,34 @@ export default () => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props: Tag
+
+### Tag
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | boolean | false | Defines if the tag is active. |
+| clickable | boolean | false | Defines if the tag is clickable. |
+| deletable | boolean | false | Defines if the tag is deletable. |
+| revertable | boolean | false | Defines if the tag is revertable. |
+| disabled | boolean | false | Defines if the tag is disabled. |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| muted | boolean | false | Sets a more subtle style for border and background. |
+| round | boolean | true | Defines if the tag is round. |
+| selectable | boolean | false | Defines if the tag is selectable. |
+| size | 'small' \| 'medium' | — | Defines if you want to render the tag in a different size. Possible values are: 'small' and 'medium' |
+| multiline | boolean | false | Allows to render text on multiple lines. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
+#### Props: TagList
+
+### TagList
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| inline | boolean | true | Defines if the tag list is rendered inline or vertically. |
+| autoTagWidth | boolean | false | Defines if the tag has the same with as it`s parent container. |
+| tagsPerRow | 1 \| 2 \| 3 \| 4 \| 6 | — | Possible values are 1-6 |
+| className | string | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/teaser.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/teaser
-*Captured:* 2026-01-14T09:07:37.056Z
+*Captured:* 2026-02-03T14:04:52.277Z
 
 The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.
 
@@ -894,4 +894,31 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| teaserPerRow | number | — | — |
+| teaserPerRow | number | — | Defines how many children are rendered into a row. If "teaserPerRow" is not defined, the container tries to put all children in a row with regard to the Bootstrap grid. This is done by dividing the amount of children by 12 in order to figure out the col grid classes. It is recommended to define "teasersPerRow" when having more than 4 teasers. Possible values are: 1 2 3 4 6 12 |
+| columnClassName | string | — | Optional string for additional classes added to each column of a child. |
+| className | string | — | Optional string for additional classes added to the row. |
+
+#### Props: Teaser
+
+### Teaser
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| headline | string \| React.ReactNode | — | The headline for the teaser. |
+| content | string \| React.ReactNode | — | The actual content to show e.g. some kind of text. |
+| image | TeaserImage | — | Defines an image to render. |
+| └src | string | — | The src URL for the image. |
+| └alt | string | — | The alternate text for the image. |
+| └align | 'left' \| 'right' | — | Defines whether the image is on the left or right side of the component. Possible values are: 'left' and 'right'. |
+| └onClick | VoidFunction | — | Callback function for the image. |
+| └aspectRatio | '1:1' \| '3:1' \| '3:2' \| '16:9' | — | Ratio of the transparent image placeholder. Possible values are '1:1', '3:1', '3:2' and '16:9'. |
+| └className | string | — | Additional classes added to the image wrapper. |
+| button | TeaserButton | — | Defines a button to render with. |
+| └text | string \| React.ReactNode | — | The text content for the button. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The button style. See the button styles definition for possible values. |
+| └onClick | (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function for the button. |
+| └className | string | — | Additional classes added to the button. |
+| verticalAlignment | 'top' \| 'center' | 'top' | Defines where the teaser content is aligned including headline and image. Possible values are: 'top' and 'center'. |
+| segmentation | '50' \| '25:75' \| '75:25' \| '100' | — | Defines how the teaser content is segmented. Possible values are: '50', '25:75', '75:25' and '100'. |
+| footer | string \| React.ReactNode | — | Optional content for footer in case the prop "button" is not sufficient. |
+| className | string | — | Additional classes added to the wrapper. |

package/dist/docs/components/timeline.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#components/timeline
-*Captured:* 2026-01-14T09:07:54.694Z
+*Captured:* 2026-02-03T14:05:10.817Z
 
 The timeline component is a pure CSS component.