@rio-cloud/uikit-mcp 1.1.4 → 1.1.5

package/dist/docs/components/accentBar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/accentBar
-*Captured:* 2026-01-14T09:07:40.925Z
+*Captured:* 2026-02-03T14:04:55.940Z
 
 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.
 
@@ -75,6 +75,14 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |
+
 ### Example: Example 2
 
 StatusLocationETA
@@ -220,6 +228,14 @@ const getStatusColor = (status: string) => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |
+
 ### Example: Example 3
 
 Visualizing rating distribution
@@ -421,6 +437,14 @@ const getStatusColor = (status: string) => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |
+
 ### Example: Example 4
 
 Risk levelReasonSuggested action
@@ -547,4 +571,12 @@ const getRiskColor = (riskLevel: string) => {
         </tbody>
     </table>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |

package/dist/docs/components/activity.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/activity
-*Captured:* 2026-01-14T09:07:39.453Z
+*Captured:* 2026-02-03T14:04:54.335Z
 
 ## Activity
 
@@ -316,4 +316,15 @@ export default () => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| activity | ActivityStatus | — | Defines the type of activity. Possible values are Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING. |
+| bsSize | ActivitySize | — | Define how large the component should be rendered. Possible values are Activity.SIZE_SM, Activity.SIZE_LG or Activity.SIZE_XL. |
+| duration | string \| ReactNode | — | The actual duration value to be shown. |
+| isOutdated | boolean | false | Indicates whether the activity is outdated. |
+| onClick | VoidFunction | — | Callback function for when the component is clicked. |
+| className | string | — | Additional classes for the wrapper element. |

package/dist/docs/components/animatedNumber.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animatedNumber
-*Captured:* 2026-01-14T09:07:23.607Z
+*Captured:* 2026-02-03T14:04:38.677Z
 
 ## AnimatedNumber
 
@@ -59,7 +59,7 @@ export default () => (
 <div>
     <label>Default AnimatedNumber</label>
     <div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
-        <span class="">25</span>
+        <span class="">24</span>
     </div>
     <label>AnimatedNumber with prefix and unit</label>
     <div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">
@@ -72,4 +72,17 @@ export default () => (
         <span class="margin-left-3">remaining.</span>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| start | number | — | The start value. |
+| end | number | — | The end value. |
+| prefix | string | — | A prefix to be added to the final string. |
+| unit | string | — | A unit suffix to be added to the final string. |
+| speed | number | 10 | The speed in milliseconds to count up or down. |
+| decreasing | boolean | false | Enables to count backwards. |
+| onEnd | VoidFunction | — | Callback function to be invoked when the end value is reached. |
+| className | string | — | Additional classes to be set on the wrapping element. |

package/dist/docs/components/animatedTextReveal.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animatedTextReveal
-*Captured:* 2026-01-14T09:07:25.378Z
+*Captured:* 2026-02-03T14:04:39.333Z
 
 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.300372; transform: translateY(8.92559px);">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.331249; transform: translateY(8.78522px);">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.300372; transform: translateY(8.92559px);">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.331249; transform: translateY(8.78522px);">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.29169px);">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.36812px);">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.29169px);">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.36812px);">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.29169px);">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.36812px);">Continue</div>
                 </div>
             </button>
         </div>
@@ -181,6 +181,29 @@ export default () => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| text | string \| string[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |
+| duration | number | 0.4 | Reveal animation duration in seconds. |
+| delay | number | 0 | Reveal animation delay before starting, in seconds. |
+| interval | number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |
+| distance | number | 10 | Vertical offset in pixels from which the text reveals upward. |
+| ease | 'linear' \| 'easeIn' \| 'easeOut' \| 'easeInOut' | 'easeOut' | Easing function applied to the reveal motion. |
+| startOnView | boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |
+| once | boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |
+| inViewMargin | UseInViewOptions['margin'] | — | Optional root margin passed to the intersection observer for in-view detection (e.g., "0px 0px -10% 0px"). |
+| shimmer | boolean | true | Enables or disables the shimmer highlight effect across the text. |
+| shimmerDuration | number | 5 | Duration of one shimmer loop in seconds. |
+| shimmerDelay | number | 0 | Delay before the shimmer effect starts, in seconds. |
+| shimmerSpread | number | 8 | Multiplier controlling the width of the shimmer highlight band. |
+| shimmerRepeat | boolean | true | If true, the shimmer animation loops infinitely. |
+| shimmerColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' | 'lighter' | The color of the shimmer highlight band. |
+| textColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'darkest' | Base color of the text. |
+| innerClassName | string | — | Additional classNames set on the inner element. |
+| className | string | — | Additional classNames set on the wrapper element. |
+
 ### Example: Status
 
 Status
@@ -331,4 +354,27 @@ export default () => {
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| text | string \| string[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |
+| duration | number | 0.4 | Reveal animation duration in seconds. |
+| delay | number | 0 | Reveal animation delay before starting, in seconds. |
+| interval | number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |
+| distance | number | 10 | Vertical offset in pixels from which the text reveals upward. |
+| ease | 'linear' \| 'easeIn' \| 'easeOut' \| 'easeInOut' | 'easeOut' | Easing function applied to the reveal motion. |
+| startOnView | boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |
+| once | boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |
+| inViewMargin | UseInViewOptions['margin'] | — | Optional root margin passed to the intersection observer for in-view detection (e.g., "0px 0px -10% 0px"). |
+| shimmer | boolean | true | Enables or disables the shimmer highlight effect across the text. |
+| shimmerDuration | number | 5 | Duration of one shimmer loop in seconds. |
+| shimmerDelay | number | 0 | Delay before the shimmer effect starts, in seconds. |
+| shimmerSpread | number | 8 | Multiplier controlling the width of the shimmer highlight band. |
+| shimmerRepeat | boolean | true | If true, the shimmer animation loops infinitely. |
+| shimmerColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' | 'lighter' | The color of the shimmer highlight band. |
+| textColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'darkest' | Base color of the text. |
+| innerClassName | string | — | Additional classNames set on the inner element. |
+| className | string | — | Additional classNames set on the wrapper element. |

package/dist/docs/components/animations.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animations
-*Captured:* 2026-01-14T09:07:24.795Z
+*Captured:* 2026-02-03T14:04:39.064Z
 
 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.883576;">
+<div style="opacity: 0.891318;">
     <div class="margin-10">
         <label>Some Data</label>
         <div>
@@ -169,7 +169,7 @@ 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.9341939650767017px 1px">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.8869888990011532px 1px">
             </path>
         </svg>
     </div>
@@ -184,21 +184,21 @@ export default () => (
 
 ### Example: Example 3
 
-Add ItemItem 52KRTXSG4PL
+Add ItemItem SAY31NI9JY
 
-Item SXRN323D9IL
+Item 3Y845VKS7Q
 
-Item O8SH8KFUWG
+Item 2TR06HFALV
 
 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 52KRTXSG4PL
+Add ItemItem SAY31NI9JY
 
-Item SXRN323D9IL
+Item 3Y845VKS7Q
 
-Item O8SH8KFUWG
+Item 2TR06HFALV
 
 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.
 
@@ -267,7 +267,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 52KRTXSG4PL</div>
+                    <div>Item SAY31NI9JY</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>
@@ -278,7 +278,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 SXRN323D9IL</div>
+                    <div>Item 3Y845VKS7Q</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>
@@ -289,7 +289,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 O8SH8KFUWG</div>
+                    <div>Item 2TR06HFALV</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>
@@ -305,31 +305,31 @@ export default () => {
 
 ### Example: Example 4
 
-Load ItemsItem B0A73GATAR
+Load ItemsItem Y3E1PAWU4G
 
-Item GMKA93SKRQ
+Item 03RN4LBQUH
 
-Item 2E9PXOO6CNJ
+Item RNLIJUFWD1
 
-Item QDB3LPYVNB
+Item USNNCEUF3C
 
-Item ZACAR9DD3H
+Item S6FC5S6QMJ
 
-Item D27NQVDPHK
+Item 01C0J9EA59
 
 #### Summary
 
-Load ItemsItem B0A73GATAR
+Load ItemsItem Y3E1PAWU4G
 
-Item GMKA93SKRQ
+Item 03RN4LBQUH
 
-Item 2E9PXOO6CNJ
+Item RNLIJUFWD1
 
-Item QDB3LPYVNB
+Item USNNCEUF3C
 
-Item ZACAR9DD3H
+Item S6FC5S6QMJ
 
-Item D27NQVDPHK
+Item 01C0J9EA59
 
 #### React (tsx)
 
@@ -396,7 +396,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item B0A73GATAR</span>
+                            <span>Item Y3E1PAWU4G</span>
                         </div>
                     </span>
                 </span>
@@ -408,7 +408,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item GMKA93SKRQ</span>
+                            <span>Item 03RN4LBQUH</span>
                         </div>
                     </span>
                 </span>
@@ -420,7 +420,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 2E9PXOO6CNJ</span>
+                            <span>Item RNLIJUFWD1</span>
                         </div>
                     </span>
                 </span>
@@ -432,7 +432,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item QDB3LPYVNB</span>
+                            <span>Item USNNCEUF3C</span>
                         </div>
                     </span>
                 </span>
@@ -444,7 +444,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item ZACAR9DD3H</span>
+                            <span>Item S6FC5S6QMJ</span>
                         </div>
                     </span>
                 </span>
@@ -456,7 +456,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item D27NQVDPHK</span>
+                            <span>Item 01C0J9EA59</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:* 2026-01-14T09:06:52.930Z
+*Captured:* 2026-02-03T14:04:05.995Z
 
 This is the header component for all services. All navigation link components that are passed into the header should be based on react-router
 
@@ -363,6 +363,12 @@ export default AppHeaderExample;
 </div>
 ```
 
+#### Props (json)
+
+```json
+<NavLink to='https://home.rio.cloud' />
+```
+
 ## ActionBarItem
 
 The ActionBarItem components consists mainly of two sub-components: Icon and Popover. The Icon component is mandatory and is shown in the header. The Popover component is optional and it's content will be shown inside a Popover.
@@ -663,4 +669,54 @@ export default ActionBarItemsExample;
         </nav>
     </div>
 </div>
-```
+```
+
+#### Props: ActionBarItem
+
+### ActionBarItem
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | string | — | The id is used to identify the item in the DOM. If not provided, a random id is used instead. |
+| title | string \| React.ReactNode | — | The title property for the sub-component ActionBarItem.Popover. This can be a String or another component as well as a React-Intl component. |
+| className | string | — | Additional class names that are added to the respective component. It can be defined for the parent and all sub-components. |
+| hidePopoverOnClick | boolean | true | Defines if the popover should close when any child element is being clicked. |
+| popoverWidth | ActionBarItemPopoverWidth | 250 | Possible values are 100, 150, 200, 250, 300, 350, 400, 450 or 500. |
+| mobileDialogBodyClassName | string | — | Additional class names that are added to dialog fallback modal-body element. |
+
+#### Props: ActionBarItem.List
+
+### ActionBarItem.List
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the wrapping list item component. |
+
+#### Props: ActionBarItem.ListItem
+
+### ActionBarItem.ListItem
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| hasLink | boolean | — | Set it to true when you want to use the item as link item. In this case, please use the Link component from react-router-dom instead of an anchor tag to prevent side effects when automatically closing the popover. |
+| icon | string | — | The name of the icon to be used for the item. |
+| onClick | VoidFunction | — | Callback function to be triggered when the internal button of a list item is clicked. Note: When no callback function is provided, the children are rendered as is without wrapping them in a button. |
+| className | string | — | Additional class names that are added to the wrapping list item component. |
+
+#### Props: ActionBarItem.ListSeparator
+
+### ActionBarItem.ListSeparator
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the wrapping list item component. |
+
+#### Props: ActionBarItem.Popover
+
+### ActionBarItem.Popover
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | string \| ReactNode | — | The popover title. |
+| useOffscreen | boolean | — | Define whether the popover content shall be rendered behind the scene. This allows to preload content or to avoid unmounting the content component. |
+| className | string | — | Additional class names that are added to the popover content. |