@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

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-07T12:11:56.119Z
+*Captured:* 2026-02-03T14:05:02.678Z
 
 Component to render release notes in a standardized manner.
 
@@ -128,8 +128,14 @@ export default () => <ReleaseNotes releaseNotes={releaseNotes[translationKey]} /
 ```json
 {
     "0.1.2": {
-        date: String,
-        content: arrayOf(nodes) or single node,
+        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-07T12:11:56.272Z
+*Captured:* 2026-02-03T14:05:03.241Z
 
 A helper component to allow elements to resize.
 
@@ -153,10 +153,9 @@ export default class ResizeExample extends Component {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| direction | String | Resizer.HORIZONTAL | Defines on which axis to resize. Possible values are: Resizer.HORIZONTAL Resizer.VERTICAL or 'x' 'y' |
-| position | String | Resizer.RIGHT | Defines where the resize handle is positioned relative to the element to resize. Possible values are: Resizer.LEFT Resizer.RIGHT Resizer.TOP Resizer.BOTTOM or 'left' 'right' 'top' 'bottom' |
-| onResizeStart | Function | — | Callback when the resize starts, means when the handle is pressed. It returns the respective event. |
-| onResizeEnd | Function | — | Callback when the resize ends, means when the handle is released. It returns the respective event. |
-| onResize | Function | — | 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. |
-| className | String | — | Additional classes to be set on the wrapper element. |
-| children | any | — | Any element to be rendered inside the resizer handle. |
+| 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-07T12:11:42.743Z
+*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.
 
@@ -421,15 +421,15 @@ const ComplexDemoContent = ({ day, date, active }: ComplexDemoContentProps) => (
 
 | 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 | String | 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. |
+| 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. |
+| 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-07T12:11:56.523Z
+*Captured:* 2026-02-03T14:05:03.249Z
 
 ## Responsive Video
 
@@ -65,7 +65,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| src | String | — | The link to the source of the video file. |
-| aspectRatio | String | ResponsiveVideo.ASPECT_RATIO_16_BY_9 | Defined the aspect ratio of the video. Possible values are: ResponsiveVideo.ASPECT_RATIO_4_BY_3, ResponsiveVideo.ASPECT_RATIO_16_BY_9 or '4by3', '16by9' |
-| allowFullScreen | Boolean | true | Allows the fullscreen feature of the underlying embedded iframe. |
-| className | String | — | Additional classes added to the wrapping element. |
+| 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-07T12:11:57.057Z
+*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.
 
@@ -319,13 +319,13 @@ export default () => (
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | icon | string | — | The rioglyph icon string OR an external .svg link |
-| iconClassName | string | — | Additional classes set to the icon. |
-| size | string | — | The possible values are: h1, h2, h3, h4, h5, h6 as well as the following size values 10, 11, 12, 14, 16, 18, 20 |
-| spinning | boolean | — | Uses the spinning animation. |
-| pulsing | boolean | — | Uses the pulsing animation. |
-| pairIcon | string | — | The rioglyph icon string OR an external .svg link |
-| pairIconClassName | string | — | Additional classes set to the pairIcon. |
-| filled | boolean | — | Add a round background to the icon |
-| disabled | boolean | — | Add a disabled line |
-| disabledInverse | boolean | — | Flip the disabled line |
-| disabledDanger | boolean | — | Recolor the disabled line to the danger color |
+| 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-07T12:11:59.018Z
+*Captured:* 2026-02-03T14:05:05.690Z
 
 ## RulesWrapper, RuleContainer and RuleConnector
 
@@ -130,18 +130,17 @@ export default () => {
                 </RuleContainer>
                 {firstConditionsSelected.map((selectedCondition, index) => {
                     const isLastCondition = index === size(firstConditionsSelected) - 1;
+                    const condition = availableFirstConditions.find(condition => condition.id === selectedCondition);
+                    if (!condition) {
+                        return null;
+                    }
                     return (
                         <RuleContainer
                             key={selectedCondition}
                             show={!isEmpty(firstConditionsSelected)}
                             hideConnector={isLastCondition && allConditionsSelected}
                         >
-                            <ConditionEditor
-                                condition={
-                                    availableFirstConditions.find(condition => condition.id === selectedCondition)!
-                                }
-                                onDelete={handleRemoveFirstCondition}
-                            />
+                            <ConditionEditor condition={condition} onDelete={handleRemoveFirstCondition} />
                         </RuleContainer>
                     );
                 })}
@@ -224,6 +223,7 @@ const ConditionsList = ({
                                     clickable={condition.enabled}
                                     disabled={!condition.enabled}
                                     onClick={() => handleSelectOption(condition.id)}
+                                    round={false}
                                 >
                                     {condition.id}
                                 </Tag>
@@ -261,10 +261,10 @@ const ConditionsTwo = ({ onRuleSelect }: ConditionsTwoProps) => {
         <div className='display-flex flex-column align-items-center gap-15'>
             <div className='text-center'>When should the rule be triggered?</div>
             <TagList>
-                <Tag active clickable={false}>
+                <Tag active clickable={false} round={false}>
                     Immediately
                 </Tag>
-                <Tag clickable onClick={onRuleSelect}>
+                <Tag clickable onClick={onRuleSelect} round={false}>
                     When all conditions apply for at least
                 </Tag>
             </TagList>
@@ -305,18 +305,18 @@ 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>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Mileage</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Speed</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Engine Speed</div>
                                     </div>
                                 </div>
@@ -347,14 +347,14 @@ 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">
-                                <div class="tag active clickable rioglyph rioglyph-ok">
+                                <div class="tag active clickable rioglyph rioglyph-ok rounded">
                                     <div class="tag-inner">Immediately</div>
                                 </div>
-                                <div class="tag clickable">
+                                <div class="tag clickable rounded">
                                     <div class="tag-inner">When all conditions apply for at least</div>
                                 </div>
                             </div>
@@ -389,13 +389,13 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
 
 | 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 \| Node | — | Overwrites the default connector. |
-| className | String | — | Additional classes for the wrapper element. |
+| 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
 
@@ -403,15 +403,15 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placement | String | 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. |
+| 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
 
@@ -534,28 +534,52 @@ export default () => (
                     <div className='flex-1-1-0'>
                         <legend>Category A</legend>
                         <TagList>
-                            <Tag clickable>Mileage</Tag>
-                            <Tag clickable>Fuel Level</Tag>
-                            <Tag clickable>Engine speed</Tag>
-                            <Tag clickable>Driving/standing</Tag>
+                            <Tag round={false} clickable>
+                                Mileage
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Fuel Level
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Engine speed
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Driving/standing
+                            </Tag>
                         </TagList>
                     </div>
                     <div className='flex-1-1-0'>
                         <legend>Category B</legend>
                         <TagList>
-                            <Tag clickable>Remaining daily driving time</Tag>
-                            <Tag clickable>Remaining weekly driving time</Tag>
-                            <Tag clickable>Daily driving time</Tag>
-                            <Tag clickable>Weekly driving time</Tag>
+                            <Tag round={false} clickable>
+                                Remaining daily driving time
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Remaining weekly driving time
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Daily driving time
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Weekly driving time
+                            </Tag>
                         </TagList>
                     </div>
                     <div className='flex-1-1-0'>
                         <legend>Category C</legend>
                         <TagList>
-                            <Tag clickable>Driver Card</Tag>
-                            <Tag clickable>Power take-off</Tag>
-                            <Tag clickable>Inside/Outside geofence</Tag>
-                            <Tag clickable>Inside/Outside Country</Tag>
+                            <Tag round={false} clickable>
+                                Driver Card
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Power take-off
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Inside/Outside geofence
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Inside/Outside Country
+                            </Tag>
                         </TagList>
                     </div>
                 </div>
@@ -566,10 +590,12 @@ export default () => (
                     <span>When should the rule be triggered?</span>
 
                     <TagList>
-                        <Tag active clickable={false}>
+                        <Tag round={false} active clickable={false}>
                             Immediately
                         </Tag>
-                        <Tag clickable>When all conditions apply for at least</Tag>
+                        <Tag round={false} clickable>
+                            When all conditions apply for at least
+                        </Tag>
                     </TagList>
                 </div>
             </RuleContainer>
@@ -661,16 +687,16 @@ export default () => (
                             <div class="flex-1-1-0">
                                 <legend>Category A</legend>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Mileage</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Fuel Level</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Engine speed</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Driving/standing</div>
                                     </div>
                                 </div>
@@ -678,16 +704,16 @@ export default () => (
                             <div class="flex-1-1-0">
                                 <legend>Category B</legend>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Remaining daily driving time</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Remaining weekly driving time</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Daily driving time</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Weekly driving time</div>
                                     </div>
                                 </div>
@@ -695,16 +721,16 @@ export default () => (
                             <div class="flex-1-1-0">
                                 <legend>Category C</legend>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Driver Card</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Power take-off</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Inside/Outside geofence</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Inside/Outside Country</div>
                                     </div>
                                 </div>
@@ -735,10 +761,10 @@ export default () => (
                         <div class="display-flex flex-column align-items-center gap-15">
                             <span>When should the rule be triggered?</span>
                             <div class="taglist taglist-autowidth">
-                                <div class="tag active clickable rioglyph rioglyph-ok">
+                                <div class="tag active clickable rioglyph rioglyph-ok rounded">
                                     <div class="tag-inner">Immediately</div>
                                 </div>
-                                <div class="tag clickable">
+                                <div class="tag clickable rounded">
                                     <div class="tag-inner">When all conditions apply for at least</div>
                                 </div>
                             </div>
@@ -773,13 +799,13 @@ export default () => (
 
 | 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 \| Node | — | Overwrites the default connector. |
-| className | String | — | Additional classes for the wrapper element. |
+| 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
 
@@ -787,15 +813,15 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placement | String | 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. |
+| 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
 
@@ -940,13 +966,13 @@ const CustomConnector = ({ value }: { value: string }) => (
 
 | 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 \| Node | — | Overwrites the default connector. |
-| className | String | — | Additional classes for the wrapper element. |
+| 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
 
@@ -954,12 +980,12 @@ const CustomConnector = ({ value }: { value: string }) => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placement | String | 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. |
+| 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. |