@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/dialogs.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/dialogs
-*Captured:* 2026-01-07T12:11:47.167Z
+*Captured:* 2026-02-03T14:04:51.877Z
 
 This component allows the user to create a generic modal dialog.
 
@@ -376,26 +376,36 @@ export default () => {
 </div>
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| body | Node | — | The dialog body content |
-| footer | Node | — | The dialog footer content |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| onEsc | Function | () => {} | A callback fired when esc key is pressed and the dialog is about to close |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |
-| className | String | — | Additional classes for the modal element |
-| bodyClassName | String | — | Additional classes for the modal-body element |
-| footerClassName | String | — | Additional classes for the modal-footer element |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: Dialog
+
+### Dialog
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| body | React.ReactNode | — | The dialog body content. |
+| footer | React.ReactNode | — | The dialog body content. |
+| bodyClassName | string | — | Additional classes for the modal-body element. |
+| footerClassName | string | — | Additional classes for the modal-footer element. |
+| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |
+| onEsc | VoidFunction | — | A callback fired when esc key is pressed and the dialog is about to close. |
+| onCloseValidation | () => boolean | () => true | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |
 
 ## Dialog compound components
 
@@ -538,9 +548,10 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |
+| title | string \| React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | string \| React.ReactNode | — | The dialog header subtitle content. |
+| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |
+| onCloseButtonClick | () => void | — | — |
 
 #### Props: Dialog.Body
 
@@ -548,7 +559,7 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional classes set on the wrapper element |
+| className | string | — | Additional classes for the modal-body element. |
 
 #### Props: Dialog.Footer
 
@@ -556,7 +567,7 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional classes set on the wrapper element |
+| className | string | — | Additional classes for the modal-footer element. |
 
 ## Dialogs with validation
 
@@ -669,26 +680,36 @@ export default () => {
 <button type="button" class="btn btn-primary btn-component" tabindex="0">Open dialog</button>
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: Dialog
+
+### Dialog
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| body | Node | — | The dialog body content |
-| footer | Node | — | The dialog footer content |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| onEsc | Function | () => {} | A callback fired when esc key is pressed and the dialog is about to close |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |
-| className | String | — | Additional classes for the modal element |
-| bodyClassName | String | — | Additional classes for the modal-body element |
-| footerClassName | String | — | Additional classes for the modal-footer element |
+| body | React.ReactNode | — | The dialog body content. |
+| footer | React.ReactNode | — | The dialog body content. |
+| bodyClassName | string | — | Additional classes for the modal-body element. |
+| footerClassName | string | — | Additional classes for the modal-footer element. |
+| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |
+| onEsc | VoidFunction | — | A callback fired when esc key is pressed and the dialog is about to close. |
+| onCloseValidation | () => boolean | () => true | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |
 
 ### Example: Example 4
 
@@ -840,26 +861,36 @@ export default () => {
 <button type="button" class="btn btn-primary btn-component" tabindex="0">Open dialog</button>
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: Dialog
+
+### Dialog
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| body | Node | — | The dialog body content |
-| footer | Node | — | The dialog footer content |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| onEsc | Function | () => {} | A callback fired when esc key is pressed and the dialog is about to close |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |
-| className | String | — | Additional classes for the modal element |
-| bodyClassName | String | — | Additional classes for the modal-body element |
-| footerClassName | String | — | Additional classes for the modal-footer element |
+| body | React.ReactNode | — | The dialog body content. |
+| footer | React.ReactNode | — | The dialog body content. |
+| bodyClassName | string | — | Additional classes for the modal-body element. |
+| footerClassName | string | — | Additional classes for the modal-footer element. |
+| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |
+| onEsc | VoidFunction | — | A callback fired when esc key is pressed and the dialog is about to close. |
+| onCloseValidation | () => boolean | () => true | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |
 
 ## SimpleDialog
 
@@ -928,25 +959,30 @@ export default () => {
 </div>;
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| content | Node | — | The content of the dialog body itself |
-| footer | Node | — | The dialog footer content |
-| footerClassName | String | — | Additional classes for the modal-footer element |
-| bodyClassName | String | — | Additional classes for the modal-body element |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| onEsc | Function | () => {} | A callback fired when esc key is pressed and the dialog is about to close |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| className | String | — | Additional classes for the modal element |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: SimpleDialog
+
+### SimpleDialog
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| content | string \| React.ReactNode | — | The content of the dialog body itself. |
 
 ## ConfirmationDialog
 
@@ -1026,21 +1062,35 @@ export default () => {
 </div>;
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| content | Node | — | The content of the dialog body itself |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| onClickConfirm | Function | () => {} | A callback fired when the confirmation button is clicked. |
-| onClickCancel | Function | () => {} | A callback fired when the cancel button is clicked or the dialog is closed. |
-| cancelButtonText | Node | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |
-| confirmButtonText | Node | — | The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text. |
-| disableConfirm | Boolean | — | When set to true the confirmation button will be disabled |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: ConfirmationDialog
+
+### ConfirmationDialog
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| content | string \| React.ReactNode | — | The content of the dialog body itself |
+| onClickConfirm | VoidFunction | () => {} | A callback fired when the confirmation button is clicked. |
+| onClickCancel | VoidFunction | () => {} | A callback fired when the cancel button is clicked or the dialog is closed. |
+| cancelButtonText | string \| React.ReactNode | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |
+| confirmButtonText | string \| React.ReactNode | — | The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text. |
+| disableConfirm | boolean | — | When set to true the confirmation button will be disabled. |
 
 ## SaveDialog
 
@@ -1131,26 +1181,36 @@ export default () => {
 </div>;
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: SaveDialog
+
+### SaveDialog
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| content | Node | — | The content of the dialog body itself |
-| onClickCancel | Function | () => {} | A callback fired when the cancel button is clicked or the dialog is closed. |
-| onClickDiscard | Function | () => {} | A callback fired when the discard button is clicked. |
-| onClickConfirm | Function | () => {} | A callback fired when the confirmation button is clicked. |
-| discardButtonText | Node | — | The content of the discard button. (Usually a text, can also be a FormattedMessage component). |
-| cancelButtonText | Node | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |
-| confirmButtonText | Node | — | The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| className | String | — | Additional classes for the modal element |
+| content | string \| React.ReactNode | — | The content of the dialog body itself. |
+| onClickCancel | VoidFunction | — | A callback fired when the cancel button is clicked or the dialog is closed. |
+| onClickDiscard | VoidFunction | — | A callback fired when the discard button is clicked. |
+| onClickConfirm | VoidFunction | — | A callback fired when the confirmation button is clicked. |
+| discardButtonText | string \| React.ReactNode | — | The content of the discard button. (Usually a text, can also be a FormattedMessage component). |
+| cancelButtonText | string \| React.ReactNode | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |
+| confirmButtonText | string \| React.ReactNode | — | The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text. |
 
 ## SplitDialog
 
@@ -1418,27 +1478,38 @@ const menuItems2 = [
 </div>;
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| leftContent | Node | — | The content to be shown on the left side. |
-| leftContentClassName | String | — | Additional classes for the left content element. |
-| rightContent | Node | — | The content to be shown on the right side. |
-| rightContentClassName | String | — | Additional classes for the right content element. |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| onEsc | Function | () => {} | A callback fired when esc key is pressed and the dialog is about to close |
-| useOverflow | Boolean | true | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| className | String | — | Additional classes for the modal element |
-| footerClassName | String | — | Additional classes for the modal-footer element |
-| footer | Node | — | The dialog footer content |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: SplitDialog
+
+### SplitDialog
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| leftContent | string \| React.ReactNode | — | The content to be shown on the left side. |
+| leftContentClassName | string | — | Additional classes for the left content element. |
+| rightContent | string \| React.ReactNode | — | The content to be shown on the right side. |
+| rightContentClassName | string | — | Additional classes for the right content element. |
+| footer | React.ReactNode | — | The dialog body content. |
+| footerClassName | string | — | Additional classes for the modal-footer element. |
+| onCloseValidation | () => boolean | — | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |
+| useOverflow | boolean | true | Enables the modal body to overflow and use inline scrolling if needed. |
+| showDivider | boolean | true | Allows to disable the divider. |
 
 ## InfoDialog
 
@@ -1522,25 +1593,30 @@ export default InfoDialogExample;
 </div>;
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: InfoDialog
+
+### InfoDialog
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| content | Node | — | The content of the dialog body itself |
-| footer | Node | — | The dialog footer content |
-| footerClassName | String | — | Additional classes for the modal-footer element |
-| bodyClassName | String | — | Additional classes for the modal-body element |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| onEsc | Function | () => {} | A callback fired when esc key is pressed and the dialog is about to close |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| className | String | — | Additional classes for the modal element |
+| content | string \| React.ReactNode | — | The content of the dialog body itself. |
 
 ### Example: Example 10
 
@@ -1662,25 +1738,30 @@ export default InfoDialogFeatureExample;
 </div>;
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| content | Node | — | The content of the dialog body itself |
-| footer | Node | — | The dialog footer content |
-| footerClassName | String | — | Additional classes for the modal-footer element |
-| bodyClassName | String | — | Additional classes for the modal-body element |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| onCloseValidation | Function | () => true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |
-| showCloseButton | Boolean | true | Shows a close button when set to true |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| onEsc | Function | () => {} | A callback fired when esc key is pressed and the dialog is about to close |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| className | String | — | Additional classes for the modal element |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: InfoDialog
+
+### InfoDialog
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| content | string \| React.ReactNode | — | The content of the dialog body itself. |
 
 ## OnboardingDialog
 
@@ -1751,22 +1832,24 @@ export default () => {
 </div>
 ```
 
-#### Props
+#### Props: OnboardingDialog
+
+### OnboardingDialog
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
 | imageSrc | string | — | The source URL of the image to be displayed in the dialog. |
 | imageAlt | string | — | Alternative text for the image, used for accessibility. |
 | title | string \| React.ReactNode | — | The title of the dialog. A welcome message. |
-| description | string \| React.ReactNode | — | A short description of the service and its onboarding. |
+| description | string \| React.ReactNode | — | A short description of the service and it's onboarding. |
 | onboardingRestartHint | string \| React.ReactNode | — | Hint text for restarting the onboarding process. |
 | onboardingRestartDescription | string \| React.ReactNode | — | Detailed description for restarting the onboarding process. |
-| skipButtonText | string \| React.ReactNode | — | Text for the skip button. |
-| tourButtonText | string \| React.ReactNode | — | Text for the button to start the tour. |
+| skipButtonText | string \| React.ReactNode | — | Text for the skip button |
+| tourButtonText | string \| React.ReactNode | — | Text for the button to start the tour |
 | onStartTour | () => void | — | Callback function to be called when the tour starts. |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| className | String | — | Additional classes for the modal element |
+| show | boolean | false | Opens the dialog when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| className | string | — | Additional classes for the modal element. |
 
 ## MediaDialog
 
@@ -1902,26 +1985,40 @@ export default () => {
 </div>;
 ```
 
-#### Props
+#### Props: Base dialog props
+
+### Base dialog props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Opens the dialog when set to true |
-| title | Node | — | The dialog title (can also be a FormattedMessage component) |
-| subtitle | Node | — | The subtitle content |
-| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class "no-overflow-gradient" to remove the overflow gradient in case it is problematic like when the background is gray. |
-| onClose | Function | () => {} | A callback function invoked when the dialog closes |
-| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |
-| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |
-| previousButtonText | String / Node | — | The button text for switching to the previous media if there are multiple. |
-| previousButtonCallback | Function | () => {} | Callback function for when the previous button is clicked. |
-| nextButtonText | String / Node | — | The button text for switching to the next media if there are multiple. |
-| nextButtonCallback | Function | () => {} | Callback function for when the next button is clicked. |
-| media | Array of Objects | — | List of media objects. |
-| └type | String | — | Defines the media type that is going to be displayed. Possible values are: MediaDialog.MEDIA_TYPE_IMAGE, MediaDialog.MEDIA_TYPE_VIDEO or 'image', 'video' |
-| └src | String | — | The source location for the media data. |
-| └aspectRatio | String | — | Only relevant for videos where the aspect of the video is defined. Possible values are: ResponsiveVideo.ASPECT_RATIO_4_BY_3, ResponsiveVideo.ASPECT_RATIO_16_BY_9 or '4by3', '16by9' |
-| └className | String | — | Additional classes for the image element. |
+| show | boolean | false | Opens the dialog when set to true. |
+| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |
+| subtitle | React.ReactNode | — | The dialog header subtitle content. |
+| showCloseButton | boolean | true | Shows a close button when set to true. |
+| onClose | () => void | — | A callback function invoked when the dialog closes. |
+| bsSize | DialogSize | 'md' | Defined how large the dialog will be rendered. By default, the dialog has a medium size, and thus it can be omitted. Possible values are: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |
+| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |
+| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |
+| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the "xs" dialog |
+| className | string | — | Additional classes for the modal element. |
+
+#### Props: MediaDialog
+
+### MediaDialog
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| media | MediaDialogMedia[] | — | List of media objects. |
+| └type | 'image' \| 'video' | — | Defines the media type that is going to be displayed. Possible values are: image and video. |
+| └src | string | — | The source location for the media data. |
+| └title | string \| React.ReactNode | — | The name or title of the media used for the dialogs title. |
+| └subtitle | string \| React.ReactNode | — | Additional media information used for the dialogs subtitle. |
+| └aspectRatio | '4by3' \| '16by9' | '16by9' | Only relevant for videos where the aspect of the video is defined. Possible values are: 4by3 and 16by9. |
+| └className | string | — | Additional classes for the image element. |
+| previousButtonText | string \| React.ReactNode | — | The button text for switching to the previous media if there are multiple. |
+| previousButtonCallback | (newIndex: number) => void | — | Callback function for when the previous button is clicked. |
+| nextButtonText | string \| React.ReactNode | — | The button text for switching to the next media if there are multiple. |
+| nextButtonCallback | (newIndex: number) => void | — | Callback function for when the next button is clicked. |
 
 ## FrameDialog
 
@@ -1943,7 +2040,7 @@ For more details, please visit iframe guidlines
 import React from 'react';
 import IframeResizer from 'iframe-resizer-react';
 
-import FrameDialog from '../../../../../../src/FrameDialog';
+import FrameDialog from '@rio-cloud/rio-uikit/FrameDialog';
 import { PREFIX } from '../../../widgets/WidgetDemo';
 
 const IFrameWidgetExample = React.memo(() => {
@@ -1970,9 +2067,9 @@ export default IFrameWidgetExample;
 // ----------------------------------------------------------
 import { useState } from 'react';
 
-import Button from '../../../../src/Button';
-import { OPEN_DIALOG_EVENT, CLOSE_DIALOG_EVENT, type OPEN_DIALOG_EVENT_TYPE } from '../../../../src/FrameDialog';
-import usePostMessage, { type RemoteAction } from '../../../../src/usePostMessage';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { OPEN_DIALOG_EVENT, CLOSE_DIALOG_EVENT, type OPEN_DIALOG_EVENT_TYPE } from '@rio-cloud/rio-uikit/FrameDialog';
+import usePostMessage, { type RemoteAction } from '@rio-cloud/rio-uikit/usePostMessage';
 
 export const PREFIX = 'EVENT_UIKIT_WIDGET_DEMO';
 
@@ -2018,10 +2115,10 @@ const WidgetDemo = () => {
 export default WidgetDemo;
 
 // ----------------------------------------------------------
-import Button from '../../../../src/Button';
-import Dialog from '../../../../src/Dialog';
-import usePostMessage from '../../../../src/usePostMessage';
-import { CLOSE_DIALOG_EVENT } from '../../../../src/FrameDialog';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Dialog from '@rio-cloud/rio-uikit/Dialog';
+import usePostMessage from '@rio-cloud/rio-uikit/usePostMessage';
+import { CLOSE_DIALOG_EVENT } from '@rio-cloud/rio-uikit/FrameDialog';
 
 import { dummyText } from '../../utils/data';
 import { PREFIX } from './WidgetDemo';
@@ -2066,6 +2163,16 @@ export default WidgetDemo;
 </div>
 ```
 
+#### Props: FrameDialog
+
+### FrameDialog
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| eventPrefix | string | 'EVENT_FRAME_DIALOG' | A prefix for all event types. |
+| getSourceFrame | () => HTMLIFrameElement \| null | — | A function to retrieve the iframe DOM element so a message can be sent to it. This is required when sending messages back to the origin widget iframe that triggered the dialog in the first place. |
+| className | string | — | Additional classes for the modal element. |
+
 ## ReleaseNotesDialog
 
 The ReleaseNotesDialog component is meant to be used for the release notes of a service.Note there exists also a separate ReleaseNotes component.
@@ -2237,8 +2344,14 @@ export default () => {
 ```json
 {
     "0.1.2": {
-        date: String,
-        content: arrayOf(nodes) or single node,
+        date: '20.10.2023',
+        content: (
+            <div className='padding-left-15'>
+                Summary
+                • Feature 1
+                • Feature 2
+            </div>
+        ),
     }
 }
 ```