@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

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-27T14:57:22.225Z
 
 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-27T14:57:24.606Z
 
 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.
 
@@ -370,6 +370,8 @@ export default () => {
 
 > Note: When 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.
 
+> Note
+
 ### Example: This option is a first option
 
 Option 1
@@ -953,119 +955,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='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='IconInlineBus'
+                inline
+                icon='rioglyph-bus'
+                iconLabelPosition='horizontal'
+            >
+                <span>Bus</span>
+            </RadioButton>
 
-                <RadioButton
-                    name='radiosIconInline'
-                    id='IconInlineTrailer'
-                    inline
-                    icon='rioglyph-trailer'
-                    iconLabelPosition='horizontal'
-                >
-                    <span>Trailer</span>
-                </RadioButton>
-            </div>
+            <RadioButton
+                name='radiosIconInline'
+                id='IconInlineTrailer'
+                inline
+                icon='rioglyph-trailer'
+                iconLabelPosition='horizontal'
+            >
+                <span>Trailer</span>
+            </RadioButton>
+        </div>
 
-            <hr />
+        <hr />
 
-            <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-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-27T14:58:25.843Z
 
 Component to render release notes in a standardized manner.
 

package/dist/docs/components/resizer.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/resizer
-*Captured:* 2026-03-06T10:41:05.715Z
+*Captured:* 2026-04-27T14:58:27.067Z
 
 A helper component to allow elements to resize.
 

package/dist/docs/components/responsiveColumnStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/responsiveColumnStripe
-*Captured:* 2026-03-06T10:40:46.362Z
+*Captured:* 2026-04-27T14:58:03.536Z
 
 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.
 

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-27T14:58:27.160Z
 
 ## 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-27T14:58:27.558Z
 
 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-27T14:58:30.084Z
 
 ## 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)