@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/collapse.json

@@ -0,0 +1,175 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:18.873Z",
+    "source": "https://uikit.developers.rio.cloud/#components/collapse",
+    "category": "Components",
+    "section": "Show/Hide",
+    "slug": "components/collapse",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "c05db1a0cbcda0053fc942bcf3f306f13efc681d5bfd57ae9847eb936954297c"
+  },
+  "title": "Collapse",
+  "lead": "The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.",
+  "content": [
+    {
+      "heading": "Collapse",
+      "body": "> Note: In case the content element you pass in as child has margins, wrap it within another div to smoothen the animation.",
+      "examples": [
+        {
+          "caption": "Content will stay in the DOM even when it is collapsed",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Content will stay in the DOM even when it is collapsed</div><div><button type=\"button\" class=\"btn btn-default btn-toggle active btn-component margin-bottom-10\" tabindex=\"0\">Hide content</button><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div class=\"panel-wrapper\"><div class=\"panel panel-default\"><div class=\"panel-body\"><div class=\"margin-bottom-15\">\nLorem 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=\"q33dr227mkn\" class=\"btn btn-default btn-md btn-component dropdown-toggle\" tabindex=\"0\">Dropdown<span class=\"caret\"></span></button></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Collapse from '@rio-cloud/rio-uikit/Collapse';\nimport ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    const [show, setShow] = useState(true);\n\n    return (\n        <>\n            <FormLabel>Content will stay in the DOM even when it is collapsed</FormLabel>\n            <div>\n                <ToggleButton className='margin-bottom-10' active={show} onClick={() => setShow(!show)}>\n                    {show ? 'Hide content' : 'Show content'}\n                </ToggleButton>\n                <Collapse\n                    open={show}\n                    onEntered={() => Notification.info('opened')}\n                    onExited={() => Notification.info('closed')}\n                >\n                    <div className='panel-wrapper'>\n                        <div className='panel panel-default'>\n                            <div className='panel-body'>\n                                <div className='margin-bottom-15'>{dummyText}</div>\n                                <ButtonDropdown\n                                    title='Dropdown'\n                                    items={[{ value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' }]}\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </Collapse>\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Content will stay in the DOM even when it is collapsed</div>\n<div>\n    <button type=\"button\" class=\"btn btn-default btn-toggle active btn-component margin-bottom-10\" tabindex=\"0\">Hide content</button>\n    <div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\">\n        <div class=\"panel-wrapper\">\n            <div class=\"panel panel-default\">\n                <div class=\"panel-body\">\n                    <div class=\"margin-bottom-15\">\n                        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>\n                    <div class=\"dropdown btn-group\">\n                        <button type=\"button\" id=\"q33dr227mkn\" class=\"btn btn-default btn-md btn-component dropdown-toggle\" tabindex=\"0\">Dropdown<span class=\"caret\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "open",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Show the component and triggers the expand or collapse animation."
+                    },
+                    {
+                      "name": "timeout",
+                      "type": "Number",
+                      "default": "270",
+                      "description": "Duration of the collapse animation in milliseconds."
+                    },
+                    {
+                      "name": "appear",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Run the expand animation when the component mounts, if it is initially shown."
+                    },
+                    {
+                      "name": "unmountOnExit",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Unmount the component (remove it from the DOM) when it is collapsed."
+                    },
+                    {
+                      "name": "onEntered",
+                      "type": "() => void",
+                      "default": "",
+                      "description": "Callback fired after the component has expanded."
+                    },
+                    {
+                      "name": "onExited",
+                      "type": "() => {}",
+                      "default": "",
+                      "description": "Callback fired after the component has collapsed."
+                    },
+                    {
+                      "name": "onAnimationStart",
+                      "type": "() => {}",
+                      "default": "",
+                      "description": "Callback fired when the animation starts for either expand or collapse."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to be expanded or collapsed."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Content will be removed from the DOM when it is collapsed and mounted again on show",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Content will be removed from the DOM when it is collapsed and mounted again on show</div><div><button type=\"button\" class=\"btn btn-default btn-toggle active btn-component margin-bottom-10\" tabindex=\"0\">Hide content</button><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div class=\"panel-wrapper height-150\"><div class=\"panel panel-default\"><div class=\"panel-body\">\nLorem 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></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Collapse from '@rio-cloud/rio-uikit/Collapse';\nimport ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    const [show, setShow] = useState(true);\n\n    return (\n        <>\n            <FormLabel>Content will be removed from the DOM when it is collapsed and mounted again on show</FormLabel>\n            <div>\n                <ToggleButton className='margin-bottom-10' active={show} onClick={() => setShow(prevShow => !prevShow)}>\n                    {show ? 'Hide content' : 'Show content'}\n                </ToggleButton>\n                <Collapse\n                    open={show}\n                    onEntered={() => Notification.info('opened')}\n                    onExited={() => Notification.info('closed')}\n                    unmountOnExit\n                >\n                    <div className='panel-wrapper height-150'>\n                        <div className='panel panel-default'>\n                            <div className='panel-body'>{dummyText}</div>\n                        </div>\n                    </div>\n                </Collapse>\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Content will be removed from the DOM when it is collapsed and mounted again on show</div>\n<div>\n    <button type=\"button\" class=\"btn btn-default btn-toggle active btn-component margin-bottom-10\" tabindex=\"0\">Hide content</button>\n    <div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\">\n        <div class=\"panel-wrapper height-150\">\n            <div class=\"panel panel-default\">\n                <div class=\"panel-body\">\n                    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>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "open",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Show the component and triggers the expand or collapse animation."
+                    },
+                    {
+                      "name": "timeout",
+                      "type": "Number",
+                      "default": "270",
+                      "description": "Duration of the collapse animation in milliseconds."
+                    },
+                    {
+                      "name": "appear",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Run the expand animation when the component mounts, if it is initially shown."
+                    },
+                    {
+                      "name": "unmountOnExit",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Unmount the component (remove it from the DOM) when it is collapsed."
+                    },
+                    {
+                      "name": "onEntered",
+                      "type": "() => void",
+                      "default": "",
+                      "description": "Callback fired after the component has expanded."
+                    },
+                    {
+                      "name": "onExited",
+                      "type": "() => {}",
+                      "default": "",
+                      "description": "Callback fired after the component has collapsed."
+                    },
+                    {
+                      "name": "onAnimationStart",
+                      "type": "() => {}",
+                      "default": "",
+                      "description": "Callback fired when the animation starts for either expand or collapse."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to be expanded or collapsed."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/composedcharts.json

@@ -0,0 +1,159 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:18.044Z",
+    "source": "https://uikit.developers.rio.cloud/#components/composedCharts",
+    "category": "Components",
+    "section": "Charts",
+    "slug": "components/composedcharts",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "0052ae916e16e798db72e052be27e673c9de3516025628e9cce3a1803d4f3bf4"
+  },
+  "title": "ComposedChart",
+  "lead": null,
+  "content": [
+    {
+      "heading": "ComposedChart",
+      "body": "> 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.",
+      "examples": [
+        {
+          "caption": "Simple ComposedChart",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Simple ComposedChart</div><div class=\"panel panel-default panel-body margin-bottom-0 height-200 max-width-500\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 168px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"168\" viewBox=\"0 0 468 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"15\" y=\"15\" height=\"108\" width=\"365\"></rect></clipPath></defs><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\" height=\"108\" x1=\"15\" y1=\"123\" x2=\"380\" y2=\"123\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"96\" x2=\"380\" y2=\"96\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"69\" x2=\"380\" y2=\"69\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"42\" x2=\"380\" y2=\"42\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"15\" x2=\"380\" y2=\"15\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"123\" x2=\"380\" y2=\"123\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"70.41666666666667\" y1=\"129\" x2=\"70.41666666666667\" y2=\"123\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"70.41666666666667\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"70.41666666666667\" dy=\"0.71em\">Page A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"121.25000000000001\" y1=\"129\" x2=\"121.25000000000001\" y2=\"123\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"121.25000000000001\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"121.25000000000001\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"172.08333333333334\" y1=\"129\" x2=\"172.08333333333334\" y2=\"123\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"172.08333333333334\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"172.08333333333334\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"222.91666666666666\" y1=\"129\" x2=\"222.91666666666666\" y2=\"123\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"222.91666666666666\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"222.91666666666666\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"273.75\" y1=\"129\" x2=\"273.75\" y2=\"123\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"273.75\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"273.75\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"324.58333333333337\" y1=\"129\" x2=\"324.58333333333337\" y2=\"123\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"324.58333333333337\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"324.58333333333337\" dy=\"0.71em\">Page F</tspan></text></g></g></g><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer\"><defs><clipPath id=\"animationClipPath-recharts-area-5\"><rect x=\"70.41666666666667\" y=\"0\" width=\"0\" height=\"124\"></rect></clipPath></defs><g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-5)\"><g class=\"recharts-layer\"><path fill-opacity=\"0.5\" fill=\"#e878b6 \" width=\"365\" height=\"108\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" d=\"M70.417,39C87.361,35.82,104.306,32.64,121.25,32.64C138.194,32.64,155.139,63.66,172.083,63.66C189.028,63.66,205.972,49.32,222.917,49.32C239.861,49.32,256.806,57,273.75,57C290.694,57,307.639,39,324.583,21L324.583,123C307.639,123,290.694,123,273.75,123C256.806,123,239.861,123,222.917,123C205.972,123,189.028,123,172.083,123C155.139,123,138.194,123,121.25,123C104.306,123,87.361,123,70.417,123Z\"></path><path fill-opacity=\"0.5\" stroke=\"#e878b6 \" fill=\"none\" width=\"365\" height=\"108\" class=\"recharts-curve recharts-area-curve\" d=\"M70.417,39C87.361,35.82,104.306,32.64,121.25,32.64C138.194,32.64,155.139,63.66,172.083,63.66C189.028,63.66,205.972,49.32,222.917,49.32C239.861,49.32,256.806,57,273.75,57C290.694,57,307.639,39,324.583,21\"></path></g></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g><g class=\"recharts-layer recharts-line\"><path stroke-width=\"1\" stroke=\"#30b4c0 \" fill=\"none\" width=\"365\" height=\"108\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 267.36492919921875px\" d=\"M70.417,87.6C87.361,83.295,104.306,78.99,121.25,70.92C138.194,62.85,155.139,42.5,172.083,39.18C189.028,35.86,205.972,35.43,222.917,34.2C239.861,32.97,256.806,31.8,273.75,31.8C290.694,31.8,307.639,35.4,324.583,39\"></path></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 15px; top: 15px;\"><ul class=\"list-style-none padding-left-20\"><li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \"><span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(232, 120, 182);\"></span><span class=\"text-color-darker text-capitalize-first-word\">amt</span></li><li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \"><span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(142, 150, 235);\"></span><span class=\"text-color-darker text-capitalize-first-word\">pv</span></li><li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \"><span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(48, 180, 192);\"></span><span class=\"text-color-darker text-capitalize-first-word\">uv</span></li></ul></div><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(15px, 15px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport ComposedChart from '@rio-cloud/rio-uikit/ComposedChart';\nimport Line from '@rio-cloud/rio-uikit/Line';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport Area from '@rio-cloud/rio-uikit/Area';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\ntype CustomData = {\n    name: string;\n    uv: number;\n    pv: number;\n    amt: number;\n};\n\nexport default () => {\n    const [highlightedElement, setHighlightedElement] = useState<string | null>(null);\n\n    const handleLegendMouseEnter = (dataKey: string) => setHighlightedElement(dataKey);\n    const handleLegendMouseLeave = () => setHighlightedElement(null);\n\n    return (\n        <>\n            <FormLabel>Simple ComposedChart</FormLabel>\n            <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>\n                <ComposedChart\n                    data={data}\n                    dataKey={(entry: CustomData) => entry.name}\n                    xAxisOptions={{ padding: { left: 30, right: 30 } }}\n                    showGrid\n                    gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}\n                    legend={\n                        <Legend\n                            content={\n                                <CustomLegend\n                                    highlightedElement={highlightedElement}\n                                    onMouseEnter={handleLegendMouseEnter}\n                                    onMouseLeave={handleLegendMouseLeave}\n                                />\n                            }\n                        />\n                    }\n                    lines={[\n                        <Line\n                            key='line'\n                            dataKey='uv'\n                            strokeColor='brand-primary'\n                            strokeWidth={highlightedElement === 'uv' ? 2 : 1}\n                            dot={{ strokeWidth: highlightedElement === 'uv' ? 2 : 1 }}\n                        />,\n                    ]}\n                    areas={[\n                        <Area\n                            key='area'\n                            dataKey='amt'\n                            strokeColor='color-spectrum-pink'\n                            fill='color-spectrum-pink'\n                            fillOpacity={highlightedElement === 'amt' || !highlightedElement ? 0.5 : 0.1}\n                        />,\n                    ]}\n                    bars={[\n                        <Bar\n                            key='bar'\n                            dataKey='pv'\n                            color='color-spectrum-indigo'\n                            radius={[3, 3, 0, 0]}\n                            fillOpacity={highlightedElement === 'pv' || !highlightedElement ? 1 : 0.3}\n                        />,\n                    ]}\n                />\n            </div>\n        </>\n    );\n};\n\ntype CustomLegendProps = {\n    payload?: { dataKey: string; value: string; color: string }[];\n    highlightedElement: string | null;\n    onMouseEnter: (dataKey: string) => void;\n    onMouseLeave: () => void;\n};\n\nconst CustomLegend = ({ payload, highlightedElement, onMouseEnter, onMouseLeave }: CustomLegendProps) => {\n    return (\n        <ul className='list-style-none padding-left-20'>\n            {payload?.map((entry: any, index: number) => (\n                <li\n                    key={`item-${index}`}\n                    onMouseEnter={() => onMouseEnter(entry.dataKey)}\n                    onMouseLeave={onMouseLeave}\n                    className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedElement === entry.dataKey ? 'bg-lightest' : ''}`}\n                >\n                    <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />\n                    <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nconst data: CustomData[] = [\n    {\n        name: 'Page A',\n        uv: 590,\n        pv: 800,\n        amt: 1400,\n    },\n    {\n        name: 'Page B',\n        uv: 868,\n        pv: 967,\n        amt: 1506,\n    },\n    {\n        name: 'Page C',\n        uv: 1397,\n        pv: 1098,\n        amt: 989,\n    },\n    {\n        name: 'Page D',\n        uv: 1480,\n        pv: 1200,\n        amt: 1228,\n    },\n    {\n        name: 'Page E',\n        uv: 1520,\n        pv: 1108,\n        amt: 1100,\n    },\n    {\n        name: 'Page F',\n        uv: 1400,\n        pv: 680,\n        amt: 1700,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Simple ComposedChart</div>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-200 max-width-500\">\n    <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n        <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 168px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"168\" viewBox=\"0 0 468 168\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts1-clip\">\n                        <rect x=\"15\" y=\"15\" height=\"108\" width=\"365\">\n                        </rect>\n                    </clipPath>\n                </defs>\n                <g class=\"recharts-cartesian-grid\">\n                    <g class=\"recharts-cartesian-grid-horizontal\">\n                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"123\" x2=\"380\" y2=\"123\">\n                        </line>\n                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"96\" x2=\"380\" y2=\"96\">\n                        </line>\n                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"69\" x2=\"380\" y2=\"69\">\n                        </line>\n                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"42\" x2=\"380\" y2=\"42\">\n                        </line>\n                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"365\" height=\"108\" x1=\"15\" y1=\"15\" x2=\"380\" y2=\"15\">\n                        </line>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"123\" x2=\"380\" y2=\"123\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"70.41666666666667\" y1=\"129\" x2=\"70.41666666666667\" y2=\"123\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"70.41666666666667\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"70.41666666666667\" dy=\"0.71em\">Page A</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"121.25000000000001\" y1=\"129\" x2=\"121.25000000000001\" y2=\"123\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"121.25000000000001\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"121.25000000000001\" dy=\"0.71em\">Page B</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"172.08333333333334\" y1=\"129\" x2=\"172.08333333333334\" y2=\"123\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"172.08333333333334\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"172.08333333333334\" dy=\"0.71em\">Page C</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"222.91666666666666\" y1=\"129\" x2=\"222.91666666666666\" y2=\"123\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"222.91666666666666\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"222.91666666666666\" dy=\"0.71em\">Page D</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"273.75\" y1=\"129\" x2=\"273.75\" y2=\"123\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"273.75\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"273.75\" dy=\"0.71em\">Page E</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"324.58333333333337\" y1=\"129\" x2=\"324.58333333333337\" y2=\"123\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"324.58333333333337\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"324.58333333333337\" dy=\"0.71em\">Page F</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-area\">\n                    <g class=\"recharts-layer\">\n                        <defs>\n                            <clipPath id=\"animationClipPath-recharts-area-5\">\n                                <rect x=\"70.41666666666667\" y=\"0\" width=\"44.24696978922736\" height=\"124\">\n                                </rect>\n                            </clipPath>\n                        </defs>\n                        <g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-5)\">\n                            <g class=\"recharts-layer\">\n                                <path fill-opacity=\"0.5\" fill=\"#e878b6 \" width=\"365\" height=\"108\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" d=\"M70.417,39C87.361,35.82,104.306,32.64,121.25,32.64C138.194,32.64,155.139,63.66,172.083,63.66C189.028,63.66,205.972,49.32,222.917,49.32C239.861,49.32,256.806,57,273.75,57C290.694,57,307.639,39,324.583,21L324.583,123C307.639,123,290.694,123,273.75,123C256.806,123,239.861,123,222.917,123C205.972,123,189.028,123,172.083,123C155.139,123,138.194,123,121.25,123C104.306,123,87.361,123,70.417,123Z\">\n                                </path>\n                                <path fill-opacity=\"0.5\" stroke=\"#e878b6 \" fill=\"none\" width=\"365\" height=\"108\" class=\"recharts-curve recharts-area-curve\" d=\"M70.417,39C87.361,35.82,104.306,32.64,121.25,32.64C138.194,32.64,155.139,63.66,172.083,63.66C189.028,63.66,205.972,49.32,222.917,49.32C239.861,49.32,256.806,57,273.75,57C290.694,57,307.639,39,324.583,21\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"50.083333333333336\" y=\"82.64968836838977\" width=\"40\" height=\"40.35031163161023\" radius=\"3,3,0,0\" fill-opacity=\"1\" fill=\"#8e96eb \" name=\"Page A\" class=\"recharts-rectangle\" d=\"M50.083333333333336,85.64968836838977A 3,3,0,0,1,53.083333333333336,82.64968836838977L 87.08333333333334,82.64968836838977A 3,3,0,0,1,\n        90.08333333333334,85.64968836838977L 90.08333333333334,123L 50.083333333333336,123Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"100.91666666666667\" y=\"74.22656081529111\" width=\"40\" height=\"48.77343918470889\" radius=\"3,3,0,0\" fill-opacity=\"1\" fill=\"#8e96eb \" name=\"Page B\" class=\"recharts-rectangle\" d=\"M100.91666666666667,77.22656081529111A 3,3,0,0,1,103.91666666666667,74.22656081529111L 137.91666666666669,74.22656081529111A 3,3,0,0,1,\n        140.91666666666669,77.22656081529111L 140.91666666666669,123L 100.91666666666667,123Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"151.75000000000003\" y=\"67.61919728561494\" width=\"40\" height=\"55.380802714385055\" radius=\"3,3,0,0\" fill-opacity=\"1\" fill=\"#8e96eb \" name=\"Page C\" class=\"recharts-rectangle\" d=\"M151.75000000000003,70.61919728561494A 3,3,0,0,1,154.75000000000003,67.61919728561494L 188.75000000000003,67.61919728561494A 3,3,0,0,1,\n        191.75000000000003,70.61919728561494L 191.75000000000003,123L 151.75000000000003,123Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"202.58333333333334\" y=\"62.474532552584634\" width=\"40\" height=\"60.525467447415366\" radius=\"3,3,0,0\" fill-opacity=\"1\" fill=\"#8e96eb \" name=\"Page D\" class=\"recharts-rectangle\" d=\"M202.58333333333334,65.47453255258463A 3,3,0,0,1,205.58333333333334,62.474532552584634L 239.58333333333334,62.474532552584634A 3,3,0,0,1,\n        242.58333333333334,65.47453255258463L 242.58333333333334,123L 202.58333333333334,123Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"253.41666666666669\" y=\"67.11481839021982\" width=\"40\" height=\"55.885181609780176\" radius=\"3,3,0,0\" fill-opacity=\"1\" fill=\"#8e96eb \" name=\"Page E\" class=\"recharts-rectangle\" d=\"M253.41666666666669,70.11481839021982A 3,3,0,0,1,256.4166666666667,67.11481839021982L 290.4166666666667,67.11481839021982A 3,3,0,0,1,\n        293.4166666666667,70.11481839021982L 293.4166666666667,123L 253.41666666666669,123Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"304.25\" y=\"88.7022351131313\" width=\"40\" height=\"34.297764886868706\" radius=\"3,3,0,0\" fill-opacity=\"1\" fill=\"#8e96eb \" name=\"Page F\" class=\"recharts-rectangle\" d=\"M304.25,91.7022351131313A 3,3,0,0,1,307.25,88.7022351131313L 341.25,88.7022351131313A 3,3,0,0,1,\n        344.25,91.7022351131313L 344.25,123L 304.25,123Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-line\">\n                    <path stroke-width=\"1\" stroke=\"#30b4c0 \" fill=\"none\" width=\"365\" height=\"108\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"46.54460830810522px 220.82032089111354px\" d=\"M70.417,87.6C87.361,83.295,104.306,78.99,121.25,70.92C138.194,62.85,155.139,42.5,172.083,39.18C189.028,35.86,205.972,35.43,222.917,34.2C239.861,32.97,256.806,31.8,273.75,31.8C290.694,31.8,307.639,35.4,324.583,39\">\n                    </path>\n                </g>\n            </svg>\n            <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 15px; top: 15px;\">\n                <ul class=\"list-style-none padding-left-20\">\n                    <li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \">\n                        <span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(232, 120, 182);\">\n                        </span>\n                        <span class=\"text-color-darker text-capitalize-first-word\">amt</span>\n                    </li>\n                    <li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \">\n                        <span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(142, 150, 235);\">\n                        </span>\n                        <span class=\"text-color-darker text-capitalize-first-word\">pv</span>\n                    </li>\n                    <li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \">\n                        <span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(48, 180, 192);\">\n                        </span>\n                        <span class=\"text-color-darker text-capitalize-first-word\">uv</span>\n                    </li>\n                </ul>\n            </div>\n            <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(15px, 15px);\">\n                <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n                    <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ComposedChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "name": "data",
+                      "type": "Array",
+                      "default": "",
+                      "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "String | Number | Function",
+                      "default": "value",
+                      "description": "The key of data displayed in the axis. Also, used as label for the x-axis."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "string",
+                      "default": "",
+                      "description": "The unit of data displayed in the chart."
+                    },
+                    {
+                      "name": "showGrid",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the grid shall be rendered."
+                    },
+                    {
+                      "name": "showXAxis",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether or not the x-axis shall be rendered."
+                    },
+                    {
+                      "name": "showYAxis",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the y-axis shall be rendered."
+                    },
+                    {
+                      "name": "xAxisOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis"
+                    },
+                    {
+                      "name": "yAxisOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis"
+                    },
+                    {
+                      "name": "additionalAxes",
+                      "type": "React.ReactElement<XAxisProps | YAxisProps>[]",
+                      "default": "",
+                      "description": "Render a list of additional axes. This includes YAxis and XAxis."
+                    },
+                    {
+                      "name": "gridOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid"
+                    },
+                    {
+                      "name": "containerOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
+                    },
+                    {
+                      "name": "brush",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the brush component shall be used."
+                    },
+                    {
+                      "name": "areas",
+                      "type": "Array of Area",
+                      "default": "[]",
+                      "description": "Renders the provided Area components."
+                    },
+                    {
+                      "name": "lines",
+                      "type": "Array of Line",
+                      "default": "[]",
+                      "description": "Renders the provided Line components."
+                    },
+                    {
+                      "name": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying ComposedChart component. Details can be found here: https://recharts.org/en-US/api/ComposedChart"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}