@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/states.md

@@ -3,9 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/states
-*Captured:* 2026-01-07T12:11:51.466Z
-
-A simple component to show an error to the user.
+*Captured:* 2026-02-03T14:04:56.502Z
 
 ## ErrorState
 
@@ -131,31 +129,29 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
-A simple component to show a message when something could not be found when searching or filtering data.
-
 ### Example: Nothing found
 
 Nothing found
@@ -226,31 +222,29 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
-A simple component to show a message when there is no data yet. The user may perform a task first in order to see some data in that view..
-
 ### Example: There is no free lunch
 
 There is no free lunch
@@ -323,31 +317,29 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
-A simple component to show a message when the access to a certain area is restricted.
-
 ### Example: Access not allowed
 
 Access not allowed
@@ -407,31 +399,29 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
-A simple component to show a message when a service is in maintenance.
-
 ### Example: Service in maintenance
 
 Service in maintenance
@@ -476,31 +466,29 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
-All state components above are based on the more flexible CustomState component. Use this if you need something to be shown which cannot be accomplished otherwise.
-
 ### Example: Lorem ipsum dolor sit amet
 
 Lorem ipsum dolor sit amet
@@ -582,26 +570,26 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
@@ -686,31 +674,29 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
-A simple component to show a message when Service content requires a Marketplace booking.
-
 ### Example: Premium feature
 
 Premium feature
@@ -783,27 +769,32 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| features | Array of Objects | [] | List of features. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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
 
@@ -855,37 +846,37 @@ 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 | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
-
-### Example: End User Licence AgreementCurrently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.
-
-End User Licence Agreement
+| 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.
+
+End User License Agreement
 Currently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.
 
 Back to homeProceed with EULA
 
 #### Summary
 
-End User Licence Agreement
+End User License Agreement
 Currently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.
 
 Back to homeProceed with EULA
@@ -905,7 +896,7 @@ export default () => (
                         style={{ ['--i' as string]: 'url(https://cdn.rio.cloud/riosvg/custom/eu-data-act.svg)' }}
                     />
                 </span>
-                <div className='text-bold text-size-20'>End User Licence Agreement</div>
+                <div className='text-bold text-size-20'>End User License Agreement</div>
                 <div>
                     Currently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may
                     still choose to accept it voluntarily.
@@ -937,7 +928,7 @@ export default () => (
                         <span class="rioglyph text-size-300pct " style="--i: url(https://cdn.rio.cloud/riosvg/custom/eu-data-act.svg);">
                         </span>
                     </span>
-                    <div class="text-bold text-size-20">End User Licence Agreement</div>
+                    <div class="text-bold text-size-20">End User License Agreement</div>
                     <div>Currently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.</div>
                 </div>
             </div>
@@ -958,28 +949,28 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
-
-## Table with State
+| 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
 
 ### Example: We couldn't find anything that matches your search
 
@@ -1154,23 +1145,23 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | String | — | The icon to be shown. Default icons are defined for all states. |
-| icons | Array of Objects | [] | List of icons to show instead a single icon. |
-| └name | String | — | The name of the icon |
-| └color | String | — | Optional color class name for the icon |
-| └className | String | — | Optional class names for this icon. |
-| headline | String / Node | — | The headline to be shown. |
-| message | String / Node | — | The text to display. |
-| buttons | Array of Objects | [] | Definitions for the buttons to show. |
-| bsStyle | String | default | Allows to define various button styles. |
-| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |
-| └onClick | Function | () => {} | Callback fired after the component starts to collapse. |
-| └href | String | — | Instead of a callback for the button you can specify an "href". This way it will render a link instead. |
-| └className | String | — | Optional class names for this button. |
-| condensed | Boolean | false | Smaller icon and headline size. |
-| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |
-| image | Node | — | Custom Image if needed. |
-| alignment | String | 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 | Node | — | Additional elements that are rendered below the headline and text. |
+| 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. |