@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/states.md

@@ -0,0 +1,1176 @@
+# ErrorState
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/states
+*Captured:* 2025-12-12T14:20:53.901Z
+
+A simple component to show an error to the user.
+
+## ErrorState
+
+### Example: Something went wrong
+
+Something went wrong
+
+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.
+Try again
+
+Condensed version example
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+Try again
+
+#### Summary
+
+Something went wrong
+
+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.
+Try again
+
+Condensed version example
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+Try again
+
+#### React (tsx)
+
+```tsx
+import ErrorState from '@rio-cloud/rio-uikit/ErrorState';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+import { dummyTextExtraShort } from '../../../utils/data';
+
+export default () => (
+    <>
+        <ErrorState
+            headline='Something went wrong'
+            message={dummyTextExtraShort}
+            buttons={[
+                {
+                    text: (
+                        <>
+                            <span className='rioglyph rioglyph-refresh' />
+                            <span>Try again</span>
+                        </>
+                    ),
+                    className: 'foobar',
+                    onClick: () => Notification.info('Button pressed'),
+                },
+            ]}
+        />
+        <hr />
+        <ErrorState
+            headline='Condensed version example'
+            message={dummyTextExtraShort}
+            condensed
+            buttons={[
+                {
+                    text: (
+                        <>
+                            <span className='rioglyph rioglyph-refresh' />
+                            <span>Try again</span>
+                        </>
+                    ),
+                    className: 'foobar',
+                    onClick: () => Notification.info('Button pressed'),
+                },
+            ]}
+        />
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h2 margin-bottom-20">
+                <span class="rioglyph rioglyph-truck-breakdown text-color-light text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Something went wrong</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                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.</div>
+            <div class="btn-toolbar margin-top-20">
+                <button class="btn margin-top-10 btn-primary foobar" type="button">
+                    <span class="rioglyph rioglyph-refresh">
+                    </span>
+                    <span>Try again</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+<hr>
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-10">
+        <div class="display-flex flex-column align-items-center text-center padding-15">
+            <div class="text-size-16 margin-bottom-10">
+                <span class="rioglyph rioglyph-truck-breakdown text-color-light text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h4 line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Condensed version example</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                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.</div>
+            <div class="btn-toolbar margin-top-20">
+                <button class="btn margin-top-10 btn-primary foobar" type="button">
+                    <span class="rioglyph rioglyph-refresh">
+                    </span>
+                    <span>Try again</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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. |
+
+## NotFoundState
+
+A simple component to show a message when something could not be found when searching or filtering data.
+
+### Example: Nothing found
+
+Nothing found
+
+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.
+Refresh
+
+#### Summary
+
+Nothing found
+
+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.
+Refresh
+
+#### React (tsx)
+
+```tsx
+import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import { dummyTextShort } from '../../../utils/data';
+
+export default () => (
+    <NotFoundState
+        headline='Nothing found'
+        message={dummyTextShort}
+        buttons={[
+            {
+                text: (
+                    <>
+                        <span className='rioglyph rioglyph-refresh' />
+                        <span>Refresh</span>
+                    </>
+                ),
+                className: 'foobar',
+                onClick: () => Notification.info('Button pressed'),
+            },
+        ]}
+    />
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h2 margin-bottom-20">
+                <span class="rioglyph rioglyph-looking-glass-man text-color-light text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Nothing found</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                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.</div>
+            <div class="btn-toolbar margin-top-20">
+                <button class="btn margin-top-10 btn-primary foobar" type="button">
+                    <span class="rioglyph rioglyph-refresh">
+                    </span>
+                    <span>Refresh</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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. |
+
+## 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
+
+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.
+Add something
+
+#### Summary
+
+There is no free lunch
+
+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.
+Add something
+
+#### React (tsx)
+
+```tsx
+import EmptyState from '@rio-cloud/rio-uikit/EmptyState';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+import { dummyTextExtraShort } from '../../../utils/data';
+
+export default () => (
+    <EmptyState
+        headline='There is no free lunch'
+        message={dummyTextExtraShort}
+        buttons={[
+            {
+                text: (
+                    <span>
+                        <span className='rioglyph rioglyph-plus margin-right-5' />
+                        <span>Add something</span>
+                    </span>
+                ),
+                onClick: () => Notification.info('Button pressed'),
+            },
+        ]}
+    />
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h2 margin-bottom-20">
+                <span class="rioglyph rioglyph-empty text-color-light text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">There is no free lunch</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                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.</div>
+            <div class="btn-toolbar margin-top-20">
+                <button class="btn margin-top-10 btn-primary" type="button">
+                    <span>
+                        <span class="rioglyph rioglyph-plus margin-right-5">
+                        </span>
+                        <span>Add something</span>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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. |
+
+## ForbiddenState
+
+A simple component to show a message when the access to a certain area is restricted.
+
+### Example: Access not allowed
+
+Access not allowed
+You are not allowed to access this resource. Please contact your manager or administrator to gain access.
+Request access
+
+#### Summary
+
+Access not allowed
+You are not allowed to access this resource. Please contact your manager or administrator to gain access.
+Request access
+
+#### React (tsx)
+
+```tsx
+import ForbiddenState from '@rio-cloud/rio-uikit/ForbiddenState';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+export default () => (
+    <ForbiddenState
+        headline='Access not allowed'
+        message={
+            'You are not allowed to access this resource. ' +
+            'Please contact your manager or administrator to gain access.'
+        }
+        buttons={[
+            {
+                text: 'Request access',
+                onClick: () => Notification.info('Button pressed'),
+            },
+        ]}
+    />
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h2 margin-bottom-20">
+                <span class="rioglyph rioglyph-ban-circle text-color-light text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Access not allowed</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">You are not allowed to access this resource. Please contact your manager or administrator to gain access.</div>
+            <div class="btn-toolbar margin-top-20">
+                <button class="btn margin-top-10 btn-primary" type="button">Request access</button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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. |
+
+## MaintenanceState
+
+A simple component to show a message when a service is in maintenance.
+
+### Example: Service in maintenance
+
+Service in maintenance
+We are sorry for the inconvenience. The interruption will be resolved shortly.
+
+#### Summary
+
+Service in maintenance
+We are sorry for the inconvenience. The interruption will be resolved shortly.
+
+#### React (tsx)
+
+```tsx
+import MaintenanceState from '@rio-cloud/rio-uikit/MaintenanceState';
+
+export default () => (
+    <MaintenanceState
+        headline='Service in maintenance'
+        message='We are sorry for the inconvenience. The interruption will be resolved shortly.'
+    />
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h2 margin-bottom-20">
+                <span class="rioglyph rioglyph-wrench text-color-light text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Service in maintenance</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">We are sorry for the inconvenience. The interruption will be resolved shortly.</div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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. |
+
+## 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
+
+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.
+Do something buttonPrimary call to action
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+
+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.
+Do something buttonPrimary call to action
+
+#### React (tsx)
+
+```tsx
+import CustomState from '@rio-cloud/rio-uikit/CustomState';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+import { dummyTextExtraShort } from '../../../utils/data';
+
+export default () => (
+    <CustomState
+        headline='Lorem ipsum dolor sit amet'
+        message={dummyTextExtraShort}
+        data-testid='demo-test'
+        icons={[
+            {
+                name: 'rioglyph-ok-sign',
+                color: 'text-color-highlight',
+                className: 'text-size-300pct',
+            },
+        ]}
+        buttons={[
+            {
+                text: <span>Do something button</span>,
+                bsStyle: 'default',
+                className: 'foobar',
+                onClick: () => Notification.info('Button pressed'),
+            },
+            {
+                text: <span>Primary call to action</span>,
+                className: 'foobar',
+                onClick: () => Notification.info('Button pressed'),
+            },
+        ]}
+    />
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct" data-testid="demo-test">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h2 margin-bottom-20 display-flex align-items-center max-width-100pct">
+                <span class="rioglyph rioglyph-ok-sign text-color-highlight text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Lorem ipsum dolor sit amet</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                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.</div>
+            <div class="btn-toolbar margin-top-20 justify-content-center-xs">
+                <button class="btn margin-top-10 btn-default foobar" type="button">
+                    <span>Do something button</span>
+                </button>
+                <button class="btn margin-top-10 btn-primary foobar" type="button">
+                    <span>Primary call to action</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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: You don't have access to this issue
+
+You don't have access to this issue
+Make sure the issue exists in this project. If it does, ask a project admin for permission to see the project's issues.
+View permissionsRequest access
+Learn more
+
+#### Summary
+
+You don't have access to this issue
+Make sure the issue exists in this project. If it does, ask a project admin for permission to see the project's issues.
+View permissionsRequest access
+Learn more
+
+#### React (tsx)
+
+```tsx
+import CustomState from '@rio-cloud/rio-uikit/CustomState';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+export default () => (
+    <CustomState
+        headline={<span>You don't have access to this issue</span>}
+        message={
+            <span>
+                Make sure the issue exists in this project. If it does, ask a project admin for permission to see the
+                project's issues.
+            </span>
+        }
+        buttons={[
+            {
+                text: <span>View permissions</span>,
+                bsStyle: 'default',
+                onClick: () => Notification.info('Button pressed'),
+            },
+            {
+                text: <span>Request access</span>,
+                onClick: () => Notification.info('Button pressed'),
+            },
+            {
+                text: <span>Learn more</span>,
+                className: 'btn-link',
+                href: '#',
+            },
+        ]}
+    />
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">
+                <span>You don't have access to this issue</span>
+            </div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                <span>Make sure the issue exists in this project. If it does, ask a project admin for permission to see the project's issues.</span>
+            </div>
+            <div class="btn-toolbar margin-top-20 justify-content-center-xs">
+                <button class="btn margin-top-10 btn-default" type="button">
+                    <span>View permissions</span>
+                </button>
+                <button class="btn margin-top-10 btn-primary" type="button">
+                    <span>Request access</span>
+                </button>
+            </div>
+            <div class="btn-toolbar">
+                <a class="margin-top-15 btn-link" href="#">
+                    <span>Learn more</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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. |
+
+## NotBookedState
+
+A simple component to show a message when Service content requires a Marketplace booking.
+
+### Example: Premium feature
+
+Premium feature
+Book Timed now and get access to the following and many more special features
+Residual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.
+The driver’s activities are transmitted automatically and archived on the platform for 90 days.
+
+#### Summary
+
+Premium feature
+Book Timed now and get access to the following and many more special features
+Residual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.
+The driver’s activities are transmitted automatically and archived on the platform for 90 days.
+
+#### React (tsx)
+
+```tsx
+import NotBookedState from '@rio-cloud/rio-uikit/NotBookedState';
+
+export default () => (
+    <NotBookedState
+        headline='Premium feature'
+        message='Book Timed now and get access to the following and many more special features'
+        features={[
+            'Residual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.',
+            'The driver’s activities are transmitted automatically and archived on the platform for 90 days.',
+        ]}
+    >
+        <iframe className='buyButton' src='https://buybutton.marketplace.rio.cloud/?productId=RIO-SKU00000027' />
+    </NotBookedState>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-size-h2 margin-bottom-20 display-flex align-items-center max-width-100pct">
+                <span class="rioglyph rioglyph-stars text-color-primary text-size-300pct">
+                </span>
+            </div>
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Premium feature</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                <div class="text-medium margin-bottom-20">Book Timed now and get access to the following and many more special features</div>
+                <ul class="feature-list icon-list margin-x-10pct-ls margin-y-10 text-size-12 text-size-14-sm" id="features">
+                    <li class="padding-x-15 bg-lightest rounded rounded-large border-none display-flex align-items-center gap-2 text-left">
+                        <span class="rioglyph rioglyph-ok text-color-primary">
+                        </span>
+                        <span class="text-color-darker">Residual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.</span>
+                    </li>
+                    <li class="padding-x-15 bg-lightest rounded rounded-large border-none display-flex align-items-center gap-2 text-left">
+                        <span class="rioglyph rioglyph-ok text-color-primary">
+                        </span>
+                        <span class="text-color-darker">The driver’s activities are transmitted automatically and archived on the platform for 90 days.</span>
+                    </li>
+                </ul>
+            </div>
+            <div class="width-500 max-width-100pct margin-top-25">
+                <iframe class="buyButton" src="https://buybutton.marketplace.rio.cloud/?productId=RIO-SKU00000027">
+                </iframe>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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. |
+
+## Fully customized state
+
+### Example: Stay tuned
+
+Stay tuned
+
+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.
+
+#### Summary
+
+Stay tuned
+
+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.
+
+#### React (tsx)
+
+```tsx
+import CustomState from '@rio-cloud/rio-uikit/CustomState';
+import { dummyTextShort } from '../../../utils/data';
+
+const image = (
+    <img
+        className='max-width-500'
+        src='https://cdn.rio.cloud/svg/dashboard/dashboard_coming_soon.svg'
+        alt='Coming soon'
+    />
+);
+
+export default () => <CustomState headline='Stay tuned' message={dummyTextShort} fullWidth image={image} />;
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <img class="max-width-500" src="https://cdn.rio.cloud/svg/dashboard/dashboard_coming_soon.svg" alt="Coming soon">
+            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Stay tuned</div>
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                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.</div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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
+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
+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
+
+#### React (tsx)
+
+```tsx
+import CustomState from '@rio-cloud/rio-uikit/CustomState';
+
+export default () => (
+    <CustomState
+        message={
+            <div className='display-flex flex-column gap-15'>
+                <span className='text-size-h1'>
+                    <span
+                        className='rioglyph text-size-300pct '
+                        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>
+                    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>
+        }
+        buttons={[
+            {
+                text: <span>Back to home</span>,
+                bsStyle: 'default',
+            },
+            {
+                text: <span>Proceed with EULA</span>,
+            },
+        ]}
+    />
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center max-width-100pct">
+    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
+        <div class="display-flex flex-column align-items-center text-center padding-25">
+            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                <div class="display-flex flex-column gap-15">
+                    <span class="text-size-h1">
+                        <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>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>
+            <div class="btn-toolbar margin-top-20 justify-content-center-xs">
+                <button class="btn margin-top-10 btn-default" type="button">
+                    <span>Back to home</span>
+                </button>
+                <button class="btn margin-top-10 btn-primary" type="button">
+                    <span>Proceed with EULA</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| 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
+
+### Example: We couldn't find anything that matches your search
+
+NotFoundState when search or filter don't return any matching item
+Head ColumnHead ColumnHead ColumnHead ColumnHead Column
+
+We couldn't find anything that matches your search
+Please refine your search and check spelling and spacing.
+
+EmptyState when no item has been created yet
+Head ColumnHead ColumnHead ColumnHead ColumnHead Column
+
+No tracked events for this order
+Events appear when when the order is shared with other users and the order state is active.
+Learn how to start tracking order events
+
+#### Summary
+
+NotFoundState when search or filter don't return any matching item
+Head ColumnHead ColumnHead ColumnHead ColumnHead Column
+
+We couldn't find anything that matches your search
+Please refine your search and check spelling and spacing.
+
+EmptyState when no item has been created yet
+Head ColumnHead ColumnHead ColumnHead ColumnHead Column
+
+No tracked events for this order
+Events appear when when the order is shared with other users and the order state is active.
+Learn how to start tracking order events
+
+#### React (tsx)
+
+```tsx
+import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
+import EmptyState from '@rio-cloud/rio-uikit/EmptyState';
+
+export default () => (
+    <div>
+        <h5>NotFoundState when search or filter don't return any matching item</h5>
+        <table className='table table-head-filled table-layout-fixed'>
+            <thead>
+                <tr>
+                    {[...Array(5)].map(() => (
+                        <th key={crypto.randomUUID()} className='ellipsis-1'>
+                            Head Column
+                        </th>
+                    ))}
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td colSpan={5}>
+                        <NotFoundState
+                            headline="We couldn't find anything that matches your search"
+                            message='Please refine your search and check spelling and spacing.'
+                            outerClassName='border-none'
+                        />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <hr className='border-color-light margin-y-25' />
+        <h5>EmptyState when no item has been created yet</h5>
+        <table className='table table-head-filled table-layout-fixed'>
+            <thead>
+                <tr>
+                    {[...Array(5)].map(() => (
+                        <th key={crypto.randomUUID()} className='ellipsis-1'>
+                            Head Column
+                        </th>
+                    ))}
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td colSpan={5}>
+                        <EmptyState
+                            headline='No tracked events for this order'
+                            message={
+                                'Events appear when when the order is shared with other users and the order ' +
+                                'state is active.'
+                            }
+                            outerClassName='border-none'
+                            buttons={[
+                                {
+                                    text: 'Learn how to start tracking order events',
+                                    href: '#',
+                                },
+                            ]}
+                        />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <h5>NotFoundState when search or filter don't return any matching item</h5>
+    <table class="table table-head-filled table-layout-fixed">
+        <thead>
+            <tr>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td colspan="5">
+                    <div class="display-flex justify-content-center max-width-100pct">
+                        <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
+                            <div class="display-flex flex-column align-items-center text-center padding-25">
+                                <div class="text-size-h2 margin-bottom-20">
+                                    <span class="rioglyph rioglyph-looking-glass-man text-color-light text-size-300pct">
+                                    </span>
+                                </div>
+                                <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">We couldn't find anything that matches your search</div>
+                                <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">Please refine your search and check spelling and spacing.</div>
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <hr class="border-color-light margin-y-25">
+    <h5>EmptyState when no item has been created yet</h5>
+    <table class="table table-head-filled table-layout-fixed">
+        <thead>
+            <tr>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+                <th class="ellipsis-1">Head Column</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td colspan="5">
+                    <div class="display-flex justify-content-center max-width-100pct">
+                        <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
+                            <div class="display-flex flex-column align-items-center text-center padding-25">
+                                <div class="text-size-h2 margin-bottom-20">
+                                    <span class="rioglyph rioglyph-empty text-color-light text-size-300pct">
+                                    </span>
+                                </div>
+                                <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">No tracked events for this order</div>
+                                <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">Events appear when when the order is shared with other users and the order state is active.</div>
+                                <div class="btn-toolbar margin-top-20">
+                                    <a class="margin-top-15" href="#">Learn how to start tracking order events</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+#### Props
+
+| 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. |