@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,107 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:06.591Z",
+    "source": "https://uikit.developers.rio.cloud/#components/subNavigation",
+    "category": "Components",
+    "section": "Navigation",
+    "slug": "components/subnavigation",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "91c41538290db73113a86a3825366f4b678c14399069d92c51bb335a3480ce9d"
+  },
+  "title": "SubNavigation",
+  "lead": null,
+  "content": [
+    {
+      "heading": "SubNavigation",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"bg-white border max-width-500\"><div class=\"SubNavigation width-100pct overflow-auto\"><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule\" data-nav-item-key=\"1\"><a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Subnavigation 1</a></li><li class=\"submodule\" data-nav-item-key=\"2\"><a href=\"#components/appLayout\">Subnavigation 2</a></li><li class=\"submodule\" data-nav-item-key=\"3\"><a href=\"#components/appLayout\">Subnavigation 3</a></li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';\n\nexport default () => (\n    <div className='bg-white border max-width-500'>\n        <SubNavigation\n            navItems={[\n                {\n                    key: '1',\n                    route: <NavLink to='/components/subNavigation'>Subnavigation 1</NavLink>,\n                },\n                {\n                    key: '2',\n                    route: (\n                        <NavLink to='/components/appLayout' onClick={event => event.preventDefault()}>\n                            Subnavigation 2\n                        </NavLink>\n                    ),\n                },\n                {\n                    key: '3',\n                    route: (\n                        <NavLink to='/components/appLayout' onClick={event => event.preventDefault()}>\n                            Subnavigation 3\n                        </NavLink>\n                    ),\n                },\n            ]}\n        />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"bg-white border max-width-500\">\n    <div class=\"SubNavigation width-100pct overflow-auto\">\n        <ul class=\"SubmoduleNavigation nav\">\n            <li class=\"submodule\" data-nav-item-key=\"1\">\n                <a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Subnavigation 1</a>\n            </li>\n            <li class=\"submodule\" data-nav-item-key=\"2\">\n                <a href=\"#components/appLayout\">Subnavigation 2</a>\n            </li>\n            <li class=\"submodule\" data-nav-item-key=\"3\">\n                <a href=\"#components/appLayout\">Subnavigation 3</a>\n            </li>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "navItems",
+                      "type": "Array",
+                      "default": "",
+                      "description": "List of navigation items with key and route prop. The route prop is a react-router NavLink component with an \"active\" style."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SubNavigation with offset",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-checkerboard padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\"><div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\"><nav class=\"ApplicationHeader user-select-none\"><div class=\"navbar-header\"><span class=\"navbar-brand home-icon\"></span></div><ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\"><li class=\"dropdown\"><a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\"><span>RIO Service</span></a></li></ul><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule \" data-nav-item-key=\"1\"><a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Navigation 1</a></li><li class=\"submodule \" data-nav-item-key=\"2\"><a href=\"#2\">Navigation 2</a></li><li class=\"submodule \" data-nav-item-key=\"3\"><a href=\"#3\">Navigation 3</a></li></ul><ul class=\"ApplicationActionBar nav navbar-nav navbar-right \"></ul></nav></div><div class=\"ApplicationLayoutBody uikitDemo\"><div class=\"module-content-wrapper\"><div class=\"ApplicationLayoutBodyNavigation\"><div class=\"SubNavigation width-100pct overflow-auto\"><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule\" data-nav-item-key=\"1\"><a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Subnavigation 1</a></li><li class=\"submodule\" data-nav-item-key=\"2\"><a href=\"#2\">Subnavigation 2</a></li><li class=\"submodule\" data-nav-item-key=\"3\"><a href=\"#3\">Subnavigation 3</a></li></ul></div></div><div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"scrollbar-content\"><div class=\"dummy-class\"></div></div></div></div><div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div><span class=\"scroll-to-top\"><button type=\"button\" class=\"btn btn-primary btn-icon-only\"><span class=\"rioglyph rioglyph-arrow-up\"></span></button></span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState, useEffect } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';\nimport SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';\nimport useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';\nimport { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';\n\nexport default () => {\n    const currentLocation = window.location.hash.replace('#', '/');\n    const navItems = [\n        { key: '1', route: <NavLink to={currentLocation}>Navigation 1</NavLink> },\n        {\n            key: '2',\n            route: (\n                <NavLink to='/2' onClick={event => event.preventDefault()}>\n                    Navigation 2\n                </NavLink>\n            ),\n        },\n        {\n            key: '3',\n            route: (\n                <NavLink to='/3' onClick={event => event.preventDefault()}>\n                    Navigation 3\n                </NavLink>\n            ),\n        },\n    ];\n\n    // Listen for resize changes of the target element defined by the ref\n    // Note: this is for demo purpose only when resizing the demo playground.\n    // The SubNavigation component handles this case internally\n    const { ref, isMobile } = useResizer();\n    const bodyNavigationClasses = isMobile ? '' : 'has-offset';\n\n    return (\n        <ApplicationLayout className='bg-lighter' layoutRef={ref}>\n            <ApplicationLayout.Header>\n                <ApplicationHeader label='RIO Service' navItems={navItems} />\n            </ApplicationLayout.Header>\n            <ApplicationLayout.Body\n                className='uikitDemo'\n                navigation={\n                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>\n                        <SubNavigation\n                            navItems={[\n                                {\n                                    key: '1',\n                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,\n                                },\n                                {\n                                    key: '2',\n                                    route: (\n                                        <NavLink to='/2' onClick={event => event.preventDefault()}>\n                                            Subnavigation 2\n                                        </NavLink>\n                                    ),\n                                },\n                                {\n                                    key: '3',\n                                    route: (\n                                        <NavLink to='/3' onClick={event => event.preventDefault()}>\n                                            Subnavigation 3\n                                        </NavLink>\n                                    ),\n                                },\n                            ]}\n                        />\n                    </ApplicationLayoutBodyNavigation>\n                }\n            >\n                <div className='dummy-class' />\n            </ApplicationLayout.Body>\n        </ApplicationLayout>\n    );\n};\n\nconst useResizer = () => {\n    const [isMobile, setIsMobile] = useState(false);\n    const [ref, observerEntry] = useResizeObserver();\n    const contentRect = observerEntry?.contentRect;\n    useEffect(() => {\n        if (!contentRect) {\n            return;\n        }\n        const width = Math.round(contentRect.width);\n        if (width <= SCREEN_MD) {\n            setIsMobile(true);\n        } else {\n            setIsMobile(false);\n        }\n    }, [contentRect]);\n\n    return { ref, isMobile };\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutBody uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"ApplicationLayoutBodyNavigation\">\n                <div class=\"SubNavigation width-100pct overflow-auto\">\n                    <ul class=\"SubmoduleNavigation nav\">\n                        <li class=\"submodule\" data-nav-item-key=\"1\">\n                            <a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Subnavigation 1</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"2\">\n                            <a href=\"#2\">Subnavigation 2</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"3\">\n                            <a href=\"#3\">Subnavigation 3</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SubNavigation without offset",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-checkerboard padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\"><div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\"><nav class=\"ApplicationHeader user-select-none\"><div class=\"navbar-header\"><span class=\"navbar-brand home-icon\"></span></div><ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\"><li class=\"dropdown\"><a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\"><span>RIO Service</span></a></li></ul><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule \" data-nav-item-key=\"1\"><a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Navigation 1</a></li><li class=\"submodule \" data-nav-item-key=\"2\"><a href=\"#2\">Navigation 2</a></li><li class=\"submodule \" data-nav-item-key=\"3\"><a href=\"#3\">Navigation 3</a></li></ul><ul class=\"ApplicationActionBar nav navbar-nav navbar-right \"></ul></nav></div><div class=\"ApplicationLayoutBody uikitDemo\"><div class=\"module-content-wrapper\"><div class=\"ApplicationLayoutBodyNavigation\"><div class=\"SubNavigation width-100pct overflow-auto\"><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule\" data-nav-item-key=\"1\"><a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Subnavigation 1</a></li><li class=\"submodule\" data-nav-item-key=\"2\"><a href=\"#2\">Subnavigation 2</a></li><li class=\"submodule\" data-nav-item-key=\"3\"><a href=\"#3\">Subnavigation 3</a></li></ul></div></div><div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"scrollbar-content\"><div class=\"dummy-class\"></div></div></div></div><div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div><span class=\"scroll-to-top\"><button type=\"button\" class=\"btn btn-primary btn-icon-only\"><span class=\"rioglyph rioglyph-arrow-up\"></span></button></span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';\nimport SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';\n\nexport default () => {\n    const currentLocation = window.location.hash.replace('#', '/');\n    const navItems = [\n        { key: '1', route: <NavLink to={currentLocation}>Navigation 1</NavLink> },\n        {\n            key: '2',\n            route: (\n                <NavLink to='/2' onClick={event => event.preventDefault()}>\n                    Navigation 2\n                </NavLink>\n            ),\n        },\n        {\n            key: '3',\n            route: (\n                <NavLink to='/3' onClick={event => event.preventDefault()}>\n                    Navigation 3\n                </NavLink>\n            ),\n        },\n    ];\n\n    return (\n        <ApplicationLayout className='bg-lighter'>\n            <ApplicationLayout.Header>\n                <ApplicationHeader label='RIO Service' navItems={navItems} />\n            </ApplicationLayout.Header>\n            <ApplicationLayout.Body\n                className='uikitDemo'\n                navigation={\n                    <ApplicationLayoutBodyNavigation>\n                        <SubNavigation\n                            navItems={[\n                                {\n                                    key: '1',\n                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,\n                                },\n                                {\n                                    key: '2',\n                                    route: (\n                                        <NavLink to='/2' onClick={event => event.preventDefault()}>\n                                            Subnavigation 2\n                                        </NavLink>\n                                    ),\n                                },\n                                {\n                                    key: '3',\n                                    route: (\n                                        <NavLink to='/3' onClick={event => event.preventDefault()}>\n                                            Subnavigation 3\n                                        </NavLink>\n                                    ),\n                                },\n                            ]}\n                        />\n                    </ApplicationLayoutBodyNavigation>\n                }\n            >\n                <div className='dummy-class' />\n            </ApplicationLayout.Body>\n        </ApplicationLayout>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutBody uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"ApplicationLayoutBodyNavigation\">\n                <div class=\"SubNavigation width-100pct overflow-auto\">\n                    <ul class=\"SubmoduleNavigation nav\">\n                        <li class=\"submodule\" data-nav-item-key=\"1\">\n                            <a aria-current=\"page\" class=\"active\" href=\"#components/subNavigation\">Subnavigation 1</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"2\">\n                            <a href=\"#2\">Subnavigation 2</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"3\">\n                            <a href=\"#3\">Subnavigation 3</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,45 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:56.977Z",
+    "source": "https://uikit.developers.rio.cloud/#components/supportMarker",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/supportmarker",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "7755419ab601fbc6d24054e50f3d234d791f49c41a6084423dd4532ee1d0aad4"
+  },
+  "title": "SupportMarker",
+  "lead": "You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!",
+  "content": [
+    {
+      "heading": "SupportMarker",
+      "body": "By default, support markers are invisible. Adding the show-support-marker class to the html tag will cause all support markers to show up.\n\nYou can use the utility functions provided by the UIKIT for easily adding / removing that class. Either simply toggle support markers on and off with toggleSupportMarker, or manage the state whether to show support markers manually and use enableSupportMarker.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"space-y-25\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle Support Markers</button><div class=\"support-marker\" data-support=\"LoremIpsum component\"><div class=\"expander-panel panel panel-default\" aria-label=\"expander panel\"><div class=\"panel-heading open\" aria-label=\"panel heading\"><span class=\"title\">Lorem Ipsum</span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div><div class=\"panel-body\"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div></div></div></div></div></div><div class=\"support-marker\" data-support=\"Widget: The Widget Name\nTeam: The Team Name \nSRC: https://uikit.developers.rio.cloud/#start/intro\"><iframe class=\"unstyled\" width=\"100%\" height=\"500\" src=\"https://uikit.developers.rio.cloud/#start/intro\"></iframe></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';\nimport { toggleSupportMarker } from '@rio-cloud/rio-uikit/SupportMarker';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    const iFrameSrc = 'https://uikit.developers.rio.cloud/#start/intro';\n    const iframeSupportData = `Widget: The Widget Name\\nTeam: The Team Name \\nSRC: ${iFrameSrc}`;\n\n    return (\n        <div className='space-y-25'>\n            <Button onClick={toggleSupportMarker}>Toggle Support Markers</Button>\n\n            <div className='support-marker' data-support='LoremIpsum component'>\n                <ExpanderPanel title='Lorem Ipsum' bsStyle='default' open>\n                    <div>\n                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore\n                        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet\n                        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet\n                    </div>\n                </ExpanderPanel>\n            </div>\n\n            <div className='support-marker' data-support={iframeSupportData}>\n                <iframe className='unstyled' width='100%' height='500' src={iFrameSrc} />\n            </div>\n        </div>\n    );\n};"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"space-y-25\"><div class=\"uikit-switch\"><label class=\"switch-label label-position-right\"><input type=\"checkbox\" class=\"switch-input\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div><div>Show support markers</div></label></div><div class=\"support-marker\" data-support=\"LoremIpsum component\"><div class=\"expander-panel panel panel-default\" aria-label=\"expander panel\"><div class=\"panel-heading open\" aria-label=\"panel heading\"><span class=\"title\">Lorem Ipsum</span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div><div class=\"panel-body\"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div></div></div></div></div></div><div class=\"support-marker\" data-support=\"Widget: The Widget Name\nTeam: The Team Name \nSRC: https://uikit.developers.rio.cloud/#start/intro\"><iframe class=\"unstyled\" width=\"100%\" height=\"500\" src=\"https://uikit.developers.rio.cloud/#start/intro\"></iframe></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useEffect, useState } from 'react';\n\nimport ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';\nimport Switch from '@rio-cloud/rio-uikit/Switch';\nimport { enableSupportMarker } from '@rio-cloud/rio-uikit/SupportMarker';\n\nexport default () => {\n    // you could, for example, populate this state from localStorage at startup\n    const [showSupportMarker, setShowSupportMarker] = useState(false);\n\n    useEffect(() => {\n        enableSupportMarker(showSupportMarker);\n    }, [showSupportMarker]);\n\n    const iFrameSrc = 'https://uikit.developers.rio.cloud/#start/intro';\n    const iframeSupportData = `Widget: The Widget Name\\nTeam: The Team Name \\nSRC: ${iFrameSrc}`;\n\n    return (\n        <div className='space-y-25'>\n            <Switch onChange={setShowSupportMarker} checked={showSupportMarker} labelPosition='right'>\n                <div>Show support markers</div>\n            </Switch>\n\n            <div className='support-marker' data-support='LoremIpsum component'>\n                <ExpanderPanel title='Lorem Ipsum' bsStyle='default' open>\n                    <div>\n                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore\n                        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet\n                        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet\n                    </div>\n                </ExpanderPanel>\n            </div>\n\n            <div className='support-marker' data-support={iframeSupportData}>\n                <iframe className='unstyled' width='100%' height='500' src={iFrameSrc} />\n            </div>\n        </div>\n    );\n};"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,81 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:58.390Z",
+    "source": "https://uikit.developers.rio.cloud/#components/svgImage",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/svgimage",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "1d5d548e6afdc2997d7d9deefe0b75aa011abc4326f5011b7ff3d2444973f7a6"
+  },
+  "title": "SvgImage",
+  "lead": "This component helps to render SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes. It uses the defined UIKIT CSS variables to automatically adapt to dark mode. When customizing colors, make sure to use existing CSS color variable names.",
+  "content": [
+    {
+      "heading": "SvgImage",
+      "body": "You can find an overview of all available SVG images here: https://cdn.rio.cloud/riosvg/index.html",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap gap-25\"></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SvgImage from '@rio-cloud/rio-uikit/SvgImage';\n\nexport default () => (\n    <div className='display-flex flex-wrap gap-25'>\n        <SvgImage name='abstract-product/product' size={120} />\n        <SvgImage name='abstract-product/abstract-component' size={120} />\n        <SvgImage name='delivery/package' size={120} />\n        <SvgImage\n            name='abstract-product/extendable'\n            size={120}\n            colorMap={{\n                mainStrokeColor: 'gray-dark',\n            }}\n        />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap gap-25\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:serif=\"http://www.serif.com/\" width=\"120\" height=\"120\" viewBox=\"0 0 250 250\" version=\"1.1\" xml:space=\"preserve\" class=\"\" style=\"fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-miterlimit: 2;\">\n        <g id=\"product\" transform=\"matrix(3.65079,0,0,3.65085,5.02397,-234.3)\">\n            <g transform=\"matrix(1.14763,0,0,1.14763,-0.201218,-9.87871)\">\n                <path d=\"M49.363,90.916C49.363,104.17 38.618,114.915 25.363,114.915C12.108,114.915 1.363,104.17 1.363,90.916C1.363,77.661 12.108,66.916 25.363,66.916C38.618,66.916 49.363,77.661 49.363,90.916Z\" style=\"fill: var(--gray-lighter); fill-rule: nonzero;\">\n                </path>\n            </g>\n            <path d=\"M18.363,104.915L18.363,120.915L37.363,129.915L56.363,120.915L56.363,104.915L18.363,104.915Z\" style=\"fill: var(--color-highlight-lighter); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M56.363,107.915L56.363,120.915L37.363,129.915L18.363,120.915L18.363,107.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n            </path>\n            <path d=\"M37.363,105.915L37.363,129.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n            </path>\n            <path d=\"M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n            </path>\n            <path d=\"M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n            </path>\n            <path d=\"M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n            </path>\n            <path d=\"M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n            </path>\n            <path d=\"M37.363,73.916L35.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M42.363,68.916L40.363,70.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M40.363,73.916L42.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M35.363,68.916L37.363,70.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M20.363,72.916L20.363,74.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M20.363,76.916L20.363,78.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M19.363,75.916L17.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M23.363,75.916L21.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M10.363,111.915L10.363,113.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M10.363,115.915L10.363,117.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M9.363,114.915L7.363,114.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M13.363,114.915L11.363,114.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M51.363,66.916L51.363,68.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M51.363,70.916L51.363,72.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M50.363,69.916L48.363,69.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n            <path d=\"M54.363,69.916L52.363,69.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n            </path>\n        </g>\n    </svg>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:serif=\"http://www.serif.com/\" width=\"120\" height=\"120\" viewBox=\"0 0 250 250\" version=\"1.1\" xml:space=\"preserve\" class=\"\" style=\"fill-rule: evenodd; clip-rule: evenodd; stroke-miterlimit: 2;\">\n        <g id=\"abstract-product\" transform=\"matrix(3.96558,0,0,3.96558,-877.753,-267.258)\">\n            <path d=\"M273.364,103.915C273.364,116.618 263.066,126.915 250.364,126.915C237.662,126.915 227.364,116.618 227.364,103.915C227.364,91.213 237.662,80.916 250.364,80.916C263.066,80.916 273.364,91.213 273.364,103.915Z\" style=\"fill: var(--gray-lighter); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M229.364,79.916L229.364,85.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.1px;\">\n            </path>\n            <path d=\"M232.364,82.916L226.364,82.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.1px;\">\n            </path>\n            <path d=\"M240.364,69.916L240.364,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.1px;\">\n            </path>\n            <path d=\"M243.364,72.916L237.364,72.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.1px;\">\n            </path>\n            <path d=\"M269.133,103.237L263.251,106.027L262.929,106.149C262.512,105.406 261.802,104.915 260.814,104.915L254.814,104.915C253.439,104.915 251.348,102.915 249.692,102.915L243.814,102.915C241.397,102.915 239.238,104.894 238.021,106.027C236.141,107.907 232.364,111.703 232.364,111.703L241.556,120.905C243.059,119.403 244.829,117.915 246.364,117.915L258.364,117.915C260.237,117.915 262.101,117.34 263.425,116.016L273.376,106.065L276.205,98.995C274.481,97.271 270.547,99.113 269.133,103.237Z\" style=\"fill: var(--color-white); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M250.364,110.915L260.814,110.915C262.471,110.915 263.364,109.61 263.364,107.954L263.364,107.935C263.364,106.277 262.471,104.915 260.814,104.915L254.814,104.915C253.439,104.915 251.348,102.915 249.692,102.915L243.814,102.915C241.397,102.915 239.238,104.894 238.021,106.027C236.141,107.907 232.364,111.703 232.364,111.703L241.556,120.905C243.059,119.403 244.829,117.915 246.364,117.915L258.364,117.915C260.237,117.915 262.101,117.34 263.425,116.016L273.376,106.065L276.205,98.995C274.481,97.271 270.547,99.113 269.133,103.237L263.251,106.027\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;\">\n            </path>\n            <path d=\"M231.364,108.915L225.364,114.915L238.364,127.915L244.363,121.915L231.364,108.915Z\" style=\"fill: var(--color-highlight-lighter); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M231.364,108.915L225.364,114.915L238.364,127.915L244.363,121.915L231.364,108.915Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M232.911,116.368L230.911,114.368\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;\">\n            </path>\n            <path d=\"M266.138,82.263L257.884,75.646C257.627,75.44 257.187,75.342 256.808,75.479L247.08,79.268C246.64,79.355 246.28,79.7 246.21,80.169L244.687,90.446C244.623,90.904 244.7,91.377 245.031,91.643L253.286,98.26C253.603,98.515 253.846,98.674 254.163,98.552L264.147,94.671C264.685,94.462 264.911,94.235 264.984,93.74L266.536,83.275C266.582,82.962 266.428,82.495 266.138,82.263Z\" style=\"fill: var(--color-highlight-lighter); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M266.138,82.263L257.884,75.646C257.627,75.44 257.187,75.342 256.808,75.479L247.08,79.268C246.64,79.355 246.28,79.7 246.21,80.169L244.687,90.446C244.623,90.904 244.7,91.377 245.031,91.643L253.286,98.26C253.603,98.515 253.846,98.674 254.163,98.552L264.147,94.671C264.685,94.462 264.911,94.235 264.984,93.74L266.536,83.275C266.582,82.962 266.428,82.495 266.138,82.263Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.1px;\">\n            </path>\n            <path d=\"M256.605,78.558L255.223,86.846L248.116,89.437\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;\">\n            </path>\n            <path d=\"M255.223,86.846L262.06,92.26\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.1px; stroke-linecap: round;\">\n            </path>\n            <path d=\"M277.364,87.916L277.364,93.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.1px;\">\n            </path>\n            <path d=\"M280.364,90.916L274.364,90.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.1px;\">\n            </path>\n        </g>\n    </svg>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:serif=\"http://www.serif.com/\" width=\"120\" height=\"120\" viewBox=\"0 0 250 250\" version=\"1.1\" xml:space=\"preserve\" class=\"\" style=\"fill-rule: evenodd; clip-rule: evenodd; stroke-miterlimit: 2;\">\n        <g transform=\"matrix(3.83333,0,0,3.83333,-417.263,-254.174)\">\n            <g id=\"delivery\">\n                <g id=\"package\">\n                    <path d=\"M171.46,105.915C171.46,117.513 162.058,126.915 150.46,126.915C138.862,126.915 129.46,117.513 129.46,105.915C129.46,94.317 138.862,84.915 150.46,84.915C162.058,84.915 171.46,94.317 171.46,105.915Z\" style=\"fill: var(--gray-lighter); fill-rule: nonzero;\">\n                    </path>\n                    <path d=\"M135.404,124.915L159.46,112.378L159.46,86.048L135.404,73.915L111.46,86.048L111.46,112.378L135.404,124.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero;\">\n                    </path>\n                    <path d=\"M111.46,86.048L135.46,98.585L135.46,124.915L111.46,112.378L111.46,86.048Z\" style=\"fill: var(--gray-lighter); fill-rule: nonzero;\">\n                    </path>\n                    <path d=\"M157.46,75.915L157.46,70.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M161.025,76.556L163.407,72.431\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M163.713,79.244L167.838,76.862\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M164.46,82.915L169.46,82.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M153.681,76.556L151.299,72.431\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M135.404,124.915L159.46,112.378L159.46,86.048L135.404,73.915L111.46,86.048L111.46,112.378L135.404,124.915Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M111.46,86.048L135.46,98.585L159.572,86.048\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M135.46,98.915L135.46,124.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M143.798,78.111L120.46,90.915L120.46,95.915L121.478,96.036L123.203,97.922L125.022,98.29L126.46,99.645L126.46,93.915L150.16,81.312L143.798,78.111Z\" style=\"fill: var(--color-highlight-lighter); fill-rule: nonzero;\">\n                    </path>\n                    <path d=\"M143.798,78.111L120.46,90.915L120.46,95.915L121.478,96.036L123.203,97.922L125.022,98.29L126.46,99.645L126.46,93.915L150.16,81.312L143.798,78.111Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M154.528,108.532L142.46,114.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M152.46,95.915L152.46,105.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M149.972,100.321L152.46,96.245L154.948,97.932\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M144.46,99.915L144.46,109.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                    <path d=\"M141.972,104.321L144.46,100.245L146.948,101.931\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.17px;\">\n                    </path>\n                </g>\n            </g>\n        </g>\n    </svg>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:serif=\"http://www.serif.com/\" width=\"120\" height=\"120\" viewBox=\"0 0 250 250\" version=\"1.1\" xml:space=\"preserve\" class=\"\" style=\"fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-miterlimit: 2;\">\n        <g transform=\"matrix(4.02584,0,0,3.83333,-886.948,-649.008)\">\n            <path d=\"M274.364,194.915C274.364,207.618 264.066,217.915 251.364,217.915C238.662,217.915 228.364,207.618 228.364,194.915C228.364,182.212 238.662,171.915 251.364,171.915C264.066,171.915 274.364,182.212 274.364,194.915Z\" style=\"fill: var(--gray-lighter); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M232.364,197.915L251.364,188.915L270.364,197.915L251.364,206.915L232.364,197.915Z\" style=\"fill: var(--gray-lighter); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M251.364,207.915L243.364,214.915L232.364,209.705L232.364,222.915L251.364,231.915L270.364,222.915L270.364,209.705L259.364,214.915L251.364,207.915Z\" style=\"fill: var(--color-highlight-lighter); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M232.364,220.915L232.364,209.915\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px;\">\n            </path>\n            <path d=\"M251.364,231.915L238.441,225.793\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px;\">\n            </path>\n            <path d=\"M251.364,207.915L251.364,231.915\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px;\">\n            </path>\n            <path d=\"M224.364,205.915L243.364,214.915L251.364,207.915L251.364,206.915L232.364,197.915L224.364,204.915L224.364,205.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M224.364,205.915L243.364,214.915L251.364,207.915L251.364,206.915L232.364,197.915L224.364,204.915L224.364,205.915Z\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M279.364,192.915L260.364,183.915L251.364,187.915L251.364,188.915L270.364,197.915L279.364,193.915L279.364,192.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M223.364,192.915L242.364,183.915L251.364,187.915L251.364,188.915L232.364,197.915L223.364,193.915L223.364,192.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M248.333,190.351L232.364,197.915L223.364,193.915L223.364,192.915L242.364,183.915L248.392,186.594\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M254.394,190.351L270.364,197.915L279.364,193.915L279.364,192.915L260.364,183.915L254.335,186.594\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M242.364,220.567L222.798,229.698\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M229.157,231.002L222.798,229.698L225.973,223.853\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M270.364,220.915L270.364,209.915\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px;\">\n            </path>\n            <path d=\"M251.364,231.915L264.287,225.793\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px;\">\n            </path>\n            <path d=\"M278.364,205.915L259.364,214.915L251.364,207.915L251.364,206.915L270.364,197.915L278.364,204.915L278.364,205.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero;\">\n            </path>\n            <path d=\"M278.364,205.915L259.364,214.915L251.364,207.915L251.364,206.915L270.364,197.915L278.364,204.915L278.364,205.915Z\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M260.364,220.567L279.929,229.698\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M273.571,231.002L279.929,229.698L276.754,223.853\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M247.451,179.741L251.364,174.524L255.277,179.741\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n            <path d=\"M251.364,175.828L251.364,198.002\" style=\"fill: none; stroke: var(--gray-dark); stroke-width: 2.12px; stroke-linejoin: round;\">\n            </path>\n        </g>\n    </svg>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "name",
+                      "type": "string",
+                      "default": "",
+                      "description": "The name of the image file without extension."
+                    },
+                    {
+                      "name": "size",
+                      "type": "number",
+                      "default": "150",
+                      "description": "The height and width of the SVG image in pixels."
+                    },
+                    {
+                      "name": "baseUrl",
+                      "type": "string",
+                      "default": "https://cdn.rio.cloud/riosvg",
+                      "description": "The CDN base URL where the images are located."
+                    },
+                    {
+                      "name": "colorMap",
+                      "type": "ColorOverridesMap",
+                      "default": "",
+                      "description": "Customize color using the color map and define the CSS variable name that shall be used."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional class names added to the SVG element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,111 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:16.765Z",
+    "source": "https://uikit.developers.rio.cloud/#components/switch",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/switch",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "598a2261b158b064e5c1e344d04fc02320ed5cd3fa99264c108707df8cfe4edc"
+  },
+  "title": "Switch",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Switch",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Switch</label><div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div></div><hr><label>Disabled Switch &amp; disabled active Switch</label><div class=\"display-flex\"><div class=\"margin-right-10\"><div class=\"uikit-switch\"><label class=\"switch-label cursor-not-allowed\"><input type=\"checkbox\" class=\"switch-input\" disabled=\"\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div></div><div><div class=\"uikit-switch\"><label class=\"switch-label cursor-not-allowed\"><input type=\"checkbox\" class=\"switch-input\" disabled=\"\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div></div></div><hr><label>Colored Switch</label><div class=\"display-flex flex-wrap gap-5\"><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-secondary); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-info); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-success); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-warning); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-danger); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div></div><hr><label>Switch with label</label><div><div class=\"uikit-switch\"><label class=\"switch-label label-position-right\"><input type=\"checkbox\" class=\"switch-input\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div><span>Label</span></label></div></div><hr><label>Switch with label left</label><div><div class=\"uikit-switch\"><label class=\"switch-label label-position-left\"><input type=\"checkbox\" class=\"switch-input\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div><span>Label</span></label></div></div><hr><label>Switch with text and min-width</label><div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 50px;\"><div class=\"switch-text\" data-on=\"ON\" data-off=\"OFF\"></div><div class=\"switch-handle\"></div></div></label></div></div><hr><label>Switch with single text and label</label><div><div class=\"uikit-switch\"><label class=\"switch-label label-position-right\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div><span>Beta feature toggle</span></label></div></div><hr><label>Switch in panels</label><div class=\"display-grid grid-cols-3 gap-15\"><div class=\"panel panel-default\"><div class=\"panel-heading display-flex justify-content-end\"><div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div></div><div class=\"panel-body\"></div></div><div class=\"panel panel-primary\"><div class=\"panel-heading display-flex justify-content-end\"><div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div></div><div class=\"panel-body\"></div></div><div class=\"panel panel-success\"><div class=\"panel-heading display-flex justify-content-end\"><div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-success); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div></div><div class=\"panel-body\"></div></div><div class=\"panel panel-warning\"><div class=\"panel-heading display-flex justify-content-end\"><div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-warning); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div></div><div class=\"panel-body\"></div></div><div class=\"panel panel-danger\"><div class=\"panel-heading display-flex justify-content-end\"><div><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-danger); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div></div><div class=\"panel-body\"></div></div></div><label class=\"margin-top-25\">Switch in alerts</label><div class=\"display-grid grid-cols-3 gap-15\"><div class=\"alert alert-warning\"><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-warning); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div><div class=\"alert alert-danger\"><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-danger); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div><div class=\"alert alert-info\"><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-info); min-width: 40px;\"><div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\"></div><div class=\"switch-handle\"></div></div></label></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Switch from '@rio-cloud/rio-uikit/Switch';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nexport default () => {\n    const [switchStates, setSwitchStates] = useState<{\n        [key: string]: boolean;\n    }>({\n        switch1: true,\n        switch2: true,\n        switch3: false,\n        switch4: false,\n        switch5: false,\n        switch6: true,\n    });\n\n    const handleChange = (key: string) => {\n        const newState = !switchStates[key];\n        Notification.info(`Checked: ${newState}`);\n\n        setSwitchStates({\n            ...switchStates,\n            [key]: newState,\n        });\n    };\n\n    const { switch1, switch2, switch3, switch4, switch5, switch6 } = switchStates;\n\n    return (\n        <div>\n            <label>Switch</label>\n            <div>\n                <Switch onChange={() => handleChange('switch1')} checked={switch1} />\n            </div>\n            <hr />\n            <label>Disabled Switch & disabled active Switch</label>\n            <div className='display-flex'>\n                <div className='margin-right-10'>\n                    <Switch disabled />\n                </div>\n                <div>\n                    <Switch disabled checked />\n                </div>\n            </div>\n            <hr />\n            <label>Colored Switch</label>\n            <div className='display-flex flex-wrap gap-5'>\n                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='secondary' />\n                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='info' />\n                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='success' />\n                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='warning' />\n                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='danger' />\n            </div>\n            <hr />\n            <label>Switch with label</label>\n            <div>\n                <Switch onChange={() => handleChange('switch3')} checked={switch3} labelPosition='right'>\n                    <span>Label</span>\n                </Switch>\n            </div>\n            <hr />\n            <label>Switch with label left</label>\n            <div>\n                <Switch onChange={() => handleChange('switch4')} checked={switch4} labelPosition='left'>\n                    <span>Label</span>\n                </Switch>\n            </div>\n            <hr />\n            <label>Switch with text and min-width</label>\n            <div>\n                <Switch\n                    onChange={() => handleChange('switch5')}\n                    checked={switch5}\n                    minWidth={50}\n                    enabledText='ON'\n                    disabledText='OFF'\n                />\n            </div>\n            <hr />\n            <label>Switch with single text and label</label>\n            <div>\n                <Switch\n                    onChange={() => handleChange('switch6')}\n                    checked={switch6}\n                    enabledText='Beta'\n                    labelPosition='right'\n                >\n                    <span>Beta feature toggle</span>\n                </Switch>\n            </div>\n            <hr />\n            <label>Switch in panels</label>\n            <div className='display-grid grid-cols-3 gap-15'>\n                <div className='panel panel-default'>\n                    <div className='panel-heading display-flex justify-content-end'>\n                        <div>\n                            <Switch onChange={() => handleChange('switch6')} checked={switch6} enabledText='Beta' />\n                        </div>\n                    </div>\n                    <div className='panel-body' />\n                </div>\n                <div className='panel panel-primary'>\n                    <div className='panel-heading display-flex justify-content-end'>\n                        <div>\n                            <Switch onChange={() => handleChange('switch6')} checked={switch6} enabledText='Beta' />\n                        </div>\n                    </div>\n                    <div className='panel-body' />\n                </div>\n                <div className='panel panel-success'>\n                    <div className='panel-heading display-flex justify-content-end'>\n                        <div>\n                            <Switch\n                                onChange={() => handleChange('switch6')}\n                                checked={switch6}\n                                enabledText='Beta'\n                                color='success'\n                            />\n                        </div>\n                    </div>\n                    <div className='panel-body' />\n                </div>\n                <div className='panel panel-warning'>\n                    <div className='panel-heading display-flex justify-content-end'>\n                        <div>\n                            <Switch\n                                onChange={() => handleChange('switch6')}\n                                checked={switch6}\n                                enabledText='Beta'\n                                color='warning'\n                            />\n                        </div>\n                    </div>\n                    <div className='panel-body' />\n                </div>\n                <div className='panel panel-danger'>\n                    <div className='panel-heading display-flex justify-content-end'>\n                        <div>\n                            <Switch\n                                onChange={() => handleChange('switch6')}\n                                checked={switch6}\n                                enabledText='Beta'\n                                color='danger'\n                            />\n                        </div>\n                    </div>\n                    <div className='panel-body' />\n                </div>\n            </div>\n            <label className='margin-top-25'>Switch in alerts</label>\n            <div className='display-grid grid-cols-3 gap-15'>\n                <div className='alert alert-warning'>\n                    <Switch\n                        onChange={() => handleChange('switch6')}\n                        checked={switch6}\n                        enabledText='Beta'\n                        color='warning'\n                    />\n                </div>\n                <div className='alert alert-danger'>\n                    <Switch\n                        onChange={() => handleChange('switch6')}\n                        checked={switch6}\n                        enabledText='Beta'\n                        color='danger'\n                    />\n                </div>\n                <div className='alert alert-info'>\n                    <Switch\n                        onChange={() => handleChange('switch6')}\n                        checked={switch6}\n                        enabledText='Beta'\n                        color='info'\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Switch</label>\n    <div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label\">\n                <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n            </label>\n        </div>\n    </div>\n    <hr>\n    <label>Disabled Switch &amp; disabled active Switch</label>\n    <div class=\"display-flex\">\n        <div class=\"margin-right-10\">\n            <div class=\"uikit-switch\">\n                <label class=\"switch-label cursor-not-allowed\">\n                    <input type=\"checkbox\" class=\"switch-input\" disabled=\"\">\n                    <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                        <div class=\"switch-handle\">\n                        </div>\n                    </div>\n                </label>\n            </div>\n        </div>\n        <div>\n            <div class=\"uikit-switch\">\n                <label class=\"switch-label cursor-not-allowed\">\n                    <input type=\"checkbox\" class=\"switch-input\" disabled=\"\" checked=\"\">\n                    <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                        <div class=\"switch-handle\">\n                        </div>\n                    </div>\n                </label>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <label>Colored Switch</label>\n    <div class=\"display-flex flex-wrap gap-5\">\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label\">\n                <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                <div class=\"switch-content\" style=\"color: var(--brand-secondary); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n            </label>\n        </div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label\">\n                <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                <div class=\"switch-content\" style=\"color: var(--brand-info); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n            </label>\n        </div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label\">\n                <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                <div class=\"switch-content\" style=\"color: var(--brand-success); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n            </label>\n        </div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label\">\n                <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                <div class=\"switch-content\" style=\"color: var(--brand-warning); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n            </label>\n        </div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label\">\n                <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                <div class=\"switch-content\" style=\"color: var(--brand-danger); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n            </label>\n        </div>\n    </div>\n    <hr>\n    <label>Switch with label</label>\n    <div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label label-position-right\">\n                <input type=\"checkbox\" class=\"switch-input\">\n                <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n                <span>Label</span>\n            </label>\n        </div>\n    </div>\n    <hr>\n    <label>Switch with label left</label>\n    <div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label label-position-left\">\n                <input type=\"checkbox\" class=\"switch-input\">\n                <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n                <span>Label</span>\n            </label>\n        </div>\n    </div>\n    <hr>\n    <label>Switch with text and min-width</label>\n    <div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label\">\n                <input type=\"checkbox\" class=\"switch-input\">\n                <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 50px;\">\n                    <div class=\"switch-text\" data-on=\"ON\" data-off=\"OFF\">\n                    </div>\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n            </label>\n        </div>\n    </div>\n    <hr>\n    <label>Switch with single text and label</label>\n    <div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label label-position-right\">\n                <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                    <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                    </div>\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>\n                <span>Beta feature toggle</span>\n            </label>\n        </div>\n    </div>\n    <hr>\n    <label>Switch in panels</label>\n    <div class=\"display-grid grid-cols-3 gap-15\">\n        <div class=\"panel panel-default\">\n            <div class=\"panel-heading display-flex justify-content-end\">\n                <div>\n                    <div class=\"uikit-switch\">\n                        <label class=\"switch-label\">\n                            <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                            <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                                <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                                </div>\n                                <div class=\"switch-handle\">\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body\">\n            </div>\n        </div>\n        <div class=\"panel panel-primary\">\n            <div class=\"panel-heading display-flex justify-content-end\">\n                <div>\n                    <div class=\"uikit-switch\">\n                        <label class=\"switch-label\">\n                            <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                            <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                                <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                                </div>\n                                <div class=\"switch-handle\">\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body\">\n            </div>\n        </div>\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading display-flex justify-content-end\">\n                <div>\n                    <div class=\"uikit-switch\">\n                        <label class=\"switch-label\">\n                            <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                            <div class=\"switch-content\" style=\"color: var(--brand-success); min-width: 40px;\">\n                                <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                                </div>\n                                <div class=\"switch-handle\">\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body\">\n            </div>\n        </div>\n        <div class=\"panel panel-warning\">\n            <div class=\"panel-heading display-flex justify-content-end\">\n                <div>\n                    <div class=\"uikit-switch\">\n                        <label class=\"switch-label\">\n                            <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                            <div class=\"switch-content\" style=\"color: var(--brand-warning); min-width: 40px;\">\n                                <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                                </div>\n                                <div class=\"switch-handle\">\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body\">\n            </div>\n        </div>\n        <div class=\"panel panel-danger\">\n            <div class=\"panel-heading display-flex justify-content-end\">\n                <div>\n                    <div class=\"uikit-switch\">\n                        <label class=\"switch-label\">\n                            <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                            <div class=\"switch-content\" style=\"color: var(--brand-danger); min-width: 40px;\">\n                                <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                                </div>\n                                <div class=\"switch-handle\">\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body\">\n            </div>\n        </div>\n    </div>\n    <label class=\"margin-top-25\">Switch in alerts</label>\n    <div class=\"display-grid grid-cols-3 gap-15\">\n        <div class=\"alert alert-warning\">\n            <div class=\"uikit-switch\">\n                <label class=\"switch-label\">\n                    <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                    <div class=\"switch-content\" style=\"color: var(--brand-warning); min-width: 40px;\">\n                        <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                        </div>\n                        <div class=\"switch-handle\">\n                        </div>\n                    </div>\n                </label>\n            </div>\n        </div>\n        <div class=\"alert alert-danger\">\n            <div class=\"uikit-switch\">\n                <label class=\"switch-label\">\n                    <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                    <div class=\"switch-content\" style=\"color: var(--brand-danger); min-width: 40px;\">\n                        <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                        </div>\n                        <div class=\"switch-handle\">\n                        </div>\n                    </div>\n                </label>\n            </div>\n        </div>\n        <div class=\"alert alert-info\">\n            <div class=\"uikit-switch\">\n                <label class=\"switch-label\">\n                    <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                    <div class=\"switch-content\" style=\"color: var(--brand-info); min-width: 40px;\">\n                        <div class=\"switch-text\" data-on=\"Beta\" data-off=\"Beta\">\n                        </div>\n                        <div class=\"switch-handle\">\n                        </div>\n                    </div>\n                </label>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "keyName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional key that is used as key and as the id on the internal input."
+                    },
+                    {
+                      "name": "checked",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set active / inactive state."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the component."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The min-width of the switch."
+                    },
+                    {
+                      "name": "enabledText",
+                      "type": "String",
+                      "default": "",
+                      "description": "ON text"
+                    },
+                    {
+                      "name": "disabledText",
+                      "type": "String",
+                      "default": "",
+                      "description": "OFF text"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional class names added"
+                    },
+                    {
+                      "name": "labelPosition",
+                      "type": "String",
+                      "default": "",
+                      "description": "Possible values are: left, right"
+                    },
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "'primary'",
+                      "description": "Defines the color of the switch. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}