@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/card.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/card
-*Captured:* 2026-03-06T10:40:37.908Z
+*Captured:* 2026-04-27T14:57:53.529Z
 
 The Card is a utility component designed to simplify usage of default card styling.
 

package/dist/docs/components/carousel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/carousel
-*Captured:* 2026-03-06T10:40:38.118Z
+*Captured:* 2026-04-27T14:57:54.411Z
 
 ## Carousel
 

package/dist/docs/components/chartColors.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/chartColors
-*Captured:* 2026-03-06T10:41:23.285Z
+*Captured:* 2026-04-27T14:59:09.998Z
 
 The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.
 

package/dist/docs/components/chartsGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/chartsGettingStarted
-*Captured:* 2026-03-06T10:41:22.405Z
+*Captured:* 2026-04-27T14:59:09.074Z
 
 The UIKIT chart components are simple wrapper components for the Recharts charting library.
 

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-27T14:58:35.540Z
 
 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: -1.74902px; 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-27T14:57:17.951Z
 
 ## 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>
@@ -477,6 +480,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 +561,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 +675,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 +720,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-27T14:57:46.545Z
 
 ## 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="232.49266533852068">
                 </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="134.44931222990982">
                 </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="225.25935257503883">
                 </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="226.21112547277178">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-">100</div>
@@ -390,7 +390,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-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="261.38903288417055">
             </circle>
         </svg>
         <div class="position-absolute display-grid place-items-center">20%</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-27T14:57:17.873Z
 
 Control, which can be cleared when it has a value.
 

package/dist/docs/components/collapse.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#/components/collapse
-*Captured:* 2026-03-06T10:40:18.323Z
+*Captured:* 2026-04-27T14:57:27.013Z
 
 The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.
 
@@ -76,7 +76,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="qxk3g9znt6o" 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,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/composedCharts
-*Captured:* 2026-03-06T10:41:24.366Z
+*Captured:* 2026-04-27T14:59:11.198Z
 
 ## ComposedChart
 
@@ -105,23 +105,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 +199,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 +215,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 +223,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.349085855802734" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -245,53 +243,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.1153" width="40" height="43.8847" class="recharts-rectangle" d="M50.0839,82.1153A 3,3,0,0,1,53.0839,79.1153L 87.0839,79.1153A 3,3,0,0,1,
+        90.0839,82.1153L 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="69.9543" width="40" height="53.0457" class="recharts-rectangle" d="M100.9224,72.9543A 3,3,0,0,1,103.9224,69.9543L 137.9224,69.9543A 3,3,0,0,1,
+        140.9224,72.9543L 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.7682" width="40" height="60.2318" class="recharts-rectangle" d="M151.7609,65.7682A 3,3,0,0,1,154.7609,62.7682L 188.7609,62.7682A 3,3,0,0,1,
+        191.7609,65.7682L 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.1729" width="40" height="65.8271" class="recharts-rectangle" d="M202.5995,60.1729A 3,3,0,0,1,205.5995,57.1729L 239.5995,57.1729A 3,3,0,0,1,
+        242.5995,60.1729L 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.2196" width="40" height="60.7804" class="recharts-rectangle" d="M253.438,65.2196A 3,3,0,0,1,256.438,62.2196L 290.438,62.2196A 3,3,0,0,1,
+        293.438,65.2196L 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.698" width="40" height="37.302" class="recharts-rectangle" d="M304.2766,88.698A 3,3,0,0,1,307.2766,85.698L 341.2766,85.698A 3,3,0,0,1,
+        344.2766,88.698L 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.4306px 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 +337,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 +353,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-27T14:57:56.544Z
 
 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-27T14:57:58.867Z
 
 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[] = [
     {