diff --git a/dist/style.scss b/dist/style.scss
index e0360803..1cebd9de 100644
--- a/dist/style.scss
+++ b/dist/style.scss
@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.1.0-alpha2 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.1.2-alpha2 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 
diff --git a/dist/styles/_general.scss b/dist/styles/_general.scss
index 815e9b79..8281bfda 100644
--- a/dist/styles/_general.scss
+++ b/dist/styles/_general.scss
@@ -1,4 +1,9 @@
-@include custom-scrollbar($scrollbar-thumb-color, transparent, false);
+@include blue-custom-scrollbar(
+    transparent,
+    rgba($scrollbar-thumb-color, 0.5),
+    rgba($scrollbar-thumb-color, 0.6),
+    rgba($scrollbar-thumb-color, 0.7)
+);
 
 * {
     scrollbar-width: thin;
diff --git a/dist/styles/_layout.scss b/dist/styles/_layout.scss
index 31c1cec6..c82c9e36 100644
--- a/dist/styles/_layout.scss
+++ b/dist/styles/_layout.scss
@@ -114,7 +114,13 @@
 .blue-normal-scrollbar,
 .modal-body,
 .blue-page {
-    @include custom-scrollbar($body-color, $body-bg, 0.3rem);
+    @include blue-custom-scrollbar(
+        var(--bs-body-bg, #{$body-bg}),
+        var(--bs-tertiary-color, #{$body-color}),
+        var(--bs-secondary-color, #{$body-color}),
+        var(--bs-body-color, #{$body-color}),
+        0.3rem
+    );
 }
 
 .blue-page {
@@ -203,7 +209,13 @@
 }
 
 .blue-sidebar {
-    @include custom-scrollbar($sidebar-color, var(--blue-sidebar-bg), 0.3rem);
+    @include blue-custom-scrollbar(
+        var(--blue-sidebar-bg),
+        rgba($sidebar-color, 0.5),
+        rgba($sidebar-color, 0.6),
+        rgba($sidebar-color, 0.7),
+        0.3rem
+    );
     overflow-y: auto;
 }
 
diff --git a/dist/styles/_status.scss b/dist/styles/_status.scss
index cb2f684e..25c0cfb3 100644
--- a/dist/styles/_status.scss
+++ b/dist/styles/_status.scss
@@ -15,7 +15,7 @@
 }
 
 .blue-status-alert {
-    @include custom-scrollbar(white, rgba(black, 0.5), 0.3rem);
+    @extend .blue-normal-scrollbar;
 
     &:after {
         content: "";
@@ -26,11 +26,7 @@
         top: 50%;
         left: 0;
         pointer-events: none;
-        background-image: radial-gradient(
-            circle,
-            rgba(black, 0.7) 10%,
-            transparent 10.01%
-        );
+        background-image: radial-gradient(circle, rgba(black, 0.7) 10%, transparent 10.01%);
         background-repeat: no-repeat;
         background-position: 50%;
         animation: alert-in 1s;
diff --git a/dist/styles/mixins/_misc.scss b/dist/styles/mixins/_misc.scss
index 1ed4bdd4..626ca077 100644
--- a/dist/styles/mixins/_misc.scss
+++ b/dist/styles/mixins/_misc.scss
@@ -1,13 +1,32 @@
+/**
+@deprecated Will be removed in a future version. Please use `blue-custom-scrollbar` instead!
+*/
 @mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
+    @include blue-custom-scrollbar(
+        $bg-color,
+        rgba($thumb-color, 0.5),
+        rgba($thumb-color, 0.6),
+        rgba($thumb-color, 0.7),
+        $track-border-radius
+    );
+}
+
+@mixin blue-custom-scrollbar(
+    $bg-color,
+    $thumb-color,
+    $thumb-color-hover: $thumb-color,
+    $thumb-color-focus: $thumb-color,
+    $track-border-radius: 0
+) {
     ::-webkit-scrollbar-thumb {
-        background-color: rgba($thumb-color, 0.5);
-        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.2), inset 0 -1px 0 rgba($thumb-color, 0.17);
+        background-color: $thumb-color;
+        box-shadow: inset 1px 1px 0 rgba(white, 0.2), inset 0 -1px 0 rgba(white, 0.17);
     }
     ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba($thumb-color, 0.6);
+        background-color: $thumb-color-hover;
     }
     ::-webkit-scrollbar-thumb:active {
-        background-color: rgba($thumb-color, 0.7);
+        background-color: $thumb-color-focus;
     }
 
     ::-webkit-scrollbar-track {
diff --git a/package-lock.json b/package-lock.json
index 5499a16f..88a2ffd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "blue-react",
-    "version": "9.1.0",
+    "version": "9.1.2",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "blue-react",
-            "version": "9.1.0",
+            "version": "9.1.2",
             "license": "LGPL-3.0-or-later",
             "dependencies": {
                 "@popperjs/core": "^2.11.5",
diff --git a/package.json b/package.json
index f858f085..97731947 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "9.1.0",
+    "version": "9.1.2",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 4345d776..43f9db2b 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -43,6 +43,11 @@ export interface MenuItemProps {
      */
     label?: any
 
+    /**
+     * Addition to class name of label wrapper element
+     */
+    labelClassName?: string
+
     /**
      * Should be set as active.
      */
@@ -260,19 +265,25 @@ export default function MenuItem(props: MenuItemProps) {
                     type: props.type
                 },
                 <>
-                    <span
-                        className={clsx("blue-menu-item-icon", props.iconClassName, {
-                            hasIconForActive: iconForActive
-                        })}
-                    >
-                        {icon}
-                    </span>
+                    {props.icon !== undefined && (
+                        <span
+                            className={clsx("blue-menu-item-icon", props.iconClassName, {
+                                hasIconForActive: iconForActive
+                            })}
+                        >
+                            {icon}
+                        </span>
+                    )}
                     {iconForActive && (
                         <span className={clsx("blue-menu-item-icon iconForActive", props.iconClassName)}>
                             {iconForActive}
                         </span>
                     )}
-                    {props.label && <span className="blue-menu-item-label text-truncate">{props.label}</span>}
+                    {props.label && (
+                        <span className={clsx("blue-menu-item-label text-truncate", props.labelClassName)}>
+                            {props.label}
+                        </span>
+                    )}
                     {props.children && (
                         <Caret open={showDropdown} mirrored className="blue-menu-item-dropdown-caret mt-2" />
                     )}
diff --git a/src/docs/data/docs.json b/src/docs/data/docs.json
index 1a317f2f..7e56d4f7 100644
--- a/src/docs/data/docs.json
+++ b/src/docs/data/docs.json
@@ -1 +1 @@
-{"src\\components\\ActionMenu.tsx":{"description":"The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.","displayName":"ActionMenu","methods":[],"props":{"hideToggleAction":{"required":false,"tsType":{"name":"boolean"},"description":"Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"toggleIcon":{"required":false,"tsType":{"name":"any"},"description":"Icon component for the toggle icon."},"className":{"required":false,"tsType":{"name":"string"},"description":""},"break":{"required":false,"tsType":{"name":"union","raw":"breakOption | \"none\"","elements":[{"name":"breakOption"},{"name":"literal","value":"\"none\""}]},"description":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Link } from \"react-router-dom\"\r\n\r\nexport default function ActionMenuExample() {\r\n    const [isChecked, setIsChecked] = useState(false)\r\n    const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n    const style = {\r\n        width: isChecked && window.innerWidth > 600 ? \"600px\" : \"\"\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <div className=\"d-flex align-items-center mb-1\">\r\n                <div className=\"form-check form-switch d-inline-block w-auto\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        className=\"form-check-input\"\r\n                        role=\"switch\"\r\n                        id=\"Example-ActionMenu-checkbox\"\r\n                        onChange={toggleIsChecked}\r\n                    />\r\n                    <label htmlFor=\"Example-ActionMenu-checkbox\">Mobile</label>\r\n                </div>\r\n                <Link to=\"/action-menu-example\" className=\"btn btn-link\">\r\n                    Open in full view\r\n                </Link>{\" \"}\r\n                <Link to=\"/action-menu-example\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"btn btn-link\">\r\n                    Open in new tab\r\n                </Link>\r\n            </div>\r\n            <div className=\"ratio ratio-16x9\">\r\n                <iframe src={`${process.env.PUBLIC_URL}/action-menu-example`} style={style} title=\"Actions Demo page\" />\r\n                {/**\r\n                 * See the source code of the iframe page on:\r\n                 * https://github.com/bruegmann/blue-react/blob/master/src/docs/pages/ActionMenuExamplePage.tsx\r\n                 */}\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\ActionMenuSwitch.tsx":{"description":"@deprecated\r\nUse a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.\r\nSwitch for the Action Menu.","displayName":"ActionMenuSwitch","methods":[],"props":{"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"label":{"required":false,"tsType":{"name":"any"},"description":""}},"composes":["SwitchProps"]},"src\\components\\Body.tsx":{"description":"Contains the content of the page.","displayName":"Body","methods":[],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"containerClass":{"required":false,"tsType":{"name":"string"},"description":"Class name for the container. More info: https://getbootstrap.com/docs/4.0/layout/overview/#containers"},"hasActions":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` if this page uses `<Actions />`, so this component will get enough padding to avoid overlapping of the content."},"break":{"required":false,"tsType":{"name":"breakOption"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: any) => void","signature":{"arguments":[{"name":"event","type":{"name":"any"}}],"return":{"name":"void"}}},"description":""},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Caret.tsx":{"description":"Caret icon component.","displayName":"Caret","methods":[],"props":{"open":{"required":false,"tsType":{"name":"boolean"},"description":"Indicates if open or not."},"mirrored":{"required":false,"tsType":{"name":"boolean"},"description":"By default the caret points to the right when closed. Set mirrored and it will point to the left."},"className":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import React from \"react\"\r\nimport { Caret } from \"blue-react\"\r\n\r\nclass CaretExample extends React.Component {\r\n    constructor() {\r\n        super()\r\n\r\n        this.state = {\r\n            isOpen: false\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                <button\r\n                    className=\"btn btn-secondary\"\r\n                    onClick={() =>\r\n                        this.setState({ isOpen: !this.state.isOpen })\r\n                    }\r\n                >\r\n                    <Caret open={this.state.isOpen} />{\" \"}\r\n                    <span>Click to toggle the caret</span>\r\n                </button>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default CaretExample\r\n"},"src\\components\\Header.tsx":{"description":"The top of a page.","displayName":"Header","methods":[],"props":{"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\HeaderTitle.tsx":{"description":"The title area at the header bar.\r\nDepending on its content, the document's title will be set aswell (what will be shown in the browser title bar).","displayName":"HeaderTitle","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"appTitle":{"required":false,"tsType":{"name":"string"},"description":"Text next to the logo."},"keepAppTitle":{"required":false,"tsType":{"name":"boolean"},"description":"Disables that the app title will disappear at a specific view width."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className` from parent element."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is the component used on the sidebar?"}}},"src\\components\\IconMenuItem.tsx":{"description":"Variant of `MenuItem` to primarily display an icon without a label.\r\nThe label prop will be displayed as a tooltip.","displayName":"IconMenuItem","methods":[],"props":{"outerClass":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"\"","computed":false}},"tooltipClass":{"required":false,"tsType":{"name":"string"},"description":"Tooltip will be placed to the end/right by default. You can change the direction with this prop.","defaultValue":{"value":"\"blue-tooltip-end\"","computed":false}},"horizontalOnOpenSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"When used inside of the sidebar: active indicator will be displayed underneath instead of before.\r\nThe prop to `false` to disable this behavior.","defaultValue":{"value":"true","computed":false}},"className":{"defaultValue":{"value":"\"\"","computed":false},"required":false}},"composes":["MenuItemProps"],"exampleCode":"import { IconMenuItem, MenuItem, SidebarMenu } from \"blue-react\"\r\nimport { BoxArrowLeft, Gear, List, Person } from \"react-bootstrap-icons\"\r\n\r\nexport default function IconMenuItemExample() {\r\n    return (\r\n        <div className=\"bg-primary position-relative\">\r\n            <SidebarMenu\r\n                sidebarClass=\"position-static shadow-none overflow-visible\"\r\n                menuClass=\"overflow-visible\"\r\n                bottomContent={\r\n                    <div className=\"d-flex flex-wrap\">\r\n                        <IconMenuItem\r\n                            href=\"#record\"\r\n                            outerClass=\"flex-fill\"\r\n                            label=\"User settings\"\r\n                            icon={<Person className=\"bi\" />}\r\n                        />\r\n\r\n                        <IconMenuItem href=\"#\" outerClass=\"flex-fill\" label=\"Settings\" icon={<Gear className=\"bi\" />} />\r\n\r\n                        <IconMenuItem\r\n                            href=\"#\"\r\n                            outerClass=\"flex-fill\"\r\n                            label=\"Sign out\"\r\n                            icon={<BoxArrowLeft className=\"bi\" />}\r\n                        />\r\n                    </div>\r\n                }\r\n            >\r\n                <MenuItem\r\n                    icon={<List className=\"bi\" />}\r\n                    label=\"Toggle menu\"\r\n                    onClick={() => {\r\n                        window.blueLayoutRef.setState({\r\n                            expandSidebar: !window.blueLayoutRef.state.expandSidebar\r\n                        })\r\n                    }}\r\n                />\r\n\r\n                <MenuItem icon={<span>😅</span>} label=\"Hello World\" />\r\n                <MenuItem icon={<span style={{ transform: \"scale(-1, 1)\" }}>👀</span>} label=\"Another normal item\" />\r\n            </SidebarMenu>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\Intro.tsx":{"description":"Can be used for a sign-in page.","displayName":"Intro","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"logoMaxWidth":{"required":false,"tsType":{"name":"string"},"description":"Max width from the logo.","defaultValue":{"value":"\"100px\"","computed":false}},"title":{"required":false,"tsType":{"name":"string"},"description":"Text which will be placed under the logo."},"children":{"required":false,"tsType":{"name":"any"},"description":"Content"}}},"src\\components\\Layout.tsx":{"description":"The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.\r\nYou can also append your own event listeners.\r\n\r\nAllowed events:\r\n\r\n* **componentDidUpdate** - Component was updated.\r\n  Example: `window.blueLayoutRef.addEventListener(\"componentDidUpdate\", (prevProps, prevState) => { })`\r\n* **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.\r\n  Example: `window.blueLayoutRef.addEventListener(\"pageDidShowAgain\", \"home\", (prevProps, prevState) => { })`\r\n* **pageDidHide** - This page disappeared and another page appears instead.\r\n  Example: `window.blueLayoutRef.addEventListener(\"pageDidHide\", \"home\", (prevProps, prevState) => { })`\r\n\r\nMethod to add event listeners:\r\n* `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`\r\n\r\nMethods to remove event listeners:\r\n* `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`\r\n* `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`","displayName":"Layout","methods":[{"name":"onHashChange","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"defaultProps","docblock":null,"modifiers":["static","get"],"params":[],"returns":null},{"name":"toggleSidebar","docblock":null,"modifiers":[],"params":[{"name":"event","type":{"name":"any"}}],"returns":null},{"name":"hideSidebar","docblock":null,"modifiers":[],"params":[{"name":"e","type":{"name":"any"}}],"returns":null},{"name":"initMatch","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"addEventListener","docblock":null,"modifiers":[],"params":[{"name":"param1","type":{"name":"any"}},{"name":"param2","type":{"name":"any"}},{"name":"param3","type":{"name":"any"}},{"name":"listenerId","optional":true,"type":{"name":"string"}}],"returns":null},{"name":"removeEventListener","docblock":null,"modifiers":[],"params":[{"name":"type","type":{"name":"string"}},{"name":"listenerId","type":{"name":"string"}}],"returns":null},{"name":"removeDuplicatedEventListeners","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"toggleExpandSidebar","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"sidebarIn":{"required":false,"tsType":{"name":"boolean"},"description":"By default, the side bar is \"in\".\r\nYou can control the state from outside, by also using `onChangeSidebarIn`."},"onChangeSidebarIn":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(sidebarIn: boolean) => void","signature":{"arguments":[{"name":"sidebarIn","type":{"name":"boolean"}}],"return":{"name":"void"}}},"description":"React to changes of the `sidebarIn` state."},"style":{"required":false,"tsType":{"name":"CSSProperties"},"description":""},"hideToggleExpandSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` to hide button to toggle `expandSidebar` state.","defaultValue":{"value":"false","computed":false}},"expandSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Sidebar is automatically expanded on wider views."},"onChangeExpandSidebar":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(expandSidebar: boolean) => void","signature":{"arguments":[{"name":"expandSidebar","type":{"name":"boolean"}}],"return":{"name":"void"}}},"description":"React to changes of the `expandSidebar` state."},"hideSidebarMenu":{"required":false,"tsType":{"name":"boolean"},"description":"Disables sidebar.","defaultValue":{"value":"false","computed":false}},"pages":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{ name: string; component: JSX.Element }","signature":{"properties":[{"key":"name","value":{"name":"string","required":true}},{"key":"component","value":{"name":"JSX.Element","required":true}}]}}],"raw":"{ name: string; component: JSX.Element }[]"},"description":"Registers pages for the built-in routing system. Example: `[{name: \"home\", component: <HomePage />}]`"},"unrouteable":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, always the \"home\" route will be rendered.","defaultValue":{"value":"false","computed":false}},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className`."},"disableTitleSet":{"required":false,"tsType":{"name":"boolean"},"description":"By default, the document title will automatically set. Set this prop to `true` to disable this behaviour.","defaultValue":{"value":"false","computed":false}},"sidebarToggleIconComponent":{"required":false,"tsType":{"name":"any"},"description":"If you don't use blueicon, you can define another icon element for the sidebar toggle button.","defaultValue":{"value":"<svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"1em\"\r\n    height=\"1em\"\r\n    fill=\"currentColor\"\r\n    viewBox=\"0 0 16 16\"\r\n    style={{ display: \"inline-block\", verticalAlign: \"-0.125em\" }}\r\n>\r\n    <path\r\n        fillRule=\"evenodd\"\r\n        d=\"M2.5 12a.5.5 0 01.5-.5h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4a.5.5 0 01.5-.5h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4a.5.5 0 01.5-.5h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z\"\r\n    ></path>\r\n</svg>","computed":false}},"enableStatus":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` if you want to use the Utilities functions for status and alert.\r\nSet `false` if you want to use `StatusProvider` instead.","defaultValue":{"value":"true","computed":false}},"statusIcons":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\r\n    danger: any\r\n    info: any\r\n    success: any\r\n    warning: any\r\n}","signature":{"properties":[{"key":"danger","value":{"name":"any","required":true}},{"key":"info","value":{"name":"any","required":true}},{"key":"success","value":{"name":"any","required":true}},{"key":"warning","value":{"name":"any","required":true}}]}},"description":"Will replace status icons with custom ones. This will also overwrite the `useBlueicons` option.\r\nThis can be a SVG component or a normal element component.","defaultValue":{"value":"{\r\n    danger: <span className=\"bi-error\" />,\r\n    info: <span className=\"bi-information\" />,\r\n    success: <span className=\"bi-check\" />,\r\n    warning: <span className=\"bi-sign_warning\" />\r\n}","computed":false}},"disableHeaders":{"required":false,"tsType":{"name":"boolean"},"description":"Disables the header bars on pages."},"blockRouting":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(newMatch: string[], currentMatch: string[]) => void | boolean","signature":{"arguments":[{"name":"newMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}},{"name":"currentMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}}],"return":{"name":"union","raw":"void | boolean","elements":[{"name":"void"},{"name":"boolean"}]}}},"description":"Define a function, that will be fired when switching routes. When your function returns `true`, the default route behaviour will be blocked.\r\nYou can use something like `window.blueLayoutRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\MenuItem.tsx":{"description":"Link, button or custom component for Sidebar, Actions or ActionMenu","displayName":"MenuItem","methods":[],"props":{"to":{"required":false,"tsType":{"name":"string"},"description":"Sets `to` prop, e.g. when you use the `NavLink` component from React Router."},"exact":{"required":false,"tsType":{"name":"boolean"},"description":"Prop for components by React Router."},"href":{"required":false,"tsType":{"name":"string"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":""},"onClickAttached":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":"Will be fired after `onClick`"},"icon":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name."},"iconClassName":{"required":false,"tsType":{"name":"string"},"description":"Addition to class name of icon wrapper element"},"iconForActive":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name when the MenuItem is active."},"label":{"required":false,"tsType":{"name":"any"},"description":"Label of the link."},"isActive":{"required":false,"tsType":{"name":"boolean"},"description":"Should be set as active."},"highlighted":{"required":false,"tsType":{"name":"boolean"},"description":"Set true to highlight the current menu item."},"isHome":{"required":false,"tsType":{"name":"boolean"},"description":"When using Blue React's routing system: define this link as home page link."},"dropdownClassName":{"required":false,"tsType":{"name":"string"},"description":"Extends class name of the dropdown menu."},"children":{"required":false,"tsType":{"name":"any"},"description":"Set children to create a nested `MenuItem` as a dropdown."},"className":{"required":false,"tsType":{"name":"any"},"description":"Defines class name."},"showDropdown":{"required":false,"tsType":{"name":"boolean"},"description":"Defines dropdown status from outside."},"supportOutside":{"required":false,"tsType":{"name":"boolean"},"description":"Close on click outside."},"elementType":{"required":false,"tsType":{"name":"any"},"description":"By default, MenuItem is a `\"button\"`. If you set a `href`, it's a `\"a\"`.\r\nIf you want to have it another type, you can pass a component reference with this prop (e.g. `Link`)."},"target":{"required":false,"tsType":{"name":"string"},"description":""},"rel":{"required":false,"tsType":{"name":"string"},"description":""},"title":{"required":false,"tsType":{"name":"string"},"description":""},"type":{"required":false,"tsType":{"name":"string"},"description":""},"onDragStart":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user starts to drag an element"},"onDrag":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when an element is being dragged"},"onDragEnd":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user has finished dragging the element"},"onDragEnter":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element enters the drop target"},"onDragOver":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is over the drop target"},"onDragLeave":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element leaves the drop target"},"onDrop":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is dropped on the drop target"},"draggable":{"required":false,"tsType":{"name":"boolean"},"description":"Specifies whether an element is draggable or not."},"data-tooltip":{"required":false,"tsType":{"name":"string"},"description":""},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":"Specifies whether an element is disabled or not."},"style":{"required":false,"tsType":{"name":"ReactCSSProperties","raw":"React.CSSProperties"},"description":"Specifies style of an element."}}},"src\\components\\Modal.tsx":{"description":"Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.\r\nIt uses Bootstrap's Modal components.\r\n\r\nFor easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.","displayName":"Modal","methods":[],"props":{"modalContent":{"required":false,"tsType":{"name":"string"},"description":""},"modalTitle":{"required":false,"tsType":{"name":"string"},"description":""},"modalIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"unSetModalContent":{"required":true,"tsType":{"name":"signature","type":"function","raw":"(modalContent?: string) => void","signature":{"arguments":[{"name":"modalContent","type":{"name":"string"}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(input: string | boolean | null) => void","signature":{"arguments":[{"name":"input","type":{"name":"union","raw":"string | boolean | null","elements":[{"name":"string"},{"name":"boolean"},{"name":"null"}]}}],"return":{"name":"void"}}},"description":"Type of `input` depends on `type` prop and which action occured.\r\nWhen it's a string, the user entered something. When it's a boolean, the user clicked \"Yes\" or \"No\".\r\nWhen it's `null`, the user cancelled the modal."},"defaultInput":{"required":false,"tsType":{"name":"string"},"description":""},"type":{"required":true,"tsType":{"name":"ModalType"},"description":"`\"ask\"` | `\"tell\"` | `\"verify\"`"},"inputType":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"text\"","computed":false}},"switchPrimaryBtn":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}}}},"src\\components\\ModalProvider.tsx":{"description":"","displayName":"ModalProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import { ModalProvider, useModal } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n    // Use the `useModal` hook.\r\n    const { tell, verify, ask } = useModal()\r\n\r\n    return (\r\n        <>\r\n            <p>\r\n                Allowed params for the functions <code>tell</code> and <code>verify</code>:<br />\r\n                <code>\r\n                    (text: string, options: {`{ title?: string, icon?: ReactNode, switchPrimaryBtn?: boolean }`}?)\r\n                </code>\r\n            </p>\r\n            <p>\r\n                Allowed params for the function <code>ask</code>:<br />\r\n                <code>\r\n                    (text: string, options:{\" \"}\r\n                    {`{ title?: string, icon?: ReactNode, switchPrimaryBtn?: boolean, inputType?: string }`}?)\r\n                </code>\r\n            </p>\r\n\r\n            <div className=\"d-flex gap-2\">\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={() => {\r\n                        tell(\"Hey, what's up\")\r\n                    }}\r\n                >\r\n                    tell\r\n                </button>\r\n\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={\r\n                        // Make sure to make your function \"async\" when using \"await\"\r\n                        async () => {\r\n                            // Use \"await\" to wait until the user enters something\r\n                            const answer = await ask(\"Please enter password\", {\r\n                                title: \"Tell me the correct answer\",\r\n                                inputType: \"password\"\r\n                            })\r\n                            if (answer && answer.toString() === \"password\") {\r\n                                tell(\"That's correct!\")\r\n                            } else {\r\n                                tell(\"Wrong!\")\r\n                            }\r\n                        }\r\n                    }\r\n                >\r\n                    ask\r\n                </button>\r\n\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={async () => {\r\n                        const answer = await verify(\"Are you sure?\", {\r\n                            title: \"Say yes or no\",\r\n                            icon: (\r\n                                <span>\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"1rem\"\r\n                                        height=\"1rem\"\r\n                                        fill=\"currentColor\"\r\n                                        className=\"bi bi-question-circle\"\r\n                                        viewBox=\"0 0 16 16\"\r\n                                    >\r\n                                        <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" />\r\n                                        <path d=\"M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z\" />\r\n                                    </svg>\r\n                                </span>\r\n                            ),\r\n                            switchPrimaryBtn: true\r\n                        })\r\n                        console.log({ answer })\r\n                        if (answer === true) {\r\n                            tell(\"So, you're sure\")\r\n                        }\r\n                    }}\r\n                >\r\n                    verify\r\n                </button>\r\n\r\n                <button\r\n                    className=\"btn btn-secondary\"\r\n                    onClick={async () => {\r\n                        const name = await ask(\"What is your name?\")\r\n                        console.log(name)\r\n                        if (name) {\r\n                            const retVal = await tell(\"Hello, \" + name)\r\n                            console.log(retVal)\r\n\r\n                            if (await verify(\"Is everything alright?\")) {\r\n                                await tell(\"Oh, nice\")\r\n                            } else {\r\n                                await tell(\"Oh no :(\")\r\n                            }\r\n                        }\r\n                    }}\r\n                >\r\n                    Start a conversation\r\n                </button>\r\n\r\n                <br />\r\n\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={() => {\r\n                        alert(\"Hello there!\")\r\n                        if (window.confirm(\"Everything okay?\")) {\r\n                            alert(\"Alright\")\r\n                        }\r\n                    }}\r\n                >\r\n                    How a native <code>alert()</code> would look like\r\n                </button>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\n/**\r\n * Your component where you use `useModal` has to be wrapped around `<ModalProvider></ModalProvider>`.\r\n * Best practice is to wrap it around your root component.\r\n */\r\nexport default function ModalProviderExample() {\r\n    return (\r\n        <ModalProvider>\r\n            <InsideComp />\r\n        </ModalProvider>\r\n    )\r\n}\r\n"},"src\\components\\Outside.tsx":{"description":"Component that fires an event if you click outside of it","displayName":"Outside","methods":[],"props":{"children":{"required":true,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"onClickOutside":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"MouseEvent"}}],"return":{"name":"void"}}},"description":""}}},"src\\components\\Page.tsx":{"description":"Main component for each page.","displayName":"Page","methods":[],"props":{"title":{"required":false,"tsType":{"name":"string"},"description":"Will be set to the document's `<title>` tag."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Search.tsx":{"description":"A search bar that can be placed to the sidebar or on a page.","displayName":"Search","methods":[],"props":{"autoFocus":{"required":false,"tsType":{"name":"boolean"},"description":""},"body":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of a page?"},"className":{"required":false,"tsType":{"name":"string"},"description":""},"icon":{"required":false,"tsType":{"name":"any"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent<HTMLInputElement>) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent<HTMLInputElement>","elements":[{"name":"HTMLInputElement"}]}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.FormEvent<HTMLFormElement>) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactFormEvent","raw":"React.FormEvent<HTMLFormElement>","elements":[{"name":"HTMLFormElement"}]}}],"return":{"name":"void"}}},"description":""},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""},"reset":{"required":false,"tsType":{"name":"boolean"},"description":"Allow reset?"},"resetIcon":{"required":false,"tsType":{"name":"any"},"description":"Define custom icon for the reset button."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of the sidebar?"},"value":{"required":false,"tsType":{"name":"string"},"description":""},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"id":{"required":false,"tsType":{"name":"string"},"description":""},"inputRef":{"required":false,"tsType":{"name":"RefObject","elements":[{"name":"HTMLInputElement"}],"raw":"RefObject<HTMLInputElement>"},"description":"Set `ref` prop of the input element. Let's you take control of it from the outside, e.g. to set focus."}},"exampleCode":"import { useRef, useState } from \"react\"\r\nimport { Search } from \"blue-react\"\r\n\r\nexport default function SearchExample() {\r\n    const [value, setValue] = useState(\"\")\r\n    const inputRef = useRef<HTMLInputElement>(null)\r\n\r\n    return (\r\n        <>\r\n            <Search\r\n                inputRef={inputRef}\r\n                body\r\n                className=\"w-50\"\r\n                onChange={({ target }) => setValue(target.value)}\r\n                onSubmit={() => alert(\"Do form submit now!\")}\r\n                placeholder=\"Begin typing...\"\r\n                reset\r\n                value={value}\r\n            />\r\n\r\n            <button\r\n                type=\"button\"\r\n                className=\"btn btn-secondary mt-3\"\r\n                onClick={() => {\r\n                    inputRef.current?.focus()\r\n                }}\r\n            >\r\n                Set focus from outside using ref\r\n            </button>\r\n        </>\r\n    )\r\n}\r\n"},"src\\components\\SidebarMenu.tsx":{"description":"Sidebar for the `Layout` component.","displayName":"SidebarMenu","methods":[],"props":{"sidebarClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the sidebar."},"sidebarStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the sidebar."},"menuClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the menu."},"menuStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the menu."},"topContent":{"required":false,"tsType":{"name":"any"},"description":"Content on top of the menu."},"bottomContent":{"required":false,"tsType":{"name":"any"},"description":"Content for the bottom part of the sidebar."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\SidebarMenuItem.tsx":{"description":"Extends `MenuItem` with following features:\r\n* Shows provided label as tooltip if sidebar is closed.\r\n* Children will be displayed on the right side of the parent item.\r\n\r\n**Important!** Set the following props to the surrounding `SidebarMenu` to provide problems with tooltips:\r\n```jsx\r\n<SidebarMenu\r\n    sidebarClass=\"overflow-visible\"\r\n    menuClass=\"overflow-visible\"\r\n>\r\n    ...\r\n</SidebarMenu>\r\n```","displayName":"SidebarMenuItem","methods":[],"props":{"outerClass":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"\"","computed":false}}},"composes":["MenuItemProps"],"exampleCode":"import { MenuItem, SidebarMenu, SidebarMenuItem } from \"blue-react\"\r\n\r\nexport default function SidebarMenuItemExample() {\r\n    return (\r\n        <div className=\"bg-primary position-relative\">\r\n            <SidebarMenu sidebarClass=\"position-static shadow-none overflow-visible\" menuClass=\"overflow-visible\">\r\n                <SidebarMenuItem icon={<span>😅</span>} label=\"Hello World\" />\r\n                <SidebarMenuItem\r\n                    icon={<span style={{ transform: \"scale(-1, 1)\" }}>👀</span>}\r\n                    label=\"Click to see sub items\"\r\n                >\r\n                    <MenuItem label=\"I am a child, hi\" />\r\n                    <MenuItem label=\"Second child\">\r\n                        <MenuItem label=\"Even more nested\" />\r\n                    </MenuItem>\r\n                </SidebarMenuItem>\r\n            </SidebarMenu>\r\n            <p className=\"p-3 bg-body\">Resize the browser to see how the sidebar and its items behave.</p>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\SidebarToggler.tsx":{"description":"Button to toggle sidebar state. Designed for internal use inside of `Layout`.","displayName":"SidebarToggler","methods":[],"props":{"className":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"\"","computed":false}},"sidebarToggleIconComponent":{"required":true,"tsType":{"name":"ReactNode"},"description":""},"onClick":{"required":true,"tsType":{"name":"MouseEventHandler","elements":[{"name":"HTMLButtonElement"}],"raw":"MouseEventHandler<HTMLButtonElement>"},"description":""}}},"src\\components\\SlimContainer.tsx":{"description":"Shortcut for a combination using Bootstrap's Grid System to create a slim responsive container.","displayName":"SlimContainer","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"innerClassName":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import { SlimContainer } from \"blue-react\"\r\n\r\nexport default function SlimContainerExample() {\r\n    return (\r\n        <div>\r\n            <p>\r\n                Bootstrap's form components like <code>.form-control</code> and <code>.form-select</code> always have a\r\n                width of <code>100%</code>:\r\n            </p>\r\n\r\n            <input type=\"text\" className=\"form-control mb-3\" placeholder=\"Enter something\" />\r\n\r\n            <p>\r\n                <code>&lt;SlimContainer /&gt;</code> can help to keep all elements inside the container at the same more\r\n                user friendly width:\r\n            </p>\r\n\r\n            <SlimContainer>\r\n                <input type=\"text\" className=\"form-control mb-3\" placeholder=\"Enter something\" />\r\n                <div className=\"form-floating mb-3\">\r\n                    <select className=\"form-select\" id=\"floatingSelect\" aria-label=\"Floating label select example\">\r\n                        <option selected>Open this select menu</option>\r\n                        <option value=\"1\">One</option>\r\n                        <option value=\"2\">Two</option>\r\n                        <option value=\"3\">Three</option>\r\n                    </select>\r\n                    <label htmlFor=\"floatingSelect\">Works with selects</label>\r\n                </div>\r\n                <button type=\"button\" className=\"btn btn-primary btn-lg d-block w-100\">\r\n                    Submit\r\n                </button>\r\n            </SlimContainer>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\Status.tsx":{"description":"","displayName":"Status","methods":[],"props":{"alert":{"required":false,"tsType":{"name":"StatusAlert"},"description":""},"onUnsetAlert":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"✔\"","computed":false}},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"ℹ️\"","computed":false}},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"⚠️\"","computed":false}},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"❌\"","computed":false}},"status":{"required":false,"tsType":{"name":"StatusType"},"description":"","defaultValue":{"value":"null","computed":false}}}},"src\\components\\StatusProvider.tsx":{"description":"","displayName":"StatusProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import {\r\n    CheckCircleFill,\r\n    ExclamationCircleFill,\r\n    InfoCircleFill,\r\n    XCircleFill\r\n} from \"react-bootstrap-icons\"\r\nimport { StatusProvider, useStatus } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n    const { setAlert, setStatus } = useStatus()\r\n\r\n    return (\r\n        <>\r\n            <div className=\"mb-1 d-flex gap-1\">\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() =>\r\n                        setAlert({\r\n                            title: \"Hello World\",\r\n                            status: \"success\"\r\n                        })\r\n                    }\r\n                >\r\n                    Set alert\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() =>\r\n                        setAlert({\r\n                            title: \"Hello World\",\r\n                            status: \"danger\",\r\n                            detailText: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\r\n\r\n                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`\r\n                        })\r\n                    }\r\n                >\r\n                    Set full alert\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() => setAlert(null)}\r\n                >\r\n                    Unset alert\r\n                </button>\r\n            </div>\r\n\r\n            <div className=\"mb-1 d-flex gap-1\">\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() => setStatus(\"loading\")}\r\n                >\r\n                    Show loading\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-success\"\r\n                    onClick={() => setStatus(\"success\")}\r\n                >\r\n                    Show success\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-info\"\r\n                    onClick={() => setStatus(\"info\")}\r\n                >\r\n                    Show info\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-warning\"\r\n                    onClick={() => setStatus(\"warning\")}\r\n                >\r\n                    Show warning\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-danger\"\r\n                    onClick={() => setStatus(\"danger\")}\r\n                >\r\n                    Show danger\r\n                </button>\r\n            </div>\r\n\r\n            <div className=\"mb-1 d-flex gap-1\">\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() => setStatus(null)}\r\n                >\r\n                    Hide status\r\n                </button>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default function StatusExample() {\r\n    return (\r\n        <StatusProvider\r\n            successIcon={<CheckCircleFill />}\r\n            infoIcon={<InfoCircleFill />}\r\n            warningIcon={<ExclamationCircleFill />}\r\n            dangerIcon={<XCircleFill />}\r\n        >\r\n            <InsideComp />\r\n        </StatusProvider>\r\n    )\r\n}\r\n"},"src\\components\\Switch.tsx":{"description":"@deprecated\r\nUse Bootstrap's `.form-check.form-switch` instead:\r\nhttps://getbootstrap.com/docs/5.2/forms/checks-radios/#switches\r\n\r\nFor now, this component acts as proxy for Bootstrap's Switch.\r\nTo place a label next to the switch, use the new `label` prop.\r\n\r\nMigrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.","displayName":"Switch","methods":[],"props":{"className":{"required":false,"tsType":{"name":"string"},"description":""},"checked":{"required":false,"tsType":{"name":"boolean"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent"}}],"return":{"name":"void"}}},"description":""},"sliderLabel":{"required":false,"tsType":{"name":"string"},"description":"Sets label inside of the switch. If you set this, you should also set the className \"lg\" to make the switch larger."},"elementType":{"required":false,"tsType":{"name":"string"},"description":"You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.","defaultValue":{"value":"\"label\"","computed":false}},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":""},"legacy":{"required":false,"tsType":{"name":"boolean"},"description":"Set prop to use the older look and feel. Will disappear in future releases.","defaultValue":{"value":"false","computed":false}},"label":{"required":false,"tsType":{"name":"union","raw":"ReactNode | string","elements":[{"name":"ReactNode"},{"name":"string"}]},"description":""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Switch } from \"blue-react\"\r\n\r\nexport default function SwitchExample() {\r\n    const [isChecked, setIsChecked] = useState(false)\r\n    const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n    return (\r\n        <div>\r\n            <Switch checked={isChecked} onChange={toggleIsChecked} label=\"Hi\" />\r\n            <br />\r\n            <div className=\"form-check form-switch\">\r\n                <input\r\n                    className=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    role=\"switch\"\r\n                    id=\"flexSwitchCheckDefault\"\r\n                    checked={isChecked}\r\n                    onChange={toggleIsChecked}\r\n                />\r\n                <label className=\"form-check-label\" htmlFor=\"flexSwitchCheckDefault\">\r\n                    Bootstrap's form-switch\r\n                </label>\r\n            </div>\r\n            <h4 className=\"mt-4 mb-3\">Legacy support</h4>\r\n            <p>Use the `legacy` prop to use the older look and feel.</p>\r\n            <Switch\r\n                className=\"lg\"\r\n                checked={isChecked}\r\n                onChange={toggleIsChecked}\r\n                sliderLabel={isChecked ? \"Yay🎉\" : \"😒\"}\r\n                legacy\r\n            />\r\n            <br />\r\n            <Switch checked={isChecked} onChange={toggleIsChecked} legacy /> <label>Normal switch</label>\r\n        </div>\r\n    )\r\n}\r\n"}}
\ No newline at end of file
+{"src\\components\\ActionMenu.tsx":{"description":"The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.","displayName":"ActionMenu","methods":[],"props":{"hideToggleAction":{"required":false,"tsType":{"name":"boolean"},"description":"Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"toggleIcon":{"required":false,"tsType":{"name":"any"},"description":"Icon component for the toggle icon."},"className":{"required":false,"tsType":{"name":"string"},"description":""},"break":{"required":false,"tsType":{"name":"union","raw":"breakOption | \"none\"","elements":[{"name":"breakOption"},{"name":"literal","value":"\"none\""}]},"description":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Link } from \"react-router-dom\"\r\n\r\nexport default function ActionMenuExample() {\r\n    const [isChecked, setIsChecked] = useState(false)\r\n    const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n    const style = {\r\n        width: isChecked && window.innerWidth > 600 ? \"600px\" : \"\"\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <div className=\"d-flex align-items-center mb-1\">\r\n                <div className=\"form-check form-switch d-inline-block w-auto\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        className=\"form-check-input\"\r\n                        role=\"switch\"\r\n                        id=\"Example-ActionMenu-checkbox\"\r\n                        onChange={toggleIsChecked}\r\n                    />\r\n                    <label htmlFor=\"Example-ActionMenu-checkbox\">Mobile</label>\r\n                </div>\r\n                <Link to=\"/action-menu-example\" className=\"btn btn-link\">\r\n                    Open in full view\r\n                </Link>{\" \"}\r\n                <Link to=\"/action-menu-example\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"btn btn-link\">\r\n                    Open in new tab\r\n                </Link>\r\n            </div>\r\n            <div className=\"ratio ratio-16x9\">\r\n                <iframe src={`${process.env.PUBLIC_URL}/action-menu-example`} style={style} title=\"Actions Demo page\" />\r\n                {/**\r\n                 * See the source code of the iframe page on:\r\n                 * https://github.com/bruegmann/blue-react/blob/master/src/docs/pages/ActionMenuExamplePage.tsx\r\n                 */}\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\ActionMenuSwitch.tsx":{"description":"@deprecated\r\nUse a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.\r\nSwitch for the Action Menu.","displayName":"ActionMenuSwitch","methods":[],"props":{"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"label":{"required":false,"tsType":{"name":"any"},"description":""}},"composes":["SwitchProps"]},"src\\components\\Body.tsx":{"description":"Contains the content of the page.","displayName":"Body","methods":[],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"containerClass":{"required":false,"tsType":{"name":"string"},"description":"Class name for the container. More info: https://getbootstrap.com/docs/4.0/layout/overview/#containers"},"hasActions":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` if this page uses `<Actions />`, so this component will get enough padding to avoid overlapping of the content."},"break":{"required":false,"tsType":{"name":"breakOption"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: any) => void","signature":{"arguments":[{"name":"event","type":{"name":"any"}}],"return":{"name":"void"}}},"description":""},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Caret.tsx":{"description":"Caret icon component.","displayName":"Caret","methods":[],"props":{"open":{"required":false,"tsType":{"name":"boolean"},"description":"Indicates if open or not."},"mirrored":{"required":false,"tsType":{"name":"boolean"},"description":"By default the caret points to the right when closed. Set mirrored and it will point to the left."},"className":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import React from \"react\"\r\nimport { Caret } from \"blue-react\"\r\n\r\nclass CaretExample extends React.Component {\r\n    constructor() {\r\n        super()\r\n\r\n        this.state = {\r\n            isOpen: false\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                <button\r\n                    className=\"btn btn-secondary\"\r\n                    onClick={() =>\r\n                        this.setState({ isOpen: !this.state.isOpen })\r\n                    }\r\n                >\r\n                    <Caret open={this.state.isOpen} />{\" \"}\r\n                    <span>Click to toggle the caret</span>\r\n                </button>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default CaretExample\r\n"},"src\\components\\Header.tsx":{"description":"The top of a page.","displayName":"Header","methods":[],"props":{"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\HeaderTitle.tsx":{"description":"The title area at the header bar.\r\nDepending on its content, the document's title will be set aswell (what will be shown in the browser title bar).","displayName":"HeaderTitle","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"appTitle":{"required":false,"tsType":{"name":"string"},"description":"Text next to the logo."},"keepAppTitle":{"required":false,"tsType":{"name":"boolean"},"description":"Disables that the app title will disappear at a specific view width."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className` from parent element."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is the component used on the sidebar?"}}},"src\\components\\IconMenuItem.tsx":{"description":"Variant of `MenuItem` to primarily display an icon without a label.\r\nThe label prop will be displayed as a tooltip.","displayName":"IconMenuItem","methods":[],"props":{"outerClass":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"\"","computed":false}},"tooltipClass":{"required":false,"tsType":{"name":"string"},"description":"Tooltip will be placed to the end/right by default. You can change the direction with this prop.","defaultValue":{"value":"\"blue-tooltip-end\"","computed":false}},"horizontalOnOpenSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"When used inside of the sidebar: active indicator will be displayed underneath instead of before.\r\nThe prop to `false` to disable this behavior.","defaultValue":{"value":"true","computed":false}},"className":{"defaultValue":{"value":"\"\"","computed":false},"required":false}},"composes":["MenuItemProps"],"exampleCode":"import { IconMenuItem, MenuItem, SidebarMenu } from \"blue-react\"\r\nimport { BoxArrowLeft, Gear, List, Person } from \"react-bootstrap-icons\"\r\n\r\nexport default function IconMenuItemExample() {\r\n    return (\r\n        <div className=\"bg-primary position-relative\">\r\n            <SidebarMenu\r\n                sidebarClass=\"position-static shadow-none overflow-visible\"\r\n                menuClass=\"overflow-visible\"\r\n                bottomContent={\r\n                    <div className=\"d-flex flex-wrap\">\r\n                        <IconMenuItem\r\n                            href=\"#record\"\r\n                            outerClass=\"flex-fill\"\r\n                            label=\"User settings\"\r\n                            icon={<Person className=\"bi\" />}\r\n                        />\r\n\r\n                        <IconMenuItem href=\"#\" outerClass=\"flex-fill\" label=\"Settings\" icon={<Gear className=\"bi\" />} />\r\n\r\n                        <IconMenuItem\r\n                            href=\"#\"\r\n                            outerClass=\"flex-fill\"\r\n                            label=\"Sign out\"\r\n                            icon={<BoxArrowLeft className=\"bi\" />}\r\n                        />\r\n                    </div>\r\n                }\r\n            >\r\n                <MenuItem\r\n                    icon={<List className=\"bi\" />}\r\n                    label=\"Toggle menu\"\r\n                    onClick={() => {\r\n                        window.blueLayoutRef.setState({\r\n                            expandSidebar: !window.blueLayoutRef.state.expandSidebar\r\n                        })\r\n                    }}\r\n                />\r\n\r\n                <MenuItem icon={<span>😅</span>} label=\"Hello World\" />\r\n                <MenuItem icon={<span style={{ transform: \"scale(-1, 1)\" }}>👀</span>} label=\"Another normal item\" />\r\n            </SidebarMenu>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\Intro.tsx":{"description":"Can be used for a sign-in page.","displayName":"Intro","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"logoMaxWidth":{"required":false,"tsType":{"name":"string"},"description":"Max width from the logo.","defaultValue":{"value":"\"100px\"","computed":false}},"title":{"required":false,"tsType":{"name":"string"},"description":"Text which will be placed under the logo."},"children":{"required":false,"tsType":{"name":"any"},"description":"Content"}}},"src\\components\\Layout.tsx":{"description":"The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.\r\nYou can also append your own event listeners.\r\n\r\nAllowed events:\r\n\r\n* **componentDidUpdate** - Component was updated.\r\n  Example: `window.blueLayoutRef.addEventListener(\"componentDidUpdate\", (prevProps, prevState) => { })`\r\n* **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.\r\n  Example: `window.blueLayoutRef.addEventListener(\"pageDidShowAgain\", \"home\", (prevProps, prevState) => { })`\r\n* **pageDidHide** - This page disappeared and another page appears instead.\r\n  Example: `window.blueLayoutRef.addEventListener(\"pageDidHide\", \"home\", (prevProps, prevState) => { })`\r\n\r\nMethod to add event listeners:\r\n* `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`\r\n\r\nMethods to remove event listeners:\r\n* `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`\r\n* `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`","displayName":"Layout","methods":[{"name":"onHashChange","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"defaultProps","docblock":null,"modifiers":["static","get"],"params":[],"returns":null},{"name":"toggleSidebar","docblock":null,"modifiers":[],"params":[{"name":"event","type":{"name":"any"}}],"returns":null},{"name":"hideSidebar","docblock":null,"modifiers":[],"params":[{"name":"e","type":{"name":"any"}}],"returns":null},{"name":"initMatch","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"addEventListener","docblock":null,"modifiers":[],"params":[{"name":"param1","type":{"name":"any"}},{"name":"param2","type":{"name":"any"}},{"name":"param3","type":{"name":"any"}},{"name":"listenerId","optional":true,"type":{"name":"string"}}],"returns":null},{"name":"removeEventListener","docblock":null,"modifiers":[],"params":[{"name":"type","type":{"name":"string"}},{"name":"listenerId","type":{"name":"string"}}],"returns":null},{"name":"removeDuplicatedEventListeners","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"toggleExpandSidebar","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"sidebarIn":{"required":false,"tsType":{"name":"boolean"},"description":"By default, the side bar is \"in\".\r\nYou can control the state from outside, by also using `onChangeSidebarIn`."},"onChangeSidebarIn":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(sidebarIn: boolean) => void","signature":{"arguments":[{"name":"sidebarIn","type":{"name":"boolean"}}],"return":{"name":"void"}}},"description":"React to changes of the `sidebarIn` state."},"style":{"required":false,"tsType":{"name":"CSSProperties"},"description":""},"hideToggleExpandSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` to hide button to toggle `expandSidebar` state.","defaultValue":{"value":"false","computed":false}},"expandSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Sidebar is automatically expanded on wider views."},"onChangeExpandSidebar":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(expandSidebar: boolean) => void","signature":{"arguments":[{"name":"expandSidebar","type":{"name":"boolean"}}],"return":{"name":"void"}}},"description":"React to changes of the `expandSidebar` state."},"hideSidebarMenu":{"required":false,"tsType":{"name":"boolean"},"description":"Disables sidebar.","defaultValue":{"value":"false","computed":false}},"pages":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{ name: string; component: JSX.Element }","signature":{"properties":[{"key":"name","value":{"name":"string","required":true}},{"key":"component","value":{"name":"JSX.Element","required":true}}]}}],"raw":"{ name: string; component: JSX.Element }[]"},"description":"Registers pages for the built-in routing system. Example: `[{name: \"home\", component: <HomePage />}]`"},"unrouteable":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, always the \"home\" route will be rendered.","defaultValue":{"value":"false","computed":false}},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className`."},"disableTitleSet":{"required":false,"tsType":{"name":"boolean"},"description":"By default, the document title will automatically set. Set this prop to `true` to disable this behaviour.","defaultValue":{"value":"false","computed":false}},"sidebarToggleIconComponent":{"required":false,"tsType":{"name":"any"},"description":"If you don't use blueicon, you can define another icon element for the sidebar toggle button.","defaultValue":{"value":"<svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"1em\"\r\n    height=\"1em\"\r\n    fill=\"currentColor\"\r\n    viewBox=\"0 0 16 16\"\r\n    style={{ display: \"inline-block\", verticalAlign: \"-0.125em\" }}\r\n>\r\n    <path\r\n        fillRule=\"evenodd\"\r\n        d=\"M2.5 12a.5.5 0 01.5-.5h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4a.5.5 0 01.5-.5h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4a.5.5 0 01.5-.5h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z\"\r\n    ></path>\r\n</svg>","computed":false}},"enableStatus":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` if you want to use the Utilities functions for status and alert.\r\nSet `false` if you want to use `StatusProvider` instead.","defaultValue":{"value":"true","computed":false}},"statusIcons":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\r\n    danger: any\r\n    info: any\r\n    success: any\r\n    warning: any\r\n}","signature":{"properties":[{"key":"danger","value":{"name":"any","required":true}},{"key":"info","value":{"name":"any","required":true}},{"key":"success","value":{"name":"any","required":true}},{"key":"warning","value":{"name":"any","required":true}}]}},"description":"Will replace status icons with custom ones. This will also overwrite the `useBlueicons` option.\r\nThis can be a SVG component or a normal element component.","defaultValue":{"value":"{\r\n    danger: <span className=\"bi-error\" />,\r\n    info: <span className=\"bi-information\" />,\r\n    success: <span className=\"bi-check\" />,\r\n    warning: <span className=\"bi-sign_warning\" />\r\n}","computed":false}},"disableHeaders":{"required":false,"tsType":{"name":"boolean"},"description":"Disables the header bars on pages."},"blockRouting":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(newMatch: string[], currentMatch: string[]) => void | boolean","signature":{"arguments":[{"name":"newMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}},{"name":"currentMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}}],"return":{"name":"union","raw":"void | boolean","elements":[{"name":"void"},{"name":"boolean"}]}}},"description":"Define a function, that will be fired when switching routes. When your function returns `true`, the default route behaviour will be blocked.\r\nYou can use something like `window.blueLayoutRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\MenuItem.tsx":{"description":"Link, button or custom component for Sidebar, Actions or ActionMenu","displayName":"MenuItem","methods":[],"props":{"to":{"required":false,"tsType":{"name":"string"},"description":"Sets `to` prop, e.g. when you use the `NavLink` component from React Router."},"exact":{"required":false,"tsType":{"name":"boolean"},"description":"Prop for components by React Router."},"href":{"required":false,"tsType":{"name":"string"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":""},"onClickAttached":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":"Will be fired after `onClick`"},"icon":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name."},"iconClassName":{"required":false,"tsType":{"name":"string"},"description":"Addition to class name of icon wrapper element"},"iconForActive":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name when the MenuItem is active."},"label":{"required":false,"tsType":{"name":"any"},"description":"Label of the link."},"labelClassName":{"required":false,"tsType":{"name":"string"},"description":"Addition to class name of label wrapper element"},"isActive":{"required":false,"tsType":{"name":"boolean"},"description":"Should be set as active."},"highlighted":{"required":false,"tsType":{"name":"boolean"},"description":"Set true to highlight the current menu item."},"isHome":{"required":false,"tsType":{"name":"boolean"},"description":"When using Blue React's routing system: define this link as home page link."},"dropdownClassName":{"required":false,"tsType":{"name":"string"},"description":"Extends class name of the dropdown menu."},"children":{"required":false,"tsType":{"name":"any"},"description":"Set children to create a nested `MenuItem` as a dropdown."},"className":{"required":false,"tsType":{"name":"any"},"description":"Defines class name."},"showDropdown":{"required":false,"tsType":{"name":"boolean"},"description":"Defines dropdown status from outside."},"supportOutside":{"required":false,"tsType":{"name":"boolean"},"description":"Close on click outside."},"elementType":{"required":false,"tsType":{"name":"any"},"description":"By default, MenuItem is a `\"button\"`. If you set a `href`, it's a `\"a\"`.\r\nIf you want to have it another type, you can pass a component reference with this prop (e.g. `Link`)."},"target":{"required":false,"tsType":{"name":"string"},"description":""},"rel":{"required":false,"tsType":{"name":"string"},"description":""},"title":{"required":false,"tsType":{"name":"string"},"description":""},"type":{"required":false,"tsType":{"name":"string"},"description":""},"onDragStart":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user starts to drag an element"},"onDrag":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when an element is being dragged"},"onDragEnd":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user has finished dragging the element"},"onDragEnter":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element enters the drop target"},"onDragOver":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is over the drop target"},"onDragLeave":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element leaves the drop target"},"onDrop":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is dropped on the drop target"},"draggable":{"required":false,"tsType":{"name":"boolean"},"description":"Specifies whether an element is draggable or not."},"data-tooltip":{"required":false,"tsType":{"name":"string"},"description":""},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":"Specifies whether an element is disabled or not."},"style":{"required":false,"tsType":{"name":"ReactCSSProperties","raw":"React.CSSProperties"},"description":"Specifies style of an element."}},"exampleCode":"import { useState } from \"react\"\r\nimport { MenuItem, SidebarMenu } from \"blue-react\"\r\n\r\nexport default function MenuItemExample() {\r\n    const [navigationSource, setNavigationSource] = useState<\"user\" | \"default\">(\"default\")\r\n\r\n    return (\r\n        <div className=\"bg-primary position-relative\">\r\n            <SidebarMenu sidebarClass=\"position-static shadow-none overflow-visible\" menuClass=\"overflow-visible\">\r\n                <div className=\"blue-sidebar-visible-on-open blue-sidebar-menu-horizontal-on-open\">\r\n                    <MenuItem\r\n                        label=\"Default\"\r\n                        labelClassName=\"text-center w-100\"\r\n                        onClick={() => setNavigationSource(\"default\")}\r\n                        isActive={navigationSource === \"default\"}\r\n                    />\r\n\r\n                    <MenuItem\r\n                        label=\"User\"\r\n                        labelClassName=\"text-center w-100\"\r\n                        onClick={() => setNavigationSource(\"user\")}\r\n                        isActive={navigationSource === \"user\"}\r\n                    />\r\n                </div>\r\n            </SidebarMenu>\r\n            <p className=\"p-3 bg-body\">Resize the browser to see how the sidebar and its items behave.</p>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\Modal.tsx":{"description":"Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.\r\nIt uses Bootstrap's Modal components.\r\n\r\nFor easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.","displayName":"Modal","methods":[],"props":{"modalContent":{"required":false,"tsType":{"name":"string"},"description":""},"modalTitle":{"required":false,"tsType":{"name":"string"},"description":""},"modalIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"unSetModalContent":{"required":true,"tsType":{"name":"signature","type":"function","raw":"(modalContent?: string) => void","signature":{"arguments":[{"name":"modalContent","type":{"name":"string"}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(input: string | boolean | null) => void","signature":{"arguments":[{"name":"input","type":{"name":"union","raw":"string | boolean | null","elements":[{"name":"string"},{"name":"boolean"},{"name":"null"}]}}],"return":{"name":"void"}}},"description":"Type of `input` depends on `type` prop and which action occured.\r\nWhen it's a string, the user entered something. When it's a boolean, the user clicked \"Yes\" or \"No\".\r\nWhen it's `null`, the user cancelled the modal."},"defaultInput":{"required":false,"tsType":{"name":"string"},"description":""},"type":{"required":true,"tsType":{"name":"ModalType"},"description":"`\"ask\"` | `\"tell\"` | `\"verify\"`"},"inputType":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"text\"","computed":false}},"switchPrimaryBtn":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}}}},"src\\components\\ModalProvider.tsx":{"description":"","displayName":"ModalProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import { ModalProvider, useModal } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n    // Use the `useModal` hook.\r\n    const { tell, verify, ask } = useModal()\r\n\r\n    return (\r\n        <>\r\n            <p>\r\n                Allowed params for the functions <code>tell</code> and <code>verify</code>:<br />\r\n                <code>\r\n                    (text: string, options: {`{ title?: string, icon?: ReactNode, switchPrimaryBtn?: boolean }`}?)\r\n                </code>\r\n            </p>\r\n            <p>\r\n                Allowed params for the function <code>ask</code>:<br />\r\n                <code>\r\n                    (text: string, options:{\" \"}\r\n                    {`{ title?: string, icon?: ReactNode, switchPrimaryBtn?: boolean, inputType?: string }`}?)\r\n                </code>\r\n            </p>\r\n\r\n            <div className=\"d-flex gap-2\">\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={() => {\r\n                        tell(\"Hey, what's up\")\r\n                    }}\r\n                >\r\n                    tell\r\n                </button>\r\n\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={\r\n                        // Make sure to make your function \"async\" when using \"await\"\r\n                        async () => {\r\n                            // Use \"await\" to wait until the user enters something\r\n                            const answer = await ask(\"Please enter password\", {\r\n                                title: \"Tell me the correct answer\",\r\n                                inputType: \"password\"\r\n                            })\r\n                            if (answer && answer.toString() === \"password\") {\r\n                                tell(\"That's correct!\")\r\n                            } else {\r\n                                tell(\"Wrong!\")\r\n                            }\r\n                        }\r\n                    }\r\n                >\r\n                    ask\r\n                </button>\r\n\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={async () => {\r\n                        const answer = await verify(\"Are you sure?\", {\r\n                            title: \"Say yes or no\",\r\n                            icon: (\r\n                                <span>\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"1rem\"\r\n                                        height=\"1rem\"\r\n                                        fill=\"currentColor\"\r\n                                        className=\"bi bi-question-circle\"\r\n                                        viewBox=\"0 0 16 16\"\r\n                                    >\r\n                                        <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" />\r\n                                        <path d=\"M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z\" />\r\n                                    </svg>\r\n                                </span>\r\n                            ),\r\n                            switchPrimaryBtn: true\r\n                        })\r\n                        console.log({ answer })\r\n                        if (answer === true) {\r\n                            tell(\"So, you're sure\")\r\n                        }\r\n                    }}\r\n                >\r\n                    verify\r\n                </button>\r\n\r\n                <button\r\n                    className=\"btn btn-secondary\"\r\n                    onClick={async () => {\r\n                        const name = await ask(\"What is your name?\")\r\n                        console.log(name)\r\n                        if (name) {\r\n                            const retVal = await tell(\"Hello, \" + name)\r\n                            console.log(retVal)\r\n\r\n                            if (await verify(\"Is everything alright?\")) {\r\n                                await tell(\"Oh, nice\")\r\n                            } else {\r\n                                await tell(\"Oh no :(\")\r\n                            }\r\n                        }\r\n                    }}\r\n                >\r\n                    Start a conversation\r\n                </button>\r\n\r\n                <br />\r\n\r\n                <button\r\n                    className=\"btn btn-outline-secondary\"\r\n                    onClick={() => {\r\n                        alert(\"Hello there!\")\r\n                        if (window.confirm(\"Everything okay?\")) {\r\n                            alert(\"Alright\")\r\n                        }\r\n                    }}\r\n                >\r\n                    How a native <code>alert()</code> would look like\r\n                </button>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\n/**\r\n * Your component where you use `useModal` has to be wrapped around `<ModalProvider></ModalProvider>`.\r\n * Best practice is to wrap it around your root component.\r\n */\r\nexport default function ModalProviderExample() {\r\n    return (\r\n        <ModalProvider>\r\n            <InsideComp />\r\n        </ModalProvider>\r\n    )\r\n}\r\n"},"src\\components\\Outside.tsx":{"description":"Component that fires an event if you click outside of it","displayName":"Outside","methods":[],"props":{"children":{"required":true,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"onClickOutside":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"MouseEvent"}}],"return":{"name":"void"}}},"description":""}}},"src\\components\\Page.tsx":{"description":"Main component for each page.","displayName":"Page","methods":[],"props":{"title":{"required":false,"tsType":{"name":"string"},"description":"Will be set to the document's `<title>` tag."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Search.tsx":{"description":"A search bar that can be placed to the sidebar or on a page.","displayName":"Search","methods":[],"props":{"autoFocus":{"required":false,"tsType":{"name":"boolean"},"description":""},"body":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of a page?"},"className":{"required":false,"tsType":{"name":"string"},"description":""},"icon":{"required":false,"tsType":{"name":"any"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent<HTMLInputElement>) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent<HTMLInputElement>","elements":[{"name":"HTMLInputElement"}]}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.FormEvent<HTMLFormElement>) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactFormEvent","raw":"React.FormEvent<HTMLFormElement>","elements":[{"name":"HTMLFormElement"}]}}],"return":{"name":"void"}}},"description":""},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""},"reset":{"required":false,"tsType":{"name":"boolean"},"description":"Allow reset?"},"resetIcon":{"required":false,"tsType":{"name":"any"},"description":"Define custom icon for the reset button."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of the sidebar?"},"value":{"required":false,"tsType":{"name":"string"},"description":""},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"id":{"required":false,"tsType":{"name":"string"},"description":""},"inputRef":{"required":false,"tsType":{"name":"RefObject","elements":[{"name":"HTMLInputElement"}],"raw":"RefObject<HTMLInputElement>"},"description":"Set `ref` prop of the input element. Let's you take control of it from the outside, e.g. to set focus."}},"exampleCode":"import { useRef, useState } from \"react\"\r\nimport { Search } from \"blue-react\"\r\n\r\nexport default function SearchExample() {\r\n    const [value, setValue] = useState(\"\")\r\n    const inputRef = useRef<HTMLInputElement>(null)\r\n\r\n    return (\r\n        <>\r\n            <Search\r\n                inputRef={inputRef}\r\n                body\r\n                className=\"w-50\"\r\n                onChange={({ target }) => setValue(target.value)}\r\n                onSubmit={() => alert(\"Do form submit now!\")}\r\n                placeholder=\"Begin typing...\"\r\n                reset\r\n                value={value}\r\n            />\r\n\r\n            <button\r\n                type=\"button\"\r\n                className=\"btn btn-secondary mt-3\"\r\n                onClick={() => {\r\n                    inputRef.current?.focus()\r\n                }}\r\n            >\r\n                Set focus from outside using ref\r\n            </button>\r\n        </>\r\n    )\r\n}\r\n"},"src\\components\\SidebarMenu.tsx":{"description":"Sidebar for the `Layout` component.","displayName":"SidebarMenu","methods":[],"props":{"sidebarClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the sidebar."},"sidebarStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the sidebar."},"menuClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the menu."},"menuStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the menu."},"topContent":{"required":false,"tsType":{"name":"any"},"description":"Content on top of the menu."},"bottomContent":{"required":false,"tsType":{"name":"any"},"description":"Content for the bottom part of the sidebar."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\SidebarMenuItem.tsx":{"description":"Extends `MenuItem` with following features:\r\n* Shows provided label as tooltip if sidebar is closed.\r\n* Children will be displayed on the right side of the parent item.\r\n\r\n**Important!** Set the following props to the surrounding `SidebarMenu` to provide problems with tooltips:\r\n```jsx\r\n<SidebarMenu\r\n    sidebarClass=\"overflow-visible\"\r\n    menuClass=\"overflow-visible\"\r\n>\r\n    ...\r\n</SidebarMenu>\r\n```","displayName":"SidebarMenuItem","methods":[],"props":{"outerClass":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"\"","computed":false}}},"composes":["MenuItemProps"],"exampleCode":"import { MenuItem, SidebarMenu, SidebarMenuItem } from \"blue-react\"\r\n\r\nexport default function SidebarMenuItemExample() {\r\n    return (\r\n        <div className=\"bg-primary position-relative\">\r\n            <SidebarMenu sidebarClass=\"position-static shadow-none overflow-visible\" menuClass=\"overflow-visible\">\r\n                <SidebarMenuItem icon={<span>😅</span>} label=\"Hello World\" />\r\n                <SidebarMenuItem\r\n                    icon={<span style={{ transform: \"scale(-1, 1)\" }}>👀</span>}\r\n                    label=\"Click to see sub items\"\r\n                >\r\n                    <MenuItem label=\"I am a child, hi\" />\r\n                    <MenuItem label=\"Second child\">\r\n                        <MenuItem label=\"Even more nested\" />\r\n                    </MenuItem>\r\n                </SidebarMenuItem>\r\n            </SidebarMenu>\r\n            <p className=\"p-3 bg-body\">Resize the browser to see how the sidebar and its items behave.</p>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\SidebarToggler.tsx":{"description":"Button to toggle sidebar state. Designed for internal use inside of `Layout`.","displayName":"SidebarToggler","methods":[],"props":{"className":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"\"\"","computed":false}},"sidebarToggleIconComponent":{"required":true,"tsType":{"name":"ReactNode"},"description":""},"onClick":{"required":true,"tsType":{"name":"MouseEventHandler","elements":[{"name":"HTMLButtonElement"}],"raw":"MouseEventHandler<HTMLButtonElement>"},"description":""}}},"src\\components\\SlimContainer.tsx":{"description":"Shortcut for a combination using Bootstrap's Grid System to create a slim responsive container.","displayName":"SlimContainer","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"innerClassName":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import { SlimContainer } from \"blue-react\"\r\n\r\nexport default function SlimContainerExample() {\r\n    return (\r\n        <div>\r\n            <p>\r\n                Bootstrap's form components like <code>.form-control</code> and <code>.form-select</code> always have a\r\n                width of <code>100%</code>:\r\n            </p>\r\n\r\n            <input type=\"text\" className=\"form-control mb-3\" placeholder=\"Enter something\" />\r\n\r\n            <p>\r\n                <code>&lt;SlimContainer /&gt;</code> can help to keep all elements inside the container at the same more\r\n                user friendly width:\r\n            </p>\r\n\r\n            <SlimContainer>\r\n                <input type=\"text\" className=\"form-control mb-3\" placeholder=\"Enter something\" />\r\n                <div className=\"form-floating mb-3\">\r\n                    <select className=\"form-select\" id=\"floatingSelect\" aria-label=\"Floating label select example\">\r\n                        <option selected>Open this select menu</option>\r\n                        <option value=\"1\">One</option>\r\n                        <option value=\"2\">Two</option>\r\n                        <option value=\"3\">Three</option>\r\n                    </select>\r\n                    <label htmlFor=\"floatingSelect\">Works with selects</label>\r\n                </div>\r\n                <button type=\"button\" className=\"btn btn-primary btn-lg d-block w-100\">\r\n                    Submit\r\n                </button>\r\n            </SlimContainer>\r\n        </div>\r\n    )\r\n}\r\n"},"src\\components\\Status.tsx":{"description":"","displayName":"Status","methods":[],"props":{"alert":{"required":false,"tsType":{"name":"StatusAlert"},"description":""},"onUnsetAlert":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"✔\"","computed":false}},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"ℹ️\"","computed":false}},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"⚠️\"","computed":false}},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"❌\"","computed":false}},"status":{"required":false,"tsType":{"name":"StatusType"},"description":"","defaultValue":{"value":"null","computed":false}}}},"src\\components\\StatusProvider.tsx":{"description":"","displayName":"StatusProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import {\r\n    CheckCircleFill,\r\n    ExclamationCircleFill,\r\n    InfoCircleFill,\r\n    XCircleFill\r\n} from \"react-bootstrap-icons\"\r\nimport { StatusProvider, useStatus } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n    const { setAlert, setStatus } = useStatus()\r\n\r\n    return (\r\n        <>\r\n            <div className=\"mb-1 d-flex gap-1\">\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() =>\r\n                        setAlert({\r\n                            title: \"Hello World\",\r\n                            status: \"success\"\r\n                        })\r\n                    }\r\n                >\r\n                    Set alert\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() =>\r\n                        setAlert({\r\n                            title: \"Hello World\",\r\n                            status: \"danger\",\r\n                            detailText: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\r\n\r\n                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`\r\n                        })\r\n                    }\r\n                >\r\n                    Set full alert\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() => setAlert(null)}\r\n                >\r\n                    Unset alert\r\n                </button>\r\n            </div>\r\n\r\n            <div className=\"mb-1 d-flex gap-1\">\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() => setStatus(\"loading\")}\r\n                >\r\n                    Show loading\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-success\"\r\n                    onClick={() => setStatus(\"success\")}\r\n                >\r\n                    Show success\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-info\"\r\n                    onClick={() => setStatus(\"info\")}\r\n                >\r\n                    Show info\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-warning\"\r\n                    onClick={() => setStatus(\"warning\")}\r\n                >\r\n                    Show warning\r\n                </button>\r\n                <button\r\n                    className=\"btn btn-outline-danger\"\r\n                    onClick={() => setStatus(\"danger\")}\r\n                >\r\n                    Show danger\r\n                </button>\r\n            </div>\r\n\r\n            <div className=\"mb-1 d-flex gap-1\">\r\n                <button\r\n                    className=\"btn btn-light\"\r\n                    onClick={() => setStatus(null)}\r\n                >\r\n                    Hide status\r\n                </button>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default function StatusExample() {\r\n    return (\r\n        <StatusProvider\r\n            successIcon={<CheckCircleFill />}\r\n            infoIcon={<InfoCircleFill />}\r\n            warningIcon={<ExclamationCircleFill />}\r\n            dangerIcon={<XCircleFill />}\r\n        >\r\n            <InsideComp />\r\n        </StatusProvider>\r\n    )\r\n}\r\n"},"src\\components\\Switch.tsx":{"description":"@deprecated\r\nUse Bootstrap's `.form-check.form-switch` instead:\r\nhttps://getbootstrap.com/docs/5.2/forms/checks-radios/#switches\r\n\r\nFor now, this component acts as proxy for Bootstrap's Switch.\r\nTo place a label next to the switch, use the new `label` prop.\r\n\r\nMigrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.","displayName":"Switch","methods":[],"props":{"className":{"required":false,"tsType":{"name":"string"},"description":""},"checked":{"required":false,"tsType":{"name":"boolean"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent"}}],"return":{"name":"void"}}},"description":""},"sliderLabel":{"required":false,"tsType":{"name":"string"},"description":"Sets label inside of the switch. If you set this, you should also set the className \"lg\" to make the switch larger."},"elementType":{"required":false,"tsType":{"name":"string"},"description":"You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.","defaultValue":{"value":"\"label\"","computed":false}},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":""},"legacy":{"required":false,"tsType":{"name":"boolean"},"description":"Set prop to use the older look and feel. Will disappear in future releases.","defaultValue":{"value":"false","computed":false}},"label":{"required":false,"tsType":{"name":"union","raw":"ReactNode | string","elements":[{"name":"ReactNode"},{"name":"string"}]},"description":""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Switch } from \"blue-react\"\r\n\r\nexport default function SwitchExample() {\r\n    const [isChecked, setIsChecked] = useState(false)\r\n    const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n    return (\r\n        <div>\r\n            <Switch checked={isChecked} onChange={toggleIsChecked} label=\"Hi\" />\r\n            <br />\r\n            <div className=\"form-check form-switch\">\r\n                <input\r\n                    className=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    role=\"switch\"\r\n                    id=\"flexSwitchCheckDefault\"\r\n                    checked={isChecked}\r\n                    onChange={toggleIsChecked}\r\n                />\r\n                <label className=\"form-check-label\" htmlFor=\"flexSwitchCheckDefault\">\r\n                    Bootstrap's form-switch\r\n                </label>\r\n            </div>\r\n            <h4 className=\"mt-4 mb-3\">Legacy support</h4>\r\n            <p>Use the `legacy` prop to use the older look and feel.</p>\r\n            <Switch\r\n                className=\"lg\"\r\n                checked={isChecked}\r\n                onChange={toggleIsChecked}\r\n                sliderLabel={isChecked ? \"Yay🎉\" : \"😒\"}\r\n                legacy\r\n            />\r\n            <br />\r\n            <Switch checked={isChecked} onChange={toggleIsChecked} legacy /> <label>Normal switch</label>\r\n        </div>\r\n    )\r\n}\r\n"}}
\ No newline at end of file
diff --git a/src/docs/data/license-report.json b/src/docs/data/license-report.json
index dbbb90de..d62737bb 100644
--- a/src/docs/data/license-report.json
+++ b/src/docs/data/license-report.json
@@ -1 +1 @@
-[{"department":"kessler","relatedTo":"stuff","name":"@popperjs/core","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/popperjs/popper-core.git","remoteVersion":"2.11.8","installedVersion":"2.11.7","definedVersion":"^2.11.5","author":"Federico Zivolo <federico.zivolo@gmail.com>"},{"department":"kessler","relatedTo":"stuff","name":"bootstrap","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/twbs/bootstrap.git","remoteVersion":"5.3.1","installedVersion":"5.3.0","definedVersion":"~5.3.0","author":"The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)"},{"department":"kessler","relatedTo":"stuff","name":"clsx","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/lukeed/clsx.git","remoteVersion":"1.2.1","installedVersion":"1.2.1","definedVersion":"^1.1.1","author":"Luke Edwards luke.edwards05@gmail.com https://lukeed.com"},{"department":"kessler","relatedTo":"stuff","name":"@babel/cli","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.15","installedVersion":"7.18.9","definedVersion":"^7.10.4","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@babel/preset-env","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.15","installedVersion":"7.18.9","definedVersion":"^7.10.4","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@babel/preset-react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.15","installedVersion":"7.18.6","definedVersion":"^7.10.4","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@babel/preset-typescript","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.15","installedVersion":"7.18.6","definedVersion":"^7.9.0","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@testing-library/jest-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/testing-library/jest-dom.git","remoteVersion":"4.2.4","installedVersion":"4.2.4","definedVersion":"^4.2.4","author":"Ernesto Garcia <gnapse@gmail.com> (http://gnapse.github.io/)"},{"department":"kessler","relatedTo":"stuff","name":"@testing-library/react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/testing-library/react-testing-library.git","remoteVersion":"9.5.0","installedVersion":"9.5.0","definedVersion":"^9.5.0","author":"Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)"},{"department":"kessler","relatedTo":"stuff","name":"@testing-library/user-event","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/testing-library/user-event.git","remoteVersion":"7.2.1","installedVersion":"7.2.1","definedVersion":"^7.2.1","author":"Giorgio Polvara <polvara@gmail.com>"},{"department":"kessler","relatedTo":"stuff","name":"@types/bootstrap","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"5.2.6","installedVersion":"5.2.0","definedVersion":"^5.0.17","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/jest","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"24.9.1","installedVersion":"24.9.1","definedVersion":"^24.9.1","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/node","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"12.20.55","installedVersion":"12.20.55","definedVersion":"^12.12.47","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"18.2.21","installedVersion":"18.0.15","definedVersion":"^18.0.9","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"18.2.7","installedVersion":"18.0.6","definedVersion":"^18.0.5","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react-router-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"5.3.3","installedVersion":"5.3.3","definedVersion":"^5.3.3","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react-syntax-highlighter","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"13.5.2","installedVersion":"13.5.2","definedVersion":"^13.5.0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"autoprefixer","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/postcss/autoprefixer.git","remoteVersion":"10.4.15","installedVersion":"10.4.7","definedVersion":"^10.3.6","author":"Andrey Sitnik <andrey@sitnik.ru>"},{"department":"kessler","relatedTo":"stuff","name":"gh-pages","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git://github.com/tschaub/gh-pages.git","remoteVersion":"3.2.3","installedVersion":"3.2.3","definedVersion":"^3.1.0","author":"Tim Schaub http://tschaub.net/"},{"department":"kessler","relatedTo":"stuff","name":"license-report","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/ironSource/license-report.git","remoteVersion":"6.4.0","installedVersion":"6.2.0","definedVersion":"^6.2.0","author":"Yaniv Kessler"},{"department":"kessler","relatedTo":"stuff","name":"lint-staged","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/okonet/lint-staged.git","remoteVersion":"11.2.6","installedVersion":"11.2.6","definedVersion":"^11.1.2","author":"Andrey Okonetchnikov <andrey@okonet.ru>"},{"department":"kessler","relatedTo":"stuff","name":"node-sass","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/sass/node-sass.git","remoteVersion":"8.0.0","installedVersion":"8.0.0","definedVersion":"^8.0.0","author":"Andrew Nesbitt andrewnez@gmail.com http://andrew.github.com"},{"department":"kessler","relatedTo":"stuff","name":"postcss-cli","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/postcss/postcss-cli.git","remoteVersion":"9.1.0","installedVersion":"9.1.0","definedVersion":"^9.0.1","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"postcss-minify","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/jake-low/postcss-minify.git","remoteVersion":"1.1.0","installedVersion":"1.1.0","definedVersion":"^1.1.0","author":"Jake Low <hello@jakelow.com>"},{"department":"kessler","relatedTo":"stuff","name":"prettier","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/prettier/prettier.git","remoteVersion":"2.4.1","installedVersion":"2.4.1","definedVersion":"2.4.1","author":"James Long"},{"department":"kessler","relatedTo":"stuff","name":"react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/react.git","remoteVersion":"18.2.0","installedVersion":"18.2.0","definedVersion":"^18.1.0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"react-bootstrap-icons","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/ismamz/react-bootstrap-icons.git","remoteVersion":"1.10.3","installedVersion":"1.9.1","definedVersion":"^1.9.1","author":"Ismael Martínez"},{"department":"kessler","relatedTo":"stuff","name":"react-docgen","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/reactjs/react-docgen.git","remoteVersion":"5.4.3","installedVersion":"5.4.3","definedVersion":"^5.4.0","author":"Felix Kling"},{"department":"kessler","relatedTo":"stuff","name":"react-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/react.git","remoteVersion":"18.2.0","installedVersion":"18.2.0","definedVersion":"^18.1.0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"react-markdown","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/remarkjs/react-markdown.git","remoteVersion":"8.0.7","installedVersion":"8.0.3","definedVersion":"^8.0.3","author":"Espen Hovlandsdal <espen@hovlandsdal.com>"},{"department":"kessler","relatedTo":"stuff","name":"react-router-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/remix-run/react-router.git","remoteVersion":"5.3.4","installedVersion":"5.3.3","definedVersion":"^5.3.3","author":"Remix Software <hello@remix.run>"},{"department":"kessler","relatedTo":"stuff","name":"react-scripts","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/create-react-app.git","remoteVersion":"5.0.1","installedVersion":"5.0.1","definedVersion":"^5.0.1","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"react-syntax-highlighter","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/react-syntax-highlighter/react-syntax-highlighter.git","remoteVersion":"15.5.0","installedVersion":"15.5.0","definedVersion":"^15.4.3","author":"Conor Hastings"},{"department":"kessler","relatedTo":"stuff","name":"reactstrap","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+ssh://git@github.com/reactstrap/reactstrap.git","remoteVersion":"9.2.0","installedVersion":"9.1.2","definedVersion":"^9.0.0-0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"typescript","licensePeriod":"perpetual","material":"material","licenseType":"Apache-2.0","link":"git+https://github.com/Microsoft/TypeScript.git","remoteVersion":"4.9.5","installedVersion":"4.7.4","definedVersion":"^4.3.5","author":"Microsoft Corp."},{"department":"kessler","relatedTo":"stuff","name":"react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/react.git","remoteVersion":"18.2.0","installedVersion":"18.2.0","definedVersion":"^16.0.0 || ^17.0.0 || ^18.0.0","author":"n/a"}]
+[{"department":"kessler","relatedTo":"stuff","name":"@popperjs/core","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/popperjs/popper-core.git","remoteVersion":"2.11.8","installedVersion":"2.11.7","definedVersion":"^2.11.5","author":"Federico Zivolo <federico.zivolo@gmail.com>"},{"department":"kessler","relatedTo":"stuff","name":"bootstrap","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/twbs/bootstrap.git","remoteVersion":"5.3.2","installedVersion":"5.3.0","definedVersion":"~5.3.0","author":"The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)"},{"department":"kessler","relatedTo":"stuff","name":"clsx","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/lukeed/clsx.git","remoteVersion":"1.2.1","installedVersion":"1.2.1","definedVersion":"^1.1.1","author":"Luke Edwards luke.edwards05@gmail.com https://lukeed.com"},{"department":"kessler","relatedTo":"stuff","name":"@babel/cli","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.15","installedVersion":"7.18.9","definedVersion":"^7.10.4","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@babel/preset-env","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.20","installedVersion":"7.18.9","definedVersion":"^7.10.4","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@babel/preset-react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.15","installedVersion":"7.18.6","definedVersion":"^7.10.4","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@babel/preset-typescript","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/babel/babel.git","remoteVersion":"7.22.15","installedVersion":"7.18.6","definedVersion":"^7.9.0","author":"The Babel Team (https://babel.dev/team)"},{"department":"kessler","relatedTo":"stuff","name":"@testing-library/jest-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/testing-library/jest-dom.git","remoteVersion":"4.2.4","installedVersion":"4.2.4","definedVersion":"^4.2.4","author":"Ernesto Garcia <gnapse@gmail.com> (http://gnapse.github.io/)"},{"department":"kessler","relatedTo":"stuff","name":"@testing-library/react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/testing-library/react-testing-library.git","remoteVersion":"9.5.0","installedVersion":"9.5.0","definedVersion":"^9.5.0","author":"Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)"},{"department":"kessler","relatedTo":"stuff","name":"@testing-library/user-event","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/testing-library/user-event.git","remoteVersion":"7.2.1","installedVersion":"7.2.1","definedVersion":"^7.2.1","author":"Giorgio Polvara <polvara@gmail.com>"},{"department":"kessler","relatedTo":"stuff","name":"@types/bootstrap","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"5.2.7","installedVersion":"5.2.0","definedVersion":"^5.0.17","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/jest","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"24.9.1","installedVersion":"24.9.1","definedVersion":"^24.9.1","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/node","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"12.20.55","installedVersion":"12.20.55","definedVersion":"^12.12.47","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"18.2.22","installedVersion":"18.0.15","definedVersion":"^18.0.9","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"18.2.7","installedVersion":"18.0.6","definedVersion":"^18.0.5","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react-router-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"5.3.3","installedVersion":"5.3.3","definedVersion":"^5.3.3","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"@types/react-syntax-highlighter","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"https://github.com/DefinitelyTyped/DefinitelyTyped.git","remoteVersion":"13.5.2","installedVersion":"13.5.2","definedVersion":"^13.5.0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"autoprefixer","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/postcss/autoprefixer.git","remoteVersion":"10.4.16","installedVersion":"10.4.7","definedVersion":"^10.3.6","author":"Andrey Sitnik <andrey@sitnik.ru>"},{"department":"kessler","relatedTo":"stuff","name":"gh-pages","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git://github.com/tschaub/gh-pages.git","remoteVersion":"3.2.3","installedVersion":"3.2.3","definedVersion":"^3.1.0","author":"Tim Schaub http://tschaub.net/"},{"department":"kessler","relatedTo":"stuff","name":"license-report","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/ironSource/license-report.git","remoteVersion":"6.4.0","installedVersion":"6.2.0","definedVersion":"^6.2.0","author":"Yaniv Kessler"},{"department":"kessler","relatedTo":"stuff","name":"lint-staged","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/okonet/lint-staged.git","remoteVersion":"11.2.6","installedVersion":"11.2.6","definedVersion":"^11.1.2","author":"Andrey Okonetchnikov <andrey@okonet.ru>"},{"department":"kessler","relatedTo":"stuff","name":"node-sass","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/sass/node-sass.git","remoteVersion":"8.0.0","installedVersion":"8.0.0","definedVersion":"^8.0.0","author":"Andrew Nesbitt andrewnez@gmail.com http://andrew.github.com"},{"department":"kessler","relatedTo":"stuff","name":"postcss-cli","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/postcss/postcss-cli.git","remoteVersion":"9.1.0","installedVersion":"9.1.0","definedVersion":"^9.0.1","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"postcss-minify","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/jake-low/postcss-minify.git","remoteVersion":"1.1.0","installedVersion":"1.1.0","definedVersion":"^1.1.0","author":"Jake Low <hello@jakelow.com>"},{"department":"kessler","relatedTo":"stuff","name":"prettier","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/prettier/prettier.git","remoteVersion":"2.4.1","installedVersion":"2.4.1","definedVersion":"2.4.1","author":"James Long"},{"department":"kessler","relatedTo":"stuff","name":"react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/react.git","remoteVersion":"18.2.0","installedVersion":"18.2.0","definedVersion":"^18.1.0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"react-bootstrap-icons","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/ismamz/react-bootstrap-icons.git","remoteVersion":"1.10.3","installedVersion":"1.9.1","definedVersion":"^1.9.1","author":"Ismael Martínez"},{"department":"kessler","relatedTo":"stuff","name":"react-docgen","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/reactjs/react-docgen.git","remoteVersion":"5.4.3","installedVersion":"5.4.3","definedVersion":"^5.4.0","author":"Felix Kling"},{"department":"kessler","relatedTo":"stuff","name":"react-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/react.git","remoteVersion":"18.2.0","installedVersion":"18.2.0","definedVersion":"^18.1.0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"react-markdown","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/remarkjs/react-markdown.git","remoteVersion":"8.0.7","installedVersion":"8.0.3","definedVersion":"^8.0.3","author":"Espen Hovlandsdal <espen@hovlandsdal.com>"},{"department":"kessler","relatedTo":"stuff","name":"react-router-dom","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/remix-run/react-router.git","remoteVersion":"5.3.4","installedVersion":"5.3.3","definedVersion":"^5.3.3","author":"Remix Software <hello@remix.run>"},{"department":"kessler","relatedTo":"stuff","name":"react-scripts","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/create-react-app.git","remoteVersion":"5.0.1","installedVersion":"5.0.1","definedVersion":"^5.0.1","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"react-syntax-highlighter","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/react-syntax-highlighter/react-syntax-highlighter.git","remoteVersion":"15.5.0","installedVersion":"15.5.0","definedVersion":"^15.4.3","author":"Conor Hastings"},{"department":"kessler","relatedTo":"stuff","name":"reactstrap","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+ssh://git@github.com/reactstrap/reactstrap.git","remoteVersion":"9.2.0","installedVersion":"9.1.2","definedVersion":"^9.0.0-0","author":"n/a"},{"department":"kessler","relatedTo":"stuff","name":"typescript","licensePeriod":"perpetual","material":"material","licenseType":"Apache-2.0","link":"git+https://github.com/Microsoft/TypeScript.git","remoteVersion":"4.9.5","installedVersion":"4.7.4","definedVersion":"^4.3.5","author":"Microsoft Corp."},{"department":"kessler","relatedTo":"stuff","name":"react","licensePeriod":"perpetual","material":"material","licenseType":"MIT","link":"git+https://github.com/facebook/react.git","remoteVersion":"18.2.0","installedVersion":"18.2.0","definedVersion":"^16.0.0 || ^17.0.0 || ^18.0.0","author":"n/a"}]
diff --git a/src/docs/examples/MenuItem.tsx b/src/docs/examples/MenuItem.tsx
new file mode 100644
index 00000000..125f9037
--- /dev/null
+++ b/src/docs/examples/MenuItem.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react"
+import MenuItem from "../../components/MenuItem"
+import SidebarMenu from "../../components/SidebarMenu"
+
+export default function MenuItemExample() {
+    const [navigationSource, setNavigationSource] = useState<"user" | "default">("default")
+
+    return (
+        <div className="bg-primary position-relative">
+            <SidebarMenu sidebarClass="position-static shadow-none overflow-visible" menuClass="overflow-visible">
+                <div className="blue-sidebar-visible-on-open blue-sidebar-menu-horizontal-on-open">
+                    <MenuItem
+                        label="Default"
+                        labelClassName="text-center w-100"
+                        onClick={() => setNavigationSource("default")}
+                        isActive={navigationSource === "default"}
+                    />
+
+                    <MenuItem
+                        label="User"
+                        labelClassName="text-center w-100"
+                        onClick={() => setNavigationSource("user")}
+                        isActive={navigationSource === "user"}
+                    />
+                </div>
+            </SidebarMenu>
+            <p className="p-3 bg-body">Resize the browser to see how the sidebar and its items behave.</p>
+        </div>
+    )
+}