@rio-cloud/uikit-mcp 1.1.4 → 1.1.5

package/dist/docs/components/selects.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#components/selects
-*Captured:* 2026-01-14T09:07:19.541Z
+*Captured:* 2026-02-03T14:04:33.842Z
 
 The Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
 

package/dist/docs/components/sidebar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#components/sidebar
-*Captured:* 2026-01-14T09:06:53.208Z
+*Captured:* 2026-02-03T14:04:05.660Z
 
 There are 2 kinds of Sidebars. The default fluid and the fly variant.
 
@@ -292,4 +292,40 @@ export default SidebarDemos;
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fly | boolean | false | Defines if the component will overlap the body content. |
+| closed | boolean | false | Defines whether the component is hidden or not. |
+| disableClose | boolean | false | Hides the close button. This may be used when the sidebar is always visible and may not be closed. |
+| onClose | VoidFunction | — | Callback function triggered when clicking the close icon. |
+| footer | string \| React.ReactNode | — | The Footer content. For example a save button. |
+| footerClassName | string | — | Additional classes added to the Sidebar footer. |
+| headerButtons | React.ReactNode | — | Additional buttons to be rendered in the header. |
+| headerClassName | string | — | Additional classes added to the Sidebar header. |
+| showHeaderBorder | boolean | — | Shows a sidebar header border |
+| width | number | 350 | Defines the width of the component. The value is set as pixel value as inline style. Note: In the past, the type allowed to pass in a sting value like "400px" but that is not possible anymore due to internal width calculations. To be backwards compatible for non Typescript projects, the width is converted to a number. |
+| minWidth | number | 100 | Defines the minimum width in px of the component that will take effect when resizing. |
+| maxWidth | number | 800 | Defines the maximum width in px of the component that will take effect when resizing. |
+| openInFullscreen | boolean | false | Opens Sidebar in fullscreen, means 100vw. |
+| onFullScreenChange | (newFullscreenState: boolean) => void | — | Callback for when the fullscreen is toggled. |
+| enableFullscreenToggle | boolean | false | Enables the fullscreen functionality and shows the fullscreen toggle. |
+| fullscreenToggleTooltip | string | — | Translated tooltip text for the fullscreen toggle button. |
+| position | ObjectValues<typeof SidebarPosition> | 'left' | Tells the sidebar where it is positioned. This will affect the resizing behavior respectively. Note: the position need to be set properly whe using the resize functionality to know on which side of the sidebar to attach the resizer handle. It is also relevant when the sidebar mode is set to fly to properly animate the sidebar into the view. Possible values are: 'left' 'right' Sidebar.LEFT Sidebar.RIGHT |
+| resizable | boolean | false | Defines whether or not the sidebar is resizable. |
+| onResizeEnd | VoidFunction | — | Callback for when the resize is done. |
+| switchModeBreakpoint | number | — | Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower than the given breakpoint the mode is set to fly. If the window width is higher the mode is set to fluid. This functionality is disabled by default and will be enabled when defining a breakpoint higher than 0. |
+| disableEsc | boolean | false | By default the fullscreen mode can be left with "esc". If this is unwanted it can be disabled. |
+| hasBackdrop | boolean | false | Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside. |
+| hasSmoothScrollbar | boolean | false | Defined whether or not the UIKIT SmoothScrollbar is active. |
+| makeBackdropVisible | boolean | false | Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs. |
+| onBackdropClick | VoidFunction | — | Callback for when the backdrop is clicked. This comes in handy when handling transient data from the sidebar which need to be saved first and handle clicks outside. |
+| bodyRef | React.MutableRefObject<HTMLDivElement \| null> | — | Additional ref added to the Sidebar body. |
+| title | string \| React.ReactNode | — | Content that will be displayed in the components header. |
+| titleClassName | string | — | Additional classes added to the Sidebar title. |
+| backdropClassName | string | — | Additional classes added to the Sidebar backdrop. |
+| bodyClassName | string | — | Additional classes added to the Sidebar body. |
+| className | string | — | Additional classes added on the wrapper element. |

package/dist/docs/components/sliders.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/sliders
-*Captured:* 2026-01-14T09:07:06.095Z
+*Captured:* 2026-02-03T14:04:21.151Z
 
 ## Slider
 
@@ -225,6 +225,24 @@ export default SliderExample;
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | number | 0 | The current value. |
+| minValue | number | 0 | The lower limit. |
+| maxValue | number | Number.MAX_VALUE | The upper limit. |
+| valueLabels | boolean | false | Whether to show the value labels. |
+| valueLabelUnit | string \| React.ReactNode | — | Additional unit used for the slider value label. |
+| hideValueBar | boolean | false | Whether to hide the dark-colored value bar. |
+| largeValueLabels | boolean | false | Whether to show larger value labels instead of the normal ones. |
+| step | number | 1 | Selector step value. |
+| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
+| disabled | boolean | false | Disables all pointer events. |
+| onChange | (newValue: number) => void | — | Callback to get the new value every time it changes. |
+| onDragEnd | (newValue: number) => void | — | Callback to get the value after the slider ended dragging. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
 ## RangeSlider
 
 ### Example: Example 2
@@ -338,4 +356,21 @@ export default () => (
         <input class="" min="-50" max="1000" step="1" type="range" value="800" style="z-index: 5;">
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| leftValue | number | — | The current left value of the selected range. |
+| rightValue | number | — | The current right value of the selected range. |
+| minValue | number | 0 | The lower limit. |
+| maxValue | number | Number.MAX_VALUE | The upper limit. |
+| valueLabels | boolean | false | Whether to show the value labels. |
+| valueLabelUnit | string \| React.ReactNode | — | Additional unit used for the slider value labels. |
+| step | number | 1 | Selector step value. |
+| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
+| disabled | boolean | false | Disables all pointer events. |
+| onChange | (newLeftValue: number, newRightValue: number) => void | — | Callback to get the new value every time it changes. |
+| onDragEnd | (newLeftValue: number, newRightValue: number) => void | — | Callback to get the value after the slider ended dragging. |
+| className | string | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/smoothScrollbars.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/smoothScrollbars
-*Captured:* 2026-01-14T09:07:52.668Z
+*Captured:* 2026-02-03T14:05:09.047Z
 
 ## SmoothScrollbars
 
@@ -104,6 +104,21 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
+| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
+| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tagName | string | 'div' | Tag name used for the scroll container. |
+| autoHeight | boolean | false | Enable auto-height behavior. |
+| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
+| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
+| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
+| style | React.CSSProperties | — | Inline styles for the scroll container. |
+
 ### Example: Slide in on hover
 
 Slide in on hover
@@ -199,6 +214,21 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
+| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
+| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tagName | string | 'div' | Tag name used for the scroll container. |
+| autoHeight | boolean | false | Enable auto-height behavior. |
+| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
+| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
+| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
+| style | React.CSSProperties | — | Inline styles for the scroll container. |
+
 ### Example: Larger track
 
 Larger track
@@ -294,6 +324,21 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
+| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
+| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tagName | string | 'div' | Tag name used for the scroll container. |
+| autoHeight | boolean | false | Enable auto-height behavior. |
+| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
+| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
+| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
+| style | React.CSSProperties | — | Inline styles for the scroll container. |
+
 ### Example: Track with offset
 
 Track with offset
@@ -389,6 +434,21 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
+| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
+| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tagName | string | 'div' | Tag name used for the scroll container. |
+| autoHeight | boolean | false | Enable auto-height behavior. |
+| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
+| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
+| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
+| style | React.CSSProperties | — | Inline styles for the scroll container. |
+
 ### Example: Horizontal Example
 
 Horizontal Example
@@ -652,6 +712,21 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
+| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
+| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tagName | string | 'div' | Tag name used for the scroll container. |
+| autoHeight | boolean | false | Enable auto-height behavior. |
+| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
+| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
+| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
+| style | React.CSSProperties | — | Inline styles for the scroll container. |
+
 ### Example: Full Example
 
 Full Example
@@ -1123,4 +1198,19 @@ export default () => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
+| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
+| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tagName | string | 'div' | Tag name used for the scroll container. |
+| autoHeight | boolean | false | Enable auto-height behavior. |
+| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
+| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
+| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
+| style | React.CSSProperties | — | Inline styles for the scroll container. |

package/dist/docs/components/spinners.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/spinners
-*Captured:* 2026-01-14T09:07:52.432Z
+*Captured:* 2026-02-03T14:05:07.959Z
 
 ## Spinner
 
@@ -133,6 +133,18 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | boolean | false | Renders the spinner without centered wrapper. |
+| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
+| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |
+
 ## Spinner in Buttons
 
 ### Example: Example 2
@@ -358,6 +370,18 @@ export default () => (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | boolean | false | Renders the spinner without centered wrapper. |
+| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
+| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |
+
 ## Spinner fullsized
 
 ### Example: Example 4
@@ -415,6 +439,18 @@ export default () => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | boolean | false | Renders the spinner without centered wrapper. |
+| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
+| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |
+
 ## Spinner fullscreen
 
 ### Example: Example 5
@@ -457,4 +493,16 @@ export default () => {
     <button class="btn btn-default margin-top-25" type="button">Toggle fullscreen loading spinner</button>
     <p>exit fullscreen with esc key</p>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | boolean | false | Renders the spinner without centered wrapper. |
+| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
+| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |

package/dist/docs/components/states.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/states
-*Captured:* 2026-01-14T09:07:41.770Z
+*Captured:* 2026-02-03T14:04:56.502Z
 
 ## ErrorState
 
@@ -129,6 +129,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## NotFoundState
@@ -203,6 +222,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## EmptyState
@@ -279,6 +317,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## ForbiddenState
@@ -342,6 +399,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## MaintenanceState
@@ -390,6 +466,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## CustomState
@@ -475,6 +570,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ### Example: You don't have access to this issue
@@ -560,6 +674,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## NotBookedState
@@ -636,6 +769,31 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| features | string \| React.ReactNode[] | — | List of features. |
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## Fully customized state
@@ -688,6 +846,25 @@ export default () => <CustomState headline='Stay tuned' message={dummyTextShort}
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ### Example: End User License AgreementCurrently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.
@@ -772,6 +949,25 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |
 
 ## Table with a state
@@ -949,4 +1145,23 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| icon | string | — | The icon to be shown. Default icons are defined for all states. |
+| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
+| └name | string | — | The name of the icon |
+| └className | string | 'text-size-300pct' | Optional class names for this icon. |
+| └color | string | 'text-color-light' | Optional color class name for the icon. |
+| image | React.ReactNode | — | Custom Image if needed. |
+| headline | string \| React.ReactNode | — | The headline to be shown. |
+| message | string \| React.ReactNode | — | The text to display. |
+| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
+| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
+| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
+| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
+| └className | string | — | Additional classes assigned to the button. |
+| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
+| condensed | boolean | false | Smaller icon and headline size. |
+| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
+| outerClassName | string | — | Optional class names for the wrapper. |
+| innerClassName | string | — | Optional class names for the content. |
 | children | any | — | Additional elements that are rendered below the headline and text. |