@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

package/dist/docs/components/circularProgress.md

@@ -0,0 +1,465 @@
+# CircularProgress
+
+*Category:* Components
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#/components/circularProgress
+*Captured:* 2026-02-23T15:48:35.588Z
+
+## CircularProgress
+
+### Example: Default circular progress
+
+Default circular progress
+30
+
+Circular progress customizations
+85 km/h
+
+Speed
+
+40%
+
+Custom label
+
+100
+
+With max value
+
+Different sizes with custom value label
+
+xs
+
+sm
+
+md
+
+lg
+
+xl
+
+Strong customization
+40%
+
+3200 Points
+
+#### Summary
+
+Default circular progress
+30
+
+Circular progress customizations
+85 km/h
+
+Speed
+
+40%
+
+Custom label
+
+100
+
+With max value
+
+Different sizes with custom value label
+
+xs
+
+sm
+
+md
+
+lg
+
+xl
+
+Strong customization
+40%
+
+3200 Points
+
+#### React (tsx)
+
+```tsx
+import CircularProgress from '@rio-cloud/rio-uikit/CircularProgress';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => (
+    <>
+        <FormLabel>Default circular progress</FormLabel>
+        <div className='display-flex gap-50 margin-top-15'>
+            <CircularProgress value={30} />
+        </div>
+
+        <Divider spacing={25} />
+
+        <FormLabel>Circular progress customizations</FormLabel>
+        <div className='display-flex gap-50 margin-top-15'>
+            <CircularProgress
+                color='warning'
+                formatOptions={{ style: 'unit', unit: 'kilometer-per-hour' }}
+                valueLabelClassName='text-italic'
+                label='Speed'
+                size='lg'
+                strokeWidth={4}
+                value={85}
+            />
+            <CircularProgress
+                color='info'
+                formatOptions={{ style: 'unit', unit: 'percent' }}
+                valueLabelClassName='text-size-16 text-medium text-color-dark'
+                label='Custom label'
+                strokeWidth={3}
+                value={40}
+            />
+            <CircularProgress valueLabelClassName='text-size-' label='With max value' value={100} maxValue={300} />
+            <CircularProgress showValueLabel={false} value={0} />
+        </div>
+
+        <Divider spacing={25} />
+
+        <FormLabel>Different sizes with custom value label</FormLabel>
+        <div className='display-flex gap-50 margin-top-15'>
+            <CircularProgress
+                color='success'
+                valueLabel={<span className='rioglyph rioglyph-ok text-color-success text-size-14' />}
+                size='xs'
+                label='xs'
+                animationDelay={1}
+                value={70}
+            />
+            <CircularProgress
+                color='success'
+                valueLabel={<span className='rioglyph rioglyph-ok text-color-success text-size-18' />}
+                size='sm'
+                label='sm'
+                animationDelay={1.2}
+                value={70}
+            />
+            <CircularProgress
+                color='success'
+                valueLabel={<span className='rioglyph rioglyph-ok text-color-success text-size-h3' />}
+                size='md'
+                label='md'
+                animationDelay={1.4}
+                value={70}
+            />
+            <CircularProgress
+                color='success'
+                valueLabel={<span className='rioglyph rioglyph-ok text-color-success text-size-h2' />}
+                size='lg'
+                label='lg'
+                animationDelay={1.6}
+                value={70}
+            />
+            <CircularProgress
+                color='success'
+                valueLabel={<span className='rioglyph rioglyph-ok text-color-success text-size-h1' />}
+                size='xl'
+                label='xl'
+                animationDelay={1.8}
+                value={70}
+            />
+        </div>
+
+        <Divider spacing={25} />
+
+        <FormLabel>Strong customization</FormLabel>
+        <div className='display-grid place-items-center bg-primary width-200 height-200 rounded'>
+            <CircularProgress
+                color='white'
+                formatOptions={{ style: 'unit', unit: 'percent' }}
+                valueLabelClassName='text-medium text-size-h2 text-color-white'
+                trackClassName='opacity-30'
+                label={
+                    <div className='border border-color-white rounded-circle padding-x-10 padding-y-5'>3200 Points</div>
+                }
+                strokeWidth={12}
+                size='xl'
+                animationDelay={2}
+                value={40}
+            />
+        </div>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Default circular progress</div>
+<div class="display-flex gap-50 margin-top-15">
+    <div class="display-flex flex-column align-items-center text-center gap-10 ">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" aria-valuetext="30" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+            <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="234.63622785786367">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center">30</div>
+        </div>
+    </div>
+</div>
+<div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
+    <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+    </div>
+</div>
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Circular progress customizations</div>
+<div class="display-flex gap-50 margin-top-15">
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r1:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="85" aria-valuetext="85 km/h" style="width: 80px; height: 80px; position: relative; display: grid; place-items: center;">
+            <svg width="80" height="80" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="48" fill="none" stroke="var(--gray-lighter)" stroke-width="4" class="">
+                </circle>
+                <circle cx="50" cy="50" r="48" fill="none" stroke="var(--brand-warning)" stroke-width="4" stroke-linecap="round" stroke-dasharray="301.59289474462014" stroke-dashoffset="140.7868014175326">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center text-italic">85 km/h</div>
+        </div>
+        <div id="circular-progress-label-:r1:" class="">Speed</div>
+    </div>
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r2:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" aria-valuetext="40%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+            <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--gray-lighter)" stroke-width="3" class="">
+                </circle>
+                <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--brand-info)" stroke-width="3" stroke-linecap="round" stroke-dasharray="304.7344873982099" stroke-dashoffset="228.2727665515065">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center text-size-16 text-medium text-color-dark">40%</div>
+        </div>
+        <div id="circular-progress-label-:r2:" class="">Custom label</div>
+    </div>
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r3:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="300" aria-valuenow="100" aria-valuetext="100" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+            <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="228.5928616053751">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center text-size-">100</div>
+        </div>
+        <div id="circular-progress-label-:r3:" class="">With max value</div>
+    </div>
+    <div class="display-flex flex-column align-items-center text-center gap-10 ">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+            <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="289.02652413026095">
+                </circle>
+            </svg>
+        </div>
+    </div>
+</div>
+<div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
+    <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+    </div>
+</div>
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Different sizes with custom value label</div>
+<div class="display-flex gap-50 margin-top-15">
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r5:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" style="width: 32px; height: 32px; position: relative; display: grid; place-items: center;">
+            <svg width="32" height="32" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-success)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="289.02652413026095">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center">
+                <span class="rioglyph rioglyph-ok text-color-success text-size-14">
+                </span>
+            </div>
+        </div>
+        <div id="circular-progress-label-:r5:" class="">xs</div>
+    </div>
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r6:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" style="width: 48px; height: 48px; position: relative; display: grid; place-items: center;">
+            <svg width="48" height="48" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-success)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="289.02652413026095">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center">
+                <span class="rioglyph rioglyph-ok text-color-success text-size-18">
+                </span>
+            </div>
+        </div>
+        <div id="circular-progress-label-:r6:" class="">sm</div>
+    </div>
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r7:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+            <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-success)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="289.02652413026095">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center">
+                <span class="rioglyph rioglyph-ok text-color-success text-size-h3">
+                </span>
+            </div>
+        </div>
+        <div id="circular-progress-label-:r7:" class="">md</div>
+    </div>
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r8:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" style="width: 80px; height: 80px; position: relative; display: grid; place-items: center;">
+            <svg width="80" height="80" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-success)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="289.02652413026095">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center">
+                <span class="rioglyph rioglyph-ok text-color-success text-size-h2">
+                </span>
+            </div>
+        </div>
+        <div id="circular-progress-label-:r8:" class="">lg</div>
+    </div>
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:r9:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" style="width: 120px; height: 120px; position: relative; display: grid; place-items: center;">
+            <svg width="120" height="120" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+                </circle>
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-success)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="289.02652413026095">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center">
+                <span class="rioglyph rioglyph-ok text-color-success text-size-h1">
+                </span>
+            </div>
+        </div>
+        <div id="circular-progress-label-:r9:" class="">xl</div>
+    </div>
+</div>
+<div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
+    <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+    </div>
+</div>
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Strong customization</div>
+<div class="display-grid place-items-center bg-primary width-200 height-200 rounded">
+    <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:ra:">
+        <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" aria-valuetext="40%" style="width: 120px; height: 120px; position: relative; display: grid; place-items: center;">
+            <svg width="120" height="120" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+                <circle cx="50" cy="50" r="44" fill="none" stroke="var(--gray-lighter)" stroke-width="12" class="opacity-30">
+                </circle>
+                <circle cx="50" cy="50" r="44" fill="none" stroke="var(--color-white)" stroke-width="12" stroke-linecap="round" stroke-dasharray="276.46015351590177" stroke-dashoffset="276.46015351590177">
+                </circle>
+            </svg>
+            <div class="position-absolute display-grid place-items-center text-medium text-size-h2 text-color-white">40%</div>
+        </div>
+        <div id="circular-progress-label-:ra:" class="">
+            <div class="border border-color-white rounded-circle padding-x-10 padding-y-5">3200 Points</div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | React.ReactNode | — | Optional text or node shown below the ring. |
+| size | CircularProgressSize | 'md' | Preset size for the component. Possible values are: 'xs' 'sm' 'md' 'lg' 'xl' |
+| color | CircularProgressColor | 'primary' | Color preset for the progress ring. Possible values are: 'default' 'primary' 'secondary' 'info' 'success' 'warning' 'danger' 'white' |
+| value | number | 0 | Defaults to 0 to avoid indeterminate/spinner visuals. |
+| valueLabel | React.ReactNode | — | Override the rendered value label content. |
+| minValue | number | 0 | Minimum value for the range. |
+| maxValue | number | 100 | Maximum value for the range. |
+| formatOptions | Intl.NumberFormatOptions | — | Formatting for the visible value label. - If style === "percent": formats ratio (value-min)/(max-min) - Otherwise: formats the raw value (e.g. unit) |
+| isIndeterminate | boolean | false | Indeterminate mode is opt-in. Animates the progress indefinitely. May come in handy when the value still loads to prevent layout shifting. |
+| showValueLabel | boolean | true | Toggles the value label in the center of the ring. |
+| strokeWidth | number | 8 | Stroke width used for the ring and track. |
+| trackColor | CircularProgressTrackColor | 'lighter' | Track color preset for the background ring. Possible values are: 'decent' 'lightest' 'lighter' 'light' 'gray' 'dark' 'darker' 'darkest' 'white' |
+| trackClassName | string | — | Class name for the track (background ring). |
+| disableAnimation | boolean | false | Disable motion even if the user allows animations. |
+| animationDelay | number | 0 | Delay before the progress animation starts (in seconds). |
+| className | string | — | Class name for the outer wrapper. |
+| ringWrapClassName | string | — | Class name for the ring wrapper. |
+| valueLabelClassName | string | — | Class name for the center value label. |
+| labelClassName | string | — | Class name for the label under the ring. |
+
+### Example: Example 2
+
+0%
+
+Processing configuration...
+
+#### Summary
+
+0%
+
+Processing configuration...
+
+#### React (tsx)
+
+```tsx
+import CircularProgress from '@rio-cloud/rio-uikit/CircularProgress';
+import { useEffect, useState } from 'react';
+
+export default () => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setValue(v => (v >= 100 ? 0 : v + 10));
+        }, 500);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <CircularProgress
+            label='Processing configuration...'
+            color='info'
+            value={value}
+            formatOptions={{ style: 'unit', unit: 'percent' }}
+        />
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:rb:">
+    <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="10" aria-valuetext="10%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+        <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
+            <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
+            </circle>
+            <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-info)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="261.81864116510957">
+            </circle>
+        </svg>
+        <div class="position-absolute display-grid place-items-center">10%</div>
+    </div>
+    <div id="circular-progress-label-:rb:" class="">Processing configuration...</div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | React.ReactNode | — | Optional text or node shown below the ring. |
+| size | CircularProgressSize | 'md' | Preset size for the component. Possible values are: 'xs' 'sm' 'md' 'lg' 'xl' |
+| color | CircularProgressColor | 'primary' | Color preset for the progress ring. Possible values are: 'default' 'primary' 'secondary' 'info' 'success' 'warning' 'danger' 'white' |
+| value | number | 0 | Defaults to 0 to avoid indeterminate/spinner visuals. |
+| valueLabel | React.ReactNode | — | Override the rendered value label content. |
+| minValue | number | 0 | Minimum value for the range. |
+| maxValue | number | 100 | Maximum value for the range. |
+| formatOptions | Intl.NumberFormatOptions | — | Formatting for the visible value label. - If style === "percent": formats ratio (value-min)/(max-min) - Otherwise: formats the raw value (e.g. unit) |
+| isIndeterminate | boolean | false | Indeterminate mode is opt-in. Animates the progress indefinitely. May come in handy when the value still loads to prevent layout shifting. |
+| showValueLabel | boolean | true | Toggles the value label in the center of the ring. |
+| strokeWidth | number | 8 | Stroke width used for the ring and track. |
+| trackColor | CircularProgressTrackColor | 'lighter' | Track color preset for the background ring. Possible values are: 'decent' 'lightest' 'lighter' 'light' 'gray' 'dark' 'darker' 'darkest' 'white' |
+| trackClassName | string | — | Class name for the track (background ring). |
+| disableAnimation | boolean | false | Disable motion even if the user allows animations. |
+| animationDelay | number | 0 | Delay before the progress animation starts (in seconds). |
+| className | string | — | Class name for the outer wrapper. |
+| ringWrapClassName | string | — | Class name for the ring wrapper. |
+| valueLabelClassName | string | — | Class name for the center value label. |
+| labelClassName | string | — | Class name for the label under the ring. |

package/dist/docs/components/clearableInput.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Interaction
-*Source:* https://uikit.developers.rio.cloud/#components/clearableInput
-*Captured:* 2026-02-03T14:04:13.989Z
+*Source:* https://uikit.developers.rio.cloud/#/components/clearableInput
+*Captured:* 2026-02-23T15:48:12.673Z
 
 Control, which can be cleared when it has a value.
 

package/dist/docs/components/collapse.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Show/Hide
-*Source:* https://uikit.developers.rio.cloud/#components/collapse
-*Captured:* 2026-02-03T14:04:23.050Z
+*Source:* https://uikit.developers.rio.cloud/#/components/collapse
+*Captured:* 2026-02-23T15:48:20.836Z
 
 The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.
 
@@ -83,7 +83,7 @@ export default () => {
                     <div class="margin-bottom-15">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
                     <div class="dropdown btn-group">
-                        <button type="button" id="6qynxk6hkce" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
+                        <button type="button" id="iis5wu4ett8" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
                             </span>
                         </button>
                     </div>

package/dist/docs/components/composedCharts.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Charts
-*Source:* https://uikit.developers.rio.cloud/#components/composedCharts
-*Captured:* 2026-02-03T14:05:29.367Z
+*Source:* https://uikit.developers.rio.cloud/#/components/composedCharts
+*Captured:* 2026-02-23T15:49:24.050Z
 
 ## ComposedChart
 
@@ -239,14 +239,14 @@ const data: CustomData[] = [
                         <g class="recharts-layer recharts-area">
                             <g class="recharts-layer">
                                 <defs>
-                                    <clipPath id="animationClipPath-recharts-area-:r1:">
-                                        <rect x="70.41927083333333" y="0" width="59.125674839406074" height="124">
+                                    <clipPath id="animationClipPath-recharts-area-:r0:">
+                                        <rect x="70.41927083333333" y="0" width="59.200122759862595" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
-                                <g class="recharts-layer" clip-path="url(#animationClipPath-recharts-area-:r1:)">
+                                <g class="recharts-layer" clip-path="url(#animationClipPath-recharts-area-:r0:)">
                                     <g class="recharts-layer">
-                                        <path stroke-width="1" fill="#e878b6 " fill-opacity="0.5" height="108" stroke="none" width="365.03125" id="recharts-area-:r1:" class="recharts-curve recharts-area-area" d="M70.419,39C87.365,35.82,104.312,32.64,121.258,32.64C138.204,32.64,155.15,63.66,172.096,63.66C189.043,63.66,205.989,49.32,222.935,49.32C239.881,49.32,256.827,57,273.773,57C290.72,57,307.666,39,324.612,21L324.612,123C307.666,123,290.72,123,273.773,123C256.827,123,239.881,123,222.935,123C205.989,123,189.043,123,172.096,123C155.15,123,138.204,123,121.258,123C104.312,123,87.365,123,70.419,123Z">
+                                        <path stroke-width="1" fill="#e878b6 " fill-opacity="0.5" height="108" stroke="none" width="365.03125" id="recharts-area-:r0:" class="recharts-curve recharts-area-area" d="M70.419,39C87.365,35.82,104.312,32.64,121.258,32.64C138.204,32.64,155.15,63.66,172.096,63.66C189.043,63.66,205.989,49.32,222.935,49.32C239.881,49.32,256.827,57,273.773,57C290.72,57,307.666,39,324.612,21L324.612,123C307.666,123,290.72,123,273.773,123C256.827,123,239.881,123,222.935,123C205.989,123,189.043,123,172.096,123C155.15,123,138.204,123,121.258,123C104.312,123,87.365,123,70.419,123Z">
                                         </path>
                                         <path stroke-width="1" fill="none" fill-opacity="0.5" height="108" stroke="#e878b6 " width="365.03125" class="recharts-curve recharts-area-curve" d="M70.419,39C87.365,35.82,104.312,32.64,121.258,32.64C138.204,32.64,155.15,63.66,172.096,63.66C189.043,63.66,205.989,49.32,222.935,49.32C239.881,49.32,256.827,57,273.773,57C290.72,57,307.666,39,324.612,21">
                                         </path>
@@ -258,37 +258,37 @@ const data: CustomData[] = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r2:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page A" x="50.0839" y="79.1557" width="40" height="43.8443" class="recharts-rectangle" d="M50.0839,82.1557A 3,3,0,0,1,53.0839,79.1557L 87.0839,79.1557A 3,3,0,0,1,
-        90.0839,82.1557L 90.0839,123L 50.0839,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page A" x="50.0839" y="79.1422" width="40" height="43.8578" class="recharts-rectangle" d="M50.0839,82.1422A 3,3,0,0,1,53.0839,79.1422L 87.0839,79.1422A 3,3,0,0,1,
+        90.0839,82.1422L 90.0839,123L 50.0839,123Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.9224" y="70.0032" width="40" height="52.9968" class="recharts-rectangle" d="M100.9224,73.0032A 3,3,0,0,1,103.9224,70.0032L 137.9224,70.0032A 3,3,0,0,1,
-        140.9224,73.0032L 140.9224,123L 100.9224,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.9224" y="69.9869" width="40" height="53.0131" class="recharts-rectangle" d="M100.9224,72.9869A 3,3,0,0,1,103.9224,69.9869L 137.9224,69.9869A 3,3,0,0,1,
+        140.9224,72.9869L 140.9224,123L 100.9224,123Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.7609" y="62.8237" width="40" height="60.1763" class="recharts-rectangle" d="M151.7609,65.8237A 3,3,0,0,1,154.7609,62.8237L 188.7609,62.8237A 3,3,0,0,1,
-        191.7609,65.8237L 191.7609,123L 151.7609,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.7609" y="62.8052" width="40" height="60.1948" class="recharts-rectangle" d="M151.7609,65.8052A 3,3,0,0,1,154.7609,62.8052L 188.7609,62.8052A 3,3,0,0,1,
+        191.7609,65.8052L 191.7609,123L 151.7609,123Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.5995" y="57.2335" width="40" height="65.7665" class="recharts-rectangle" d="M202.5995,60.2335A 3,3,0,0,1,205.5995,57.2335L 239.5995,57.2335A 3,3,0,0,1,
-        242.5995,60.2335L 242.5995,123L 202.5995,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.5995" y="57.2133" width="40" height="65.7867" class="recharts-rectangle" d="M202.5995,60.2133A 3,3,0,0,1,205.5995,57.2133L 239.5995,57.2133A 3,3,0,0,1,
+        242.5995,60.2133L 242.5995,123L 202.5995,123Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.438" y="62.2756" width="40" height="60.7244" class="recharts-rectangle" d="M253.438,65.2756A 3,3,0,0,1,256.438,62.2756L 290.438,62.2756A 3,3,0,0,1,
-        293.438,65.2756L 293.438,123L 253.438,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.438" y="62.2569" width="40" height="60.7431" class="recharts-rectangle" d="M253.438,65.2569A 3,3,0,0,1,256.438,62.2569L 290.438,62.2569A 3,3,0,0,1,
+        293.438,65.2569L 293.438,123L 253.438,123Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.2766" y="85.7323" width="40" height="37.2677" class="recharts-rectangle" d="M304.2766,88.7323A 3,3,0,0,1,307.2766,85.7323L 341.2766,85.7323A 3,3,0,0,1,
-        344.2766,88.7323L 344.2766,123L 304.2766,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.2766" y="85.7209" width="40" height="37.2791" class="recharts-rectangle" d="M304.2766,88.7209A 3,3,0,0,1,307.2766,85.7209L 341.2766,85.7209A 3,3,0,0,1,
+        344.2766,88.7209L 344.2766,123L 304.2766,123Z">
                                         </path>
                                     </g>
                                 </g>
@@ -297,7 +297,7 @@ const data: CustomData[] = [
                     </g>
                     <g tabindex="-1">
                         <g class="recharts-layer recharts-line">
-                            <path stroke-width="1" stroke="#30b4c0 " fill="none" id="recharts-line-:r3:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="62.1956px 205.1951775878906px" d="M70.419,87.6C87.365,83.295,104.312,78.99,121.258,70.92C138.204,62.85,155.15,42.5,172.096,39.18C189.043,35.86,205.989,35.43,222.935,34.2C239.881,32.97,256.827,31.8,273.773,31.8C290.72,31.8,307.666,35.4,324.612,39">
+                            <path stroke-width="1" stroke="#30b4c0 " fill="none" id="recharts-line-:r2:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="62.2739px 205.11687758789063px" d="M70.419,87.6C87.365,83.295,104.312,78.99,121.258,70.92C138.204,62.85,155.15,42.5,172.096,39.18C189.043,35.86,205.989,35.43,222.935,34.2C239.881,32.97,256.827,31.8,273.773,31.8C290.72,31.8,307.666,35.4,324.612,39">
                             </path>
                         </g>
                     </g>