@rio-cloud/uikit-mcp 1.1.4 → 1.1.5

package/dist/docs/components/radiobutton.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/radiobutton
-*Captured:* 2026-01-14T09:07:07.636Z
+*Captured:* 2026-02-03T14:04:20.757Z
 
 NoteWhen using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.
 
@@ -171,7 +171,23 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |
 
 ## Controlled example
 
@@ -240,7 +256,23 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |
 
 ## RadioButton with FormData
 
@@ -334,7 +366,23 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |
 
 ## Custom cards example
 
@@ -473,7 +521,23 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |
 
 ## Custom stacked example
 
@@ -615,7 +679,23 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |
 
 ## Custom list example
 
@@ -758,7 +838,23 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |
 
 ## Custom example without the tick
 
@@ -877,7 +973,23 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |
 
 ## RadioButton with custom icon
 
@@ -1158,4 +1270,20 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
+| iconSize | number | 16 | The icon Size in px. |
+| label | string \| ReactNode | — | Defines the label text. |
+| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
+| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
+| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
+| disabled | boolean | false | Defines whether the checkbox is disabled. |
+| className | string | — | Additional classes to be set on the input element. |
+| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
+| right | boolean | false | Displays the icon on the right side of the text. |
+| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
+| name | string | — | Name to be given to the input element. |
+| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
+| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

package/dist/docs/components/releaseNotes.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/releaseNotes
-*Captured:* 2026-01-14T09:07:47.269Z
+*Captured:* 2026-02-03T14:05:02.678Z
 
 Component to render release notes in a standardized manner.
 
@@ -121,4 +121,21 @@ export default () => <ReleaseNotes releaseNotes={releaseNotes[translationKey]} /
         </div>
     </div>
 </div>
+```
+
+#### Props (json)
+
+```json
+{
+    "0.1.2": {
+        date: '23.07.2018',
+        content: (
+            <div className='padding-left-15'>
+                Map view within the tour history table
+                • Modern map design as used in the Beta of the fleet monitor
+                • Works with all event types
+            </div>
+        ),
+    }
+}
 ```

package/dist/docs/components/resizer.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/resizer
-*Captured:* 2026-01-14T09:07:47.328Z
+*Captured:* 2026-02-03T14:05:03.241Z
 
 A helper component to allow elements to resize.
 
@@ -147,4 +147,15 @@ export default class ResizeExample extends Component {
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| position | typeof LEFT \| typeof RIGHT \| typeof TOP \| typeof BOTTOM | — | Defines where the resize handle is positioned relative to the element to resize. Possible values are: Resizer.LEFT, Resizer.RIGHT, Resizer.TOP, Resizer.BOTTOM 'left', 'right', 'top', 'bottom' |
+| direction | typeof HORIZONTAL \| typeof VERTICAL | — | Defines on which axis to resize. Possible values are: Resizer.HORIZONTAL Resizer.VERTICAL 'x' 'y' |
+| onResizeStart | (event: MouseEvent \| TouchEvent) => void | — | Callback when the resize starts, means when the handle is pressed. It returns the respective event. |
+| onResize | (diff: number) => void | — | Callback when the resize handle is moved. The function returns the distant between the last position and the mouse movement. Means you can either subtract or add this diff to the elements width you want to change. |
+| onResizeEnd | (event: Event) => void | — | Callback when the resize ends, means when the handle is released. It returns the respective event. |
+| className | string | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/responsiveColumnStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/responsiveColumnStripe
-*Captured:* 2026-01-14T09:07:33.190Z
+*Captured:* 2026-02-03T14:04:48.518Z
 
 The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.
 
@@ -415,4 +415,21 @@ const ComplexDemoContent = ({ day, date, active }: ComplexDemoContentProps) => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| minColumnWith | number | 300 | The minimum width in pixel of a single column. This value determines how many columns are shown per page depending on the parent width. |
+| minColumns | number | 1 | The minimum amount of columns that should be shown per page. |
+| maxColumns | number | 5 | The maximum amount of columns that should be shown per page. |
+| stretchLastItems | boolean | false | Defines whether the items on the last page are stretched out to fill the space. |
+| activePage | number | 0 | The page that shall be shown. This can be used to control the pages from outside. |
+| asType | keyof ReactHTML | 'div' | The DOM element type of the wrapping column element. If you need a list, this might be set to "ul". |
+| disableAnimation | boolean | false | Set to true to skip animating pages. |
+| onPreviousClick | (pageNumber: number, columnsPerPage: number) => void | — | Callback function for when the previous page is clicked. |
+| onNextClick | (pageNumber: number, columnsPerPage: number) => void | — | Callback function for when the next page is clicked. |
+| buttonClassName | string | — | Additional classes set to the navigation buttons. |
+| columnsWrapperClassName | string | — | Additional classes set to the component wrapper element. |
+| className | string | — | Additional classes set to the column wrapper element. |

package/dist/docs/components/responsiveVideo.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/responsiveVideo
-*Captured:* 2026-01-14T09:07:48.178Z
+*Captured:* 2026-02-03T14:05:03.249Z
 
 ## Responsive Video
 
@@ -59,4 +59,13 @@ export default () => (
         </iframe>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| src | string | — | The link to the source of the video file. |
+| aspectRatio | '4by3' \| '16by9' | '16by9' | Defined the aspect ratio of the video. Possible values are: ResponsiveVideo.ASPECT_RATIO_4_BY_3 ResponsiveVideo.ASPECT_RATIO_16_BY_9 '4by3' '16by9' |
+| allowFullScreen | boolean | true | Allows the fullscreen feature of the underlying embedded iframe. |
+| className | string | — | Additional classes added to the wrapping element. |

package/dist/docs/components/rioglyph.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/rioglyph
-*Captured:* 2026-01-14T09:07:48.689Z
+*Captured:* 2026-02-03T14:05:04.531Z
 
 The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.
 
@@ -318,4 +318,14 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | string | — | — |
+| icon | string | — | The rioglyph icon string OR an external .svg link |
+| iconClassName | string | — | Additional classes set to the icon span. |
+| size | 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| '10' \| '11' \| '12' \| '14' \| '16' \| '18' \| '20' | — | The size (text-size) of the icon |
+| spinning | boolean | false | Spinning animation. |
+| pulsing | boolean | false | Pulsing animation. |
+| filled | boolean | false | Filled style. |
+| disabled | boolean | false | Add a disabled line |
+| disabledDanger | boolean | false | Recolor the disabled line to the danger color. |
+| disabledInverse | boolean | false | Flip the disabled line. |
+| pairIcon | IconType \| string | — | The rioglyph icon string OR an external .svg link. |
+| pairIconClassName | string | — | Additional classes set to the pairIcon span. |

package/dist/docs/components/rules.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/rules
-*Captured:* 2026-01-14T09:07:50.442Z
+*Captured:* 2026-02-03T14:05:05.690Z
 
 ## RulesWrapper, RuleContainer and RuleConnector
 
@@ -305,7 +305,7 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
         <div>
             <div class="RuleContainer">
                 <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
-                    <div style="opacity: 1;">
+                    <div style="opacity: 0;">
                         <div class="display-flex flex-column align-items-center">
                             <div class="display-flex flex-column align-items-center gap-15">
                                 <div class="text-center">Why should the rule be triggered?</div>
@@ -347,7 +347,7 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
         <div>
             <div class="RuleContainer">
                 <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
-                    <div style="opacity: 1;">
+                    <div style="opacity: 0;">
                         <div class="display-flex flex-column align-items-center gap-15">
                             <div class="text-center">When should the rule be triggered?</div>
                             <div class="taglist taglist-autowidth">
@@ -383,6 +383,36 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
 </div>
 ```
 
+#### Props: RuleContainer
+
+### RuleContainer
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | true | Defines whether the container is shown. |
+| unchecked | boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
+| background | string | 'bg-lightest' | The box background class name. |
+| borderColor | string | — | The border color class name. |
+| hideConnector | boolean | false | Defines whether the connector is shown. |
+| customConnector | string \| JSX.Element | — | Overwrites the default connector. |
+| className | string | — | Additional classes for the wrapper element. |
+
+#### Props: RuleConnector
+
+### RuleConnector
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | 'start' \| 'center' \| 'end' | 'center' | The placement for the connector. Possible values are start, center and end. |
+| icon | string | 'rioglyph-plus' | The rioglyph icon name. |
+| hidden | boolean | false | Defines whether the connector is shown. |
+| background | string | 'bg-lightest' | Background color of the connector itself. |
+| pageBackground | string | 'bg-white' | Background color of the surrounding area where the rule containers are placed. |
+| contentClassName | string | 'text-color-light' | Classes to be set on the connector content. |
+| hasBorder | boolean | false | Defines whether the connector has a border. |
+| borderColor | string | — | The border color class name. |
+| className | string | — | Additional classes for the wrapper element. |
+
 ### Example: Example 2
 
 Default Example with morde conditions - (static)Mileage is greater than
@@ -763,6 +793,36 @@ export default () => (
 </div>
 ```
 
+#### Props: RuleContainer
+
+### RuleContainer
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | true | Defines whether the container is shown. |
+| unchecked | boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
+| background | string | 'bg-lightest' | The box background class name. |
+| borderColor | string | — | The border color class name. |
+| hideConnector | boolean | false | Defines whether the connector is shown. |
+| customConnector | string \| JSX.Element | — | Overwrites the default connector. |
+| className | string | — | Additional classes for the wrapper element. |
+
+#### Props: RuleConnector
+
+### RuleConnector
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | 'start' \| 'center' \| 'end' | 'center' | The placement for the connector. Possible values are start, center and end. |
+| icon | string | 'rioglyph-plus' | The rioglyph icon name. |
+| hidden | boolean | false | Defines whether the connector is shown. |
+| background | string | 'bg-lightest' | Background color of the connector itself. |
+| pageBackground | string | 'bg-white' | Background color of the surrounding area where the rule containers are placed. |
+| contentClassName | string | 'text-color-light' | Classes to be set on the connector content. |
+| hasBorder | boolean | false | Defines whether the connector has a border. |
+| borderColor | string | — | The border color class name. |
+| className | string | — | Additional classes for the wrapper element. |
+
 ### Example: AND
 
 Custom Example
@@ -898,4 +958,34 @@ const CustomConnector = ({ value }: { value: string }) => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props: RuleContainer
+
+### RuleContainer
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | true | Defines whether the container is shown. |
+| unchecked | boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
+| background | string | 'bg-lightest' | The box background class name. |
+| borderColor | string | — | The border color class name. |
+| hideConnector | boolean | false | Defines whether the connector is shown. |
+| customConnector | string \| JSX.Element | — | Overwrites the default connector. |
+| className | string | — | Additional classes for the wrapper element. |
+
+#### Props: RuleConnector
+
+### RuleConnector
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | 'start' \| 'center' \| 'end' | 'center' | The placement for the connector. Possible values are start, center and end. |
+| icon | string | 'rioglyph-plus' | The rioglyph icon name. |
+| hidden | boolean | false | Defines whether the connector is shown. |
+| background | string | 'bg-lightest' | Background color of the connector itself. |
+| pageBackground | string | 'bg-white' | Background color of the surrounding area where the rule containers are placed. |
+| contentClassName | string | 'text-color-light' | Classes to be set on the connector content. |
+| hasBorder | boolean | false | Defines whether the connector has a border. |
+| borderColor | string | — | The border color class name. |
+| className | string | — | Additional classes for the wrapper element. |