@rio-cloud/uikit-mcp 1.1.2 → 1.1.4

package/dist/docs/components/clearableInput.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/clearableInput
-*Captured:* 2025-12-15T15:02:11.315Z
+*Captured:* 2026-01-14T09:07:01.032Z
 
 Control, which can be cleared when it has a value.
 
@@ -378,33 +378,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 
 ### Example: Example 2
 
@@ -448,7 +422,7 @@ const ClearableInputControlled = () => {
         console.log(event.key);
     };
 
-    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const handleBlur = (_event: React.FocusEvent<HTMLInputElement>) => {
         Notification.info('Input lost focus');
     };
 
@@ -495,33 +469,7 @@ export default ClearableInputControlled;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 
 ### Example: Example 3
 
@@ -535,7 +483,7 @@ Controlled component with restriction and used with custom input
 
 ```tsx
 import { useState, useRef, useEffect } from 'react';
-import { countBy, isNil, toNumber } from 'es-toolkit/compat';
+import { isNil, toNumber } from 'es-toolkit/compat';
 
 import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
 
@@ -600,33 +548,7 @@ export default ClearableInputControlledRestricted;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 
 ## ClearableInput with input mask
 
@@ -777,30 +699,4 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |

package/dist/docs/components/collapse.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#components/collapse
-*Captured:* 2025-12-15T15:02:18.767Z
+*Captured:* 2026-01-14T09:07:08.453Z
 
 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="1gaqqu9b55" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
+                        <button type="button" id="nodispi0hee" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
                             </span>
                         </button>
                     </div>
@@ -94,19 +94,6 @@ export default () => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| open | Boolean | false | Show the component and triggers the expand or collapse animation. |
-| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |
-| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
-| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |
-| onEntered | () => void | — | Callback fired after the component has expanded. |
-| onExited | () => {} | — | Callback fired after the component has collapsed. |
-| onAnimationStart | () => {} | — | Callback fired when the animation starts for either expand or collapse. |
-| children | any | — | Any component given to be expanded or collapsed. |
-
 ### Example: Content will be removed from the DOM when it is collapsed and mounted again on show
 
 Content will be removed from the DOM when it is collapsed and mounted again on show
@@ -173,17 +160,4 @@ export default () => {
         </div>
     </div>
 </div>
-```
-
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| open | Boolean | false | Show the component and triggers the expand or collapse animation. |
-| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |
-| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
-| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |
-| onEntered | () => void | — | Callback fired after the component has expanded. |
-| onExited | () => {} | — | Callback fired after the component has collapsed. |
-| onAnimationStart | () => {} | — | Callback fired when the animation starts for either expand or collapse. |
-| children | any | — | Any component given to be expanded or collapsed. |
+```

package/dist/docs/components/composedCharts.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/composedCharts
-*Captured:* 2025-12-15T15:03:21.234Z
+*Captured:* 2026-01-14T09:08:18.120Z
 
 ## ComposedChart
 
@@ -211,7 +211,7 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1" id="recharts-zindex--100-:r1:">
+                    <g tabindex="-1">
                         <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">
@@ -227,7 +227,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1" id="recharts-zindex--50-:r2:">
+                    <g tabindex="-1">
                     </g>
                     <defs>
                         <clipPath id="recharts1-clip">
@@ -235,18 +235,18 @@ const data: CustomData[] = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1" id="recharts-zindex-100-:r6:">
+                    <g tabindex="-1">
                         <g class="recharts-layer recharts-area">
                             <g class="recharts-layer">
                                 <defs>
-                                    <clipPath id="animationClipPath-recharts-area-:r3:">
-                                        <rect x="70.41927083333333" y="0" width="87.94684425800848" height="124">
+                                    <clipPath id="animationClipPath-recharts-area-:r1:">
+                                        <rect x="70.41927083333333" y="0" width="71.53671682489494" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
-                                <g class="recharts-layer" clip-path="url(#animationClipPath-recharts-area-:r3:)">
+                                <g class="recharts-layer" clip-path="url(#animationClipPath-recharts-area-:r1:)">
                                     <g class="recharts-layer">
-                                        <path stroke-width="1" fill="#e878b6 " fill-opacity="0.5" height="108" stroke="none" width="365.03125" id="recharts-area-:r3:" 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-: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>
                                         <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>
@@ -255,53 +255,53 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-200-:r7:">
+                    <g tabindex="-1">
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-300-:r8:">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r4:">
+                    <g tabindex="-1">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r2:">
                             <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.08385416666667" y="75.7940811707843" width="40" height="47.205918829215705" class="recharts-rectangle" d="M50.08385416666667,78.7940811707843A 3,3,0,0,1,53.08385416666667,75.7940811707843L 87.08385416666667,75.7940811707843A 3,3,0,0,1,
-        90.08385416666667,78.7940811707843L 90.08385416666667,123L 50.08385416666667,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page A" x="50.0839" y="77.2995" width="40" height="45.7005" class="recharts-rectangle" d="M50.0839,80.2995A 3,3,0,0,1,53.0839,77.2995L 87.0839,77.2995A 3,3,0,0,1,
+        90.0839,80.2995L 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.92239583333333" y="65.93984561518549" width="40" height="57.06015438481451" class="recharts-rectangle" d="M100.92239583333333,68.93984561518549A 3,3,0,0,1,103.92239583333333,65.93984561518549L 137.92239583333333,65.93984561518549A 3,3,0,0,1,
-        140.92239583333333,68.93984561518549L 140.92239583333333,123L 100.92239583333333,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.9224" y="67.7595" width="40" height="55.2405" class="recharts-rectangle" d="M100.9224,70.7595A 3,3,0,0,1,103.9224,67.7595L 137.9224,67.7595A 3,3,0,0,1,
+        140.9224,70.7595L 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.76093749999998" y="58.20987640690143" width="40" height="64.79012359309857" class="recharts-rectangle" d="M151.76093749999998,61.20987640690143A 3,3,0,0,1,154.76093749999998,58.20987640690143L 188.76093749999998,58.20987640690143A 3,3,0,0,1,
-        191.76093749999998,61.20987640690143L 191.76093749999998,123L 151.76093749999998,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.7609" y="60.2761" width="40" height="62.7239" class="recharts-rectangle" d="M151.7609,63.2761A 3,3,0,0,1,154.7609,60.2761L 188.7609,60.2761A 3,3,0,0,1,
+        191.7609,63.2761L 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.59947916666667" y="52.191121756176415" width="40" height="70.80887824382359" class="recharts-rectangle" d="M202.59947916666667,55.191121756176415A 3,3,0,0,1,205.59947916666667,52.191121756176415L 239.59947916666667,52.191121756176415A 3,3,0,0,1,
-        242.59947916666667,55.191121756176415L 242.59947916666667,123L 202.59947916666667,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.5995" y="54.4493" width="40" height="68.5507" class="recharts-rectangle" d="M202.5995,57.4493A 3,3,0,0,1,205.5995,54.4493L 239.5995,54.4493A 3,3,0,0,1,
+        242.5995,57.4493L 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.43802083333333" y="57.619802421536235" width="40" height="65.38019757846376" class="recharts-rectangle" d="M253.43802083333333,60.619802421536235A 3,3,0,0,1,256.4380208333333,57.619802421536235L 290.4380208333333,57.619802421536235A 3,3,0,0,1,
-        293.4380208333333,60.619802421536235L 293.4380208333333,123L 253.43802083333333,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.438" y="59.7048" width="40" height="63.2952" class="recharts-rectangle" d="M253.438,62.7048A 3,3,0,0,1,256.438,59.7048L 290.438,59.7048A 3,3,0,0,1,
+        293.438,62.7048L 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.27656249999995" y="82.87496899516664" width="40" height="40.12503100483336" class="recharts-rectangle" d="M304.27656249999995,85.87496899516664A 3,3,0,0,1,307.27656249999995,82.87496899516664L 341.27656249999995,82.87496899516664A 3,3,0,0,1,
-        344.27656249999995,85.87496899516664L 344.27656249999995,123L 304.27656249999995,123Z">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.2766" y="84.1546" width="40" height="38.8454" class="recharts-rectangle" d="M304.2766,87.1546A 3,3,0,0,1,307.2766,84.1546L 341.2766,84.1546A 3,3,0,0,1,
+        344.2766,87.1546L 344.2766,123L 304.2766,123Z">
                                         </path>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-400-:r9:">
+                    <g tabindex="-1">
                         <g class="recharts-layer recharts-line">
-                            <path stroke-width="1" stroke="#30b4c0 " fill="none" id="recharts-line-:r5:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="92.51317721400677px 174.87760037388387px" 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-:r3:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="75.251px 192.13977758789062px" 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 tabindex="-1" id="recharts-zindex-500-:ra:">
+                    <g tabindex="-1">
                         <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>
@@ -335,7 +335,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-600-:rb:">
+                    <g tabindex="-1">
                         <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>
@@ -351,13 +351,13 @@ const data: CustomData[] = [
                             </circle>
                         </g>
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-1000-:rc:">
+                    <g tabindex="-1">
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-1100-:rd:">
+                    <g tabindex="-1">
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-1200-:re:">
+                    <g tabindex="-1">
                     </g>
-                    <g tabindex="-1" id="recharts-zindex-2000-:rf:">
+                    <g tabindex="-1">
                         <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">