@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/fade.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#components/fade
-*Captured:* 2026-01-07T12:11:24.585Z
+*Captured:* 2026-02-03T14:04:26.307Z
 
 The Fade component fades in and out content with a given animation style.
 
@@ -148,14 +148,14 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | true | Defines whether to show the content or not. |
-| duration | Number | 0.2 | Duration of the fade animation in seconds. |
-| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
-| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
-| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
-| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
-| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
-| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+| show | boolean | true | Defines whether to show the content. |
+| duration | number | 0.2 | Duration of the fade animation in seconds. |
+| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |
+| animationStyle | 'fade' \| 'tabs' \| 'page' \| 'pageBack' \| 'fromLeft' \| 'fromRight' \| 'fromTop' \| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - fromRight - fromTop - fromBottom |
+| exitBeforeEnter | boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | VoidFunction | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | object | — | Additional custom props for the underlying Framer motion &lt;motion.div&gt; component. Use this for additional customizations. |
 
 ### Example: Example 2
 
@@ -263,14 +263,14 @@ const ContentTab2 = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | true | Defines whether to show the content or not. |
-| duration | Number | 0.2 | Duration of the fade animation in seconds. |
-| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
-| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
-| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
-| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
-| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
-| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+| show | boolean | true | Defines whether to show the content. |
+| duration | number | 0.2 | Duration of the fade animation in seconds. |
+| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |
+| animationStyle | 'fade' \| 'tabs' \| 'page' \| 'pageBack' \| 'fromLeft' \| 'fromRight' \| 'fromTop' \| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - fromRight - fromTop - fromBottom |
+| exitBeforeEnter | boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | VoidFunction | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | object | — | Additional custom props for the underlying Framer motion &lt;motion.div&gt; component. Use this for additional customizations. |
 
 ### Example: Example 3
 
@@ -392,14 +392,14 @@ const ContentTab2 = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | true | Defines whether to show the content or not. |
-| duration | Number | 0.2 | Duration of the fade animation in seconds. |
-| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
-| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
-| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
-| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
-| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
-| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+| show | boolean | true | Defines whether to show the content. |
+| duration | number | 0.2 | Duration of the fade animation in seconds. |
+| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |
+| animationStyle | 'fade' \| 'tabs' \| 'page' \| 'pageBack' \| 'fromLeft' \| 'fromRight' \| 'fromTop' \| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - fromRight - fromTop - fromBottom |
+| exitBeforeEnter | boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | VoidFunction | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | object | — | Additional custom props for the underlying Framer motion &lt;motion.div&gt; component. Use this for additional customizations. |
 
 ### Example: Example 4
 
@@ -570,14 +570,14 @@ const Content3 = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | true | Defines whether to show the content or not. |
-| duration | Number | 0.2 | Duration of the fade animation in seconds. |
-| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
-| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
-| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
-| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
-| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
-| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+| show | boolean | true | Defines whether to show the content. |
+| duration | number | 0.2 | Duration of the fade animation in seconds. |
+| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |
+| animationStyle | 'fade' \| 'tabs' \| 'page' \| 'pageBack' \| 'fromLeft' \| 'fromRight' \| 'fromTop' \| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - fromRight - fromTop - fromBottom |
+| exitBeforeEnter | boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | VoidFunction | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | object | — | Additional custom props for the underlying Framer motion &lt;motion.div&gt; component. Use this for additional customizations. |
 
 ### Example: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
@@ -826,11 +826,11 @@ const ItemDetails = ({ title = '', onBack }: { title: string | undefined; onBack
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | true | Defines whether to show the content or not. |
-| duration | Number | 0.2 | Duration of the fade animation in seconds. |
-| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
-| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
-| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
-| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
-| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
-| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+| show | boolean | true | Defines whether to show the content. |
+| duration | number | 0.2 | Duration of the fade animation in seconds. |
+| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |
+| animationStyle | 'fade' \| 'tabs' \| 'page' \| 'pageBack' \| 'fromLeft' \| 'fromRight' \| 'fromTop' \| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - fromRight - fromTop - fromBottom |
+| exitBeforeEnter | boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | VoidFunction | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | object | — | Additional custom props for the underlying Framer motion &lt;motion.div&gt; component. Use this for additional customizations. |

package/dist/docs/components/fadeExpander.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#components/fadeExpander
-*Captured:* 2026-01-07T12:11:21.775Z
+*Captured:* 2026-02-03T14:04:24.408Z
 
 The FadeExpander component fades in and expands when the content.
 
@@ -175,6 +175,6 @@ export default () => {
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | show | boolean | false | Defines if the content is shown or not. |
-| delay | Number | 0 | Defines the time the animation should wait until it starts. |
-| duration | Number | 0.2 | Defines the duration in seconds of the expand animation. |
-| className | String | — | Additional classes names added to the motion div wrapper. |
+| duration | number | 0.2 | Allows customization of animation duration. |
+| delay | number | 0 | Delay in seconds before starting the animation. |
+| className | string | — | Additional classes set to the wrapper element. |

package/dist/docs/components/fadeUp.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#components/fadeUp
-*Captured:* 2026-01-07T12:11:22.807Z
+*Captured:* 2026-02-03T14:04:25.440Z
 
 The FadeUp component fades in when the content appears on the screen. After it faded in, the element will stay on screen. This can be used in a scrolling scenario where elements should fade up when they scroll into view. Using the delay helps to stagger the animation.
 
@@ -143,7 +143,6 @@ export default () => {
     return (
         <div className='max-width-500 max-height-500 overflow-auto padding-x-25'>
             {Array.from({ length: 30 }, (_, index) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                 <FadeUp key={index} duration={0.5} delay={0.3}>
                     <div className='bg-white rounded border padding-25 margin-bottom-15'>{dummyText}</div>
                 </FadeUp>
@@ -284,10 +283,10 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| delay | Number | 0 | Defines the time the animation should wait until it starts. |
-| duration | Number | 0.4 | Defines the duration in seconds of the fade up animation. |
+| delay | number | 0 | Defines the time the animation should wait until it starts. |
+| duration | number | 0.4 | Defines the duration in seconds of the fade up animation. |
 | offset | number | 15 | Defines the y offset from the bottom where the element starts to fade in. |
-| className | String | — | Additional classes names added to the motion div wrapper. |
+| className | string | — | Additional classes names added to the motion div wrapper. |
 
 ### Example: 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.
 
@@ -338,7 +337,6 @@ export default () => {
 
             <FadeUp delay={1.3} className='display-grid grid-cols-1 grid-cols-3-md gap-15'>
                 {Array.from({ length: 3 }, (_, index) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                     <FadeUp key={index} delay={1.5 + index * 0.2}>
                         <div className='bg-white rounded border padding-25 margin-bottom-15'>{dummyTextShort}</div>
                     </FadeUp>
@@ -358,7 +356,7 @@ export default () => {
             <div class="" style="opacity: 1; transform: none;">
                 <h1 class="">Lorem ipsum dolor sit amet</h1>
             </div>
-            <div class="" style="opacity: 0; transform: translateY(0.0086581px);">
+            <div class="" style="opacity: 0; transform: translateY(15px);">
                 <p class="text-color-dark">
                     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.</p>
             </div>
@@ -390,7 +388,7 @@ data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI2NjYiIHhtbG5zPSJodH
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| delay | Number | 0 | Defines the time the animation should wait until it starts. |
-| duration | Number | 0.4 | Defines the duration in seconds of the fade up animation. |
+| delay | number | 0 | Defines the time the animation should wait until it starts. |
+| duration | number | 0.4 | Defines the duration in seconds of the fade up animation. |
 | offset | number | 15 | Defines the y offset from the bottom where the element starts to fade in. |
-| className | String | — | Additional classes names added to the motion div wrapper. |
+| className | string | — | Additional classes names added to the motion div wrapper. |

package/dist/docs/components/feedback.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/feedback
-*Captured:* 2026-01-07T12:11:53.524Z
+*Captured:* 2026-02-03T14:05:00.092Z
 
 ## FeedbackRating
 
@@ -291,15 +291,16 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| headline | ReactNode | — | Optional headline |
-| circleButtons | Boolean | false | Defines whether the buttons are round. |
-| buttonClassName | String | — | Optional class names applied to the individual buttons. |
-| buttonLabels | ReactNode[] | — | Array of button labels that will be used instead of the index. There needs to be a label for each button defined. |
-| buttonStyles | { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT, className?: string }[] | — | Array of button styles to individually define the button size, style and variant. There needs to be a item for each button defined. See Button component. |
-| leftLabel | ReactNode | — | Left aligned label to name the lowest rating option. |
-| rightLabel | ReactNode | — | Right aligned label to name the highest rating option. |
-| leadingIcon | ReactNode | — | Additional icon placed in front of the rating buttons. |
-| trailingIcon | ReactNode | — | Additional icon placed after the rating buttons. |
+| headline | React.ReactNode | — | Optional headline |
+| count | number | 1 | The amount of toggle buttons used to rate. |
+| circleButtons | boolean | false | Defines whether the buttons are round. |
+| buttonClassName | string | — | Optional class names applied to all the buttons. If you need more control on styling individual buttons, see buttonStyles. |
+| buttonLabels | React.ReactNode[] | — | Array of button labels that will be used instead of the index. There needs to be a label for each button defined. |
+| buttonStyles | { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT; className?: string; }[] | — | Array of button styles to individually define the button size, style and variant. There needs to be a item for each button defined. |
+| leftLabel | React.ReactNode | — | Left aligned label to name the lowest rating option. |
+| rightLabel | React.ReactNode | — | Right aligned label to name the highest rating option. |
+| leadingIcon | React.ReactNode | — | Additional icon placed in front of the rating buttons. |
+| trailingIcon | React.ReactNode | — | Additional icon placed after the rating buttons. |
 | onRatingChanged | (rating: number \| undefined) => void | — | Callback triggered when the rating changes. |
 
 ## FeedbackInlineButtons
@@ -532,8 +533,8 @@ const CustomInlineButton = (props: CustomInlineButtonProps) => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| headline | ReactNode | — | Optional headline |
-| buttons | ReactNode[] | — | List of buttons to be shown. |
+| headline | React.ReactNode | — | Optional headline inlined with the buttons. |
+| buttons | React.ReactNode[] | — | List of buttons to be shown. |
 
 ## FeedbackReactions
 
@@ -743,15 +744,15 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| headline | ReactNode | — | Optional headline |
-| size | "sm" \| "md" | — | Size of the reaction buttons. |
-| labelPosition | "bottom" \| "right" | bottom | Position of the reaction button labels. |
-| labelUp | ReactNode | — | Label for the up button. |
-| labelDown | ReactNode | — | Label for the down button. |
-| colorFillUp | string | bg-lightest | Custom fill color for the up button. |
-| colorFillDown | string | bg-lightest | Custom fill color for the down button. |
-| colorHoverUp | string | primary | Custom hover color for the up button. |
-| colorHoverDown | string | primary | Custom hover color for the down button. |
+| headline | React.ReactNode | — | Optional headline inlined with the buttons. |
+| size | 'sm' \| 'md' | 'md' | Size of the reaction buttons. |
+| labelPosition | 'right' \| 'bottom' | 'bottom' | Position of the reaction button labels. |
+| labelUp | React.ReactNode | — | Label for the up button. |
+| labelDown | React.ReactNode | — | Label for the down button. |
+| colorFillUp | string | 'bg-lightest' | Custom fill color for the up button. |
+| colorFillDown | string | 'bg-lightest' | Custom fill color for the down button. |
+| colorHoverUp | string | 'primary' | Custom hover color for the up button. |
+| colorHoverDown | string | 'primary' | Custom hover color for the down button. |
 | onVoteUp | VoidFunction | — | Callback function triggered on up vote. |
 | onVoteDown | VoidFunction | — | Callback function triggered on down vote. |
 | itemClassName | string | — | Additional classes applied to the individual reaction item (button and label). |

package/dist/docs/components/filePickers.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Pickers
 *Source:* https://uikit.developers.rio.cloud/#components/filePickers
-*Captured:* 2026-01-07T12:11:31.883Z
+*Captured:* 2026-02-03T14:04:36.027Z
 
 ## FilePicker
 
@@ -98,15 +98,15 @@ export default FilePickerExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |
-| multiple | Boolean | true | Indicating if multiple files may be selected. |
-| label | String / Node | Select Files | Text to display on Button if displayMode is set to "button". |
-| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |
-| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
-| onPick | (files: FileList \| null) => void | () => {} | Callback function after one or multiple files have been picked. |
+| displayMode | 'button' \| 'dropzone' \| 'full' | 'button' | Defines the file picker display mode. Possible values are 'button' for a single button, 'dropzone' for a custom dropzone passed as child function, or 'full' for showing both. |
+| multiple | boolean | true | Indicating if multiple files may be selected. |
+| label | string \| ReactNode | 'Select files' | Text to display on Button if displayMode is set to "button". |
+| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
+| onPick | (files: File[], rejectedFiles: FileRejection[]) => void | — | Function called after one or multiple files have been picked. |
+| className | string | — | Additional classes for the select button. |
 | fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
-| className | String | — | Additional classes for the select button. |
-| children | ({ isDragActive }: FilePickerRenderProps) => any | — | Pass a custom dropzone element as function receiving some render props. |
+| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |
+| children | ({ isDragActive }: FilePickerRenderProps) => React.ReactElement | — | Pass a custom dropzone element as function receiving some render props. |
 
 ### Example: Example 2
 
@@ -225,15 +225,15 @@ export default FilePickerWithDropzoneExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |
-| multiple | Boolean | true | Indicating if multiple files may be selected. |
-| label | String / Node | Select Files | Text to display on Button if displayMode is set to "button". |
-| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |
-| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
-| onPick | (files: FileList \| null) => void | () => {} | Callback function after one or multiple files have been picked. |
+| displayMode | 'button' \| 'dropzone' \| 'full' | 'button' | Defines the file picker display mode. Possible values are 'button' for a single button, 'dropzone' for a custom dropzone passed as child function, or 'full' for showing both. |
+| multiple | boolean | true | Indicating if multiple files may be selected. |
+| label | string \| ReactNode | 'Select files' | Text to display on Button if displayMode is set to "button". |
+| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
+| onPick | (files: File[], rejectedFiles: FileRejection[]) => void | — | Function called after one or multiple files have been picked. |
+| className | string | — | Additional classes for the select button. |
 | fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
-| className | String | — | Additional classes for the select button. |
-| children | ({ isDragActive }: FilePickerRenderProps) => any | — | Pass a custom dropzone element as function receiving some render props. |
+| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |
+| children | ({ isDragActive }: FilePickerRenderProps) => React.ReactElement | — | Pass a custom dropzone element as function receiving some render props. |
 
 ### Example: You have no file selected yet
 
@@ -359,12 +359,12 @@ export default FilePickerDocumentExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |
-| multiple | Boolean | true | Indicating if multiple files may be selected. |
-| label | String / Node | Select Files | Text to display on Button if displayMode is set to "button". |
-| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |
-| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
-| onPick | (files: FileList \| null) => void | () => {} | Callback function after one or multiple files have been picked. |
+| displayMode | 'button' \| 'dropzone' \| 'full' | 'button' | Defines the file picker display mode. Possible values are 'button' for a single button, 'dropzone' for a custom dropzone passed as child function, or 'full' for showing both. |
+| multiple | boolean | true | Indicating if multiple files may be selected. |
+| label | string \| ReactNode | 'Select files' | Text to display on Button if displayMode is set to "button". |
+| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
+| onPick | (files: File[], rejectedFiles: FileRejection[]) => void | — | Function called after one or multiple files have been picked. |
+| className | string | — | Additional classes for the select button. |
 | fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
-| className | String | — | Additional classes for the select button. |
-| children | ({ isDragActive }: FilePickerRenderProps) => any | — | Pass a custom dropzone element as function receiving some render props. |
+| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |
+| children | ({ isDragActive }: FilePickerRenderProps) => React.ReactElement | — | Pass a custom dropzone element as function receiving some render props. |

package/dist/docs/components/formLabel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/formLabel
-*Captured:* 2026-01-07T12:11:39.829Z
+*Captured:* 2026-02-03T14:04:44.843Z
 
 A small convenience component for a form label or just a label style used without a form element.
 
@@ -151,9 +151,8 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| htmlFor | string | — | Used for form elements. If given the tag will be set to "label", otherwise it uses a "div". |
-| supportingText | String / Node | — | Additional supporting text displayed next to the label. |
-| className | string | — | Additional classes to be set on the wrapper element. |
+| supportingText | string \| React.ReactElement | — | Additional supporting text displayed next to the label. |
+| className | string | — | Additional classes set to the outer element. |
 
 ### Example: A label for some large buttons
 
@@ -246,6 +245,5 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| htmlFor | string | — | Used for form elements. If given the tag will be set to "label", otherwise it uses a "div". |
-| supportingText | String / Node | — | Additional supporting text displayed next to the label. |
-| className | string | — | Additional classes to be set on the wrapper element. |
+| supportingText | string \| React.ReactElement | — | Additional supporting text displayed next to the label. |
+| className | string | — | Additional classes set to the outer element. |

package/dist/docs/components/groupedItemList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/groupedItemList
-*Captured:* 2026-01-07T12:11:41.217Z
+*Captured:* 2026-02-03T14:04:46.711Z
 
 ## GroupedItemList
 
@@ -388,18 +388,18 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| items | Array | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an "id" and "name" property plus some other attributes. |
-| groupBy | String / Function | — | The property of the items to group by, either as a string (e.g., "name") or a custom grouping function. If not provided, it defaults to grouping by "name". |
-| groupSortOrder | String | asc | Defines the sort order for groups. Accepts "asc" for ascending or "desc" for descending order. |
-| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts "asc" for ascending or "desc" for descending order. |
-| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |
-| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |
-| renderDivider | Function | — | Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider. |
-| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |
-| listElement | "div" \| "ul" | div | Specifies the HTML element to use for the list inside each group. Defaults to "div", but "ul" can be used if rendering list items as `<li>` elements. |
-| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items). |
-| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the `div` wrapping each group divider). |
-| className | String | — | Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component). |
+| items | T[] | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an id and name property plus some other attributes. |
+| groupBy | keyof T \| ((item: T) => string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |
+| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |
+| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |
+| groupSortFunction | (groups: Group[]) => Group[] | — | Sorting function for the groups. |
+| itemSortFunction | (items: T[]) => T[] | — | Sorting function for the items within each group. |
+| renderDivider | (groupKey: string) => React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |
+| renderItem | (item: T) => React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |
+| listElement | 'div' \| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <li> elements. |
+| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |
+| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |
+| className | string | — | Optional class name for the outer wrapper element. Applied to the outer div wrapping the entire component. |
 
 ### Example: Grouped by date
 
@@ -730,18 +730,18 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| items | Array | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an "id" and "name" property plus some other attributes. |
-| groupBy | String / Function | — | The property of the items to group by, either as a string (e.g., "name") or a custom grouping function. If not provided, it defaults to grouping by "name". |
-| groupSortOrder | String | asc | Defines the sort order for groups. Accepts "asc" for ascending or "desc" for descending order. |
-| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts "asc" for ascending or "desc" for descending order. |
-| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |
-| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |
-| renderDivider | Function | — | Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider. |
-| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |
-| listElement | "div" \| "ul" | div | Specifies the HTML element to use for the list inside each group. Defaults to "div", but "ul" can be used if rendering list items as `<li>` elements. |
-| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items). |
-| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the `div` wrapping each group divider). |
-| className | String | — | Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component). |
+| items | T[] | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an id and name property plus some other attributes. |
+| groupBy | keyof T \| ((item: T) => string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |
+| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |
+| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |
+| groupSortFunction | (groups: Group[]) => Group[] | — | Sorting function for the groups. |
+| itemSortFunction | (items: T[]) => T[] | — | Sorting function for the items within each group. |
+| renderDivider | (groupKey: string) => React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |
+| renderItem | (item: T) => React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |
+| listElement | 'div' \| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <li> elements. |
+| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |
+| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |
+| className | string | — | Optional class name for the outer wrapper element. Applied to the outer div wrapping the entire component. |
 
 ### Example: Example 3
 
@@ -987,15 +987,15 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| items | Array | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an "id" and "name" property plus some other attributes. |
-| groupBy | String / Function | — | The property of the items to group by, either as a string (e.g., "name") or a custom grouping function. If not provided, it defaults to grouping by "name". |
-| groupSortOrder | String | asc | Defines the sort order for groups. Accepts "asc" for ascending or "desc" for descending order. |
-| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts "asc" for ascending or "desc" for descending order. |
-| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |
-| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |
-| renderDivider | Function | — | Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider. |
-| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |
-| listElement | "div" \| "ul" | div | Specifies the HTML element to use for the list inside each group. Defaults to "div", but "ul" can be used if rendering list items as `<li>` elements. |
-| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items). |
-| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the `div` wrapping each group divider). |
-| className | String | — | Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component). |
+| items | T[] | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an id and name property plus some other attributes. |
+| groupBy | keyof T \| ((item: T) => string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |
+| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |
+| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |
+| groupSortFunction | (groups: Group[]) => Group[] | — | Sorting function for the groups. |
+| itemSortFunction | (items: T[]) => T[] | — | Sorting function for the items within each group. |
+| renderDivider | (groupKey: string) => React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |
+| renderItem | (item: T) => React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |
+| listElement | 'div' \| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <li> elements. |
+| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |
+| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |
+| className | string | — | Optional class name for the outer wrapper element. Applied to the outer div wrapping the entire component. |

package/dist/docs/components/iconList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#components/iconList
-*Captured:* 2026-01-07T12:12:02.576Z
+*Captured:* 2026-02-03T14:05:10.389Z
 
 The timeline component is a pure CSS component.
 
@@ -86,19 +86,19 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
         </div>
         <ul class="icon-list margin-bottom-0">
             <li>
-                <span class="rioglyph rioglyph-van margin-top--1">
+                <span class="rioglyph rioglyph-driver margin-top--1">
                 </span>
                 <span>
                     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.</span>
             </li>
             <li>
-                <span class="rioglyph rioglyph-user margin-top--1">
+                <span class="rioglyph rioglyph-car margin-top--1">
                 </span>
                 <span>
                     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.</span>
             </li>
             <li>
-                <span class="rioglyph rioglyph-car margin-top--1">
+                <span class="rioglyph rioglyph-van margin-top--1">
                 </span>
                 <span>
                     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.</span>

package/dist/docs/components/imagePreloader.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/imagePreloader
-*Captured:* 2026-01-07T12:11:52.742Z
+*Captured:* 2026-02-03T14:04:58.632Z
 
 Use the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.
 
@@ -160,8 +160,8 @@ const failedImageExample = (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| src | String | — | The source location for the image to load. |
-| onLoaded | (image: HTMLImageElement) => void | () => {} | Invoked when the image is loaded. The image object will be passed as argument. |
-| onFailed | (image: HTMLImageElement) => void | () => {} | Invoked when the image failed to load. The image object will be passed as argument. |
-| isAnonymous | Boolean | false | Defines whether to set "crossOrigin" to "Anonymous" or not. |
-| children | (props: { status: ImagePreloaderStatus; image: HTMLImageElement }) => JSX.Element \| null | — | A render function can be used to access both the current state and the image element. Using this, you can decide how to render the different states and/or the loaded image. The function will receive props containing the status and image properties. status will be one of 'PENDING', 'FAILED' or 'LOADED'. image is the Image element. |
+| src | string | — | The URL of the image to load. |
+| onLoaded | (image: HTMLImageElement) => void | — | Invoked when the image is loaded. |
+| onFailed | (image: HTMLImageElement) => void | — | Invoked when the image failed to load. |
+| isAnonymous | boolean | false | Whether to set the "crossOrigin" to "anonymous". |
+| children | (props: { status: ImagePreloaderStatus; image: HTMLImageElement; }) => JSX.Element \| null | — | A render function can be used to access both the current state and the image element. Using this, you can decide how to render the different states and/or the loaded image. The function will receive props containing the status and image properties. status will be one of PENDING, FAILED or LOADED. image is the Image element. |

package/dist/docs/components/labeledElement.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/labeledElement
-*Captured:* 2026-01-07T12:11:41.188Z
+*Captured:* 2026-02-03T14:04:46.382Z
 
 A simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.
 
@@ -110,6 +110,7 @@ export default () => (
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | label | string \| React.ReactElement | — | The text to display for the label. |
-| labelProps | FormLabelProps | — | Additional props for the FormLabel, excluding children and htmlFor. |
+| htmlFor | string | — | Optional ID of the element associated with the label. |
+| labelProps | Omit<FormLabelProps, 'children'> | — | Additional props for the FormLabel, excluding children and htmlFor. |
 | noGap | boolean | false | If true, removes the bottom margin from the label. |
-| className | String | — | Additional classes to be set on the wrapper element. |
+| className | string | — | Additional classes for styling the wrapper. |