@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/components/radioCardGroup.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/radioCardGroup
-*Captured:* 2026-03-06T10:40:12.386Z
+*Captured:* 2026-04-20T12:53:47.409Z
 
 Card-based radio selection built on top of RadioButton. Supports options-based usage and a compound API via RadioCardItem and RadioCardIndicator.
 

package/dist/docs/components/radiobutton.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/radiobutton
-*Captured:* 2026-03-06T10:40:15.818Z
+*Captured:* 2026-04-20T12:53:49.743Z
 
 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.
 
@@ -953,119 +953,117 @@ Save 25%
 ```tsx
 import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
 
-export default () => {
-    return (
+export default () => (
+    <div>
         <div>
-            <div>
-                <RadioButton
-                    name='radiosIconInline'
-                    id='IconInlineTruck'
-                    inline
-                    icon='rioglyph-truck'
-                    iconLabelPosition='horizontal'
-                >
-                    <span>Truck</span>
-                </RadioButton>
-
-                <RadioButton
-                    name='radiosIconInline'
-                    id='IconInlineBus'
-                    inline
-                    icon='rioglyph-bus'
-                    iconLabelPosition='horizontal'
-                >
-                    <span>Bus</span>
-                </RadioButton>
+            <RadioButton
+                name='radiosIconInline'
+                id='IconInlineTruck'
+                inline
+                icon='rioglyph-truck'
+                iconLabelPosition='horizontal'
+            >
+                <span>Truck</span>
+            </RadioButton>
 
-                <RadioButton
-                    name='radiosIconInline'
-                    id='IconInlineTrailer'
-                    inline
-                    icon='rioglyph-trailer'
-                    iconLabelPosition='horizontal'
-                >
-                    <span>Trailer</span>
-                </RadioButton>
-            </div>
+            <RadioButton
+                name='radiosIconInline'
+                id='IconInlineBus'
+                inline
+                icon='rioglyph-bus'
+                iconLabelPosition='horizontal'
+            >
+                <span>Bus</span>
+            </RadioButton>
 
-            <hr />
+            <RadioButton
+                name='radiosIconInline'
+                id='IconInlineTrailer'
+                inline
+                icon='rioglyph-trailer'
+                iconLabelPosition='horizontal'
+            >
+                <span>Trailer</span>
+            </RadioButton>
+        </div>
 
-            <div>
-                <RadioButton name='radiosIcon' id='IconTruck' inline icon='rioglyph-truck' iconSize={75}>
-                    <span className='text-size-16 margin-top-10'>Truck</span>
-                </RadioButton>
+        <hr />
 
-                <RadioButton name='radiosIcon' id='IconBus' inline icon='rioglyph-bus' iconSize={75}>
-                    <span className='text-size-16 margin-top-10'>Bus</span>
-                </RadioButton>
+        <div>
+            <RadioButton name='radiosIcon' id='IconTruck' inline icon='rioglyph-truck' iconSize={75}>
+                <span className='text-size-16 margin-top-10'>Truck</span>
+            </RadioButton>
 
-                <RadioButton name='radiosIcon' id='IconBus' inline icon='rioglyph-van' iconSize={75}>
-                    <span className='text-size-16 margin-top-10'>Van</span>
-                </RadioButton>
+            <RadioButton name='radiosIcon' id='IconBus' inline icon='rioglyph-bus' iconSize={75}>
+                <span className='text-size-16 margin-top-10'>Bus</span>
+            </RadioButton>
 
-                <RadioButton name='radiosIcon' id='IconTrailer' inline icon='rioglyph-trailer' iconSize={75}>
-                    <span className='text-size-16 margin-top-10'>Trailer</span>
-                </RadioButton>
-            </div>
+            <RadioButton name='radiosIcon' id='IconBus' inline icon='rioglyph-van' iconSize={75}>
+                <span className='text-size-16 margin-top-10'>Van</span>
+            </RadioButton>
 
-            <hr />
+            <RadioButton name='radiosIcon' id='IconTrailer' inline icon='rioglyph-trailer' iconSize={75}>
+                <span className='text-size-16 margin-top-10'>Trailer</span>
+            </RadioButton>
+        </div>
 
-            <div className='padding-25 max-width-400'>
-                <div className='display-flex content-space-between column-gap-25 margin-bottom-25'>
-                    <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
-                        <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>6 Month</div>
-                        <div className='text-size-12 text-color-dark' />
-                    </div>
+        <hr />
 
-                    <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
-                        <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>12 Month</div>
-                        <div className='text-size-12 text-color-dark'>Save 15%</div>
-                    </div>
+        <div className='padding-25 max-width-400'>
+            <div className='display-flex content-space-between column-gap-25 margin-bottom-25'>
+                <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
+                    <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>6 Month</div>
+                    <div className='text-size-12 text-color-dark' />
+                </div>
 
-                    <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
-                        <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>24 Month</div>
-                        <div className='text-size-12 text-color-dark'>Save 25%</div>
-                    </div>
+                <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
+                    <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>12 Month</div>
+                    <div className='text-size-12 text-color-dark'>Save 15%</div>
                 </div>
 
-                <div
-                    className={
-                        'display-flex justify-content-between column-gap-25 bg-white rounded-circle ' +
-                        'padding-3 border-style-solid border-width-1 border-color-light'
-                    }
-                >
-                    <RadioButton
-                        name='radiosContracts'
-                        id='Periode1'
-                        inline
-                        icon='rioglyph-start'
-                        iconSize={30}
-                        className='padding-0 margin-0 width-33pct'
-                        defaultChecked
-                    />
-
-                    <RadioButton
-                        name='radiosContracts'
-                        id='Periode2'
-                        inline
-                        icon='rioglyph-stopover'
-                        iconSize={30}
-                        className='padding-0 margin-0 width-33pct'
-                    />
-
-                    <RadioButton
-                        name='radiosContracts'
-                        id='Periode3'
-                        inline
-                        icon='rioglyph-stopover'
-                        iconSize={30}
-                        className='padding-0 margin-0 width-33pct'
-                    />
+                <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
+                    <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>24 Month</div>
+                    <div className='text-size-12 text-color-dark'>Save 25%</div>
                 </div>
             </div>
+
+            <div
+                className={
+                    'display-flex justify-content-between column-gap-25 bg-white rounded-circle ' +
+                    'padding-3 border-style-solid border-width-1 border-color-light'
+                }
+            >
+                <RadioButton
+                    name='radiosContracts'
+                    id='Periode1'
+                    inline
+                    icon='rioglyph-start'
+                    iconSize={30}
+                    className='padding-0 margin-0 width-33pct'
+                    defaultChecked
+                />
+
+                <RadioButton
+                    name='radiosContracts'
+                    id='Periode2'
+                    inline
+                    icon='rioglyph-stopover'
+                    iconSize={30}
+                    className='padding-0 margin-0 width-33pct'
+                />
+
+                <RadioButton
+                    name='radiosContracts'
+                    id='Periode3'
+                    inline
+                    icon='rioglyph-stopover'
+                    iconSize={30}
+                    className='padding-0 margin-0 width-33pct'
+                />
+            </div>
         </div>
-    );
-};
+    </div>
+);
 ```
 
 #### HTML (html)

package/dist/docs/components/releaseNotes.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/releaseNotes
-*Captured:* 2026-03-06T10:41:03.494Z
+*Captured:* 2026-04-20T12:54:51.328Z
 
 Component to render release notes in a standardized manner.
 

package/dist/docs/components/resizer.md

@@ -3,14 +3,12 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/resizer
-*Captured:* 2026-03-06T10:41:05.715Z
+*Captured:* 2026-04-20T12:54:51.929Z
 
 A helper component to allow elements to resize.
 
 ## Resizer
 
-> Note: When the resizer position is set to left or top you also need to position your elements on screen accordingly. Otherwise, the browser will set the height or width and expands in the opposite direction
-
 ### Example: Example 1
 
 Horizontal (default):

package/dist/docs/components/responsiveColumnStripe.md

@@ -3,14 +3,12 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/responsiveColumnStripe
-*Captured:* 2026-03-06T10:40:46.362Z
+*Captured:* 2026-04-20T12:54:28.779Z
 
 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.
 
 ## ResponsiveColumnStripe
 
-> Note: It is mandatory to set the key attribute for the individual items. If they are not set or when they are not unique the calculation of how many items to show on which page wont work. In case a custom component is used as item, wrap it in a native DOM element and set the key to the wrapping element.
-
 ### Example: Shipments
 
 ResponsiveColumnStripe with minColumns 2 and maxColumns 5

package/dist/docs/components/responsiveVideo.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/responsiveVideo
-*Captured:* 2026-03-06T10:41:04.595Z
+*Captured:* 2026-04-20T12:54:53.187Z
 
 ## Responsive Video
 

package/dist/docs/components/rioglyph.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/rioglyph
-*Captured:* 2026-03-06T10:41:05.353Z
+*Captured:* 2026-04-20T12:54:53.164Z
 
 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.
 

package/dist/docs/components/rules.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/rules
-*Captured:* 2026-03-06T10:41:08.161Z
+*Captured:* 2026-04-20T12:54:55.085Z
 
 ## RulesWrapper, RuleContainer and RuleConnector
 
@@ -224,62 +224,56 @@ const ConditionsList = ({
 
 type ConditionEditorProps = { condition: Condition; onDelete: (id: string) => void };
 
-const ConditionEditor = ({ condition, onDelete }: ConditionEditorProps) => {
-    return (
-        <form>
-            <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
-                <div className='flex-1-1-0 line-height-125rel'>{condition.label}</div>
-                <div className='flex-1-1-0 display-flex gap-10'>
-                    {condition.formElements}
-                    <Button bsStyle={Button.MUTED} iconOnly onClick={() => onDelete(condition.id)}>
-                        <span className='rioglyph rioglyph-trash' />
-                    </Button>
-                </div>
+const ConditionEditor = ({ condition, onDelete }: ConditionEditorProps) => (
+    <form>
+        <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
+            <div className='flex-1-1-0 line-height-125rel'>{condition.label}</div>
+            <div className='flex-1-1-0 display-flex gap-10'>
+                {condition.formElements}
+                <Button bsStyle={Button.MUTED} iconOnly onClick={() => onDelete(condition.id)}>
+                    <span className='rioglyph rioglyph-trash' />
+                </Button>
             </div>
-        </form>
-    );
-};
+        </div>
+    </form>
+);
 
 type ConditionsTwoProps = { onRuleSelect: VoidFunction };
 
-const ConditionsTwo = ({ onRuleSelect }: ConditionsTwoProps) => {
-    return (
-        <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} round={false}>
-                    Immediately
-                </Tag>
-                <Tag clickable onClick={onRuleSelect} round={false}>
-                    When all conditions apply for at least
-                </Tag>
-            </TagList>
-        </div>
-    );
-};
+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} round={false}>
+                Immediately
+            </Tag>
+            <Tag clickable onClick={onRuleSelect} round={false}>
+                When all conditions apply for at least
+            </Tag>
+        </TagList>
+    </div>
+);
 
 type ConditionEditorTwpProps = { onDelete: VoidFunction };
 
-const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
-    return (
-        <form>
-            <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
-                <div className='flex-1-1-0 line-height-125rel'>When all conditions apply for at least</div>
-                <div className='flex-1-1-0 display-flex gap-10'>
-                    <div className='width-100pct margin-bottom-0'>
-                        <div className='input-group min-width-100'>
-                            <input className='form-control' type='text' name='value' />
-                            <div className='input-group-addon'>minutes</div>
-                        </div>
+const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => (
+    <form>
+        <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
+            <div className='flex-1-1-0 line-height-125rel'>When all conditions apply for at least</div>
+            <div className='flex-1-1-0 display-flex gap-10'>
+                <div className='width-100pct margin-bottom-0'>
+                    <div className='input-group min-width-100'>
+                        <input className='form-control' type='text' name='value' />
+                        <div className='input-group-addon'>minutes</div>
                     </div>
-                    <Button bsStyle={Button.MUTED} iconOnly onClick={onDelete}>
-                        <span className='rioglyph rioglyph-trash' />
-                    </Button>
                 </div>
+                <Button bsStyle={Button.MUTED} iconOnly onClick={onDelete}>
+                    <span className='rioglyph rioglyph-trash' />
+                </Button>
             </div>
-        </form>
-    );
-};
+        </div>
+    </form>
+);
 ```
 
 #### HTML (html)