@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Templates/templates/loading-progress.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:32.158Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/loading-progress",
+    "category": "Templates",
+    "section": "Progress",
+    "slug": "templates/loading-progress",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "e04b37f39d7944c90b98edaab5d0cf164cc6d89e1e5d8d676eded3ab3dfdd7e3"
+  },
+  "title": "Loading progress",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Loading progress",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Label",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-500 margin-auto\"><div class=\"bg-white rounded border shadow-default padding-15 display-flex flex-column gap-5\"><div class=\"display-flex justify-content-between gap-5\"><div class=\"display-flex align-items-center\"><div class=\"margin-right-3 text-color-dark\">Label</div><span class=\"rioglyph rioglyph-question-sign text-color-dark\"></span></div><span class=\"display-flex gap-5\"><span class=\"text-color-darker\">0%</span><span class=\"scale-80\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div></span></span></div><div class=\"progress\"><div class=\"progress-bar bg-info\" style=\"width: 0%;\"></div></div><div class=\"text-color-dark text-size-12 margin-top-5\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Card from '@rio-cloud/rio-uikit/Card';\nimport Spinner from '@rio-cloud/rio-uikit/Spinner';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\nimport useInterval from '@rio-cloud/rio-uikit/useInterval';\n\nexport default () => {\n    const [value, setValue] = useState(0);\n\n    useInterval(() => {\n        setValue(oldValue => (oldValue + 1) % 101);\n    }, 150);\n\n    return (\n        <div className='max-width-500 margin-auto'>\n            <Card className='display-flex flex-column gap-5'>\n                <div className='display-flex justify-content-between gap-5'>\n                    <div className='display-flex align-items-center'>\n                        <div className='margin-right-3 text-color-dark'>Label</div>\n                        <SimpleTooltip content='Some helper text' placement='top'>\n                            <span className='rioglyph rioglyph-question-sign text-color-dark' />\n                        </SimpleTooltip>\n                    </div>\n                    <span className='display-flex gap-5'>\n                        <span className='text-color-darker'>{value}%</span>\n                        <span className='scale-80'>\n                            <Spinner />\n                        </span>\n                    </span>\n                </div>\n                <div className='progress'>\n                    <div className='progress-bar bg-info' style={{ width: `${value}%` }} />\n                </div>\n                <div className='text-color-dark text-size-12 margin-top-5'>\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt,\n                    at volutpat nunc facilisis. Sed auctor.\n                </div>\n            </Card>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-500 margin-auto\">\n    <div class=\"bg-white rounded border shadow-default padding-15 display-flex flex-column gap-5\">\n        <div class=\"display-flex justify-content-between gap-5\">\n            <div class=\"display-flex align-items-center\">\n                <div class=\"margin-right-3 text-color-dark\">Label</div>\n                <span class=\"rioglyph rioglyph-question-sign text-color-dark\">\n                </span>\n            </div>\n            <span class=\"display-flex gap-5\">\n                <span class=\"text-color-darker\">1%</span>\n                <span class=\"scale-80\">\n                    <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n                        <div class=\"spinner\">\n                            <div>\n                            </div>\n                            <div>\n                            </div>\n                            <div>\n                            </div>\n                            <div>\n                            </div>\n                        </div>\n                    </div>\n                </span>\n            </span>\n        </div>\n        <div class=\"progress\">\n            <div class=\"progress-bar bg-info\" style=\"width: 1%;\">\n            </div>\n        </div>\n        <div class=\"text-color-dark text-size-12 margin-top-5\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.</div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/options-panel.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:28.490Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/options-panel",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/options-panel",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "075e4a8f4381d9d5a1ad1d28e65f35093d43d274c3ebb7ad912b9113872f54d8"
+  },
+  "title": "Options panel",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Options panel",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Add transport order",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 margin-auto\"><div class=\"display-flex flex-column gap-15 padding-25\"><div><h3 class=\"text-size-h3 text-medium text-color-darkest margin-top-0\">Add transport order</h3><p class=\"text-color-darker\">You have two options for uploading a transport order to the system.</p></div><h4 class=\"text-medium text-color-darkest margin-bottom-0\">Where is your transport order stored?</h4><div class=\"rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer\"><div class=\"display-flex align-items-center gap-20\"><span class=\"rioglyph rioglyph-server-stack text-color-darkest text-size-h2\"></span><div><div class=\"text-size-18 text-bold text-color-darkest line-height-125rel\">From onboard unit</div><div class=\"text-color-darker\">Upload the .xml order file from your vehicle.</div></div></div><span class=\"rioglyph rioglyph-chevron-right text-color-light text-size-20\"></span></div><div class=\"rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer\"><div class=\"display-flex align-items-center gap-20\"><span class=\"rioglyph rioglyph-pencil-square text-color-darkest text-size-h2\"></span><div><div class=\"text-size-18 text-bold text-color-darkest line-height-125rel\">Manual entry</div><div class=\"text-color-darker\">Create a new transport order in the interface.</div></div></div><span class=\"rioglyph rioglyph-chevron-right text-color-light text-size-20\"></span></div><div class=\"display-flex flex-wrap gap-15 justify-content-center-xs justify-content-between align-items-center margin-top-20\"><a href=\"#\">Need help uploading your order?</a><button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Cancel upload</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useHover from '@rio-cloud/rio-uikit/useHover';\n\nexport default () => {\n    return (\n        <div className='max-width-600 margin-auto'>\n            <div className='display-flex flex-column gap-15 padding-25'>\n                <div>\n                    <h3 className='text-size-h3 text-medium text-color-darkest margin-top-0'>Add transport order</h3>\n                    <p className='text-color-darker'>\n                        You have two options for uploading a transport order to the system.\n                    </p>\n                </div>\n\n                <h4 className='text-medium text-color-darkest margin-bottom-0'>\n                    Where is your transport order stored?\n                </h4>\n\n                <OptionItem\n                    icon='rioglyph-server-stack'\n                    title='From onboard unit'\n                    description='Upload the .xml order file from your vehicle.'\n                />\n\n                <OptionItem\n                    icon='rioglyph-pencil-square'\n                    title='Manual entry'\n                    description='Create a new transport order in the interface.'\n                />\n\n                <div className='display-flex flex-wrap gap-15 justify-content-center-xs justify-content-between align-items-center margin-top-20'>\n                    <a href='#'>Need help uploading your order?</a>\n                    <Button bsStyle='muted-filled'>Cancel upload</Button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\ntype OptionItemProps = {\n    icon: string;\n    title: string;\n    description: string;\n};\n\nconst OptionItem = ({ icon, title, description }: OptionItemProps) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const isHover = useHover(ref);\n\n    return (\n        <div\n            ref={ref}\n            className='rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer'\n        >\n            <div className='display-flex align-items-center gap-20'>\n                <span className={`rioglyph ${icon} text-color-darkest text-size-h2`} />\n                <div>\n                    <div className='text-size-18 text-bold text-color-darkest line-height-125rel'>{title}</div>\n                    <div className='text-color-darker'>{description}</div>\n                </div>\n            </div>\n            <span\n                className={`rioglyph rioglyph-chevron-right ${isHover ? 'text-color-highlight' : 'text-color-light'} text-size-20`}\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 margin-auto\">\n    <div class=\"display-flex flex-column gap-15 padding-25\">\n        <div>\n            <h3 class=\"text-size-h3 text-medium text-color-darkest margin-top-0\">Add transport order</h3>\n            <p class=\"text-color-darker\">You have two options for uploading a transport order to the system.</p>\n        </div>\n        <h4 class=\"text-medium text-color-darkest margin-bottom-0\">Where is your transport order stored?</h4>\n        <div class=\"rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer\">\n            <div class=\"display-flex align-items-center gap-20\">\n                <span class=\"rioglyph rioglyph-server-stack text-color-darkest text-size-h2\">\n                </span>\n                <div>\n                    <div class=\"text-size-18 text-bold text-color-darkest line-height-125rel\">From onboard unit</div>\n                    <div class=\"text-color-darker\">Upload the .xml order file from your vehicle.</div>\n                </div>\n            </div>\n            <span class=\"rioglyph rioglyph-chevron-right text-color-light text-size-20\">\n            </span>\n        </div>\n        <div class=\"rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer\">\n            <div class=\"display-flex align-items-center gap-20\">\n                <span class=\"rioglyph rioglyph-pencil-square text-color-darkest text-size-h2\">\n                </span>\n                <div>\n                    <div class=\"text-size-18 text-bold text-color-darkest line-height-125rel\">Manual entry</div>\n                    <div class=\"text-color-darker\">Create a new transport order in the interface.</div>\n                </div>\n            </div>\n            <span class=\"rioglyph rioglyph-chevron-right text-color-light text-size-20\">\n            </span>\n        </div>\n        <div class=\"display-flex flex-wrap gap-15 justify-content-center-xs justify-content-between align-items-center margin-top-20\">\n            <a href=\"#\">Need help uploading your order?</a>\n            <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Cancel upload</button>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/panel-variants.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:27.958Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/panel-variants",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/panel-variants",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "0ecbdaf170fb49f13160e0bfc905a8100945dc02393b316cea4edd2344382007"
+  },
+  "title": "Panel variants",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Panel variants",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20\"><div class=\"\n                    panel panel-default panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \"><div class=\"text-size-18 text-medium text-uppercase text-color-default margin-bottom-5\">Lorem ipsum</div><span class=\"position-absolute left--1 top-25 height-25 width-3 bg-default\"></span><div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div></div><div class=\"\n                    panel panel-primary panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \"><div class=\"text-size-18 text-medium text-uppercase text-color-primary margin-bottom-5\">Lorem ipsum</div><span class=\"position-absolute left--1 top-25 height-25 width-3 bg-primary\"></span><div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div></div><div class=\"\n                    panel panel-secondary panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \"><div class=\"text-size-18 text-medium text-uppercase text-color-secondary margin-bottom-5\">Lorem ipsum</div><span class=\"position-absolute left--1 top-25 height-25 width-3 bg-secondary\"></span><div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div></div><div class=\"\n                    panel panel-info panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \"><div class=\"text-size-18 text-medium text-uppercase text-color-info margin-bottom-5\">Lorem ipsum</div><span class=\"position-absolute left--1 top-25 height-25 width-3 bg-info\"></span><div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div></div><div class=\"\n                    panel panel-success panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \"><div class=\"text-size-18 text-medium text-uppercase text-color-success margin-bottom-5\">Lorem ipsum</div><span class=\"position-absolute left--1 top-25 height-25 width-3 bg-success\"></span><div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div></div><div class=\"\n                    panel panel-warning panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \"><div class=\"text-size-18 text-medium text-uppercase text-color-warning margin-bottom-5\">Lorem ipsum</div><span class=\"position-absolute left--1 top-25 height-25 width-3 bg-warning\"></span><div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div></div><div class=\"\n                    panel panel-danger panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \"><div class=\"text-size-18 text-medium text-uppercase text-color-danger margin-bottom-5\">Lorem ipsum</div><span class=\"position-absolute left--1 top-25 height-25 width-3 bg-danger\"></span><div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { colors, getColorNames } from '../../../utils/colors';\n\nconst eachColor = ['default', ...getColorNames(colors.brand, colors.status)];\n\nexport default () => {\n    return (\n        <div className='margin-25-md display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20'>\n            {eachColor.map(color => (\n                <div\n                    className={`\n                    panel panel-${color} panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                `}\n                    key={color}\n                >\n                    <div className={`text-size-18 text-medium text-uppercase text-color-${color} margin-bottom-5`}>\n                        Lorem ipsum\n                    </div>\n                    <span className={`position-absolute left--1 top-25 height-25 width-3 bg-${color}`} />\n                    <div className='text-color-darker'>\n                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus\n                    </div>\n                </div>\n            ))}\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20\">\n    <div class=\"\n                    panel panel-default panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \">\n        <div class=\"text-size-18 text-medium text-uppercase text-color-default margin-bottom-5\">Lorem ipsum</div>\n        <span class=\"position-absolute left--1 top-25 height-25 width-3 bg-default\">\n        </span>\n        <div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>\n    </div>\n    <div class=\"\n                    panel panel-primary panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \">\n        <div class=\"text-size-18 text-medium text-uppercase text-color-primary margin-bottom-5\">Lorem ipsum</div>\n        <span class=\"position-absolute left--1 top-25 height-25 width-3 bg-primary\">\n        </span>\n        <div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>\n    </div>\n    <div class=\"\n                    panel panel-secondary panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \">\n        <div class=\"text-size-18 text-medium text-uppercase text-color-secondary margin-bottom-5\">Lorem ipsum</div>\n        <span class=\"position-absolute left--1 top-25 height-25 width-3 bg-secondary\">\n        </span>\n        <div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>\n    </div>\n    <div class=\"\n                    panel panel-info panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \">\n        <div class=\"text-size-18 text-medium text-uppercase text-color-info margin-bottom-5\">Lorem ipsum</div>\n        <span class=\"position-absolute left--1 top-25 height-25 width-3 bg-info\">\n        </span>\n        <div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>\n    </div>\n    <div class=\"\n                    panel panel-success panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \">\n        <div class=\"text-size-18 text-medium text-uppercase text-color-success margin-bottom-5\">Lorem ipsum</div>\n        <span class=\"position-absolute left--1 top-25 height-25 width-3 bg-success\">\n        </span>\n        <div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>\n    </div>\n    <div class=\"\n                    panel panel-warning panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \">\n        <div class=\"text-size-18 text-medium text-uppercase text-color-warning margin-bottom-5\">Lorem ipsum</div>\n        <span class=\"position-absolute left--1 top-25 height-25 width-3 bg-warning\">\n        </span>\n        <div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>\n    </div>\n    <div class=\"\n                    panel panel-danger panel-body panel-blank shadow-default padding-25 margin-bottom-0\n                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out\n                    user-select-none\n                \">\n        <div class=\"text-size-18 text-medium text-uppercase text-color-danger margin-bottom-5\">Lorem ipsum</div>\n        <span class=\"position-absolute left--1 top-25 height-25 width-3 bg-danger\">\n        </span>\n        <div class=\"text-color-darker\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/progress-cards.json

@@ -0,0 +1,71 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:33.535Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/progress-cards",
+    "category": "Templates",
+    "section": "Progress",
+    "slug": "templates/progress-cards",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "ae1c550a91558e506b090c37fa7de98883005506fca980cf6081fb6601cb739e"
+  },
+  "title": "Progress cards",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Progress cards",
+      "body": "",
+      "examples": [
+        {
+          "caption": "12% more than last week",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"margin-auto max-width-600\"><div class=\"display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default\"><div class=\"text-bold text-size-16 text-color-darker\">Weekly report</div><div class=\"StatsWidget border-none\"><div class=\"display-flex justify-content-between gap-5\"><div class=\"display-flex align-items-center\"><div class=\"margin-right-3 text-color-darker text-medium\">Orders processed</div></div><span class=\"display-flex align-items-center gap-3 text-color-success\"><span class=\"rioglyph rioglyph-arrow-up\"></span>80%</span></div><div class=\"progress margin-y-5\"><div class=\"progress-bar bg-info\" style=\"width: 80%;\"></div></div><div class=\"text-color-dark text-size-12\">12% more than last week</div></div><div class=\"StatsWidget border-none\"><div class=\"display-flex justify-content-between gap-5\"><div class=\"display-flex align-items-center\"><div class=\"margin-right-3 text-color-darker text-medium\">Open rate</div></div><span class=\"display-flex align-items-center gap-3 text-color-success\"><span class=\"rioglyph rioglyph-arrow-up\"></span>3.1%</span></div><div class=\"progress margin-y-5\"><div class=\"progress-bar bg-info\" style=\"width: 74%;\"></div></div><div class=\"text-color-dark text-size-12\">3.1% more than last week</div></div><div class=\"StatsWidget border-none\"><div class=\"display-flex justify-content-between gap-5\"><div class=\"display-flex align-items-center\"><div class=\"margin-right-3 text-color-darker text-medium\">Error rate</div></div><span class=\"display-flex align-items-center gap-3 text-color-danger\"><span class=\"rioglyph rioglyph-arrow-up\"></span>2.01%</span></div><div class=\"progress margin-y-5\"><div class=\"progress-bar bg-info\" style=\"width: 37%;\"></div></div><div class=\"text-color-dark text-size-12\">2.01% more than last week</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber } from 'react-intl';\n\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\n\nexport default () => {\n    return (\n        <div className='margin-25-md'>\n            <div className='margin-auto max-width-600'>\n                <div className='display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default'>\n                    <div className='text-bold text-size-16 text-color-darker'>Weekly report</div>\n                    <StatsWidget className='border-none'>\n                        <div className='display-flex justify-content-between gap-5'>\n                            <div className='display-flex align-items-center'>\n                                <div className='margin-right-3 text-color-darker text-medium'>Orders processed</div>\n                            </div>\n                            <span className='display-flex align-items-center gap-3 text-color-success'>\n                                <span className='rioglyph rioglyph-arrow-up' />\n                                <FormattedNumber value={80} style='unit' unit='percent' />\n                            </span>\n                        </div>\n                        <div className='progress margin-y-5'>\n                            <div className='progress-bar bg-info' style={{ width: `${80}%` }} />\n                        </div>\n                        <div className='text-color-dark text-size-12'>12% more than last week</div>\n                    </StatsWidget>\n                    <StatsWidget className='border-none'>\n                        <div className='display-flex justify-content-between gap-5'>\n                            <div className='display-flex align-items-center'>\n                                <div className='margin-right-3 text-color-darker text-medium'>Open rate</div>\n                            </div>\n                            <span className='display-flex align-items-center gap-3 text-color-success'>\n                                <span className='rioglyph rioglyph-arrow-up' />\n                                <FormattedNumber value={3.1} style='unit' unit='percent' />\n                            </span>\n                        </div>\n                        <div className='progress margin-y-5'>\n                            <div className='progress-bar bg-info' style={{ width: `${74}%` }} />\n                        </div>\n                        <div className='text-color-dark text-size-12'>3.1% more than last week</div>\n                    </StatsWidget>\n                    <StatsWidget className='border-none'>\n                        <div className='display-flex justify-content-between gap-5'>\n                            <div className='display-flex align-items-center'>\n                                <div className='margin-right-3 text-color-darker text-medium'>Error rate</div>\n                            </div>\n                            <span className='display-flex align-items-center gap-3 text-color-danger'>\n                                <span className='rioglyph rioglyph-arrow-up' />\n                                <FormattedNumber value={2.01} style='unit' unit='percent' />\n                            </span>\n                        </div>\n                        <div className='progress margin-y-5'>\n                            <div className='progress-bar bg-info' style={{ width: `${37}%` }} />\n                        </div>\n                        <div className='text-color-dark text-size-12'>2.01% more than last week</div>\n                    </StatsWidget>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"margin-auto max-width-600\">\n        <div class=\"display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default\">\n            <div class=\"text-bold text-size-16 text-color-darker\">Weekly report</div>\n            <div class=\"StatsWidget border-none\">\n                <div class=\"display-flex justify-content-between gap-5\">\n                    <div class=\"display-flex align-items-center\">\n                        <div class=\"margin-right-3 text-color-darker text-medium\">Orders processed</div>\n                    </div>\n                    <span class=\"display-flex align-items-center gap-3 text-color-success\">\n                        <span class=\"rioglyph rioglyph-arrow-up\">\n                        </span>80%</span>\n                </div>\n                <div class=\"progress margin-y-5\">\n                    <div class=\"progress-bar bg-info\" style=\"width: 80%;\">\n                    </div>\n                </div>\n                <div class=\"text-color-dark text-size-12\">12% more than last week</div>\n            </div>\n            <div class=\"StatsWidget border-none\">\n                <div class=\"display-flex justify-content-between gap-5\">\n                    <div class=\"display-flex align-items-center\">\n                        <div class=\"margin-right-3 text-color-darker text-medium\">Open rate</div>\n                    </div>\n                    <span class=\"display-flex align-items-center gap-3 text-color-success\">\n                        <span class=\"rioglyph rioglyph-arrow-up\">\n                        </span>3.1%</span>\n                </div>\n                <div class=\"progress margin-y-5\">\n                    <div class=\"progress-bar bg-info\" style=\"width: 74%;\">\n                    </div>\n                </div>\n                <div class=\"text-color-dark text-size-12\">3.1% more than last week</div>\n            </div>\n            <div class=\"StatsWidget border-none\">\n                <div class=\"display-flex justify-content-between gap-5\">\n                    <div class=\"display-flex align-items-center\">\n                        <div class=\"margin-right-3 text-color-darker text-medium\">Error rate</div>\n                    </div>\n                    <span class=\"display-flex align-items-center gap-3 text-color-danger\">\n                        <span class=\"rioglyph rioglyph-arrow-up\">\n                        </span>2.01%</span>\n                </div>\n                <div class=\"progress margin-y-5\">\n                    <div class=\"progress-bar bg-info\" style=\"width: 37%;\">\n                    </div>\n                </div>\n                <div class=\"text-color-dark text-size-12\">2.01% more than last week</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"margin-auto max-width-500\"><div class=\"panel panel-default shadow-default\"><div class=\"panel-heading display-flex gap-20 justify-content-between align-items-center\"><div class=\"text-size-16 text-medium text-color-darkest\">Shipment volume by region</div><div><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-share-alt\"></span></button></div></div><div class=\"panel-body padding-0\"><table class=\"table table-head-filled table-bottom-rounded\"><colgroup><col class=\"width-150 width-100-xs\"><col class=\"width-80 width-60-xs\"><col></colgroup><thead><tr><th>Region</th><th colspan=\"2\">Shipments</th></tr></thead><tbody><tr><td>Germany</td><td>3,550</td><td><div class=\"progress progress-xs\"><div class=\"progress-bar bg-primary\" style=\"width: 71%;\"></div></div></td></tr><tr><td>France</td><td>1,798</td><td><div class=\"progress progress-xs\"><div class=\"progress-bar bg-primary\" style=\"width: 35.96%;\"></div></div></td></tr><tr><td>Italy</td><td>1,245</td><td><div class=\"progress progress-xs\"><div class=\"progress-bar bg-primary\" style=\"width: 24.9%;\"></div></div></td></tr><tr><td>Poland</td><td>986</td><td><div class=\"progress progress-xs\"><div class=\"progress-bar bg-primary\" style=\"width: 19.72%;\"></div></div></td></tr><tr><td>Netherlands</td><td>854</td><td><div class=\"progress progress-xs\"><div class=\"progress-bar bg-primary\" style=\"width: 17.08%;\"></div></div></td></tr><tr><td>Austria</td><td>650</td><td><div class=\"progress progress-xs\"><div class=\"progress-bar bg-primary\" style=\"width: 13%;\"></div></div></td></tr><tr><td>Switzerland</td><td>420</td><td><div class=\"progress progress-xs\"><div class=\"progress-bar bg-primary\" style=\"width: 8.4%;\"></div></div></td></tr></tbody></table></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber } from 'react-intl';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\n\nexport default () => {\n    return (\n        <div className='margin-25-md'>\n            <div className='margin-auto max-width-500'>\n                <div className='panel panel-default shadow-default'>\n                    <div className='panel-heading display-flex gap-20 justify-content-between align-items-center'>\n                        <div className='text-size-16 text-medium text-color-darkest'>Shipment volume by region</div>\n                        <div>\n                            <SimpleTooltip content='Share data' placement='bottom'>\n                                <Button bsStyle='muted' iconName='rioglyph-share-alt' iconOnly />\n                            </SimpleTooltip>\n                        </div>\n                    </div>\n                    <div className='panel-body padding-0'>\n                        <table className='table table-head-filled table-bottom-rounded'>\n                            <colgroup>\n                                <col className='width-150 width-100-xs' />\n                                <col className='width-80 width-60-xs' />\n                                <col />\n                            </colgroup>\n                            <thead>\n                                <tr>\n                                    <th>Region</th>\n                                    <th colSpan={2}>Shipments</th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr>\n                                    <td>Germany</td>\n                                    <td>\n                                        <FormattedNumber value={3_550} />\n                                    </td>\n                                    <td>\n                                        <div className='progress progress-xs'>\n                                            <div className='progress-bar bg-primary' style={{ width: '71%' }} />\n                                        </div>\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>France</td>\n                                    <td>\n                                        <FormattedNumber value={1_798} />\n                                    </td>\n                                    <td>\n                                        <div className='progress progress-xs'>\n                                            <div className='progress-bar bg-primary' style={{ width: '35.96%' }} />\n                                        </div>\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>Italy</td>\n                                    <td>\n                                        <FormattedNumber value={1_245} />\n                                    </td>\n                                    <td>\n                                        <div className='progress progress-xs'>\n                                            <div className='progress-bar bg-primary' style={{ width: '24.9%' }} />\n                                        </div>\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>Poland</td>\n                                    <td>\n                                        <FormattedNumber value={986} />\n                                    </td>\n                                    <td>\n                                        <div className='progress progress-xs'>\n                                            <div className='progress-bar bg-primary' style={{ width: '19.72%' }} />\n                                        </div>\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>Netherlands</td>\n                                    <td>\n                                        <FormattedNumber value={854} />\n                                    </td>\n                                    <td>\n                                        <div className='progress progress-xs'>\n                                            <div className='progress-bar bg-primary' style={{ width: '17.08%' }} />\n                                        </div>\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>Austria</td>\n                                    <td>\n                                        <FormattedNumber value={650} />\n                                    </td>\n                                    <td>\n                                        <div className='progress progress-xs'>\n                                            <div className='progress-bar bg-primary' style={{ width: '13%' }} />\n                                        </div>\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>Switzerland</td>\n                                    <td>\n                                        <FormattedNumber value={420} />\n                                    </td>\n                                    <td>\n                                        <div className='progress progress-xs'>\n                                            <div className='progress-bar bg-primary' style={{ width: '8.4%' }} />\n                                        </div>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"margin-auto max-width-500\">\n        <div class=\"panel panel-default shadow-default\">\n            <div class=\"panel-heading display-flex gap-20 justify-content-between align-items-center\">\n                <div class=\"text-size-16 text-medium text-color-darkest\">Shipment volume by region</div>\n                <div>\n                    <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-share-alt\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"panel-body padding-0\">\n                <table class=\"table table-head-filled table-bottom-rounded\">\n                    <colgroup>\n                        <col class=\"width-150 width-100-xs\">\n                        <col class=\"width-80 width-60-xs\">\n                        <col>\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            <th>Region</th>\n                            <th colspan=\"2\">Shipments</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        <tr>\n                            <td>Germany</td>\n                            <td>3,550</td>\n                            <td>\n                                <div class=\"progress progress-xs\">\n                                    <div class=\"progress-bar bg-primary\" style=\"width: 71%;\">\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>France</td>\n                            <td>1,798</td>\n                            <td>\n                                <div class=\"progress progress-xs\">\n                                    <div class=\"progress-bar bg-primary\" style=\"width: 35.96%;\">\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Italy</td>\n                            <td>1,245</td>\n                            <td>\n                                <div class=\"progress progress-xs\">\n                                    <div class=\"progress-bar bg-primary\" style=\"width: 24.9%;\">\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Poland</td>\n                            <td>986</td>\n                            <td>\n                                <div class=\"progress progress-xs\">\n                                    <div class=\"progress-bar bg-primary\" style=\"width: 19.72%;\">\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Netherlands</td>\n                            <td>854</td>\n                            <td>\n                                <div class=\"progress progress-xs\">\n                                    <div class=\"progress-bar bg-primary\" style=\"width: 17.08%;\">\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Austria</td>\n                            <td>650</td>\n                            <td>\n                                <div class=\"progress progress-xs\">\n                                    <div class=\"progress-bar bg-primary\" style=\"width: 13%;\">\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Switzerland</td>\n                            <td>420</td>\n                            <td>\n                                <div class=\"progress progress-xs\">\n                                    <div class=\"progress-bar bg-primary\" style=\"width: 8.4%;\">\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Progress",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"margin-auto max-width-500\"><div class=\"padding-20 bg-white rounded shadow-muted\"><div class=\"display-flex justify-content-between align-items-start margin-bottom-10\"><h3 class=\"text-color-darkest margin-0\">Progress</h3><button type=\"button\" class=\"btn btn-default btn-link btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-time-alt\"></span>Send reminder</button></div><div class=\"display-flex align-items-end gap-5 margin-bottom-15\"><div class=\"text-size-h1 text-bold text-color-darkest\">56</div><div class=\"text-color-dark line-height-h1\">Participants</div></div><div class=\"progress margin-bottom-20\"><div class=\"progress-bar progress-divider bg-info\" style=\"width: 21%;\"></div><div class=\"progress-bar progress-divider bg-spectrum-indigo\" style=\"width: 30%;\"></div><div class=\"progress-bar progress-divider bg-warning\" style=\"width: 39%;\"></div><div class=\"progress-bar progress-divider bg-gray\" style=\"width: 10%;\"></div></div><div class=\"display-flex justify-content-between row-gap-10 flex-wrap text-color-darker\"><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Signed</div><div class=\"display-flex align-items-center gap-5\"><span class=\"bg-info rounded-circle height-10 aspect-ratio-1\"></span><span class=\"text-bold\">12</span></div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Waiting signature</div><div class=\"display-flex align-items-center gap-5\"><span class=\"bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1\"></span><span class=\"text-bold\">17</span></div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Manager review</div><div class=\"display-flex align-items-center gap-5\"><span class=\"bg-warning rounded-circle height-10 aspect-ratio-1\"></span><span class=\"text-bold\">22</span></div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Self review</div><div class=\"display-flex align-items-center gap-5\"><span class=\"bg-gray rounded-circle height-10 aspect-ratio-1\"></span><span class=\"text-bold\">5</span></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';\n\nexport default () => {\n    return (\n        <div className='margin-25-md'>\n            <div className='margin-auto max-width-500'>\n                <div className='padding-20 bg-white rounded shadow-muted'>\n                    <div className='display-flex justify-content-between align-items-start margin-bottom-10'>\n                        <h3 className='text-color-darkest margin-0'>Progress</h3>\n                        <Button variant='link' iconName='rioglyph-time-alt'>\n                            Send reminder\n                        </Button>\n                    </div>\n\n                    <div className='display-flex align-items-end gap-5 margin-bottom-15'>\n                        <div className='text-size-h1 text-bold text-color-darkest'>56</div>\n                        <div className='text-color-dark line-height-h1'>Participants</div>\n                    </div>\n\n                    <div className='progress margin-bottom-20'>\n                        <div className='progress-bar progress-divider bg-info' style={{ width: '21%' }} />\n                        <div className='progress-bar progress-divider bg-spectrum-indigo' style={{ width: '30%' }} />\n                        <div className='progress-bar progress-divider bg-warning' style={{ width: '39%' }} />\n                        <div className='progress-bar progress-divider bg-gray' style={{ width: '10%' }} />\n                    </div>\n\n                    <div className='display-flex justify-content-between row-gap-10 flex-wrap text-color-darker'>\n                        <LabeledElement label='Signed' noGap>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='bg-info rounded-circle height-10 aspect-ratio-1' />\n                                <span className='text-bold'>12</span>\n                            </div>\n                        </LabeledElement>\n                        <LabeledElement label='Waiting signature' noGap>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1' />\n                                <span className='text-bold'>17</span>\n                            </div>\n                        </LabeledElement>\n                        <LabeledElement label='Manager review' noGap>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='bg-warning rounded-circle height-10 aspect-ratio-1' />\n                                <span className='text-bold'>22</span>\n                            </div>\n                        </LabeledElement>\n                        <LabeledElement label='Self review' noGap>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='bg-gray rounded-circle height-10 aspect-ratio-1' />\n                                <span className='text-bold'>5</span>\n                            </div>\n                        </LabeledElement>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"margin-auto max-width-500\">\n        <div class=\"padding-20 bg-white rounded shadow-muted\">\n            <div class=\"display-flex justify-content-between align-items-start margin-bottom-10\">\n                <h3 class=\"text-color-darkest margin-0\">Progress</h3>\n                <button type=\"button\" class=\"btn btn-default btn-link btn-component\" tabindex=\"0\">\n                    <span class=\"rioglyph rioglyph-time-alt\">\n                    </span>Send reminder</button>\n            </div>\n            <div class=\"display-flex align-items-end gap-5 margin-bottom-15\">\n                <div class=\"text-size-h1 text-bold text-color-darkest\">56</div>\n                <div class=\"text-color-dark line-height-h1\">Participants</div>\n            </div>\n            <div class=\"progress margin-bottom-20\">\n                <div class=\"progress-bar progress-divider bg-info\" style=\"width: 21%;\">\n                </div>\n                <div class=\"progress-bar progress-divider bg-spectrum-indigo\" style=\"width: 30%;\">\n                </div>\n                <div class=\"progress-bar progress-divider bg-warning\" style=\"width: 39%;\">\n                </div>\n                <div class=\"progress-bar progress-divider bg-gray\" style=\"width: 10%;\">\n                </div>\n            </div>\n            <div class=\"display-flex justify-content-between row-gap-10 flex-wrap text-color-darker\">\n                <div class=\"LabeledElement display-flex flex-column\">\n                    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Signed</div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"bg-info rounded-circle height-10 aspect-ratio-1\">\n                        </span>\n                        <span class=\"text-bold\">12</span>\n                    </div>\n                </div>\n                <div class=\"LabeledElement display-flex flex-column\">\n                    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Waiting signature</div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1\">\n                        </span>\n                        <span class=\"text-bold\">17</span>\n                    </div>\n                </div>\n                <div class=\"LabeledElement display-flex flex-column\">\n                    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Manager review</div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"bg-warning rounded-circle height-10 aspect-ratio-1\">\n                        </span>\n                        <span class=\"text-bold\">22</span>\n                    </div>\n                </div>\n                <div class=\"LabeledElement display-flex flex-column\">\n                    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Self review</div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"bg-gray rounded-circle height-10 aspect-ratio-1\">\n                        </span>\n                        <span class=\"text-bold\">5</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/progress-success.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:32.747Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/progress-success",
+    "category": "Templates",
+    "section": "Progress",
+    "slug": "templates/progress-success",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "9accf4b9aaf8705ff8429659f923dcdb07b1fd3a9c91ed3488473ec052f24dcc"
+  },
+  "title": "Progress success",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Progress success",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Diam nonummy",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-500 margin-auto\"><div class=\"display-grid place-items-center margin-y-25 margin-x-25-sm\"><div class=\"width-100pct max-width-500\"><div class=\"panel panel-default position-relative\"><div class=\"position-absolute top-0pct left-50pct translate-x-50pct-y-50pct border rounded-circle width-60 height-60 display-grid place-items-center bg-white\"><span class=\"rioglyph rioglyph-ok text-color-success text-size-16 scale-150\"></span></div><div class=\"panel-body padding-10 padding-25-ls\"><div class=\"border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center\"><span class=\"text-color-success text-size-20\">Lorem ipsum dolor sit amet</span></div><div class=\"padding-10 padding-20-ls\"><div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Diam nonummy</div><span>Consetetur sadipscing</span></div><div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Voluptua</div><span>Eirmod tempor</span></div><div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Eum iriure</div><span>500</span></div><div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Sanctus</div><span class=\"text-medium\">No sea takimata</span></div><div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Vulputate</div><div><div>Tempor invidunt</div><div class=\"margin-top-5 text-color-gray\">Duis autem vel eum</div></div></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => {\n    return (\n        <div className='max-width-500 margin-auto'>\n            <div className='display-grid place-items-center margin-y-25 margin-x-25-sm'>\n                <div className='width-100pct max-width-500'>\n                    <div className='panel panel-default position-relative'>\n                        <div\n                            className={\n                                'position-absolute top-0pct left-50pct translate-x-50pct-y-50pct ' +\n                                'border rounded-circle width-60 height-60 display-grid place-items-center bg-white'\n                            }\n                        >\n                            <span className='rioglyph rioglyph-ok text-color-success text-size-16 scale-150' />\n                        </div>\n                        <div className='panel-body padding-10 padding-25-ls'>\n                            <div className='border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center'>\n                                <span className='text-color-success text-size-20'>Lorem ipsum dolor sit amet</span>\n                            </div>\n                            <div className='padding-10 padding-20-ls'>\n                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>\n                                    <FormLabel className='text-right margin-0 line-height-20'>Diam nonummy</FormLabel>\n                                    <span>Consetetur sadipscing</span>\n                                </div>\n                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>\n                                    <FormLabel className='text-right margin-0 line-height-20'>Voluptua</FormLabel>\n                                    <span>Eirmod tempor</span>\n                                </div>\n                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>\n                                    <FormLabel className='text-right margin-0 line-height-20'>Eum iriure</FormLabel>\n                                    <span>500</span>\n                                </div>\n                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>\n                                    <FormLabel className='text-right margin-0 line-height-20'>Sanctus</FormLabel>\n                                    <span className='text-medium'>No sea takimata</span>\n                                </div>\n                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>\n                                    <FormLabel className='text-right margin-0 line-height-20'>Vulputate</FormLabel>\n                                    <div>\n                                        <div>Tempor invidunt</div>\n                                        <div className='margin-top-5 text-color-gray'>Duis autem vel eum</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-500 margin-auto\">\n    <div class=\"display-grid place-items-center margin-y-25 margin-x-25-sm\">\n        <div class=\"width-100pct max-width-500\">\n            <div class=\"panel panel-default position-relative\">\n                <div class=\"position-absolute top-0pct left-50pct translate-x-50pct-y-50pct border rounded-circle width-60 height-60 display-grid place-items-center bg-white\">\n                    <span class=\"rioglyph rioglyph-ok text-color-success text-size-16 scale-150\">\n                    </span>\n                </div>\n                <div class=\"panel-body padding-10 padding-25-ls\">\n                    <div class=\"border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center\">\n                        <span class=\"text-color-success text-size-20\">Lorem ipsum dolor sit amet</span>\n                    </div>\n                    <div class=\"padding-10 padding-20-ls\">\n                        <div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\">\n                            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Diam nonummy</div>\n                            <span>Consetetur sadipscing</span>\n                        </div>\n                        <div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\">\n                            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Voluptua</div>\n                            <span>Eirmod tempor</span>\n                        </div>\n                        <div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\">\n                            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Eum iriure</div>\n                            <span>500</span>\n                        </div>\n                        <div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\">\n                            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Sanctus</div>\n                            <span class=\"text-medium\">No sea takimata</span>\n                        </div>\n                        <div class=\"display-grid grid-cols-2 gap-20 padding-10 padding-15-ls\">\n                            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20\">Vulputate</div>\n                            <div>\n                                <div>Tempor invidunt</div>\n                                <div class=\"margin-top-5 text-color-gray\">Duis autem vel eum</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/settings-form.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:30.281Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/settings-form",
+    "category": "Templates",
+    "section": "Forms",
+    "slug": "templates/settings-form",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "afd2255bc75d26afb05e07692d0506a442d8969c238d24c4f553076d1a4222f1"
+  },
+  "title": "Form blocks",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Form blocks",
+      "body": "",
+      "examples": [
+        {
+          "caption": "This name will appear on your team profile page",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><section class=\"padding-25-ls max-width-800 margin-auto\"><fieldset><legend class=\"text-size-h2\">Settings</legend><form class=\"display-grid-md grid-cols-2-md row-gap-25 margin-top-25\"><section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\"><div><div class=\"text-size-16 text-medium\">Company display name</div><p class=\"text-wrap-balance text-color-dark\">This name will appear on your team profile page</p></div><div class=\"form-group\"><div class=\"ClearableInput input-group\"><input class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Keebler and Sons\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></section><div class=\"grid-colspan-2\"><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div></div><section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\"><div><div class=\"text-size-16 text-medium\">About the team</div><p class=\"text-wrap-balance text-color-dark\">Write a short summary about your organization or group (max 240 characters).</p></div><div class=\"form-group\"><textarea class=\"form-control\" rows=\"4\">Networked impactful process improvement</textarea></div></section><div class=\"grid-colspan-2\"><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div></div><section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\"><div><div class=\"text-size-16 text-medium\">Company email</div><p class=\"text-wrap-balance text-color-dark\">Your contact email address for customer communication</p></div><div class=\"form-group\"><div class=\"ClearableInput input-group\"><input class=\"form-control withClearButton\" type=\"email\" tabindex=\"0\" value=\"Peggie78@gmail.com\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><label class=\"checkbox margin-top-15\" tabindex=\"0\"><input type=\"checkbox\" class=\"margin-top-15\" checked=\"\"><span class=\"checkbox-text\"><span>Display email on team page</span></span></label></div></section><div class=\"grid-colspan-2\"><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div></div><section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\"><div><div class=\"text-size-16 text-medium\">Office location</div><p class=\"text-wrap-balance text-color-dark\">Primary business address used for official correspondence</p></div><div class=\"form-group display-flex flex-column gap-15\"><div class=\"ClearableInput input-group\"><input placeholder=\"Street address\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"496 The Beeches\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><div class=\"ClearableInput input-group\"><input placeholder=\"City\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Libbyhaven\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><div class=\"display-flex gap-15\"><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Ohio</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Ohio</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Alaska</span><input type=\"hidden\" value=\"2\"></a></li></ul></div><div class=\"ClearableInput input-group\"><input placeholder=\"Zip code\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"61421\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Romania</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Romania</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Marshall Islands</span><input type=\"hidden\" value=\"2\"></a></li></ul></div></div></section><div class=\"grid-colspan-2\"><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div></div><section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\"><div><div class=\"text-size-16 text-medium\">Preferred currency</div><p class=\"text-wrap-balance text-color-dark\">All pricing and payouts will be shown in this currency</p></div><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">EUR - Euro</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">USD - US Dollar</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">EUR - Euro</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">GBP - British Pound</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div></section><div class=\"grid-colspan-2\"><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div></div><section class=\"grid-colspan-2\"><div class=\"btn-toolbar justify-content-end\"><button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Discard</button><button type=\"submit\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Apply changes</button></div></section></form></fieldset></section></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport Select from '@rio-cloud/rio-uikit/Select';\n\nexport default () => {\n    return (\n        <div className='margin-25-md'>\n            <section className='padding-25-ls max-width-800 margin-auto'>\n                <fieldset>\n                    <legend className='text-size-h2'>Settings</legend>\n\n                    <form className='display-grid-md grid-cols-2-md row-gap-25 margin-top-25'>\n                        <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>\n                            <div>\n                                <div className='text-size-16 text-medium'>Company display name</div>\n                                <p className='text-wrap-balance text-color-dark'>\n                                    This name will appear on your team profile page\n                                </p>\n                            </div>\n                            <div className='form-group'>\n                                <ClearableInput value={faker.company.name()} />\n                            </div>\n                        </section>\n\n                        <div className='grid-colspan-2'>\n                            <Divider dividerColor='lighter' />\n                        </div>\n\n                        <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>\n                            <div>\n                                <div className='text-size-16 text-medium'>About the team</div>\n                                <p className='text-wrap-balance text-color-dark'>\n                                    Write a short summary about your organization or group (max 240 characters).\n                                </p>\n                            </div>\n                            <div className='form-group'>\n                                <textarea\n                                    className='form-control'\n                                    rows={4}\n                                    defaultValue={faker.company.catchPhrase()}\n                                />\n                            </div>\n                        </section>\n\n                        <div className='grid-colspan-2'>\n                            <Divider dividerColor='lighter' />\n                        </div>\n\n                        <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>\n                            <div>\n                                <div className='text-size-16 text-medium'>Company email</div>\n                                <p className='text-wrap-balance text-color-dark'>\n                                    Your contact email address for customer communication\n                                </p>\n                            </div>\n                            <div className='form-group'>\n                                <ClearableInput type='email' value={faker.internet.email()} />\n                                <Checkbox className='margin-top-15' defaultChecked>\n                                    Display email on team page\n                                </Checkbox>\n                            </div>\n                        </section>\n\n                        <div className='grid-colspan-2'>\n                            <Divider dividerColor='lighter' />\n                        </div>\n\n                        <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>\n                            <div>\n                                <div className='text-size-16 text-medium'>Office location</div>\n                                <p className='text-wrap-balance text-color-dark'>\n                                    Primary business address used for official correspondence\n                                </p>\n                            </div>\n                            <div className='form-group display-flex flex-column gap-15'>\n                                <ClearableInput value={faker.location.streetAddress()} placeholder='Street address' />\n                                <ClearableInput value={faker.location.city()} placeholder='City' />\n                                <div className='display-flex gap-15'>\n                                    <Select\n                                        options={[\n                                            { id: '1', label: faker.location.state(), selected: true },\n                                            { id: '2', label: faker.location.state() },\n                                        ]}\n                                    />\n                                    <ClearableInput value={faker.location.zipCode()} placeholder='Zip code' />\n                                </div>\n                                <Select\n                                    options={[\n                                        { id: '1', label: faker.location.country(), selected: true },\n                                        { id: '2', label: faker.location.country() },\n                                    ]}\n                                />\n                            </div>\n                        </section>\n\n                        <div className='grid-colspan-2'>\n                            <Divider dividerColor='lighter' />\n                        </div>\n\n                        <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>\n                            <div>\n                                <div className='text-size-16 text-medium'>Preferred currency</div>\n                                <p className='text-wrap-balance text-color-dark'>\n                                    All pricing and payouts will be shown in this currency\n                                </p>\n                            </div>\n                            <div className='form-group'>\n                                <Select\n                                    options={[\n                                        { id: '1', label: 'USD - US Dollar' },\n                                        { id: '2', label: 'EUR - Euro', selected: true },\n                                        { id: '3', label: 'GBP - British Pound' },\n                                    ]}\n                                />\n                            </div>\n                        </section>\n\n                        <div className='grid-colspan-2'>\n                            <Divider dividerColor='lighter' />\n                        </div>\n\n                        <section className='grid-colspan-2'>\n                            <ButtonToolbar alignment='right'>\n                                <Button bsStyle='muted-filled'>Discard</Button>\n                                <Button type='submit' bsStyle='primary'>\n                                    Apply changes\n                                </Button>\n                            </ButtonToolbar>\n                        </section>\n                    </form>\n                </fieldset>\n            </section>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <section class=\"padding-25-ls max-width-800 margin-auto\">\n        <fieldset>\n            <legend class=\"text-size-h2\">Settings</legend>\n            <form class=\"display-grid-md grid-cols-2-md row-gap-25 margin-top-25\">\n                <section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\">\n                    <div>\n                        <div class=\"text-size-16 text-medium\">Company display name</div>\n                        <p class=\"text-wrap-balance text-color-dark\">This name will appear on your team profile page</p>\n                    </div>\n                    <div class=\"form-group\">\n                        <div class=\"ClearableInput input-group\">\n                            <input class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Keebler and Sons\">\n                            <span class=\"clearButton\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                </section>\n                <div class=\"grid-colspan-2\">\n                    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                        <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                        </div>\n                    </div>\n                </div>\n                <section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\">\n                    <div>\n                        <div class=\"text-size-16 text-medium\">About the team</div>\n                        <p class=\"text-wrap-balance text-color-dark\">Write a short summary about your organization or group (max 240 characters).</p>\n                    </div>\n                    <div class=\"form-group\">\n                        <textarea class=\"form-control\" rows=\"4\">Networked impactful process improvement</textarea>\n                    </div>\n                </section>\n                <div class=\"grid-colspan-2\">\n                    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                        <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                        </div>\n                    </div>\n                </div>\n                <section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\">\n                    <div>\n                        <div class=\"text-size-16 text-medium\">Company email</div>\n                        <p class=\"text-wrap-balance text-color-dark\">Your contact email address for customer communication</p>\n                    </div>\n                    <div class=\"form-group\">\n                        <div class=\"ClearableInput input-group\">\n                            <input class=\"form-control withClearButton\" type=\"email\" tabindex=\"0\" value=\"Peggie78@gmail.com\">\n                            <span class=\"clearButton\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                        <label class=\"checkbox margin-top-15\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"margin-top-15\" checked=\"\">\n                            <span class=\"checkbox-text\">\n                                <span>Display email on team page</span>\n                            </span>\n                        </label>\n                    </div>\n                </section>\n                <div class=\"grid-colspan-2\">\n                    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                        <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                        </div>\n                    </div>\n                </div>\n                <section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\">\n                    <div>\n                        <div class=\"text-size-16 text-medium\">Office location</div>\n                        <p class=\"text-wrap-balance text-color-dark\">Primary business address used for official correspondence</p>\n                    </div>\n                    <div class=\"form-group display-flex flex-column gap-15\">\n                        <div class=\"ClearableInput input-group\">\n                            <input placeholder=\"Street address\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"496 The Beeches\">\n                            <span class=\"clearButton\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"ClearableInput input-group\">\n                            <input placeholder=\"City\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Libbyhaven\">\n                            <span class=\"clearButton\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"display-flex gap-15\">\n                            <div class=\"select dropdown dropup\">\n                                <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                    <span class=\"selected-option-text\">Ohio</span>\n                                    <span class=\"clearButton hide pointer-events-none\">\n                                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                        </span>\n                                    </span>\n                                    <span class=\"caret\">\n                                    </span>\n                                </button>\n                                <ul class=\"dropdown-menu\" role=\"menu\">\n                                    <li class=\"\" role=\"listitem\">\n                                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                            <span class=\"selected-option-dropdown-item\">Ohio</span>\n                                            <input type=\"hidden\" value=\"1\">\n                                        </a>\n                                    </li>\n                                    <li class=\"\" role=\"listitem\">\n                                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                            <span class=\"selected-option-dropdown-item\">Alaska</span>\n                                            <input type=\"hidden\" value=\"2\">\n                                        </a>\n                                    </li>\n                                </ul>\n                            </div>\n                            <div class=\"ClearableInput input-group\">\n                                <input placeholder=\"Zip code\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"61421\">\n                                <span class=\"clearButton\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"select dropdown dropup\">\n                            <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                <span class=\"selected-option-text\">Romania</span>\n                                <span class=\"clearButton hide pointer-events-none\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                                <span class=\"caret\">\n                                </span>\n                            </button>\n                            <ul class=\"dropdown-menu\" role=\"menu\">\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                        <span class=\"selected-option-dropdown-item\">Romania</span>\n                                        <input type=\"hidden\" value=\"1\">\n                                    </a>\n                                </li>\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                        <span class=\"selected-option-dropdown-item\">Marshall Islands</span>\n                                        <input type=\"hidden\" value=\"2\">\n                                    </a>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </section>\n                <div class=\"grid-colspan-2\">\n                    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                        <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                        </div>\n                    </div>\n                </div>\n                <section class=\"display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25\">\n                    <div>\n                        <div class=\"text-size-16 text-medium\">Preferred currency</div>\n                        <p class=\"text-wrap-balance text-color-dark\">All pricing and payouts will be shown in this currency</p>\n                    </div>\n                    <div class=\"form-group\">\n                        <div class=\"select dropdown dropup\">\n                            <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                <span class=\"selected-option-text\">EUR - Euro</span>\n                                <span class=\"clearButton hide pointer-events-none\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                                <span class=\"caret\">\n                                </span>\n                            </button>\n                            <ul class=\"dropdown-menu\" role=\"menu\">\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                        <span class=\"selected-option-dropdown-item\">USD - US Dollar</span>\n                                        <input type=\"hidden\" value=\"1\">\n                                    </a>\n                                </li>\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                        <span class=\"selected-option-dropdown-item\">EUR - Euro</span>\n                                        <input type=\"hidden\" value=\"2\">\n                                    </a>\n                                </li>\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                        <span class=\"selected-option-dropdown-item\">GBP - British Pound</span>\n                                        <input type=\"hidden\" value=\"3\">\n                                    </a>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </section>\n                <div class=\"grid-colspan-2\">\n                    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                        <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                        </div>\n                    </div>\n                </div>\n                <section class=\"grid-colspan-2\">\n                    <div class=\"btn-toolbar justify-content-end\">\n                        <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Discard</button>\n                        <button type=\"submit\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Apply changes</button>\n                    </div>\n                </section>\n            </form>\n        </fieldset>\n    </section>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}