@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,3080 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:27.254Z",
+    "source": "https://uikit.developers.rio.cloud/#components/assetTree",
+    "category": "Components",
+    "section": "Selection",
+    "slug": "components/assettree",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "af2194c8269da1807aaa3af994251fe13caff280ba842b35187ba63b3124a71b"
+  },
+  "title": "AssetTree",
+  "lead": "The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.",
+  "content": [
+    {
+      "heading": "AssetTree",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap gap-25\"><div><div class=\"AssetTree border fluid\" style=\"width: 350px; height: 500px;\"><div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\"></div><div class=\"AssetTreeContent\"><div class=\"TreeSidebar\"><ul class=\"TreeSidebarNavigation\"><li class=\"\"><div class=\"selection-bubble\"><span class=\"rioglyph rioglyph-filter\"></span></div></li><li class=\"active\"><div class=\"selection-bubble\"><span class=\"rioglyph rioglyph-truck\"></span></div></li><li class=\"\"><div class=\"selection-bubble\"><span class=\"rioglyph rioglyph-driver\"></span></div></li><li class=\"\"><div class=\"selection-bubble\"><span class=\"rioglyph rioglyph-layer-pois\"></span></div></li></ul><div class=\"TreeSidebarToggle\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div></div><div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"TreeOffscreenWrapper position-offscreen pointer-events-none\"><div class=\"margin-15\">Filter</div></div><div class=\"TreeOffscreenWrapper\"><div class=\"Tree\"><div class=\"TreeHeader\"><div class=\"TreeSearch\"><div class=\"input-group flex-1-0\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Find asset\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"TreeHead display-flex gap-5 padding-15\"><div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\"><div class=\"TreeSelectAll display-flex align-items-center\"><label class=\"checkbox margin-top--1\" tabindex=\"0\"><input type=\"checkbox\" class=\"margin-top--1\"><span class=\"checkbox-text\"></span></label></div></div><div class=\"display-flex justify-content-between align-items-start width-100pct\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-truck text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">5969</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-trailer text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">4</span></div></div></div><div><div class=\"dropdown btn-group TreeHeaderOptions height-20\"><button type=\"button\" id=\"rz75mb92ma\" class=\"btn btn-default btn-sm btn-icon-only btn-component dropdown-toggle hover-bg-white border-none text-color-gray hover-text-color-dark\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\" aria-hidden=\"true\"></span></button></div></div></div></div><div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\"><div class=\"tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"grouped-list\" style=\"height: 23370px; position: relative;\"><div data-index=\"0\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(0px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-152\"><div class=\"TreeNode from-group\" data-key=\"group-152\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Aaron Steuber - 3589</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">15</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"1\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(41px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-420\"><div class=\"TreeNode from-group\" data-key=\"group-420\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Abraham Bayer - 7258</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">9</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"2\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(82px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-247\"><div class=\"TreeNode from-group\" data-key=\"group-247\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Adrian Shanahan - 4409</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">9</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"3\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(123px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-194\"><div class=\"TreeNode from-group\" data-key=\"group-194\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Alberta Walter - 7836</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">4</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"4\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(164px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-154\"><div class=\"TreeNode from-group\" data-key=\"group-154\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Alberto Roberts - 2082</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">10</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"5\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(205px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-162\"><div class=\"TreeNode from-group\" data-key=\"group-162\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Alfonso Bode - 9068</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">11</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"6\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(246px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-260\"><div class=\"TreeNode from-group\" data-key=\"group-260\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Alfred Heathcote V - 1531</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">10</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"7\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(287px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-17\"><div class=\"TreeNode from-group\" data-key=\"group-17\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Allison Morissette - 8380</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">9</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"8\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(328px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-526\"><div class=\"TreeNode from-group\" data-key=\"group-526\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Alma Greenholt - 4046</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">12</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"9\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(369px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-295\"><div class=\"TreeNode from-group\" data-key=\"group-295\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Alma Hayes - 1122</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">11</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"10\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(410px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-303\"><div class=\"TreeNode from-group\" data-key=\"group-303\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Alyssa Brekke PhD - 7662</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">11</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"11\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(451px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-385\"><div class=\"TreeNode from-group\" data-key=\"group-385\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Amber Cormier - 8088</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">11</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"12\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(492px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-59\"><div class=\"TreeNode from-group\" data-key=\"group-59\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Amos Jast - 1569</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">6</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"13\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(533px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-144\"><div class=\"TreeNode from-group\" data-key=\"group-144\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Amos Olson - 9031</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">9</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div><div data-index=\"14\" class=\"virtualized-tree-item group-item \" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(574px);\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"group-248\"><div class=\"TreeNode from-group\" data-key=\"group-248\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Group - Amos Quitzon DVM - 4729</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">6</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div></div></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\" style=\"position: absolute; top: 25px; left: 0px; width: 298px; height: 105px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></div></div></div></div><div class=\"TreeOffscreenWrapper position-offscreen pointer-events-none\"><div class=\"Tree\"><div class=\"TreeHeader\"><div class=\"TreeSearch\"><div class=\"input-group flex-1-0\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"this is a custom search\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"TreeHead display-flex gap-5 padding-15\"><div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\"><div class=\"TreeSelectAll display-flex align-items-center\"><label class=\"checkbox margin-top--1\" tabindex=\"0\"><input type=\"checkbox\" class=\"margin-top--1\"><span class=\"checkbox-text\"></span></label></div></div><div class=\"display-flex justify-content-between align-items-start width-100pct\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TreeSummaryRow display-grid grid-cols-4 gap-10\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">200</span></div></div></div></div></div></div><div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\"><div class=\"tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"flat-list\" style=\"height: 8200px; position: relative;\"></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden open\" style=\"position: absolute; top: 0px; left: 0px; width: 1280px; height: 155px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></div></div></div></div></div><div class=\"TreeOffscreenWrapper position-offscreen pointer-events-none\"><div class=\"custom-pois-wrapper height-100pct\"><div class=\"Tree\"><div class=\"TreeHeader\"><ul class=\"rounded-none nav nav-pills nav-pills-filled nav-justified text-size-18\"><li class=\"active\"><span class=\"rioglyph rioglyph-pushpin\"></span></li><li><span class=\"rioglyph rioglyph-geofence\"></span></li><li><span class=\"rioglyph rioglyph-workshop\"></span></li><li><span class=\"rioglyph rioglyph-filling-e-station\"></span></li></ul><div class=\"TreeSearch\"><div class=\"input-group flex-1-0\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"this is a custom search\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"TreeHead display-flex gap-5 padding-15\"><div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\"><div class=\"TreeSelectAll display-flex align-items-center\"><label class=\"checkbox margin-top--1\" tabindex=\"0\"><input type=\"checkbox\" class=\"margin-top--1\"><span class=\"checkbox-text\"></span></label></div></div><div class=\"display-flex justify-content-between align-items-start width-100pct\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TreeSummaryRow display-grid grid-cols-4 gap-10\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">200</span></div></div></div></div></div></div><div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\"><div class=\"tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"flat-list\" style=\"height: 8200px; position: relative;\"></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden open\" style=\"position: absolute; top: 0px; left: 0px; width: 1280px; height: 155px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></div></div></div></div></div></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div><div class=\"Resizer resize-horizontal resize-right\"></div></div><div class=\"btn-toolbar margin-top-25\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Load trucks</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Clear tree</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle all groups selection</button></div></div><div><div class=\"h6\">Current category:</div><ul>trucks</ul><div class=\"h6\">Selected groups:</div><ul></ul><div class=\"h6\">Selected assets:</div><ul></ul><div class=\"h6\">Expanded groups:</div><ul><li>Trailer Group</li></ul><hr><div class=\"h6\">Selected drivers:</div><ul></ul><hr><div class=\"h6\">Search value:</div><ul></ul><hr><div class=\"h6\">Asset type filter:</div><ul>[]</ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport isObject from 'lodash/fp/isObject';\nimport random from 'lodash/fp/random';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport getOr from 'lodash/fp/getOr';\nimport faker from 'faker';\n\nimport AssetTree from '@rio-cloud/rio-uikit/AssetTree';\nimport TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';\nimport Tree, {\n    type TreeItemName,\n    type TreeGroup,\n    type TreeItem,\n    type SelectionChangeResponse,\n} from '@rio-cloud/rio-uikit/Tree';\nimport TreeSearch from '@rio-cloud/rio-uikit/TreeSearch';\nimport TreeSummary from '@rio-cloud/rio-uikit/TreeSummary';\nimport TreeOption from '@rio-cloud/rio-uikit/TreeOption';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nconst CATEGORY_FILTER = 'filter';\nconst CATEGORY_TRUCKS = 'trucks';\nconst CATEGORY_DRIVER = 'driver';\nconst CATEGORY_LOREM = 'lorem';\n\nconst randomDrivers = Array.from({ length: 200 }, (_, index) => ({\n    id: `74e8eb86-18a1-4abe-90cb-aeee7909f85${index}`,\n    name: {\n        firstName: faker.internet.userName(),\n        lastName: faker.name.firstName(),\n    },\n    type: 'driver',\n}));\n\nconst getTruckGroups = (): TreeGroup[] => {\n    const groups = Array.from({ length: random(400, 600) }, (_, index) => ({\n        id: `group-${index}`,\n        name: `Group - ${faker.name.findName()} - ${random(1000, 9999)}`,\n    }));\n    return [\n        ...groups,\n        {\n            id: 'truck-6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5',\n            name: 'Truck Group North',\n        },\n        {\n            id: 'truck-b40aabcf-01f8-4be2-bc3d-9157cbdb395f',\n            name: 'Truck Group East',\n        },\n        {\n            id: 'truck-722a5f86-eb6c-46cf-83da-3f8dbfbcca5e',\n            name: 'Truck Group South',\n        },\n        {\n            id: 'truck-0250a8aa-721e-40b4-b1ea-7908acddfdf4',\n            name: 'Truck Group West',\n            className: 'foobar',\n        },\n        {\n            id: 'unassigned',\n            name: 'Ungrouped',\n            position: 'last',\n        },\n    ];\n};\n\nconst trailerGroups: TreeGroup[] = [\n    {\n        id: '6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5',\n        name: 'Trailer Group',\n    },\n];\n\nconst trailer: TreeItem[] = [\n    {\n        id: '110191ac-d06d-4567-b13a-7b7fd85d9731',\n        name: 'Trailer 03',\n        type: 'trailer',\n        groupIds: ['unassigned'],\n    },\n    {\n        id: '110191ac-d06d-4567-b13a-7b7fd85d9740',\n        name: 'Trailer 04',\n        type: 'trailer',\n        groupIds: ['unassigned'],\n    },\n    {\n        id: '16807251-95d2-4d73-afd0-4fbd0eadebf4',\n        name: 'Trailer 01',\n        type: 'trailer',\n        groupIds: ['6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5'],\n    },\n    {\n        id: '16807251-95d2-4d73-afd0-4fbd0eadebf6',\n        name: 'Trailer 02',\n        type: 'trailer',\n        groupIds: ['6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5'],\n    },\n];\n\nconst getTrucks = (namePrefix = 'Vehicle-'): TreeItem[] => {\n    const groups = getTruckGroups();\n    const randomTrucks = Array.from({ length: random(5000, 6000) }, (_, index) => ({\n        id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,\n        name: `${namePrefix}${random(1000, 9999)}`,\n        info: `M-AN 1${String(index).padStart(3, '0')}`,\n        type: 'truck',\n        groupIds: [faker.random.arrayElement(groups).id],\n    }));\n    return [...randomTrucks, ...trailer];\n};\n\nconst truckGroupsWithEmptyGroup: TreeGroup[] = [\n    ...getTruckGroups(),\n    {\n        id: '0350a8aa-721e-40b4-b1ea-7908acddfdf4',\n        name: 'My Empty Group',\n        disabled: true,\n    },\n    {\n        id: 'truck-0250a8aa-721e-40b4-b1ea-7908acddfdf1',\n        name: 'Truck Group West 2',\n    },\n    {\n        id: 'truck-0250a8aa-721e-40b4-b1ea-7908acddfdf2',\n        name: 'Truck Group West 3',\n    },\n    ...trailerGroups,\n];\n\nconst defaultExpandedTruckGroups: string[] = ['6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5'];\n\nconst AssetTreeExample = () => {\n    const [trucks, setTrucks] = useState<TreeItem[]>(getTrucks());\n    const [truckGroups, setTruckGroups] = useState<TreeGroup[]>(truckGroupsWithEmptyGroup);\n    const [selectedTruckGroupIds, setSelectedTruckGroupIds] = useState<string[]>([]);\n    const [selectedTruckIds, setSelectedTruckIds] = useState<string[]>([]);\n    const [selectedDrivers, setSelectedDrivers] = useState<string[]>([]);\n    const [expandedTruckGroups, setExpandedTruckGroups] = useState(defaultExpandedTruckGroups);\n    const [currentCategoryId, setCurrentCategoryId] = useState(CATEGORY_TRUCKS);\n    const [isTreeOpen, setIsTreeOpen] = useState(true);\n    const [searchValue, setSearchValue] = useState('');\n    const [showEmptyGroups, setShowEmptyGroups] = useState(false);\n    const [showAssetGroups, setShowAssetGroups] = useState(true);\n    const [currentTypeFilter, setCurrentTypeFilter] = useState<string[]>([]);\n\n    const handleSelectTruck = ({ items, groups }: SelectionChangeResponse) => {\n        setSelectedTruckIds(items);\n        setSelectedTruckGroupIds(groups);\n    };\n\n    const handleExpandTruckGroups = (newExpandedTruckGroups: string[]) =>\n        setExpandedTruckGroups(newExpandedTruckGroups);\n\n    const handleSelectDriver = ({ items }: SelectionChangeResponse) => setSelectedDrivers(items);\n    const handleChangeCategories = (categoryId: string) => setCurrentCategoryId(categoryId);\n    const handleUpdateSearch = (value: string) => setSearchValue(value);\n    const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);\n    const handleToggleEmptyGroups = () => setShowEmptyGroups(!showEmptyGroups);\n    const handleToggleAssetGroups = () => setShowAssetGroups(!showAssetGroups);\n\n    const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {\n        return selectedItemIds.map(selectedItemId => {\n            const result = list.find(listItem => listItem.id === selectedItemId);\n            if (result) {\n                const name = isObject(result.name)\n                    ? `${(result.name as TreeItemName).firstName} ${(result.name as TreeItemName).lastName}`\n                    : result.name;\n                return <li key={selectedItemId}>{name}</li>;\n            }\n        });\n    };\n\n    // Custom filter function for driver as for this we showcase the usage of a custom search component\n    const filteredDrivers = randomDrivers.filter(driver =>\n        `${getOr('', 'name.firstName', driver)} ${getOr('', 'name.lastName', driver)}`.includes(searchValue)\n    );\n\n    return (\n        <div className='display-flex flex-wrap gap-25'>\n            <div>\n                <AssetTree\n                    bordered\n                    minWidth={300}\n                    maxWidth={450}\n                    currentCategoryId={currentCategoryId}\n                    onCategoryChange={handleChangeCategories}\n                    height={500}\n                    isOpen={isTreeOpen}\n                    onToggleTree={handleToggleTree}\n                    useOffscreen\n                >\n                    <TreeCategory key={CATEGORY_FILTER} id={CATEGORY_FILTER} label='Filter' icon='rioglyph-filter'>\n                        <div className='margin-15'>Filter</div>\n                    </TreeCategory>\n\n                    <TreeCategory\n                        key={CATEGORY_TRUCKS}\n                        id={CATEGORY_TRUCKS}\n                        label='Assets'\n                        icon='rioglyph-truck'\n                        hasSelection={!isEmpty(selectedTruckIds) || !isEmpty(selectedTruckGroupIds)}\n                    >\n                        <Tree\n                            groups={showAssetGroups ? truckGroups : []}\n                            items={trucks}\n                            expandedGroups={expandedTruckGroups}\n                            onExpandGroupsChange={handleExpandTruckGroups}\n                            selectedGroups={selectedTruckGroupIds}\n                            selectedItems={selectedTruckIds}\n                            onSelectionChange={handleSelectTruck}\n                            searchPlaceholder='Find asset'\n                            onSearchChange={handleUpdateSearch}\n                            showEmptyGroups={showEmptyGroups}\n                            onTypeFilterChange={setCurrentTypeFilter}\n                            treeOptionsTooltip='Vehicle tree options'\n                            treeOptions={[\n                                <TreeOption\n                                    key='emptyGroupsToggle'\n                                    label='Show empty groups'\n                                    isChecked={showEmptyGroups}\n                                    onChange={handleToggleEmptyGroups}\n                                />,\n                                <TreeOption\n                                    key='assetGroupsToggle'\n                                    label='Show groups'\n                                    isChecked={showAssetGroups}\n                                    onChange={handleToggleAssetGroups}\n                                />,\n                            ]}\n                        />\n                    </TreeCategory>\n\n                    <TreeCategory\n                        key={CATEGORY_DRIVER}\n                        id={CATEGORY_DRIVER}\n                        label='My Drivers'\n                        icon='rioglyph-driver'\n                        hasSelection={!isEmpty(selectedDrivers)}\n                    >\n                        <Tree\n                            items={filteredDrivers}\n                            selectedItems={selectedDrivers}\n                            onSelectionChange={handleSelectDriver}\n                            hasMultiselect={!isEmpty(filteredDrivers)}\n                            summary={<TreeSummary assetCounts={{ driver: filteredDrivers.length }} />}\n                            search={\n                                <TreeSearch\n                                    value={searchValue}\n                                    placeholder='this is a custom search'\n                                    onChange={handleUpdateSearch}\n                                />\n                            }\n                        />\n                    </TreeCategory>\n\n                    <TreeCategory key='lorem-ipsum' id={CATEGORY_LOREM} label='Lorem ipsum' icon='rioglyph-layer-pois'>\n                        <div className='custom-pois-wrapper height-100pct'>\n                            <Tree\n                                items={filteredDrivers}\n                                selectedItems={selectedDrivers}\n                                onSelectionChange={handleSelectDriver}\n                                hasMultiselect={!isEmpty(filteredDrivers)}\n                                treeHeaderContent={\n                                    <ul className='rounded-none nav nav-pills nav-pills-filled nav-justified text-size-18'>\n                                        <li className='active'>\n                                            <span className='rioglyph rioglyph-pushpin' />\n                                        </li>\n                                        <li>\n                                            <span className='rioglyph rioglyph-geofence' />\n                                        </li>\n                                        <li>\n                                            <span className='rioglyph rioglyph-workshop' />\n                                        </li>\n                                        <li>\n                                            <span className='rioglyph rioglyph-filling-e-station' />\n                                        </li>\n                                    </ul>\n                                }\n                                summary={<TreeSummary assetCounts={{ driver: filteredDrivers.length }} />}\n                                search={\n                                    <TreeSearch\n                                        value={searchValue}\n                                        placeholder='this is a custom search'\n                                        onChange={handleUpdateSearch}\n                                    />\n                                }\n                            />\n                        </div>\n                    </TreeCategory>\n                </AssetTree>\n                <div className='btn-toolbar margin-top-25'>\n                    <Button\n                        onClick={() => {\n                            setTrucks(getTrucks('RIO'));\n                            setTruckGroups(getTruckGroups());\n                        }}\n                    >\n                        Load trucks\n                    </Button>\n                    <Button\n                        onClick={() => {\n                            setTrucks([]);\n                            setTruckGroups([]);\n                        }}\n                    >\n                        Clear tree\n                    </Button>\n                    <Button\n                        onClick={() => {\n                            const isListEmpty = isEmpty(selectedTruckGroupIds);\n                            setSelectedTruckGroupIds(isListEmpty ? truckGroups.map(group => group.id) : []);\n                        }}\n                    >\n                        Toggle all groups selection\n                    </Button>\n                </div>\n            </div>\n            <div>\n                <div className='h6'>Current category:</div>\n                <ul>{currentCategoryId}</ul>\n                <div className='h6'>Selected groups:</div>\n                <ul>{renderSelectedItemsOfList(selectedTruckGroupIds, truckGroups)}</ul>\n                <div className='h6'>Selected assets:</div>\n                <ul>{renderSelectedItemsOfList(selectedTruckIds, trucks)}</ul>\n                <div className='h6'>Expanded groups:</div>\n                <ul>{renderSelectedItemsOfList(expandedTruckGroups, truckGroups)}</ul>\n                <hr />\n                <div className='h6'>Selected drivers:</div>\n                <ul>{renderSelectedItemsOfList(selectedDrivers, randomDrivers)}</ul>\n                <hr />\n                <div className='h6'>Search value:</div>\n                <ul>{searchValue}</ul>\n                <hr />\n                <div className='h6'>Asset type filter:</div>\n                <ul>{`[${currentTypeFilter.join(', ')}]`}</ul>\n            </div>\n        </div>\n    );\n};\n\nexport default AssetTreeExample;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "AssetTree",
+                  "rows": [
+                    {
+                      "name": "fly",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the component will overlap the body content."
+                    },
+                    {
+                      "name": "resizable",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether or not the sidebar is resizable."
+                    },
+                    {
+                      "name": "onResizeEnd",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the resize is done."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the component has a border or not."
+                    },
+                    {
+                      "name": "width",
+                      "type": "string / number",
+                      "default": "350",
+                      "description": "Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "number",
+                      "default": "100",
+                      "description": "Defines the minimum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "maxWidth",
+                      "type": "number",
+                      "default": "0",
+                      "description": "Defines the maximum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "height",
+                      "type": "number",
+                      "default": "",
+                      "description": "Defines the height of the component in px."
+                    },
+                    {
+                      "name": "isOpen",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether the component is open or not."
+                    },
+                    {
+                      "name": "onToggleTree",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the tree visibility is toggled."
+                    },
+                    {
+                      "name": "currentCategoryId",
+                      "type": "string",
+                      "default": "",
+                      "description": "The id of the category which is currently active and shall be shown."
+                    },
+                    {
+                      "name": "onCategoryChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for handling change of category."
+                    },
+                    {
+                      "name": "useOffscreen",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the tree components are rendered offscreen and kept mounted in the DOM."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added on the wrapper element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "TreeCategory",
+                      "default": "",
+                      "description": "A list of TreeCategory components"
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeCategory",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier for that category."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "The rioglyph icon name for that category."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The optional label for the category which will be shown in a tooltip."
+                    },
+                    {
+                      "name": "hasSelection",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether or not a selection indicator should be shown."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Tree",
+                  "rows": [
+                    {
+                      "name": "groups",
+                      "type": "Array of objects",
+                      "default": "[]",
+                      "description": "The list of groups of the items. If no groups are provided all items are rendered as flat list."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of a group."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of a group."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted."
+                    },
+                    {
+                      "name": "└position",
+                      "type": "string",
+                      "default": "",
+                      "description": "Can be set to \"last\" to enforce the last position in the tree."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Disallows the selection of the group itself."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the group element."
+                    },
+                    {
+                      "name": "items",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "The list of items."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of an item."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "string / object",
+                      "default": "",
+                      "description": "The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory"
+                    },
+                    {
+                      "name": "└info",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The subline of an item."
+                    },
+                    {
+                      "name": "└type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix)."
+                    },
+                    {
+                      "name": "└subType",
+                      "type": "string",
+                      "default": "",
+                      "description": "The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string | null",
+                      "default": "",
+                      "description": "Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons."
+                    },
+                    {
+                      "name": "└groupIds",
+                      "type": "Array of strings",
+                      "default": "[]",
+                      "description": "List of group ids the items is associated with."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the item element."
+                    },
+                    {
+                      "name": "selectedGroups",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected group ids."
+                    },
+                    {
+                      "name": "selectedItems",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected item ids."
+                    },
+                    {
+                      "name": "onSelectionChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] }"
+                    },
+                    {
+                      "name": "hasMultiselect",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines the selection behavior of the tree."
+                    },
+                    {
+                      "name": "showRadioButtons",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the single selection should also show radios."
+                    },
+                    {
+                      "name": "hideSearch",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the built-in Search is shown."
+                    },
+                    {
+                      "name": "searchPlaceholder",
+                      "type": "string",
+                      "default": "",
+                      "description": "The text used as placeholder for the search input."
+                    },
+                    {
+                      "name": "onSearchChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "search",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom custom search component which replaces the built-in search."
+                    },
+                    {
+                      "name": "onTypeFilterChange",
+                      "type": "(currentTypes: string[]) => void",
+                      "default": "",
+                      "description": "Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used."
+                    },
+                    {
+                      "name": "summary",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom asset type counter component which replaces the built-in summary."
+                    },
+                    {
+                      "name": "hideSummary",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether a summary is shown."
+                    },
+                    {
+                      "name": "hideTreeHead",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary."
+                    },
+                    {
+                      "name": "treeHeaderContent",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional custom content that is rendered at the top of the tree component. This can be used for nav pills."
+                    },
+                    {
+                      "name": "scrollHeight",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the max-height of the scrollable list"
+                    },
+                    {
+                      "name": "expandedGroups",
+                      "type": "Array of String",
+                      "default": "",
+                      "description": "List of group ids which are expanded."
+                    },
+                    {
+                      "name": "onExpandGroupsChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when a group expands or collapses."
+                    },
+                    {
+                      "name": "showEmptyGroups",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether empty groups are shown or not."
+                    },
+                    {
+                      "name": "treeOptions",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Component to offer customization options for the tree."
+                    },
+                    {
+                      "name": "treeOptionsTooltip",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Tooltip content for the tree options dropdown."
+                    },
+                    {
+                      "name": "virtualizeThreshold",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The number of items (including groups and children) used for virtualizing the tree."
+                    },
+                    {
+                      "name": "overscan",
+                      "type": "number",
+                      "default": "5",
+                      "description": "The number of items rendered beyond the visible area of a virtualized tree."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSearch",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The search value to be shown and used for the search."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The placeholder text used for the input field."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummary",
+                  "rows": [
+                    {
+                      "name": "assetCounts",
+                      "type": "object",
+                      "default": "",
+                      "description": "The object containing various asset type counter."
+                    },
+                    {
+                      "name": "└truck",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trucks."
+                    },
+                    {
+                      "name": "└trailer",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trailers."
+                    },
+                    {
+                      "name": "└bus",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of buses."
+                    },
+                    {
+                      "name": "└van",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of vans."
+                    },
+                    {
+                      "name": "└driver",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of drivers."
+                    },
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "The number of grid columns used for the built-in TreeSummaryRow"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummaryRow",
+                  "rows": [
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TypeCounter",
+                  "rows": [
+                    {
+                      "name": "type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The item type for that counter. This will be used as a return value for the onClick callback."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type."
+                    },
+                    {
+                      "name": "isActive",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Sets the active styling if active."
+                    },
+                    {
+                      "name": "hasFilter",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Should be set when there is a type filter set in the tree to style the counter accordingly."
+                    },
+                    {
+                      "name": "enableActivity",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Allows for interactivity. Use this prop when you allow clicking on the counter."
+                    },
+                    {
+                      "name": "hideOnZero",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the counter is rendered at all when the value is not defined ot 0."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "A custom value to be shown in the counter."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeOption",
+                  "rows": [
+                    {
+                      "name": "isChecked",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether the option is set."
+                    },
+                    {
+                      "name": "label",
+                      "type": "string / node",
+                      "default": "",
+                      "description": "The label for the option."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback triggered when option is selected."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "AssetTree with single select",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap gap-25 overflow-auto\"><div><div class=\"AssetTree border fluid\" style=\"width: 350px; height: 500px;\"><div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\"></div><div class=\"AssetTreeContent\"><div class=\"TreeSidebar\"><ul class=\"TreeSidebarNavigation\"><li class=\"active\"><div class=\"selection-bubble\"><span class=\"rioglyph rioglyph-truck\"></span></div></li></ul><div class=\"TreeSidebarToggle\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div></div><div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"Tree\"><div class=\"TreeHeader\"><div class=\"TreeSearch\"><div class=\"input-group flex-1-0\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Find asset by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"TreeHead display-flex gap-5 padding-15\"><div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\"></div><div class=\"display-flex justify-content-between align-items-start width-100pct\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-trailer text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">11</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-bus text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">11</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-truck text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">4</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-van text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">4</span></div></div></div></div></div><div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"0350a8aa-721e-40b4-b1ea-7908acddfdf4\"><div class=\"TreeNode from-group\" data-key=\"0350a8aa-721e-40b4-b1ea-7908acddfdf4\"><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">My Empty Group</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">4</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"b40aabcf-01f8-4be2-bc3d-9157cbdb395f\"><div class=\"TreeNode from-group\" data-key=\"b40aabcf-01f8-4be2-bc3d-9157cbdb395f\"><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Truck Group East</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">6</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden open\" data-id=\"6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5\"><div class=\"TreeNode from-group\" data-key=\"6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5\"><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Truck Group North</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">8</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9723\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-van\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G154 / M-AN 1023</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9713\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-van\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G265 / M-AN 1013</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9712\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G520 / M-AN 1012</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d979\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-trailer\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G567 / M-AN 1009</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9714\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-trailer\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G618 / M-AN 1014</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9722\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G625 / M-AN 1022</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d975\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-trailer\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G869 / M-AN 1005</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9718\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">N18-G925 / M-AN 1018</span></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"722a5f86-eb6c-46cf-83da-3f8dbfbcca5e\"><div class=\"TreeNode from-group\" data-key=\"722a5f86-eb6c-46cf-83da-3f8dbfbcca5e\"><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Truck Group South</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"0250a8aa-721e-40b4-b1ea-7908acddfdf4\"><div class=\"TreeNode from-group\" data-key=\"0250a8aa-721e-40b4-b1ea-7908acddfdf4\"><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Truck Group West</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">4</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"static/unassignedTrucks\"><div class=\"TreeNode from-group\" data-key=\"static/unassignedTrucks\"><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">All my unassigned Trucks</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">5</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\" style=\"position: absolute; top: 25px; left: 0px; width: 298px; height: 105px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></div></div></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div><div class=\"Resizer resize-horizontal resize-right\"></div></div></div><div><div class=\"h6\">Current category:</div><ul>assets</ul><div class=\"h6\">Selected tree groups:</div><ul></ul><div class=\"h6\">Selected assets:</div><ul></ul><div class=\"h6\">Expanded tree groups:</div><ul><li>Truck Group North</li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport isObject from 'lodash/fp/isObject';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport random from 'lodash/fp/random';\nimport faker from 'faker';\n\nimport AssetTree from '@rio-cloud/rio-uikit/AssetTree';\nimport TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';\nimport Tree, {\n    type TreeGroup,\n    type TreeItem,\n    type TreeItemName,\n    type SelectionChangeResponse,\n} from '@rio-cloud/rio-uikit/Tree';\n\nconst CATEGORY_ASSETS = 'assets';\n\nconst assetGroups: TreeGroup[] = [\n    {\n        id: '6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5',\n        name: 'Truck Group North',\n    },\n    {\n        id: 'b40aabcf-01f8-4be2-bc3d-9157cbdb395f',\n        name: 'Truck Group East',\n    },\n    {\n        id: '722a5f86-eb6c-46cf-83da-3f8dbfbcca5e',\n        name: 'Truck Group South',\n    },\n    {\n        id: '0250a8aa-721e-40b4-b1ea-7908acddfdf4',\n        name: 'Truck Group West',\n    },\n    {\n        id: '0350a8aa-721e-40b4-b1ea-7908acddfdf4',\n        name: 'My Empty Group',\n    },\n    {\n        id: 'static/unassignedTrucks',\n        name: 'All my unassigned Trucks',\n        position: 'last',\n    },\n];\n\nconst defaultExpandedAssetGroups = ['6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5'];\nconst assetTypes = ['truck', 'bus', 'van', 'trailer'];\n\nconst assets = Array.from({ length: 30 }, (_, index) => ({\n    id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,\n    name: `N18-G${random(100, 999)} / M-AN 1${String(index).padStart(3, '0')}`,\n    type: faker.random.arrayElement(assetTypes),\n    groupIds: [faker.random.arrayElement(assetGroups).id],\n}));\n\nconst AssetTreeSingleSelectExample = () => {\n    const [selectedAssetGroupIds, setSelectedAssetGroupIds] = useState<string[]>([]);\n    const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n    const [expandedAssetGroups, setExpandedAssetGroups] = useState<string[]>(defaultExpandedAssetGroups);\n    const [currentCategoryId, setCurrentCategoryId] = useState<string>(CATEGORY_ASSETS);\n    const [isTreeOpen, setIsTreeOpen] = useState(true);\n\n    const handleSelectAsset = ({ items, groups }: SelectionChangeResponse) => {\n        setSelectedAssetIds(items);\n        setSelectedAssetGroupIds(groups);\n    };\n\n    const handleExpandAssetGroups = (expandedGroups: string[]) => setExpandedAssetGroups(expandedGroups);\n    const handleChangeCategories = (newCategoryId: string) => setCurrentCategoryId(newCategoryId);\n    const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);\n\n    const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {\n        return selectedItemIds.map(selectedItemId => {\n            const result = list.find(listItem => listItem.id === selectedItemId);\n            if (result) {\n                const name = isObject(result.name)\n                    ? `${(result.name as TreeItemName).firstName} ${(result.name as TreeItemName).lastName}`\n                    : result.name;\n                return <li key={selectedItemId}>{name}</li>;\n            }\n        });\n    };\n\n    return (\n        <div className='display-flex flex-wrap gap-25 overflow-auto'>\n            <div>\n                <AssetTree\n                    resizable\n                    bordered\n                    minWidth={300}\n                    maxWidth={450}\n                    currentCategoryId={currentCategoryId}\n                    onCategoryChange={handleChangeCategories}\n                    height={500}\n                    isOpen={isTreeOpen}\n                    onToggleTree={handleToggleTree}\n                >\n                    <TreeCategory\n                        key={CATEGORY_ASSETS}\n                        id={CATEGORY_ASSETS}\n                        label='Assets'\n                        icon='rioglyph-truck'\n                        hasSelection={!isEmpty(selectedAssetIds) || !isEmpty(selectedAssetGroupIds)}\n                    >\n                        <Tree\n                            groups={assetGroups}\n                            items={assets}\n                            expandedGroups={expandedAssetGroups}\n                            onExpandGroupsChange={handleExpandAssetGroups}\n                            selectedGroups={selectedAssetGroupIds}\n                            selectedItems={selectedAssetIds}\n                            onSelectionChange={handleSelectAsset}\n                            searchPlaceholder='Find asset by name'\n                            hasMultiselect={false}\n                        />\n                    </TreeCategory>\n                </AssetTree>\n            </div>\n            <div>\n                <div className='h6'>Current category:</div>\n                <ul>{currentCategoryId}</ul>\n                <div className='h6'>Selected tree groups:</div>\n                <ul>{renderSelectedItemsOfList(selectedAssetGroupIds, assetGroups)}</ul>\n                <div className='h6'>Selected assets:</div>\n                <ul>{renderSelectedItemsOfList(selectedAssetIds, assets)}</ul>\n                <div className='h6'>Expanded tree groups:</div>\n                <ul>{renderSelectedItemsOfList(expandedAssetGroups, assetGroups)}</ul>\n            </div>\n        </div>\n    );\n};\n\nexport default AssetTreeSingleSelectExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap gap-25 overflow-auto\">\n    <div>\n        <div class=\"AssetTree border fluid\" style=\"width: 350px; height: 500px;\">\n            <div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\">\n            </div>\n            <div class=\"AssetTreeContent\">\n                <div class=\"TreeSidebar\">\n                    <ul class=\"TreeSidebarNavigation\">\n                        <li class=\"active\">\n                            <div class=\"selection-bubble\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                    <div class=\"TreeSidebarToggle\">\n                        <span class=\"rioglyph rioglyph-chevron-left\">\n                        </span>\n                    </div>\n                </div>\n                <div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                    <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                        <div class=\"scrollbar-content-wrapper\">\n                            <div class=\"Tree\">\n                                <div class=\"TreeHeader\">\n                                    <div class=\"TreeSearch\">\n                                        <div class=\"input-group flex-1-0\">\n                                            <span class=\"input-group-addon\">\n                                                <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                                                </span>\n                                            </span>\n                                            <div class=\"ClearableInput input-group\">\n                                                <input placeholder=\"Find asset by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                                                <span class=\"clearButton hide\">\n                                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                                    </span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeHead display-flex gap-5 padding-15\">\n                                        <div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\">\n                                        </div>\n                                        <div class=\"display-flex justify-content-between align-items-start width-100pct\">\n                                            <div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n                                                <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                    <span class=\"rioglyph rioglyph-trailer text-size-16 margin-right-2\">\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">11</span>\n                                                </div>\n                                                <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                    <span class=\"rioglyph rioglyph-bus text-size-16 margin-right-2\">\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">11</span>\n                                                </div>\n                                                <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                    <span class=\"rioglyph rioglyph-truck text-size-16 margin-right-2\">\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">4</span>\n                                                </div>\n                                                <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                    <span class=\"rioglyph rioglyph-van text-size-16 margin-right-2\">\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">4</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\">\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"0350a8aa-721e-40b4-b1ea-7908acddfdf4\">\n                                        <div class=\"TreeNode from-group\" data-key=\"0350a8aa-721e-40b4-b1ea-7908acddfdf4\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">My Empty Group</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">4</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"b40aabcf-01f8-4be2-bc3d-9157cbdb395f\">\n                                        <div class=\"TreeNode from-group\" data-key=\"b40aabcf-01f8-4be2-bc3d-9157cbdb395f\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Truck Group East</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">6</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden open\" data-id=\"6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5\">\n                                        <div class=\"TreeNode from-group\" data-key=\"6ba7c2ec-8bd4-4470-98a4-313c9d33e8d5\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Truck Group North</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">8</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9723\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-van\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G154 / M-AN 1023</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9713\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-van\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G265 / M-AN 1013</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9712\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-bus\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G520 / M-AN 1012</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d979\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-trailer\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G567 / M-AN 1009</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9714\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-trailer\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G618 / M-AN 1014</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9722\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-bus\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G625 / M-AN 1022</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d975\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-trailer\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G869 / M-AN 1005</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9718\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-bus\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">N18-G925 / M-AN 1018</span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"722a5f86-eb6c-46cf-83da-3f8dbfbcca5e\">\n                                        <div class=\"TreeNode from-group\" data-key=\"722a5f86-eb6c-46cf-83da-3f8dbfbcca5e\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Truck Group South</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"0250a8aa-721e-40b4-b1ea-7908acddfdf4\">\n                                        <div class=\"TreeNode from-group\" data-key=\"0250a8aa-721e-40b4-b1ea-7908acddfdf4\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Truck Group West</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">4</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"static/unassignedTrucks\">\n                                        <div class=\"TreeNode from-group\" data-key=\"static/unassignedTrucks\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">All my unassigned Trucks</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">5</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n                        <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n                        </div>\n                    </div>\n                    <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n                        <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"Resizer resize-horizontal resize-right\">\n            </div>\n        </div>\n    </div>\n    <div>\n        <div class=\"h6\">Current category:</div>\n        <ul>assets</ul>\n        <div class=\"h6\">Selected tree groups:</div>\n        <ul>\n        </ul>\n        <div class=\"h6\">Selected assets:</div>\n        <ul>\n        </ul>\n        <div class=\"h6\">Expanded tree groups:</div>\n        <ul>\n            <li>Truck Group North</li>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "AssetTree",
+                  "rows": [
+                    {
+                      "name": "fly",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the component will overlap the body content."
+                    },
+                    {
+                      "name": "resizable",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether or not the sidebar is resizable."
+                    },
+                    {
+                      "name": "onResizeEnd",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the resize is done."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the component has a border or not."
+                    },
+                    {
+                      "name": "width",
+                      "type": "string / number",
+                      "default": "350",
+                      "description": "Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "number",
+                      "default": "100",
+                      "description": "Defines the minimum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "maxWidth",
+                      "type": "number",
+                      "default": "0",
+                      "description": "Defines the maximum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "height",
+                      "type": "number",
+                      "default": "",
+                      "description": "Defines the height of the component in px."
+                    },
+                    {
+                      "name": "isOpen",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether the component is open or not."
+                    },
+                    {
+                      "name": "onToggleTree",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the tree visibility is toggled."
+                    },
+                    {
+                      "name": "currentCategoryId",
+                      "type": "string",
+                      "default": "",
+                      "description": "The id of the category which is currently active and shall be shown."
+                    },
+                    {
+                      "name": "onCategoryChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for handling change of category."
+                    },
+                    {
+                      "name": "useOffscreen",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the tree components are rendered offscreen and kept mounted in the DOM."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added on the wrapper element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "TreeCategory",
+                      "default": "",
+                      "description": "A list of TreeCategory components"
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeCategory",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier for that category."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "The rioglyph icon name for that category."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The optional label for the category which will be shown in a tooltip."
+                    },
+                    {
+                      "name": "hasSelection",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether or not a selection indicator should be shown."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Tree",
+                  "rows": [
+                    {
+                      "name": "groups",
+                      "type": "Array of objects",
+                      "default": "[]",
+                      "description": "The list of groups of the items. If no groups are provided all items are rendered as flat list."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of a group."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of a group."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted."
+                    },
+                    {
+                      "name": "└position",
+                      "type": "string",
+                      "default": "",
+                      "description": "Can be set to \"last\" to enforce the last position in the tree."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Disallows the selection of the group itself."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the group element."
+                    },
+                    {
+                      "name": "items",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "The list of items."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of an item."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "string / object",
+                      "default": "",
+                      "description": "The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory"
+                    },
+                    {
+                      "name": "└info",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The subline of an item."
+                    },
+                    {
+                      "name": "└type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix)."
+                    },
+                    {
+                      "name": "└subType",
+                      "type": "string",
+                      "default": "",
+                      "description": "The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string | null",
+                      "default": "",
+                      "description": "Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons."
+                    },
+                    {
+                      "name": "└groupIds",
+                      "type": "Array of strings",
+                      "default": "[]",
+                      "description": "List of group ids the items is associated with."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the item element."
+                    },
+                    {
+                      "name": "selectedGroups",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected group ids."
+                    },
+                    {
+                      "name": "selectedItems",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected item ids."
+                    },
+                    {
+                      "name": "onSelectionChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] }"
+                    },
+                    {
+                      "name": "hasMultiselect",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines the selection behavior of the tree."
+                    },
+                    {
+                      "name": "showRadioButtons",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the single selection should also show radios."
+                    },
+                    {
+                      "name": "hideSearch",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the built-in Search is shown."
+                    },
+                    {
+                      "name": "searchPlaceholder",
+                      "type": "string",
+                      "default": "",
+                      "description": "The text used as placeholder for the search input."
+                    },
+                    {
+                      "name": "onSearchChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "search",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom custom search component which replaces the built-in search."
+                    },
+                    {
+                      "name": "onTypeFilterChange",
+                      "type": "(currentTypes: string[]) => void",
+                      "default": "",
+                      "description": "Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used."
+                    },
+                    {
+                      "name": "summary",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom asset type counter component which replaces the built-in summary."
+                    },
+                    {
+                      "name": "hideSummary",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether a summary is shown."
+                    },
+                    {
+                      "name": "hideTreeHead",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary."
+                    },
+                    {
+                      "name": "treeHeaderContent",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional custom content that is rendered at the top of the tree component. This can be used for nav pills."
+                    },
+                    {
+                      "name": "scrollHeight",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the max-height of the scrollable list"
+                    },
+                    {
+                      "name": "expandedGroups",
+                      "type": "Array of String",
+                      "default": "",
+                      "description": "List of group ids which are expanded."
+                    },
+                    {
+                      "name": "onExpandGroupsChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when a group expands or collapses."
+                    },
+                    {
+                      "name": "showEmptyGroups",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether empty groups are shown or not."
+                    },
+                    {
+                      "name": "treeOptions",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Component to offer customization options for the tree."
+                    },
+                    {
+                      "name": "treeOptionsTooltip",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Tooltip content for the tree options dropdown."
+                    },
+                    {
+                      "name": "virtualizeThreshold",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The number of items (including groups and children) used for virtualizing the tree."
+                    },
+                    {
+                      "name": "overscan",
+                      "type": "number",
+                      "default": "5",
+                      "description": "The number of items rendered beyond the visible area of a virtualized tree."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSearch",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The search value to be shown and used for the search."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The placeholder text used for the input field."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummary",
+                  "rows": [
+                    {
+                      "name": "assetCounts",
+                      "type": "object",
+                      "default": "",
+                      "description": "The object containing various asset type counter."
+                    },
+                    {
+                      "name": "└truck",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trucks."
+                    },
+                    {
+                      "name": "└trailer",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trailers."
+                    },
+                    {
+                      "name": "└bus",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of buses."
+                    },
+                    {
+                      "name": "└van",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of vans."
+                    },
+                    {
+                      "name": "└driver",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of drivers."
+                    },
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "The number of grid columns used for the built-in TreeSummaryRow"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummaryRow",
+                  "rows": [
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TypeCounter",
+                  "rows": [
+                    {
+                      "name": "type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The item type for that counter. This will be used as a return value for the onClick callback."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type."
+                    },
+                    {
+                      "name": "isActive",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Sets the active styling if active."
+                    },
+                    {
+                      "name": "hasFilter",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Should be set when there is a type filter set in the tree to style the counter accordingly."
+                    },
+                    {
+                      "name": "enableActivity",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Allows for interactivity. Use this prop when you allow clicking on the counter."
+                    },
+                    {
+                      "name": "hideOnZero",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the counter is rendered at all when the value is not defined ot 0."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "A custom value to be shown in the counter."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeOption",
+                  "rows": [
+                    {
+                      "name": "isChecked",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether the option is set."
+                    },
+                    {
+                      "name": "label",
+                      "type": "string / node",
+                      "default": "",
+                      "description": "The label for the option."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback triggered when option is selected."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "AssetTree with multiple asset filter in summary",
+      "body": "When using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap gap-25 overflow-auto\"><div class=\"AssetTree border fluid\" style=\"width: 350px; height: 500px;\"><div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\"></div><div class=\"AssetTreeContent\"><div class=\"TreeSidebar\"><ul class=\"TreeSidebarNavigation\"><li class=\"active\"><div class=\"selection-bubble\"><span class=\"rioglyph rioglyph-truck\"></span></div></li></ul><div class=\"TreeSidebarToggle\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div></div><div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"TreeOffscreenWrapper\"><div class=\"Tree\"><div class=\"TreeHeader\"><div class=\"TreeSearch\"><div class=\"input-group flex-1-0\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Find vehicle\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"TreeHead display-flex gap-5 padding-15\"><div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\"><div class=\"TreeSelectAll display-flex align-items-center\"><label class=\"checkbox margin-top--1\" tabindex=\"0\"><input type=\"checkbox\" class=\"margin-top--1\"><span class=\"checkbox-text\"></span></label></div></div><div class=\"display-flex justify-content-between align-items-start width-100pct\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TreeSummaryRow display-grid grid-cols-4 gap-10\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-truck-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">8</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-bus-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">6</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-van-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">3</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-car-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">3</span></div></div><div class=\"TreeSummaryRow display-grid grid-cols-4 gap-10\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-fuel-liquid text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">10</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-fuel-gas text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">5</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-fuel-electric text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-fuel-hydrogen text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-fuel-mix text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">1</span></div></div></div></div><div><div class=\"dropdown btn-group TreeHeaderOptions height-20\"><button type=\"button\" id=\"gbc4bxw8c3i\" class=\"btn btn-default btn-sm btn-icon-only btn-component dropdown-toggle hover-bg-white border-none text-color-gray hover-text-color-dark\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\" aria-hidden=\"true\"></span></button></div></div></div></div><div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\"><div class=\"TreeNodeContainer user-select-none overflow-hidden open\" data-id=\"group-1\"><div class=\"TreeNode from-group\" data-key=\"group-1\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Mixed Vehicles</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">11</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9717\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-van\"></span><span class=\"rioglyph rioglyph-fuel-gas\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-2468</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: cng</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9714\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-2715</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: heavy_fuel_oil</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d972\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-2781</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: gas</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9711\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-car\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-3197</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: heavy_fuel_oil</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d971\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"rioglyph rioglyph-fuel-gas\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-5408</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: cng</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d979\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-5959</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: gas</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9715\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-electric\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-6266</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: electric</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9712\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-7214</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: heavy_fuel_oil</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d974\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-car\"></span><span class=\"rioglyph rioglyph-fuel-gas\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-7316</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: cng</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9718\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-hydrogen\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-8395</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: hydrogen</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d975\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph-icon-pair\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-9619</span><span class=\"TreeLabelNameTextSubline\"><span>Debug: heavy_fuel_oil</span></span></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"unassigned-group\"><div class=\"TreeNode from-group\" data-key=\"unassigned-group\"><label class=\"checkbox TreeCheckbox\" tabindex=\"0\"><input type=\"checkbox\" class=\"TreeCheckbox\"><span class=\"checkbox-text\"></span></label><span class=\"TreeLabel TreeLabelName\"><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Ungrouped</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">9</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\" style=\"position: absolute; top: 25px; left: 0px; width: 298px; height: 105px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></div></div></div></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div><div class=\"Resizer resize-horizontal resize-right\"></div></div><div><div class=\"h6\">Selected groups:</div><ul></ul><div class=\"h6\">Selected vehicles:</div><ul></ul><div class=\"h6\">Expanded groups:</div><ul><li>Mixed Vehicles</li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useMemo, useState } from 'react';\nimport random from 'lodash/fp/random';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport faker from 'faker';\n\nimport AssetTree from '@rio-cloud/rio-uikit/AssetTree';\nimport TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';\nimport Tree, {\n    type TreeGroup,\n    type TreeItem,\n    type SelectionChangeResponse,\n    getTypeCounts,\n} from '@rio-cloud/rio-uikit/Tree';\nimport TreeOption from '@rio-cloud/rio-uikit/TreeOption';\nimport TreeSummary, { type TreeSummaryCounts } from '@rio-cloud/rio-uikit/TreeSummary';\nimport TreeSummaryRow from '@rio-cloud/rio-uikit/TreeSummaryRow';\nimport TypeCounter from '@rio-cloud/rio-uikit/TypeCounter';\nimport {\n    countFuelTypeGroups,\n    filterByFuelTypeGroup,\n    fuelTypeGroups,\n    getFuelIcon,\n    getFuelTypeGroupIcon,\n    type FuelType,\n    type FuelTypeGroup,\n} from '@rio-cloud/rio-uikit/fuelTypeUtils';\n\nconst toggleListItem = (list: string[], item: string) => {\n    const set = new Set(list);\n    if (set.has(item)) {\n        set.delete(item);\n    } else {\n        set.add(item);\n    }\n    return [...set];\n};\n\nconst truckGroups: TreeGroup[] = [\n    {\n        id: 'group-1',\n        name: 'Mixed Vehicles',\n    },\n    {\n        id: 'unassigned-group',\n        name: 'Ungrouped',\n        position: 'last',\n    },\n];\n\nconst assetTypes = ['truck', 'bus', 'van', 'car'];\nconst fuelTypes = ['diesel', 'electric', 'gas', 'hydrogen', 'cng', 'lpg', 'dual_fuel_diesel_cng', 'heavy_fuel_oil'];\n\nconst getVehicles = (withSubType = true): TreeItem[] =>\n    Array.from({ length: 20 }, (_, index) => {\n        const fuelType = withSubType ? faker.random.arrayElement(fuelTypes) : undefined;\n        return {\n            id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,\n            name: `Vehicle-${random(1000, 9999)}`,\n            info: <span>Debug: {fuelType}</span>,\n            type: faker.random.arrayElement(assetTypes),\n            subType: fuelType, // subType cannot be used as icon here anymore\n            pairIcon: getFuelIcon(fuelType),\n            groupIds: [faker.random.arrayElement(truckGroups).id],\n        };\n    });\n\nconst defaultExpandedTruckGroups = ['group-1'];\n\nconst getAssetTypeCounts = getTypeCounts;\nconst getFuelTypeCounts = (items: TreeItem[]) => countFuelTypeGroups(items, item => item.subType as FuelType);\n\nconst AssetTreeExample = () => {\n    const [selectedTruckGroupIds, setSelectedTruckGroupIds] = useState<string[]>([]);\n    const [selectedTruckIds, setSelectedTruckIds] = useState<string[]>([]);\n    const [expandedTruckGroups, setExpandedTruckGroups] = useState(defaultExpandedTruckGroups);\n\n    const [isTreeOpen, setIsTreeOpen] = useState(true);\n\n    const [showEmptyGroups, setShowEmptyGroups] = useState(false);\n    const [showAssetGroups, setShowAssetGroups] = useState(true);\n    const [showFuelType, setShowFuelType] = useState(true);\n\n    const [activeAssetTypeFilter, setActiveAssetTypeFilter] = useState<string[]>([]);\n    const [activeFuelTypeGroupFilter, setActiveFuelTypeGroupFilter] = useState<string[]>([]);\n\n    const [counters, setCounters] = useState<TreeSummaryCounts>({});\n    const [fuelCounters, setFuelCounters] = useState<Record<string, number>>({});\n\n    const items = useMemo(() => {\n        // Regenerate vehicles to omit the fuel type data used for the sub type\n        const result = getVehicles(showFuelType);\n\n        // Count again all vehicle types and sub types\n        setCounters(getAssetTypeCounts(result));\n        setFuelCounters(getFuelTypeCounts(result));\n\n        return result;\n    }, [showFuelType]);\n\n    const filteredItems = useMemo(() => {\n        let result = items;\n\n        // filter by asset type\n        if (!isEmpty(activeAssetTypeFilter)) {\n            result = result.filter(item => activeAssetTypeFilter.includes(item.type));\n        }\n\n        // filter by fuel type\n        if (!isEmpty(activeFuelTypeGroupFilter)) {\n            result = filterByFuelTypeGroup(\n                result,\n                activeFuelTypeGroupFilter as FuelTypeGroup[],\n                item => item.subType as FuelType\n            );\n        }\n\n        return result;\n    }, [items, activeAssetTypeFilter, activeFuelTypeGroupFilter]);\n\n    const handleSelectTruck = ({ items, groups }: SelectionChangeResponse) => {\n        setSelectedTruckIds(items);\n        setSelectedTruckGroupIds(groups);\n    };\n\n    const handleExpandTruckGroups = (newExpandedTruckGroups: string[]) =>\n        setExpandedTruckGroups(newExpandedTruckGroups);\n\n    const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);\n    const handleToggleEmptyGroups = () => setShowEmptyGroups(!showEmptyGroups);\n    const handleToggleAssetGroups = () => setShowAssetGroups(!showAssetGroups);\n    const handleToggleFuelType = () => {\n        setShowFuelType(!showFuelType);\n        setActiveFuelTypeGroupFilter([]);\n    };\n\n    const handleSearchChange = (searchValue: string) => {\n        const filteredAssets = filteredItems.filter(item =>\n            (item.name as string).toLowerCase().includes(searchValue.toLowerCase())\n        );\n    };\n\n    const handleAssetTypeFilterChange = (assetTypeFilter: string) => {\n        setActiveAssetTypeFilter(toggleListItem(activeAssetTypeFilter, assetTypeFilter));\n    };\n\n    const handleFuelTypeGroupFilterChange = (fuelTypeGroupFilter: string) => {\n        setActiveFuelTypeGroupFilter(toggleListItem(activeFuelTypeGroupFilter, fuelTypeGroupFilter));\n    };\n\n    const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {\n        return selectedItemIds.map(selectedItemId => {\n            const result = list.find(listItem => listItem.id === selectedItemId);\n            if (result) {\n                return <li key={selectedItemId}>{`${result.name}`}</li>;\n            }\n        });\n    };\n\n    return (\n        <div className='display-flex flex-wrap gap-25 overflow-auto'>\n            <AssetTree\n                bordered\n                minWidth={300}\n                maxWidth={450}\n                height={500}\n                isOpen={isTreeOpen}\n                onToggleTree={handleToggleTree}\n                currentCategoryId='trucks'\n                useOffscreen\n            >\n                <TreeCategory\n                    key='trucks'\n                    id='trucks'\n                    label='Assets'\n                    icon='rioglyph-truck'\n                    hasSelection={!isEmpty(selectedTruckIds) || !isEmpty(selectedTruckGroupIds)}\n                >\n                    <Tree\n                        groups={showAssetGroups ? truckGroups : []}\n                        items={filteredItems}\n                        expandedGroups={expandedTruckGroups}\n                        onExpandGroupsChange={handleExpandTruckGroups}\n                        selectedGroups={selectedTruckGroupIds}\n                        selectedItems={selectedTruckIds}\n                        onSelectionChange={handleSelectTruck}\n                        searchPlaceholder='Find vehicle'\n                        showEmptyGroups={showEmptyGroups}\n                        onSearchChange={handleSearchChange}\n                        virtualizeThreshold={14}\n                        summary={\n                            <TreeSummary>\n                                <TreeSummaryRow>\n                                    {assetTypes.map(assetType => (\n                                        <TypeCounter\n                                            key={assetType}\n                                            type={assetType}\n                                            icon={`${assetType}-baseline`}\n                                            value={(counters as Record<string, number>)[assetType]}\n                                            isActive={activeAssetTypeFilter.includes(assetType)}\n                                            hasFilter={!isEmpty(activeAssetTypeFilter)}\n                                            onClick={handleAssetTypeFilterChange}\n                                            enableActivity\n                                            hideOnZero\n                                        />\n                                    ))}\n                                </TreeSummaryRow>\n                                <TreeSummaryRow>\n                                    {showFuelType &&\n                                        fuelTypeGroups.map(fuelTypeGroup => (\n                                            <TypeCounter\n                                                key={fuelTypeGroup}\n                                                type={fuelTypeGroup}\n                                                icon={getFuelTypeGroupIcon(fuelTypeGroup)}\n                                                value={fuelCounters[fuelTypeGroup]}\n                                                isActive={activeFuelTypeGroupFilter.includes(fuelTypeGroup)}\n                                                hasFilter={!isEmpty(activeFuelTypeGroupFilter)}\n                                                onClick={handleFuelTypeGroupFilterChange}\n                                                enableActivity\n                                                hideOnZero\n                                            />\n                                        ))}\n                                </TreeSummaryRow>\n                            </TreeSummary>\n                        }\n                        treeOptionsTooltip='Customize view'\n                        treeOptions={[\n                            <TreeOption\n                                key='emptyGroupsToggle'\n                                label='Show empty groups'\n                                isChecked={showEmptyGroups}\n                                onChange={handleToggleEmptyGroups}\n                            />,\n                            <TreeOption\n                                key='assetGroupsToggle'\n                                label='Show groups'\n                                isChecked={showAssetGroups}\n                                onChange={handleToggleAssetGroups}\n                            />,\n                            <hr key='hr' className='width-100pct margin-y-5' />,\n                            <TreeOption\n                                key='fuelTypeToggle'\n                                label='Show alternative fuel types'\n                                isChecked={showFuelType}\n                                onChange={handleToggleFuelType}\n                            />,\n                        ]}\n                    />\n                </TreeCategory>\n            </AssetTree>\n            <div>\n                <div className='h6'>Selected groups:</div>\n                <ul>{renderSelectedItemsOfList(selectedTruckGroupIds, truckGroups)}</ul>\n                <div className='h6'>Selected vehicles:</div>\n                <ul>{renderSelectedItemsOfList(selectedTruckIds, items)}</ul>\n                <div className='h6'>Expanded groups:</div>\n                <ul>{renderSelectedItemsOfList(expandedTruckGroups, truckGroups)}</ul>\n            </div>\n        </div>\n    );\n};\n\nexport default AssetTreeExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap gap-25 overflow-auto\">\n    <div class=\"AssetTree border fluid\" style=\"width: 350px; height: 500px;\">\n        <div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\">\n        </div>\n        <div class=\"AssetTreeContent\">\n            <div class=\"TreeSidebar\">\n                <ul class=\"TreeSidebarNavigation\">\n                    <li class=\"active\">\n                        <div class=\"selection-bubble\">\n                            <span class=\"rioglyph rioglyph-truck\">\n                            </span>\n                        </div>\n                    </li>\n                </ul>\n                <div class=\"TreeSidebarToggle\">\n                    <span class=\"rioglyph rioglyph-chevron-left\">\n                    </span>\n                </div>\n            </div>\n            <div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"TreeOffscreenWrapper\">\n                            <div class=\"Tree\">\n                                <div class=\"TreeHeader\">\n                                    <div class=\"TreeSearch\">\n                                        <div class=\"input-group flex-1-0\">\n                                            <span class=\"input-group-addon\">\n                                                <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                                                </span>\n                                            </span>\n                                            <div class=\"ClearableInput input-group\">\n                                                <input placeholder=\"Find vehicle\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                                                <span class=\"clearButton hide\">\n                                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                                    </span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeHead display-flex gap-5 padding-15\">\n                                        <div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\">\n                                            <div class=\"TreeSelectAll display-flex align-items-center\">\n                                                <label class=\"checkbox margin-top--1\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"margin-top--1\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                            </div>\n                                        </div>\n                                        <div class=\"display-flex justify-content-between align-items-start width-100pct\">\n                                            <div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n                                                <div class=\"TreeSummaryRow display-grid grid-cols-4 gap-10\">\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-truck-baseline text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">8</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-bus-baseline text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">6</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-van-baseline text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">3</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-car-baseline text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">3</span>\n                                                    </div>\n                                                </div>\n                                                <div class=\"TreeSummaryRow display-grid grid-cols-4 gap-10\">\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-fuel-liquid text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">10</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-fuel-gas text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">5</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-fuel-electric text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-fuel-hydrogen text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-fuel-mix text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">1</span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div>\n                                            <div class=\"dropdown btn-group TreeHeaderOptions height-20\">\n                                                <button type=\"button\" id=\"3xow78a3tt\" class=\"btn btn-default btn-sm btn-icon-only btn-component dropdown-toggle hover-bg-white border-none text-color-gray hover-text-color-dark\" tabindex=\"0\">\n                                                    <span class=\"rioglyph rioglyph-option-vertical\" aria-hidden=\"true\">\n                                                    </span>\n                                                </button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\">\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden open\" data-id=\"group-1\">\n                                        <div class=\"TreeNode from-group\" data-key=\"group-1\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Mixed Vehicles</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">11</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9717\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-van\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-gas\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-2468</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: cng</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9714\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-truck\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-liquid\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-2715</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: heavy_fuel_oil</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d972\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-truck\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-liquid\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-2781</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: gas</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9711\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-car\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-liquid\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-3197</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: heavy_fuel_oil</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d971\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-bus\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-gas\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-5408</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: cng</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d979\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-bus\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-liquid\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-5959</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: gas</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9715\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-truck\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-electric\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-6266</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: electric</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9712\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-bus\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-liquid\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-7214</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: heavy_fuel_oil</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d974\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-car\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-gas\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-7316</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: cng</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d9718\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-truck\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-hydrogen\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-8395</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: hydrogen</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d975\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph-icon-pair\">\n                                                    <span class=\"rioglyph rioglyph-truck\">\n                                                    </span>\n                                                    <span class=\"rioglyph rioglyph-fuel-liquid\">\n                                                    </span>\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Vehicle-9619</span>\n                                                    <span class=\"TreeLabelNameTextSubline\">\n                                                        <span>Debug: heavy_fuel_oil</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"unassigned-group\">\n                                        <div class=\"TreeNode from-group\" data-key=\"unassigned-group\">\n                                            <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                <span class=\"checkbox-text\">\n                                                </span>\n                                            </label>\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">Ungrouped</span>\n                                                </span>\n                                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">9</span>\n                                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Resizer resize-horizontal resize-right\">\n        </div>\n    </div>\n    <div>\n        <div class=\"h6\">Selected groups:</div>\n        <ul>\n        </ul>\n        <div class=\"h6\">Selected vehicles:</div>\n        <ul>\n        </ul>\n        <div class=\"h6\">Expanded groups:</div>\n        <ul>\n            <li>Mixed Vehicles</li>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "AssetTree",
+                  "rows": [
+                    {
+                      "name": "fly",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the component will overlap the body content."
+                    },
+                    {
+                      "name": "resizable",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether or not the sidebar is resizable."
+                    },
+                    {
+                      "name": "onResizeEnd",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the resize is done."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the component has a border or not."
+                    },
+                    {
+                      "name": "width",
+                      "type": "string / number",
+                      "default": "350",
+                      "description": "Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "number",
+                      "default": "100",
+                      "description": "Defines the minimum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "maxWidth",
+                      "type": "number",
+                      "default": "0",
+                      "description": "Defines the maximum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "height",
+                      "type": "number",
+                      "default": "",
+                      "description": "Defines the height of the component in px."
+                    },
+                    {
+                      "name": "isOpen",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether the component is open or not."
+                    },
+                    {
+                      "name": "onToggleTree",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the tree visibility is toggled."
+                    },
+                    {
+                      "name": "currentCategoryId",
+                      "type": "string",
+                      "default": "",
+                      "description": "The id of the category which is currently active and shall be shown."
+                    },
+                    {
+                      "name": "onCategoryChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for handling change of category."
+                    },
+                    {
+                      "name": "useOffscreen",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the tree components are rendered offscreen and kept mounted in the DOM."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added on the wrapper element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "TreeCategory",
+                      "default": "",
+                      "description": "A list of TreeCategory components"
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeCategory",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier for that category."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "The rioglyph icon name for that category."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The optional label for the category which will be shown in a tooltip."
+                    },
+                    {
+                      "name": "hasSelection",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether or not a selection indicator should be shown."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Tree",
+                  "rows": [
+                    {
+                      "name": "groups",
+                      "type": "Array of objects",
+                      "default": "[]",
+                      "description": "The list of groups of the items. If no groups are provided all items are rendered as flat list."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of a group."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of a group."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted."
+                    },
+                    {
+                      "name": "└position",
+                      "type": "string",
+                      "default": "",
+                      "description": "Can be set to \"last\" to enforce the last position in the tree."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Disallows the selection of the group itself."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the group element."
+                    },
+                    {
+                      "name": "items",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "The list of items."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of an item."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "string / object",
+                      "default": "",
+                      "description": "The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory"
+                    },
+                    {
+                      "name": "└info",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The subline of an item."
+                    },
+                    {
+                      "name": "└type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix)."
+                    },
+                    {
+                      "name": "└subType",
+                      "type": "string",
+                      "default": "",
+                      "description": "The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string | null",
+                      "default": "",
+                      "description": "Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons."
+                    },
+                    {
+                      "name": "└groupIds",
+                      "type": "Array of strings",
+                      "default": "[]",
+                      "description": "List of group ids the items is associated with."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the item element."
+                    },
+                    {
+                      "name": "selectedGroups",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected group ids."
+                    },
+                    {
+                      "name": "selectedItems",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected item ids."
+                    },
+                    {
+                      "name": "onSelectionChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] }"
+                    },
+                    {
+                      "name": "hasMultiselect",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines the selection behavior of the tree."
+                    },
+                    {
+                      "name": "showRadioButtons",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the single selection should also show radios."
+                    },
+                    {
+                      "name": "hideSearch",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the built-in Search is shown."
+                    },
+                    {
+                      "name": "searchPlaceholder",
+                      "type": "string",
+                      "default": "",
+                      "description": "The text used as placeholder for the search input."
+                    },
+                    {
+                      "name": "onSearchChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "search",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom custom search component which replaces the built-in search."
+                    },
+                    {
+                      "name": "onTypeFilterChange",
+                      "type": "(currentTypes: string[]) => void",
+                      "default": "",
+                      "description": "Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used."
+                    },
+                    {
+                      "name": "summary",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom asset type counter component which replaces the built-in summary."
+                    },
+                    {
+                      "name": "hideSummary",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether a summary is shown."
+                    },
+                    {
+                      "name": "hideTreeHead",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary."
+                    },
+                    {
+                      "name": "treeHeaderContent",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional custom content that is rendered at the top of the tree component. This can be used for nav pills."
+                    },
+                    {
+                      "name": "scrollHeight",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the max-height of the scrollable list"
+                    },
+                    {
+                      "name": "expandedGroups",
+                      "type": "Array of String",
+                      "default": "",
+                      "description": "List of group ids which are expanded."
+                    },
+                    {
+                      "name": "onExpandGroupsChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when a group expands or collapses."
+                    },
+                    {
+                      "name": "showEmptyGroups",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether empty groups are shown or not."
+                    },
+                    {
+                      "name": "treeOptions",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Component to offer customization options for the tree."
+                    },
+                    {
+                      "name": "treeOptionsTooltip",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Tooltip content for the tree options dropdown."
+                    },
+                    {
+                      "name": "virtualizeThreshold",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The number of items (including groups and children) used for virtualizing the tree."
+                    },
+                    {
+                      "name": "overscan",
+                      "type": "number",
+                      "default": "5",
+                      "description": "The number of items rendered beyond the visible area of a virtualized tree."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSearch",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The search value to be shown and used for the search."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The placeholder text used for the input field."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummary",
+                  "rows": [
+                    {
+                      "name": "assetCounts",
+                      "type": "object",
+                      "default": "",
+                      "description": "The object containing various asset type counter."
+                    },
+                    {
+                      "name": "└truck",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trucks."
+                    },
+                    {
+                      "name": "└trailer",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trailers."
+                    },
+                    {
+                      "name": "└bus",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of buses."
+                    },
+                    {
+                      "name": "└van",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of vans."
+                    },
+                    {
+                      "name": "└driver",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of drivers."
+                    },
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "The number of grid columns used for the built-in TreeSummaryRow"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummaryRow",
+                  "rows": [
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TypeCounter",
+                  "rows": [
+                    {
+                      "name": "type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The item type for that counter. This will be used as a return value for the onClick callback."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type."
+                    },
+                    {
+                      "name": "isActive",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Sets the active styling if active."
+                    },
+                    {
+                      "name": "hasFilter",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Should be set when there is a type filter set in the tree to style the counter accordingly."
+                    },
+                    {
+                      "name": "enableActivity",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Allows for interactivity. Use this prop when you allow clicking on the counter."
+                    },
+                    {
+                      "name": "hideOnZero",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the counter is rendered at all when the value is not defined ot 0."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "A custom value to be shown in the counter."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeOption",
+                  "rows": [
+                    {
+                      "name": "isChecked",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether the option is set."
+                    },
+                    {
+                      "name": "label",
+                      "type": "string / node",
+                      "default": "",
+                      "description": "The label for the option."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback triggered when option is selected."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "AssetTree with custom summary",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Some small dummy text at the bottom to showcase that you can put something here",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap overflow-auto\"><div class=\"AssetTree border fluid\" style=\"width: 350px; height: 500px;\"><div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\"></div><div class=\"AssetTreeContent\"><div class=\"TreeSidebar\"><ul class=\"TreeSidebarNavigation\"><li class=\"active\"><div class=\"selection-bubble\"><span class=\"rioglyph rioglyph-driver\"></span></div></li></ul><div class=\"TreeSidebarToggle\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div></div><div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"flex-1-1 display-flex flex-column justify-content-between\"><div class=\"Tree\"><div class=\"TreeHeader\"><div class=\"TreeSearch\"><div class=\"input-group flex-1-0\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Find driver by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"TreeHead display-flex gap-5 padding-15\"><div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\"></div><div class=\"display-flex justify-content-between align-items-start width-100pct\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">3</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-drivercard-out text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">15</span></div></div></div></div></div><div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\"><div class=\"TreeNodeContainer user-select-none overflow-hidden open\"><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"74e8eb86-18a1-4abe-90cb-aeee7909f857\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-driver\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\"><span class=\"text-light margin-right-3\">John</span><span>Doe</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"3abc20f5-e0b6-42bb-b310-4e57fdd2be55\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-driver\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\"><span class=\"text-light margin-right-3\">Maxl</span><span>Rainer</span></span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"3abc20f5-e0b6-42bb-b310-4e57fdd2be56\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-driver\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\"><span class=\"text-light margin-right-3\">Johan</span><span>Schmidt</span></span></span></span></div></div></div></div><div class=\"margin-15 padding-10 rounded border1 border-color-lightest shadow-accent text-color-dark line-height-125rel\">Some small dummy text at the bottom to showcase that you can put something here</div></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div><div class=\"Resizer resize-horizontal resize-right\"></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport countBy from 'lodash/fp/countBy';\n\nimport AssetTree from '@rio-cloud/rio-uikit/AssetTree';\nimport TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';\nimport Tree, { type TreeItemName, type TreeItem } from '@rio-cloud/rio-uikit/Tree';\nimport TreeSummary from '@rio-cloud/rio-uikit/TreeSummary';\nimport TypeCounter from '@rio-cloud/rio-uikit/TypeCounter';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst CATEGORY_DRIVER = 'assets';\n\nconst drivers: TreeItem[] = [\n    {\n        id: '74e8eb86-18a1-4abe-90cb-aeee7909f857',\n        name: {\n            firstName: 'John',\n            lastName: 'Doe',\n        },\n        type: 'driver',\n    },\n    {\n        id: '3abc20f5-e0b6-42bb-b310-4e57fdd2be55',\n        name: {\n            firstName: 'Maxl',\n            lastName: 'Rainer',\n        },\n        type: 'driver',\n    },\n    {\n        id: '3abc20f5-e0b6-42bb-b310-4e57fdd2be56',\n        name: {\n            firstName: 'Johan',\n            lastName: 'Schmidt',\n        },\n        type: 'driver',\n    },\n];\n\nconst getTypeCounts = (items: TreeItem[]) => countBy(item => item.type, items);\n\nconst AssetTreeWithCustomSummaryExample = () => {\n    const [counters, setCounters] = useState({\n        driver: 3,\n        driverOut: 15,\n    });\n\n    const handleSearchChange = (searchValue: string) => {\n        const filteredDriver = drivers.filter(driver =>\n            `${(driver.name as TreeItemName).firstName} ${(driver.name as TreeItemName).lastName}`\n                .toLowerCase()\n                .includes(searchValue.toLowerCase())\n        );\n        const counts = getTypeCounts(filteredDriver);\n\n        setCounters({\n            ...counters,\n            driver: counts.driver,\n        });\n    };\n\n    return (\n        <div className='display-flex flex-wrap overflow-auto'>\n            <AssetTree\n                resizable\n                bordered\n                minWidth={300}\n                maxWidth={450}\n                currentCategoryId={CATEGORY_DRIVER}\n                height={500}\n                isOpen\n            >\n                <TreeCategory\n                    key={CATEGORY_DRIVER}\n                    id={CATEGORY_DRIVER}\n                    label='Driver'\n                    icon='rioglyph-driver'\n                    hasSelection={false}\n                >\n                    <div className='flex-1-1 display-flex flex-column justify-content-between'>\n                        <Tree\n                            summary={\n                                <TreeSummary>\n                                    <TypeCounter\n                                        icon='driver'\n                                        value={counters.driver}\n                                        enableActivity\n                                        type='driver'\n                                        onClick={(type: string) => Notification.default(`TypeCounter ${type} clicked`)}\n                                    />\n                                    <TypeCounter icon='drivercard-out' value={counters.driverOut} />\n                                </TreeSummary>\n                            }\n                            groups={[]}\n                            items={drivers}\n                            expandedGroups={[]}\n                            selectedGroups={[]}\n                            selectedItems={[]}\n                            searchPlaceholder='Find driver by name'\n                            onSearchChange={handleSearchChange}\n                            hasMultiselect={false}\n                        />\n                        <div className='margin-15 padding-10 rounded border1 border-color-lightest shadow-accent text-color-dark line-height-125rel'>\n                            Some small dummy text at the bottom to showcase that you can put something here\n                        </div>\n                    </div>\n                </TreeCategory>\n            </AssetTree>\n        </div>\n    );\n};\n\nexport default AssetTreeWithCustomSummaryExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap overflow-auto\">\n    <div class=\"AssetTree border fluid\" style=\"width: 350px; height: 500px;\">\n        <div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\">\n        </div>\n        <div class=\"AssetTreeContent\">\n            <div class=\"TreeSidebar\">\n                <ul class=\"TreeSidebarNavigation\">\n                    <li class=\"active\">\n                        <div class=\"selection-bubble\">\n                            <span class=\"rioglyph rioglyph-driver\">\n                            </span>\n                        </div>\n                    </li>\n                </ul>\n                <div class=\"TreeSidebarToggle\">\n                    <span class=\"rioglyph rioglyph-chevron-left\">\n                    </span>\n                </div>\n            </div>\n            <div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"flex-1-1 display-flex flex-column justify-content-between\">\n                            <div class=\"Tree\">\n                                <div class=\"TreeHeader\">\n                                    <div class=\"TreeSearch\">\n                                        <div class=\"input-group flex-1-0\">\n                                            <span class=\"input-group-addon\">\n                                                <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                                                </span>\n                                            </span>\n                                            <div class=\"ClearableInput input-group\">\n                                                <input placeholder=\"Find driver by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                                                <span class=\"clearButton hide\">\n                                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                                    </span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeHead display-flex gap-5 padding-15\">\n                                        <div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\">\n                                        </div>\n                                        <div class=\"display-flex justify-content-between align-items-start width-100pct\">\n                                            <div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n                                                <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                    <span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\">\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">3</span>\n                                                </div>\n                                                <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n                                                    <span class=\"rioglyph rioglyph-drivercard-out text-size-16 margin-right-2\">\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">15</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\">\n                                    <div class=\"TreeNodeContainer user-select-none overflow-hidden open\">\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"74e8eb86-18a1-4abe-90cb-aeee7909f857\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-driver\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">\n                                                        <span class=\"text-light margin-right-3\">John</span>\n                                                        <span>Doe</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"3abc20f5-e0b6-42bb-b310-4e57fdd2be55\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-driver\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">\n                                                        <span class=\"text-light margin-right-3\">Maxl</span>\n                                                        <span>Rainer</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                        <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"3abc20f5-e0b6-42bb-b310-4e57fdd2be56\">\n                                            <span class=\"TreeLabel TreeLabelName\">\n                                                <span class=\"rioglyph rioglyph-driver\">\n                                                </span>\n                                                <span class=\"TreeLabelNameText\">\n                                                    <span class=\"TreeLabelNameTextHeadline\">\n                                                        <span class=\"text-light margin-right-3\">Johan</span>\n                                                        <span>Schmidt</span>\n                                                    </span>\n                                                </span>\n                                            </span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"margin-15 padding-10 rounded border1 border-color-lightest shadow-accent text-color-dark line-height-125rel\">Some small dummy text at the bottom to showcase that you can put something here</div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Resizer resize-horizontal resize-right\">\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "AssetTree",
+                  "rows": [
+                    {
+                      "name": "fly",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the component will overlap the body content."
+                    },
+                    {
+                      "name": "resizable",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether or not the sidebar is resizable."
+                    },
+                    {
+                      "name": "onResizeEnd",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the resize is done."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the component has a border or not."
+                    },
+                    {
+                      "name": "width",
+                      "type": "string / number",
+                      "default": "350",
+                      "description": "Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "number",
+                      "default": "100",
+                      "description": "Defines the minimum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "maxWidth",
+                      "type": "number",
+                      "default": "0",
+                      "description": "Defines the maximum width of the component in px that will take effect when resizing."
+                    },
+                    {
+                      "name": "height",
+                      "type": "number",
+                      "default": "",
+                      "description": "Defines the height of the component in px."
+                    },
+                    {
+                      "name": "isOpen",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether the component is open or not."
+                    },
+                    {
+                      "name": "onToggleTree",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the tree visibility is toggled."
+                    },
+                    {
+                      "name": "currentCategoryId",
+                      "type": "string",
+                      "default": "",
+                      "description": "The id of the category which is currently active and shall be shown."
+                    },
+                    {
+                      "name": "onCategoryChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for handling change of category."
+                    },
+                    {
+                      "name": "useOffscreen",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the tree components are rendered offscreen and kept mounted in the DOM."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added on the wrapper element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "TreeCategory",
+                      "default": "",
+                      "description": "A list of TreeCategory components"
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeCategory",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier for that category."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "The rioglyph icon name for that category."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The optional label for the category which will be shown in a tooltip."
+                    },
+                    {
+                      "name": "hasSelection",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether or not a selection indicator should be shown."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Tree",
+                  "rows": [
+                    {
+                      "name": "groups",
+                      "type": "Array of objects",
+                      "default": "[]",
+                      "description": "The list of groups of the items. If no groups are provided all items are rendered as flat list."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of a group."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of a group."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted."
+                    },
+                    {
+                      "name": "└position",
+                      "type": "string",
+                      "default": "",
+                      "description": "Can be set to \"last\" to enforce the last position in the tree."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Disallows the selection of the group itself."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the group element."
+                    },
+                    {
+                      "name": "items",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "The list of items."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of an item."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "string / object",
+                      "default": "",
+                      "description": "The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory"
+                    },
+                    {
+                      "name": "└info",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The subline of an item."
+                    },
+                    {
+                      "name": "└type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix)."
+                    },
+                    {
+                      "name": "└subType",
+                      "type": "string",
+                      "default": "",
+                      "description": "The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string | null",
+                      "default": "",
+                      "description": "Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons."
+                    },
+                    {
+                      "name": "└groupIds",
+                      "type": "Array of strings",
+                      "default": "[]",
+                      "description": "List of group ids the items is associated with."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the item element."
+                    },
+                    {
+                      "name": "selectedGroups",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected group ids."
+                    },
+                    {
+                      "name": "selectedItems",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected item ids."
+                    },
+                    {
+                      "name": "onSelectionChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] }"
+                    },
+                    {
+                      "name": "hasMultiselect",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines the selection behavior of the tree."
+                    },
+                    {
+                      "name": "showRadioButtons",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the single selection should also show radios."
+                    },
+                    {
+                      "name": "hideSearch",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the built-in Search is shown."
+                    },
+                    {
+                      "name": "searchPlaceholder",
+                      "type": "string",
+                      "default": "",
+                      "description": "The text used as placeholder for the search input."
+                    },
+                    {
+                      "name": "onSearchChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "search",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom custom search component which replaces the built-in search."
+                    },
+                    {
+                      "name": "onTypeFilterChange",
+                      "type": "(currentTypes: string[]) => void",
+                      "default": "",
+                      "description": "Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used."
+                    },
+                    {
+                      "name": "summary",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom asset type counter component which replaces the built-in summary."
+                    },
+                    {
+                      "name": "hideSummary",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether a summary is shown."
+                    },
+                    {
+                      "name": "hideTreeHead",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary."
+                    },
+                    {
+                      "name": "treeHeaderContent",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional custom content that is rendered at the top of the tree component. This can be used for nav pills."
+                    },
+                    {
+                      "name": "scrollHeight",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the max-height of the scrollable list"
+                    },
+                    {
+                      "name": "expandedGroups",
+                      "type": "Array of String",
+                      "default": "",
+                      "description": "List of group ids which are expanded."
+                    },
+                    {
+                      "name": "onExpandGroupsChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when a group expands or collapses."
+                    },
+                    {
+                      "name": "showEmptyGroups",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether empty groups are shown or not."
+                    },
+                    {
+                      "name": "treeOptions",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Component to offer customization options for the tree."
+                    },
+                    {
+                      "name": "treeOptionsTooltip",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Tooltip content for the tree options dropdown."
+                    },
+                    {
+                      "name": "virtualizeThreshold",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The number of items (including groups and children) used for virtualizing the tree."
+                    },
+                    {
+                      "name": "overscan",
+                      "type": "number",
+                      "default": "5",
+                      "description": "The number of items rendered beyond the visible area of a virtualized tree."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSearch",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The search value to be shown and used for the search."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The placeholder text used for the input field."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummary",
+                  "rows": [
+                    {
+                      "name": "assetCounts",
+                      "type": "object",
+                      "default": "",
+                      "description": "The object containing various asset type counter."
+                    },
+                    {
+                      "name": "└truck",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trucks."
+                    },
+                    {
+                      "name": "└trailer",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trailers."
+                    },
+                    {
+                      "name": "└bus",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of buses."
+                    },
+                    {
+                      "name": "└van",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of vans."
+                    },
+                    {
+                      "name": "└driver",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of drivers."
+                    },
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "The number of grid columns used for the built-in TreeSummaryRow"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeSummaryRow",
+                  "rows": [
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TypeCounter",
+                  "rows": [
+                    {
+                      "name": "type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The item type for that counter. This will be used as a return value for the onClick callback."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type."
+                    },
+                    {
+                      "name": "isActive",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Sets the active styling if active."
+                    },
+                    {
+                      "name": "hasFilter",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Should be set when there is a type filter set in the tree to style the counter accordingly."
+                    },
+                    {
+                      "name": "enableActivity",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Allows for interactivity. Use this prop when you allow clicking on the counter."
+                    },
+                    {
+                      "name": "hideOnZero",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the counter is rendered at all when the value is not defined ot 0."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "A custom value to be shown in the counter."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TreeOption",
+                  "rows": [
+                    {
+                      "name": "isChecked",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Defines whether the option is set."
+                    },
+                    {
+                      "name": "label",
+                      "type": "string / node",
+                      "default": "",
+                      "description": "The label for the option."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback triggered when option is selected."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Tree",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Tree with header and search",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap gap-25 overflow-auto\"><div class=\"width-500\"><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Tree with header and search</div><div class=\"Tree\"><div class=\"TreeHeader\"><div class=\"TreeSearch\"><div class=\"input-group flex-1-0\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Find file\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"TreeHead display-flex gap-5 padding-15\"><div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\"></div><div class=\"display-flex justify-content-between align-items-start width-100pct\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-files text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">20</span></div></div></div></div></div><div class=\"TreeRoot user-select-none overflow-auto\" style=\"max-height: 300px; position: relative;\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"1\"><div class=\"TreeNode from-group\" data-key=\"1\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-open\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 01</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"2\"><div class=\"TreeNode from-group\" data-key=\"2\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-open\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 02</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">5</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"3\"><div class=\"TreeNode from-group\" data-key=\"3\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-open\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 03</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">4</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"4\"><div class=\"TreeNode from-group\" data-key=\"4\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-open\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 04</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">8</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\" style=\"position: absolute; top: 25px; left: 0px; width: 500px; height: 105px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></div></div></div></div></div><div><div class=\"h6\">Selected items:</div><ul></ul><div class=\"h6\">Expanded folders:</div><ul></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport random from 'lodash/fp/random';\nimport faker from 'faker';\n\nimport Tree, { type TreeItem, type TreeGroup, type SelectionChangeResponse } from '@rio-cloud/rio-uikit/Tree';\nimport LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';\n\nconst folders: TreeGroup[] = [\n    {\n        id: '1',\n        name: 'Folder 01',\n        icon: 'folder-open',\n    },\n    {\n        id: '2',\n        name: 'Folder 02',\n        icon: 'folder-open',\n    },\n    {\n        id: '3',\n        name: 'Folder 03',\n        icon: 'folder-open',\n    },\n    {\n        id: '4',\n        name: 'Folder 04',\n        icon: 'folder-open',\n    },\n];\n\nconst treeItems: TreeItem[] = Array.from({ length: 20 }, (_, index) => ({\n    id: `${index}`,\n    name: `${faker.random.words()} ${random(100, 999)}`,\n    type: 'files',\n    icon: 'files',\n    // icon: null,  // Set to \"null\" to omit the icon\n    groupIds: [faker.random.arrayElement(folders).id],\n}));\n\nconst TreeOnlyExample = () => {\n    const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);\n    const [expandedFolders, setExpandedFolders] = useState<string[]>([]);\n\n    const handleSelection = ({ items }: SelectionChangeResponse) => {\n        setSelectedItemIds(items);\n    };\n\n    const handleExpandFolder = (newExpandedFolders: string[]) => setExpandedFolders(newExpandedFolders);\n\n    const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) => {\n        return itemIds.map(selectedItemId => {\n            const result = list.find(listItem => listItem.id === selectedItemId);\n            if (result) {\n                return <li key={selectedItemId}>{`${result.name}`}</li>;\n            }\n        });\n    };\n\n    return (\n        <div className='display-flex flex-wrap gap-25 overflow-auto'>\n            <div className='width-500'>\n                <LabeledElement label='Tree with header and search'>\n                    <Tree\n                        groups={folders}\n                        items={treeItems}\n                        expandedGroups={expandedFolders}\n                        onExpandGroupsChange={handleExpandFolder}\n                        selectedItems={selectedItemIds}\n                        onSelectionChange={handleSelection}\n                        searchPlaceholder='Find file'\n                        scrollHeight={300}\n                        hasMultiselect={false}\n                    />\n                </LabeledElement>\n            </div>\n            <div>\n                <div className='h6'>Selected items:</div>\n                <ul>{renderSelectedItemsOfList(selectedItemIds, treeItems)}</ul>\n                <div className='h6'>Expanded folders:</div>\n                <ul>{renderSelectedItemsOfList(expandedFolders, folders)}</ul>\n            </div>\n        </div>\n    );\n};\n\nexport default TreeOnlyExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap gap-25 overflow-auto\">\n    <div class=\"width-500\">\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-5\">Tree with header and search</div>\n            <div class=\"Tree\">\n                <div class=\"TreeHeader\">\n                    <div class=\"TreeSearch\">\n                        <div class=\"input-group flex-1-0\">\n                            <span class=\"input-group-addon\">\n                                <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                                </span>\n                            </span>\n                            <div class=\"ClearableInput input-group\">\n                                <input placeholder=\"Find file\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                                <span class=\"clearButton hide\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"TreeHead display-flex gap-5 padding-15\">\n                        <div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\">\n                        </div>\n                        <div class=\"display-flex justify-content-between align-items-start width-100pct\">\n                            <div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n                                <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n                                    <span class=\"rioglyph rioglyph-files text-size-16 margin-right-2\">\n                                    </span>\n                                    <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">20</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"TreeRoot user-select-none overflow-auto\" style=\"max-height: 300px; position: relative;\">\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"1\">\n                        <div class=\"TreeNode from-group\" data-key=\"1\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-open\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 01</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"2\">\n                        <div class=\"TreeNode from-group\" data-key=\"2\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-open\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 02</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">5</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"3\">\n                        <div class=\"TreeNode from-group\" data-key=\"3\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-open\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 03</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">4</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"4\">\n                        <div class=\"TreeNode from-group\" data-key=\"4\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-open\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 04</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">8</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div>\n        <div class=\"h6\">Selected items:</div>\n        <ul>\n        </ul>\n        <div class=\"h6\">Expanded folders:</div>\n        <ul>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "groups",
+                      "type": "Array of objects",
+                      "default": "[]",
+                      "description": "The list of groups of the items. If no groups are provided all items are rendered as flat list."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of a group."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of a group."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted."
+                    },
+                    {
+                      "name": "└position",
+                      "type": "string",
+                      "default": "",
+                      "description": "Can be set to \"last\" to enforce the last position in the tree."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Disallows the selection of the group itself."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the group element."
+                    },
+                    {
+                      "name": "items",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "The list of items."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of an item."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "string / object",
+                      "default": "",
+                      "description": "The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory"
+                    },
+                    {
+                      "name": "└info",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The subline of an item."
+                    },
+                    {
+                      "name": "└type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix)."
+                    },
+                    {
+                      "name": "└subType",
+                      "type": "string",
+                      "default": "",
+                      "description": "The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string | null",
+                      "default": "",
+                      "description": "Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons."
+                    },
+                    {
+                      "name": "└groupIds",
+                      "type": "Array of strings",
+                      "default": "[]",
+                      "description": "List of group ids the items is associated with."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the item element."
+                    },
+                    {
+                      "name": "selectedGroups",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected group ids."
+                    },
+                    {
+                      "name": "selectedItems",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected item ids."
+                    },
+                    {
+                      "name": "onSelectionChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] }"
+                    },
+                    {
+                      "name": "hasMultiselect",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines the selection behavior of the tree."
+                    },
+                    {
+                      "name": "showRadioButtons",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the single selection should also show radios."
+                    },
+                    {
+                      "name": "hideSearch",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the built-in Search is shown."
+                    },
+                    {
+                      "name": "searchPlaceholder",
+                      "type": "string",
+                      "default": "",
+                      "description": "The text used as placeholder for the search input."
+                    },
+                    {
+                      "name": "onSearchChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "search",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom custom search component which replaces the built-in search."
+                    },
+                    {
+                      "name": "onTypeFilterChange",
+                      "type": "(currentTypes: string[]) => void",
+                      "default": "",
+                      "description": "Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used."
+                    },
+                    {
+                      "name": "summary",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom asset type counter component which replaces the built-in summary."
+                    },
+                    {
+                      "name": "hideSummary",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether a summary is shown."
+                    },
+                    {
+                      "name": "hideTreeHead",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary."
+                    },
+                    {
+                      "name": "treeHeaderContent",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional custom content that is rendered at the top of the tree component. This can be used for nav pills."
+                    },
+                    {
+                      "name": "scrollHeight",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the max-height of the scrollable list"
+                    },
+                    {
+                      "name": "expandedGroups",
+                      "type": "Array of String",
+                      "default": "",
+                      "description": "List of group ids which are expanded."
+                    },
+                    {
+                      "name": "onExpandGroupsChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when a group expands or collapses."
+                    },
+                    {
+                      "name": "showEmptyGroups",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether empty groups are shown or not."
+                    },
+                    {
+                      "name": "treeOptions",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Component to offer customization options for the tree."
+                    },
+                    {
+                      "name": "treeOptionsTooltip",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Tooltip content for the tree options dropdown."
+                    },
+                    {
+                      "name": "virtualizeThreshold",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The number of items (including groups and children) used for virtualizing the tree."
+                    },
+                    {
+                      "name": "overscan",
+                      "type": "number",
+                      "default": "5",
+                      "description": "The number of items rendered beyond the visible area of a virtualized tree."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Tree without header and search",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap gap-25 overflow-auto\"><div class=\"width-500\"><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Tree without header and search</div><div class=\"Tree\"><div class=\"TreeHeader\"></div><div class=\"TreeRoot user-select-none overflow-auto\" style=\"max-height: 300px; position: relative;\"><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"1\"><div class=\"TreeNode from-group\" data-key=\"1\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-closed\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 01</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">7</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"2\"><div class=\"TreeNode from-group\" data-key=\"2\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-closed\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 02</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"3\"><div class=\"TreeNode from-group\" data-key=\"3\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-closed\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 03</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">7</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"4\"><div class=\"TreeNode from-group\" data-key=\"4\"><span class=\"TreeLabel TreeLabelName\"><span class=\"rioglyph rioglyph-folder-closed\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Folder 04</span></span><span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\" style=\"position: absolute; top: 16px; left: 0px; width: 500px; height: 105px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></div></div></div></div></div><div><div class=\"h6\">Selected items:</div><ul></ul><div class=\"h6\">Expanded folders:</div><ul></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport random from 'lodash/fp/random';\nimport faker from 'faker';\n\nimport Tree, { type TreeItem, type TreeGroup, type SelectionChangeResponse } from '@rio-cloud/rio-uikit/Tree';\nimport LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';\n\nconst folders2: TreeGroup[] = [\n    {\n        id: '1',\n        name: 'Folder 01',\n        icon: 'folder-closed',\n        expandedIcon: 'folder-open',\n    },\n    {\n        id: '2',\n        name: 'Folder 02',\n        icon: 'folder-closed',\n        expandedIcon: 'folder-open',\n    },\n    {\n        id: '3',\n        name: 'Folder 03',\n        icon: 'folder-closed',\n        expandedIcon: 'folder-open',\n    },\n    {\n        id: '4',\n        name: 'Folder 04',\n        icon: 'folder-closed',\n        expandedIcon: 'folder-open',\n    },\n];\n\nconst treeItems2: TreeItem[] = Array.from({ length: 20 }, (_, index) => ({\n    id: `${index}`,\n    name: `${faker.random.words()} ${random(100, 999)}`,\n    type: 'files',\n    icon: null, // Set to \"null\" to omit the icon\n    groupIds: [faker.random.arrayElement(folders2).id],\n}));\n\nconst TreeOnlyExample = () => {\n    const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);\n    const [expandedFolders, setExpandedFolders] = useState<string[]>([]);\n\n    const handleSelection = ({ items }: SelectionChangeResponse) => {\n        setSelectedItemIds(items);\n    };\n\n    const handleExpandFolder = (newExpandedFolders: string[]) => setExpandedFolders(newExpandedFolders);\n\n    const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) => {\n        return itemIds.map(selectedItemId => {\n            const result = list.find(listItem => listItem.id === selectedItemId);\n            if (result) {\n                return <li key={selectedItemId}>{`${result.name}`}</li>;\n            }\n        });\n    };\n\n    return (\n        <div className='display-flex flex-wrap gap-25 overflow-auto'>\n            <div className='width-500'>\n                <LabeledElement label='Tree without header and search'>\n                    <Tree\n                        groups={folders2}\n                        items={treeItems2}\n                        expandedGroups={expandedFolders}\n                        onExpandGroupsChange={handleExpandFolder}\n                        selectedItems={selectedItemIds}\n                        onSelectionChange={handleSelection}\n                        scrollHeight={300}\n                        hasMultiselect={false}\n                        hideSearch={true}\n                        hideTreeHead={true}\n                    />\n                </LabeledElement>\n            </div>\n            <div>\n                <div className='h6'>Selected items:</div>\n                <ul>{renderSelectedItemsOfList(selectedItemIds, treeItems2)}</ul>\n                <div className='h6'>Expanded folders:</div>\n                <ul>{renderSelectedItemsOfList(expandedFolders, folders2)}</ul>\n            </div>\n        </div>\n    );\n};\n\nexport default TreeOnlyExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap gap-25 overflow-auto\">\n    <div class=\"width-500\">\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-5\">Tree without header and search</div>\n            <div class=\"Tree\">\n                <div class=\"TreeHeader\">\n                </div>\n                <div class=\"TreeRoot user-select-none overflow-auto\" style=\"max-height: 300px; position: relative;\">\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"1\">\n                        <div class=\"TreeNode from-group\" data-key=\"1\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-closed\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 01</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">7</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"2\">\n                        <div class=\"TreeNode from-group\" data-key=\"2\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-closed\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 02</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"3\">\n                        <div class=\"TreeNode from-group\" data-key=\"3\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-closed\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 03</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">7</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"4\">\n                        <div class=\"TreeNode from-group\" data-key=\"4\">\n                            <span class=\"TreeLabel TreeLabelName\">\n                                <span class=\"rioglyph rioglyph-folder-closed\">\n                                </span>\n                                <span class=\"TreeLabelNameText\">\n                                    <span class=\"TreeLabelNameTextHeadline\">Folder 04</span>\n                                </span>\n                                <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">3</span>\n                                <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div>\n        <div class=\"h6\">Selected items:</div>\n        <ul>\n        </ul>\n        <div class=\"h6\">Expanded folders:</div>\n        <ul>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "groups",
+                      "type": "Array of objects",
+                      "default": "[]",
+                      "description": "The list of groups of the items. If no groups are provided all items are rendered as flat list."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of a group."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of a group."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted."
+                    },
+                    {
+                      "name": "└position",
+                      "type": "string",
+                      "default": "",
+                      "description": "Can be set to \"last\" to enforce the last position in the tree."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Disallows the selection of the group itself."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the group element."
+                    },
+                    {
+                      "name": "items",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "The list of items."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unique identifier of an item."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "string / object",
+                      "default": "",
+                      "description": "The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory"
+                    },
+                    {
+                      "name": "└info",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The subline of an item."
+                    },
+                    {
+                      "name": "└type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix)."
+                    },
+                    {
+                      "name": "└subType",
+                      "type": "string",
+                      "default": "",
+                      "description": "The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "string | null",
+                      "default": "",
+                      "description": "Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons."
+                    },
+                    {
+                      "name": "└groupIds",
+                      "type": "Array of strings",
+                      "default": "[]",
+                      "description": "List of group ids the items is associated with."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the item element."
+                    },
+                    {
+                      "name": "selectedGroups",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected group ids."
+                    },
+                    {
+                      "name": "selectedItems",
+                      "type": "Array of strings",
+                      "default": "",
+                      "description": "List of selected item ids."
+                    },
+                    {
+                      "name": "onSelectionChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] }"
+                    },
+                    {
+                      "name": "hasMultiselect",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines the selection behavior of the tree."
+                    },
+                    {
+                      "name": "showRadioButtons",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the single selection should also show radios."
+                    },
+                    {
+                      "name": "hideSearch",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the built-in Search is shown."
+                    },
+                    {
+                      "name": "searchPlaceholder",
+                      "type": "string",
+                      "default": "",
+                      "description": "The text used as placeholder for the search input."
+                    },
+                    {
+                      "name": "onSearchChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the search value changes."
+                    },
+                    {
+                      "name": "search",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom custom search component which replaces the built-in search."
+                    },
+                    {
+                      "name": "onTypeFilterChange",
+                      "type": "(currentTypes: string[]) => void",
+                      "default": "",
+                      "description": "Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used."
+                    },
+                    {
+                      "name": "summary",
+                      "type": "node",
+                      "default": "",
+                      "description": "Used to define custom asset type counter component which replaces the built-in summary."
+                    },
+                    {
+                      "name": "hideSummary",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether a summary is shown."
+                    },
+                    {
+                      "name": "hideTreeHead",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary."
+                    },
+                    {
+                      "name": "treeHeaderContent",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional custom content that is rendered at the top of the tree component. This can be used for nav pills."
+                    },
+                    {
+                      "name": "scrollHeight",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the max-height of the scrollable list"
+                    },
+                    {
+                      "name": "expandedGroups",
+                      "type": "Array of String",
+                      "default": "",
+                      "description": "List of group ids which are expanded."
+                    },
+                    {
+                      "name": "onExpandGroupsChange",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when a group expands or collapses."
+                    },
+                    {
+                      "name": "showEmptyGroups",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Defines whether empty groups are shown or not."
+                    },
+                    {
+                      "name": "treeOptions",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Component to offer customization options for the tree."
+                    },
+                    {
+                      "name": "treeOptionsTooltip",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Tooltip content for the tree options dropdown."
+                    },
+                    {
+                      "name": "virtualizeThreshold",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The number of items (including groups and children) used for virtualizing the tree."
+                    },
+                    {
+                      "name": "overscan",
+                      "type": "number",
+                      "default": "5",
+                      "description": "The number of items rendered beyond the visible area of a virtualized tree."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "TreeSummary with assetCounts",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 7",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TreeSummaryRow display-grid grid-cols-5 gap-10\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-truck-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">12</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-trailer-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">7</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-bus-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-van-baseline text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">10</span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import TreeSummary from '@rio-cloud/rio-uikit/TreeSummary';\n\nconst assetCounts = {\n    truck: 12,\n    trailer: 7,\n    bus: 2,\n    van: 2,\n    driver: 10,\n};\n\nconst TreeSummaryExample = () => <TreeSummary assetCounts={assetCounts} gridCols={5} />;\n\nexport default TreeSummaryExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n    <div class=\"TreeSummaryRow display-grid grid-cols-5 gap-10\">\n        <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n            <span class=\"rioglyph rioglyph-truck-baseline text-size-16 margin-right-2\">\n            </span>\n            <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">12</span>\n        </div>\n        <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n            <span class=\"rioglyph rioglyph-trailer-baseline text-size-16 margin-right-2\">\n            </span>\n            <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">7</span>\n        </div>\n        <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n            <span class=\"rioglyph rioglyph-bus-baseline text-size-16 margin-right-2\">\n            </span>\n            <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span>\n        </div>\n        <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n            <span class=\"rioglyph rioglyph-van-baseline text-size-16 margin-right-2\">\n            </span>\n            <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span>\n        </div>\n        <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n            <span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\">\n            </span>\n            <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">10</span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "TreeSummary",
+                  "rows": [
+                    {
+                      "name": "assetCounts",
+                      "type": "object",
+                      "default": "",
+                      "description": "The object containing various asset type counter."
+                    },
+                    {
+                      "name": "└truck",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trucks."
+                    },
+                    {
+                      "name": "└trailer",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trailers."
+                    },
+                    {
+                      "name": "└bus",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of buses."
+                    },
+                    {
+                      "name": "└van",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of vans."
+                    },
+                    {
+                      "name": "└driver",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of drivers."
+                    },
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "The number of grid columns used for the built-in TreeSummaryRow"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TypeCounter",
+                  "rows": [
+                    {
+                      "name": "type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The item type for that counter. This will be used as a return value for the onClick callback."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type."
+                    },
+                    {
+                      "name": "isActive",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Sets the active styling if active."
+                    },
+                    {
+                      "name": "hasFilter",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Should be set when there is a type filter set in the tree to style the counter accordingly."
+                    },
+                    {
+                      "name": "enableActivity",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Allows for interactivity. Use this prop when you allow clicking on the counter."
+                    },
+                    {
+                      "name": "hideOnZero",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the counter is rendered at all when the value is not defined ot 0."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "A custom value to be shown in the counter."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "TreeSummary with TypeCounter",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 8",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\"><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">9</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\"><span class=\"rioglyph rioglyph-drivercard-out text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">15</span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import TreeSummary from '@rio-cloud/rio-uikit/TreeSummary';\nimport TypeCounter from '@rio-cloud/rio-uikit/TypeCounter';\n\nconst TreeSummaryCustomExample = () => (\n    <TreeSummary>\n        <TypeCounter icon='driver' value={9} />\n        <TypeCounter icon='drivercard-out' value={15} />\n    </TreeSummary>\n);\n\nexport default TreeSummaryCustomExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n        <span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\">\n        </span>\n        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">9</span>\n    </div>\n    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n        <span class=\"rioglyph rioglyph-drivercard-out text-size-16 margin-right-2\">\n        </span>\n        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">15</span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "TreeSummary",
+                  "rows": [
+                    {
+                      "name": "assetCounts",
+                      "type": "object",
+                      "default": "",
+                      "description": "The object containing various asset type counter."
+                    },
+                    {
+                      "name": "└truck",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trucks."
+                    },
+                    {
+                      "name": "└trailer",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of trailers."
+                    },
+                    {
+                      "name": "└bus",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of buses."
+                    },
+                    {
+                      "name": "└van",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of vans."
+                    },
+                    {
+                      "name": "└driver",
+                      "type": "number",
+                      "default": "",
+                      "description": "The amount of drivers."
+                    },
+                    {
+                      "name": "gridCols",
+                      "type": "number",
+                      "default": "4",
+                      "description": "The number of grid columns used for the built-in TreeSummaryRow"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "TypeCounter",
+                  "rows": [
+                    {
+                      "name": "type",
+                      "type": "string",
+                      "default": "",
+                      "description": "The item type for that counter. This will be used as a return value for the onClick callback."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type."
+                    },
+                    {
+                      "name": "isActive",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Sets the active styling if active."
+                    },
+                    {
+                      "name": "hasFilter",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Should be set when there is a type filter set in the tree to style the counter accordingly."
+                    },
+                    {
+                      "name": "enableActivity",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Allows for interactivity. Use this prop when you allow clicking on the counter."
+                    },
+                    {
+                      "name": "hideOnZero",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the counter is rendered at all when the value is not defined ot 0."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "A custom value to be shown in the counter."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}