@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/components/chat.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#/components/chat
-*Captured:* 2026-03-06T10:41:12.453Z
+*Captured:* 2026-04-20T12:55:01.046Z
 
 The chat component is a pure CSS component.
 
@@ -445,7 +445,7 @@ export default () => {
 
 ```html
 <div class="display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden">
-    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -9.40452px; transform: none;">
+    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -41.5391px; transform: none;">
         <div class="rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth">Older messages</div>
     </div>
     <div class="scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">

package/dist/docs/components/checkbox.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/checkbox
-*Captured:* 2026-03-06T10:40:07.411Z
+*Captured:* 2026-04-20T12:53:42.911Z
 
 ## Checkbox
 
@@ -85,8 +85,11 @@ export default () => (
             <p>
                 <Checkbox>
                     <span>
-                        Some text containing a link to <span className='link'>Terms and Condition</span> which need to
-                        be read.
+                        Some text containing a link to{' '}
+                        <a href='https://rio.cloud' className='link' target='_blank' rel='noopener'>
+                            Terms and Condition
+                        </a>{' '}
+                        which need to be read.
                     </span>
                 </Checkbox>
             </p>
@@ -158,7 +161,7 @@ export default () => (
     <fieldset class="col-sm-4">
         <legend class="margin-bottom-5">Disabled checkboxes</legend>
         <p>
-            <label class="checkbox" tabindex="0">
+            <label class="checkbox disabled" tabindex="0">
                 <input type="checkbox" disabled="" class="">
                 <span class="checkbox-text">
                     <span>Disabled checkbox</span>
@@ -166,7 +169,7 @@ export default () => (
             </label>
         </p>
         <p>
-            <label class="checkbox" tabindex="0">
+            <label class="checkbox disabled" tabindex="0">
                 <input type="checkbox" disabled="" class="" checked="">
                 <span class="checkbox-text">
                     <span>Disabled checked checkbox</span>
@@ -214,7 +217,7 @@ export default () => (
                 <input type="checkbox" class="">
                 <span class="checkbox-text">
                     <span>
-                        <span>Some text containing a link to <span class="link">Terms and Condition</span> which need to be read.</span>
+                        <span>Some text containing a link to <a href="https://rio.cloud" class="link" target="_blank" rel="noopener">Terms and Condition</a> which need to be read.</span>
                     </span>
                 </span>
             </label>
@@ -399,8 +402,6 @@ export default () => {
 
 ## Custom card example
 
-> Note: When using the custom option, make sure to wrap the children with the class name checkbox-text-wrapper. For using the checkbox tick, use an element with class name checkbox-text.
-
 ### Example: This option is a first option
 
 Custom checkbox list Option 1
@@ -477,6 +478,7 @@ export default () => {
                     onChange={() => handleSelect(3)}
                     checked={selectedOptions.includes(3)}
                     custom
+                    disabled
                     className={getCheckboxClasses(selectedOptions.includes(3))}
                 >
                     <div className='checkbox-text-wrapper display-flex justify-content-between'>
@@ -557,8 +559,8 @@ export default () => {
                 </div>
             </div>
         </label>
-        <label class="checkbox padding-15 user-select-none border rounded " tabindex="0">
-            <input type="checkbox" class="padding-15 user-select-none border rounded ">
+        <label class="checkbox disabled padding-15 user-select-none border rounded " tabindex="0">
+            <input type="checkbox" disabled="" class="padding-15 user-select-none border rounded ">
             <div class="checkbox-text-wrapper display-flex justify-content-between">
                 <div class="margin-right-15">
                     <div class="text-medium text-size-16 text-color-darker">Option 3</div>
@@ -671,6 +673,7 @@ export default () => {
                     onChange={() => handleSelect(3)}
                     checked={selectedOptions.includes(3)}
                     custom
+                    disabled
                     className='padding-15 user-select-none hover-bg-highlight-decent rounded-bottom'
                 >
                     <div className='checkbox-text-wrapper display-flex gap-10'>
@@ -715,8 +718,8 @@ export default () => {
                 </div>
             </div>
         </label>
-        <label class="checkbox padding-15 user-select-none hover-bg-highlight-decent rounded-bottom" tabindex="0">
-            <input type="checkbox" class="padding-15 user-select-none hover-bg-highlight-decent rounded-bottom">
+        <label class="checkbox disabled padding-15 user-select-none hover-bg-highlight-decent rounded-bottom" tabindex="0">
+            <input type="checkbox" disabled="" class="padding-15 user-select-none hover-bg-highlight-decent rounded-bottom">
             <div class="checkbox-text-wrapper display-flex gap-10">
                 <div class="checkbox-text">
                 </div>

package/dist/docs/components/circularProgress.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/circularProgress
-*Captured:* 2026-03-06T10:40:33.947Z
+*Captured:* 2026-04-20T12:54:11.336Z
 
 ## CircularProgress
 
@@ -159,7 +159,7 @@ export default () => (
             <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="232.1888707702918">
+                <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="231.52284114105694">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center">30</div>
@@ -177,7 +177,7 @@ export default () => (
             <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="133.5511369847114">
+                <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="131.58200590697354">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-italic">85 km/h</div>
@@ -189,7 +189,7 @@ export default () => (
             <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="224.83227905158662">
+                <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="223.89597652932892">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-16 text-medium text-color-dark">40%</div>
@@ -201,7 +201,7 @@ export default () => (
             <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="225.87357595251748">
+                <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="225.1335430311454">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-">100</div>
@@ -386,14 +386,14 @@ export default () => {
 
 ```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="20" aria-valuetext="20%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+    <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="259.45387653501234">
+            <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="262.4829664181983">
             </circle>
         </svg>
-        <div class="position-absolute display-grid place-items-center">20%</div>
+        <div class="position-absolute display-grid place-items-center">10%</div>
     </div>
     <div id="circular-progress-label-:rb:" class="">Processing configuration...</div>
 </div>

package/dist/docs/components/clearableInput.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/clearableInput
-*Captured:* 2026-03-06T10:40:07.882Z
+*Captured:* 2026-04-20T12:53:43.119Z
 
 Control, which can be cleared when it has a value.
 

package/dist/docs/components/collapse.md

@@ -3,14 +3,12 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#/components/collapse
-*Captured:* 2026-03-06T10:40:18.323Z
+*Captured:* 2026-04-20T12:53:52.018Z
 
 The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.
 
 ## Collapse
 
-> Note: In case the content element you pass in as child has margins, wrap it within another div to smoothen the animation.
-
 ### Example: Content will stay in the DOM even when it is collapsed
 
 Content will stay in the DOM even when it is collapsed
@@ -76,7 +74,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="0elphyhd1va" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
+                        <button type="button" id="73g5xvd4ufo" 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

@@ -3,12 +3,10 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/composedCharts
-*Captured:* 2026-03-06T10:41:24.366Z
+*Captured:* 2026-04-20T12:55:30.945Z
 
 ## ComposedChart
 
-> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
-
 ### Example: Simple ComposedChart
 
 Simple ComposedChart
@@ -105,23 +103,21 @@ type CustomLegendProps = {
     onMouseLeave: () => void;
 };
 
-const CustomLegend = ({ payload, highlightedElement, onMouseEnter, onMouseLeave }: CustomLegendProps) => {
-    return (
-        <ul className='list-style-none padding-left-20'>
-            {payload?.map((entry: any, index: number) => (
-                <li
-                    key={`item-${index}`}
-                    onMouseEnter={() => onMouseEnter(entry.dataKey)}
-                    onMouseLeave={onMouseLeave}
-                    className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedElement === entry.dataKey ? 'bg-lightest' : ''}`}
-                >
-                    <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />
-                    <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>
-                </li>
-            ))}
-        </ul>
-    );
-};
+const CustomLegend = ({ payload, highlightedElement, onMouseEnter, onMouseLeave }: CustomLegendProps) => (
+    <ul className='list-style-none padding-left-20'>
+        {payload?.map((entry: any, index: number) => (
+            <li
+                key={`item-${index}`}
+                onMouseEnter={() => onMouseEnter(entry.dataKey)}
+                onMouseLeave={onMouseLeave}
+                className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedElement === entry.dataKey ? 'bg-lightest' : ''}`}
+            >
+                <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />
+                <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>
+            </li>
+        ))}
+    </ul>
+);
 
 const data: CustomData[] = [
     {
@@ -201,7 +197,7 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="123" x2="380.03125" y2="123">
@@ -217,7 +213,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts1-clip">
@@ -225,12 +221,12 @@ const data: CustomData[] = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                         <g class="recharts-layer recharts-area">
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r0:">
-                                        <rect x="70.41927083333333" y="0" width="75.04895694760978" height="124">
+                                        <rect x="70.41927083333333" y="0" width="59.125674839406145" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -245,53 +241,67 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <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="76.898" width="40" height="46.102" class="recharts-rectangle" d="M50.0839,79.898A 3,3,0,0,1,53.0839,76.898L 87.0839,76.898A 3,3,0,0,1,
-        90.0839,79.898L 90.0839,123L 50.0839,123Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <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>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.9224" y="67.2742" width="40" height="55.7258" class="recharts-rectangle" d="M100.9224,70.2742A 3,3,0,0,1,103.9224,67.2742L 137.9224,67.2742A 3,3,0,0,1,
-        140.9224,70.2742L 140.9224,123L 100.9224,123Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <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>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.7609" y="59.725" width="40" height="63.275" class="recharts-rectangle" d="M151.7609,62.725A 3,3,0,0,1,154.7609,59.725L 188.7609,59.725A 3,3,0,0,1,
-        191.7609,62.725L 191.7609,123L 151.7609,123Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <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>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.5995" y="53.847" width="40" height="69.153" class="recharts-rectangle" d="M202.5995,56.847A 3,3,0,0,1,205.5995,53.847L 239.5995,53.847A 3,3,0,0,1,
-        242.5995,56.847L 242.5995,123L 202.5995,123Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <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>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.438" y="59.1487" width="40" height="63.8513" class="recharts-rectangle" d="M253.438,62.1487A 3,3,0,0,1,256.438,59.1487L 290.438,59.1487A 3,3,0,0,1,
-        293.438,62.1487L 293.438,123L 253.438,123Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <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>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.2766" y="83.8133" width="40" height="39.1867" class="recharts-rectangle" d="M304.2766,86.8133A 3,3,0,0,1,307.2766,83.8133L 341.2766,83.8133A 3,3,0,0,1,
-        344.2766,86.8133L 344.2766,123L 304.2766,123Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <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>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
-                            <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="78.9456px 188.4451775878906px" 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 class="recharts-layer recharts-shape">
+                                <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.1956px 267.3907775878906px" 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>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="380.03125" y2="123">
                             </line>
@@ -325,7 +335,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                         <g class="recharts-layer recharts-line-dots">
                             <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="70.41927083333333" cy="87.60000000000001" class="recharts-dot recharts-line-dot">
                             </circle>
@@ -341,13 +351,13 @@ const data: CustomData[] = [
                             </circle>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="365.03125" stroke="none" x="70.41927083333333" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">

package/dist/docs/components/contentLoader.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/contentLoader
-*Captured:* 2026-03-06T10:40:41.188Z
+*Captured:* 2026-04-20T12:54:21.391Z
 
 The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader
 

package/dist/docs/components/dataTabs.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/dataTabs
-*Captured:* 2026-03-06T10:40:43.637Z
+*Captured:* 2026-04-20T12:54:23.916Z
 
 Passing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.
 
@@ -769,7 +769,7 @@ export const RouteType = () => (
                                                     </title>
                                                     <desc>
                                                     </desc>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                                                         <g class="recharts-cartesian-grid">
                                                             <g class="recharts-cartesian-grid-horizontal">
                                                                 <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="470" height="140" x1="15" y1="155" x2="485" y2="155">
@@ -785,7 +785,7 @@ export const RouteType = () => (
                                                             </g>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                                     </g>
                                                     <defs>
                                                         <clipPath id="recharts1-clip">
@@ -793,19 +793,21 @@ export const RouteType = () => (
                                                             </rect>
                                                         </clipPath>
                                                     </defs>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                                         <g class="recharts-layer recharts-line">
-                                                            <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r8:" height="140" width="470" class="recharts-curve recharts-line-curve" stroke-dasharray="432.4839px 0.000017236328119452082px" d="M45,19.278C67.778,19.278,90.556,19.278,113.333,19.278C136.111,19.278,158.889,19.278,181.667,19.278C204.444,19.278,227.222,38.333,250,38.333C272.778,38.333,295.556,19.278,318.333,19.278C341.111,19.278,363.889,51.685,386.667,62.056C409.444,72.426,432.222,76.963,455,81.5">
-                                                            </path>
+                                                            <g class="recharts-layer recharts-shape">
+                                                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r8:" height="140" width="470" class="recharts-curve recharts-line-curve" stroke-dasharray="445.6094px 445.60943603515625px" d="M45,19.278C67.778,19.278,90.556,19.278,113.333,19.278C136.111,19.278,158.889,46.889,181.667,46.889C204.444,46.889,227.222,42.935,250,38.333C272.778,33.731,295.556,19.278,318.333,19.278C341.111,19.278,363.889,77.222,386.667,77.222C409.444,77.222,432.222,69.639,455,62.056">
+                                                                </path>
+                                                            </g>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                                                             <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="155" x2="485" y2="155">
                                                             </line>
@@ -843,31 +845,31 @@ export const RouteType = () => (
                                                             </g>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                                                         <g class="recharts-layer recharts-line-dots">
                                                             <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="45" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
                                                             </circle>
                                                             <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="113.33333333333333" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="181.66666666666666" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="181.66666666666666" cy="46.888888888888886" class="recharts-dot recharts-line-dot">
                                                             </circle>
                                                             <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="250" cy="38.33333333333333" class="recharts-dot recharts-line-dot">
                                                             </circle>
                                                             <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="318.3333333333333" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="386.66666666666663" cy="62.05555555555556" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="386.66666666666663" cy="77.22222222222221" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="455" cy="81.5" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="455" cy="62.05555555555556" class="recharts-dot recharts-line-dot">
                                                             </circle>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                                     </g>
-                                                    <g tabindex="-1">
+                                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                                                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                 <text height="30" orientation="bottom" width="470" stroke="none" x="45" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -1014,21 +1016,19 @@ const MyDataTabs = ({
     tabs: DummyTab[];
     activeTab: string;
     onTabChange: (newTab: string) => void;
-}) => {
-    return (
-        <DataTabs
-            activeKey={activeTab}
-            bordered={false}
-            disableTransition={false}
-            commonTabContent={<DummyContent tabKey={activeTab} />}
-            onSelectTab={onTabChange}
-        >
-            {tabs.map(item => (
-                <DataTab key={item.id} tabKey={item.id} title={item.title} />
-            ))}
-        </DataTabs>
-    );
-};
+}) => (
+    <DataTabs
+        activeKey={activeTab}
+        bordered={false}
+        disableTransition={false}
+        commonTabContent={<DummyContent tabKey={activeTab} />}
+        onSelectTab={onTabChange}
+    >
+        {tabs.map(item => (
+            <DataTab key={item.id} tabKey={item.id} title={item.title} />
+        ))}
+    </DataTabs>
+);
 
 const tabSetOne: DummyTab[] = [
     {