@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/Sidebar/Sidebar.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { BrowserRouter, Route, Routes, useLocation } from "@webiny/react-router";
 import { ReactComponent as AuditLogsIcon } from "@webiny/icons/assignment.svg";
 import { ReactComponent as FormBuilderIcon } from "@webiny/icons/check_box.svg";
 import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
@@ -11,11 +10,17 @@ import { ReactComponent as DocsIcon } from "@webiny/icons/summarize.svg";
 import { ReactComponent as ApiPlaygroundIcon } from "@webiny/icons/swap_horiz.svg";
 import { ReactComponent as MoreVertIcon } from "@webiny/icons/more_vert.svg";
 import { ReactComponent as FileManagerIcon } from "@webiny/icons/insert_drive_file.svg";
-import { Sidebar } from "./Sidebar";
-import { SidebarProvider } from "./components/SidebarProvider";
-import { DropdownMenu } from "../DropdownMenu";
-import { Tag } from "../Tag";
-import { Tooltip } from "../Tooltip";
+import { ReactComponent as GridIcon } from "@webiny/icons/grid_4x4.svg";
+import { ReactComponent as CarIcon } from "@webiny/icons/car_rental.svg";
+import { ReactComponent as VehiclesIcon } from "@webiny/icons/expand.svg";
+import { Sidebar } from "./Sidebar.js";
+import { SidebarProvider } from "./components/SidebarProvider.js";
+import { DropdownMenu } from "../DropdownMenu/index.js";
+import { Tag } from "../Tag/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { AdminUiProvider } from "../AdminUiProvider/index.js";
+import { HashLink } from "./stories/HashLink.js";
+import { useHash } from "./stories/useHash.js";
 const meta = {
   title: "Components/Sidebar",
   component: Sidebar,
@@ -32,16 +37,21 @@ const meta = {
 };
 export default meta;
 export const MainMenu = {
-  render: () => /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(Routes, null, /*#__PURE__*/React.createElement(Route, {
-    path: "*",
-    element: /*#__PURE__*/React.createElement(SidebarComponent, null)
-  })))
+  render: () => /*#__PURE__*/React.createElement(AdminUiProvider, {
+    linkComponent: HashLink
+  }, /*#__PURE__*/React.createElement(SidebarComponent, null))
 };
 const SidebarComponent = () => {
-  const {
-    hash
-  } = useLocation();
-  return /*#__PURE__*/React.createElement(SidebarProvider, null, /*#__PURE__*/React.createElement(Sidebar, {
+  const hash = useHash();
+  const [sidebarState, setSidebarState] = React.useState({
+    pinned: false,
+    expandedSections: [],
+    pinnedItems: []
+  });
+  return /*#__PURE__*/React.createElement(SidebarProvider, {
+    state: sidebarState,
+    onChangeState: setSidebarState
+  }, /*#__PURE__*/React.createElement(Sidebar, {
     title: "Webiny",
     icon: /*#__PURE__*/React.createElement(Sidebar.Icon, {
       element: /*#__PURE__*/React.createElement("img", {
@@ -61,30 +71,35 @@ const SidebarComponent = () => {
           element: /*#__PURE__*/React.createElement(MoreVertIcon, null)
         })
       }),
-      className: "wby-w-[225px]"
+      className: "w-[225px]"
     }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "API Playground",
+      text: "API Playground",
       icon: /*#__PURE__*/React.createElement(ApiPlaygroundIcon, null)
     }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Documentation",
+      text: "Documentation",
       icon: /*#__PURE__*/React.createElement(DocsIcon, null)
     }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "GitHub",
+      text: "GitHub",
       icon: /*#__PURE__*/React.createElement(GithubIcon, null)
     }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Slack",
+      text: "Slack",
       icon: /*#__PURE__*/React.createElement(ChatIcon, null)
     }), /*#__PURE__*/React.createElement(DropdownMenu.Separator, null), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
       text: /*#__PURE__*/React.createElement("div", {
-        className: "flex wby-items-center"
-      }, "Webiny 5.43.0", /*#__PURE__*/React.createElement(Tag, {
+        className: "flex items-center"
+      }, "Webiny 6.0.0", /*#__PURE__*/React.createElement(Tag, {
         variant: "accent",
         content: "WCP ",
-        className: "wby-ml-sm-extra"
+        className: "ml-sm-extra"
       }))
     }))
   }, /*#__PURE__*/React.createElement(Sidebar.Link, {
+    pinnable: true,
     text: "Audit Logs",
+    action: /*#__PURE__*/React.createElement(Sidebar.Item.Action, {
+      element: /*#__PURE__*/React.createElement(MoreVertIcon, null),
+      onClick: () => console.log("More action clicked")
+    }),
     to: "#audit-logs",
     active: hash === "#audit-logs",
     icon: /*#__PURE__*/React.createElement(Sidebar.Item.Icon, {
@@ -92,6 +107,7 @@ const SidebarComponent = () => {
       element: /*#__PURE__*/React.createElement(AuditLogsIcon, null)
     })
   }), /*#__PURE__*/React.createElement(Sidebar.Link, {
+    pinnable: true,
     text: "Form Builder",
     to: "#form-builder",
     active: hash === "#form-builder",
@@ -100,6 +116,7 @@ const SidebarComponent = () => {
       element: /*#__PURE__*/React.createElement(FormBuilderIcon, null)
     })
   }), /*#__PURE__*/React.createElement(Sidebar.Item, {
+    pinnable: true,
     text: "File Manager",
     onClick: () => {
       alert("File Manager clicked");
@@ -109,6 +126,52 @@ const SidebarComponent = () => {
       element: /*#__PURE__*/React.createElement(FileManagerIcon, null)
     })
   }), /*#__PURE__*/React.createElement(Sidebar.Item, {
+    text: "Content",
+    icon: /*#__PURE__*/React.createElement(Sidebar.Item.Icon, {
+      label: "Headless CMS",
+      element: /*#__PURE__*/React.createElement(CmsIcon, null)
+    })
+  }, /*#__PURE__*/React.createElement(Sidebar.Item, {
+    text: "Vehicles",
+    icon: /*#__PURE__*/React.createElement(Sidebar.Item.Icon, {
+      label: "Headless CMS",
+      element: /*#__PURE__*/React.createElement(VehiclesIcon, null)
+    }),
+    action: /*#__PURE__*/React.createElement(Sidebar.Item.Action, {
+      element: /*#__PURE__*/React.createElement(MoreVertIcon, null)
+    })
+  }, /*#__PURE__*/React.createElement(Sidebar.Link, {
+    pinnable: true,
+    pinnedIcon: /*#__PURE__*/React.createElement(Sidebar.Item.Icon, {
+      label: "File Manager",
+      element: /*#__PURE__*/React.createElement(CarIcon, null)
+    }),
+    text: "Cars",
+    to: "#cms-cars",
+    active: hash === "#cms-cars"
+  }), /*#__PURE__*/React.createElement(Sidebar.Link, {
+    pinnable: true,
+    text: "Planes",
+    to: "#cms-planes",
+    active: hash === "#cms-planes"
+  })), " ", /*#__PURE__*/React.createElement(Sidebar.Item, {
+    text: "Ungrouped",
+    icon: /*#__PURE__*/React.createElement(Sidebar.Item.Icon, {
+      label: "Headless CMS",
+      element: /*#__PURE__*/React.createElement(GridIcon, null)
+    }),
+    action: /*#__PURE__*/React.createElement(Sidebar.Item.Action, {
+      element: /*#__PURE__*/React.createElement(MoreVertIcon, null)
+    })
+  }, /*#__PURE__*/React.createElement(Sidebar.Link, {
+    text: "Articles",
+    to: "#cms-articles",
+    active: hash === "#cms-articles"
+  }), /*#__PURE__*/React.createElement(Sidebar.Link, {
+    text: "Settings",
+    to: "#cms-settings",
+    active: hash === "#cms-settings"
+  }))), /*#__PURE__*/React.createElement(Sidebar.Item, {
     text: "Headless CMS",
     icon: /*#__PURE__*/React.createElement(Sidebar.Item.Icon, {
       label: "Headless CMS",
@@ -117,10 +180,12 @@ const SidebarComponent = () => {
   }, /*#__PURE__*/React.createElement(Sidebar.Group, {
     text: "Content Models"
   }), /*#__PURE__*/React.createElement(Sidebar.Link, {
+    pinnable: true,
     text: "Groups",
     to: "#cms-groups",
     active: hash === "#cms-groups"
   }), /*#__PURE__*/React.createElement(Sidebar.Link, {
+    pinnable: true,
     text: "Models",
     to: "#cms-models",
     active: hash === "#cms-models"

package/Sidebar/Sidebar.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","BrowserRouter","Route","Routes","useLocation","ReactComponent","AuditLogsIcon","FormBuilderIcon","CmsIcon","PageBuilderIcon","InfoIcon","ChatIcon","GithubIcon","DocsIcon","ApiPlaygroundIcon","MoreVertIcon","FileManagerIcon","Sidebar","SidebarProvider","DropdownMenu","Tag","Tooltip","meta","title","component","parameters","layout","argTypes","decorators","Story","createElement","Provider","MainMenu","render","path","element","SidebarComponent","hash","icon","Icon","src","alt","label","footer","trigger","Item","text","action","Action","className","content","Separator","variant","Link","to","active","onClick","alert","Group","disabled"],"sources":["Sidebar.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { BrowserRouter, Route, Routes, useLocation } from \"@webiny/react-router\";\nimport { ReactComponent as AuditLogsIcon } from \"@webiny/icons/assignment.svg\";\nimport { ReactComponent as FormBuilderIcon } from \"@webiny/icons/check_box.svg\";\nimport { ReactComponent as CmsIcon } from \"@webiny/icons/web.svg\";\nimport { ReactComponent as PageBuilderIcon } from \"@webiny/icons/table_chart.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as ChatIcon } from \"@webiny/icons/chat.svg\";\nimport { ReactComponent as GithubIcon } from \"@webiny/icons/gite.svg\";\nimport { ReactComponent as DocsIcon } from \"@webiny/icons/summarize.svg\";\nimport { ReactComponent as ApiPlaygroundIcon } from \"@webiny/icons/swap_horiz.svg\";\nimport { ReactComponent as MoreVertIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as FileManagerIcon } from \"@webiny/icons/insert_drive_file.svg\";\nimport { Sidebar } from \"./Sidebar\";\nimport { SidebarProvider } from \"~/Sidebar/components/SidebarProvider\";\nimport { DropdownMenu } from \"~/DropdownMenu\";\nimport { Tag } from \"~/Tag\";\nimport { Tooltip } from \"~/Tooltip\";\n\nconst meta: Meta<typeof Sidebar> = {\n    title: \"Components/Sidebar\",\n    component: Sidebar,\n\n    parameters: {\n        layout: \"fullscreen\"\n    },\n\n    // We removed this because in the \"all stories\" view, the menu gets visually\n    // broken because of the fixed positioning of the sidebar. This is not a problem\n    // when the story is viewed in isolation.\n    // tags: [\"autodocs\"],\n\n    argTypes: {},\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Sidebar>;\n\nexport const MainMenu: Story = {\n    render: () => (\n        <BrowserRouter>\n            <Routes>\n                <Route path={\"*\"} element={<SidebarComponent />} />\n            </Routes>\n        </BrowserRouter>\n    )\n};\n\nconst SidebarComponent = () => {\n    const { hash } = useLocation();\n\n    return (\n        <SidebarProvider>\n            <Sidebar\n                title={\"Webiny\"}\n                icon={\n                    <Sidebar.Icon\n                        element={<img src=\"/images/wby-logo.png\" alt=\"Webiny\" />}\n                        label={\"Webiny\"}\n                    />\n                }\n                footer={\n                    <DropdownMenu\n                        trigger={\n                            <Sidebar.Item\n                                icon={<Sidebar.Item.Icon label=\"Settings\" element={<InfoIcon />} />}\n                                text={\"Support\"}\n                                action={<Sidebar.Item.Action element={<MoreVertIcon />} />}\n                            />\n                        }\n                        className={\"wby-w-[225px]\"}\n                    >\n                        <DropdownMenu.Item\n                            content={\"API Playground\"}\n                            icon={<ApiPlaygroundIcon />}\n                        />\n                        <DropdownMenu.Item content={\"Documentation\"} icon={<DocsIcon />} />\n                        <DropdownMenu.Item content={\"GitHub\"} icon={<GithubIcon />} />\n                        <DropdownMenu.Item content={\"Slack\"} icon={<ChatIcon />} />\n                        <DropdownMenu.Separator />\n                        <DropdownMenu.Item\n                            text={\n                                <div className={\"flex wby-items-center\"}>\n                                    Webiny 5.43.0\n                                    <Tag\n                                        variant={\"accent\"}\n                                        content={\"WCP \"}\n                                        className={\"wby-ml-sm-extra\"}\n                                    />\n                                </div>\n                            }\n                        />\n                    </DropdownMenu>\n                }\n            >\n                <Sidebar.Link\n                    text={\"Audit Logs\"}\n                    to={\"#audit-logs\"}\n                    active={hash === \"#audit-logs\"}\n                    icon={<Sidebar.Item.Icon label=\"Audit Logs\" element={<AuditLogsIcon />} />}\n                />\n                <Sidebar.Link\n                    text={\"Form Builder\"}\n                    to={\"#form-builder\"}\n                    active={hash === \"#form-builder\"}\n                    icon={<Sidebar.Item.Icon label=\"Form Builder\" element={<FormBuilderIcon />} />}\n                />\n                <Sidebar.Item\n                    text={\"File Manager\"}\n                    onClick={() => {\n                        alert(\"File Manager clicked\");\n                    }}\n                    icon={<Sidebar.Item.Icon label=\"File Manager\" element={<FileManagerIcon />} />}\n                />\n                <Sidebar.Item\n                    text={\"Headless CMS\"}\n                    icon={<Sidebar.Item.Icon label=\"Headless CMS\" element={<CmsIcon />} />}\n                >\n                    <Sidebar.Group text={\"Content Models\"} />\n                    <Sidebar.Link\n                        text={\"Groups\"}\n                        to={\"#cms-groups\"}\n                        active={hash === \"#cms-groups\"}\n                    />\n                    <Sidebar.Link\n                        text={\"Models\"}\n                        to={\"#cms-models\"}\n                        active={hash === \"#cms-models\"}\n                    />\n                </Sidebar.Item>\n                <Sidebar.Item\n                    text={\"Page Builder\"}\n                    icon={<Sidebar.Item.Icon label=\"Page Builder\" element={<PageBuilderIcon />} />}\n                >\n                    <Sidebar.Group text={\"Blocks\"} />\n                    <Sidebar.Link\n                        text={\"Blocks\"}\n                        to={\"#pb-blocks\"}\n                        active={hash === \"#pb-blocks\"}\n                    />\n                    <Sidebar.Link\n                        text={\"Categories\"}\n                        to={\"#pb-blocks-categories\"}\n                        active={hash === \"#pb-blocks-categories\"}\n                    />\n\n                    <Sidebar.Group text={\"Pages\"} active={hash === `#pb-pages`} />\n                    <Sidebar.Link\n                        to={\"#pb-pages-categories\"}\n                        text={\"Categories\"}\n                        active={hash === `#pb-pages-categories`}\n                    />\n                    <Sidebar.Link\n                        to={\"#pb-pages-menus\"}\n                        text={\"Menus\"}\n                        active={hash === `#pb-pages-menus`}\n                    />\n                    <Sidebar.Link\n                        to={\"#pb-pages-pages\"}\n                        text={\"Pages\"}\n                        active={hash === `#pb-pages-pages`}\n                    />\n                    <Sidebar.Link\n                        to={\"#pb-pages-templates\"}\n                        text={\"Templates\"}\n                        disabled={true}\n                        active={hash === `#pb-pages-templates`}\n                    />\n                </Sidebar.Item>\n            </Sidebar>\n        </SidebarProvider>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","AuditLogsIcon","FormBuilderIcon","CmsIcon","PageBuilderIcon","InfoIcon","ChatIcon","GithubIcon","DocsIcon","ApiPlaygroundIcon","MoreVertIcon","FileManagerIcon","GridIcon","CarIcon","VehiclesIcon","Sidebar","SidebarProvider","DropdownMenu","Tag","Tooltip","AdminUiProvider","HashLink","useHash","meta","title","component","parameters","layout","argTypes","decorators","Story","createElement","Provider","MainMenu","render","linkComponent","SidebarComponent","hash","sidebarState","setSidebarState","useState","pinned","expandedSections","pinnedItems","state","onChangeState","icon","Icon","element","src","alt","label","footer","trigger","Item","text","action","Action","className","Separator","variant","content","Link","pinnable","onClick","console","log","to","active","alert","pinnedIcon","Group","disabled"],"sources":["Sidebar.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as AuditLogsIcon } from \"@webiny/icons/assignment.svg\";\nimport { ReactComponent as FormBuilderIcon } from \"@webiny/icons/check_box.svg\";\nimport { ReactComponent as CmsIcon } from \"@webiny/icons/web.svg\";\nimport { ReactComponent as PageBuilderIcon } from \"@webiny/icons/table_chart.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as ChatIcon } from \"@webiny/icons/chat.svg\";\nimport { ReactComponent as GithubIcon } from \"@webiny/icons/gite.svg\";\nimport { ReactComponent as DocsIcon } from \"@webiny/icons/summarize.svg\";\nimport { ReactComponent as ApiPlaygroundIcon } from \"@webiny/icons/swap_horiz.svg\";\nimport { ReactComponent as MoreVertIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as FileManagerIcon } from \"@webiny/icons/insert_drive_file.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_4x4.svg\";\nimport { ReactComponent as CarIcon } from \"@webiny/icons/car_rental.svg\";\nimport { ReactComponent as VehiclesIcon } from \"@webiny/icons/expand.svg\";\nimport { Sidebar } from \"./Sidebar.js\";\nimport { SidebarProvider } from \"~/Sidebar/components/SidebarProvider.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { AdminUiProvider } from \"~/AdminUiProvider/index.js\";\nimport { HashLink } from \"~/Sidebar/stories/HashLink.js\";\nimport { useHash } from \"~/Sidebar/stories/useHash.js\";\n\nconst meta: Meta<typeof Sidebar> = {\n    title: \"Components/Sidebar\",\n    component: Sidebar,\n\n    parameters: {\n        layout: \"fullscreen\"\n    },\n\n    // We removed this because in the \"all stories\" view, the menu gets visually\n    // broken because of the fixed positioning of the sidebar. This is not a problem\n    // when the story is viewed in isolation.\n    // tags: [\"autodocs\"],\n\n    argTypes: {},\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Sidebar>;\n\nexport const MainMenu: Story = {\n    render: () => (\n        <AdminUiProvider linkComponent={HashLink}>\n            <SidebarComponent />\n        </AdminUiProvider>\n    )\n};\n\nconst SidebarComponent = () => {\n    const hash = useHash();\n\n    const [sidebarState, setSidebarState] = React.useState<{\n        pinned: boolean;\n        expandedSections: string[];\n        pinnedItems: string[];\n    }>({\n        pinned: false,\n        expandedSections: [],\n        pinnedItems: []\n    });\n\n    return (\n        <SidebarProvider state={sidebarState} onChangeState={setSidebarState}>\n            <Sidebar\n                title={\"Webiny\"}\n                icon={\n                    <Sidebar.Icon\n                        element={<img src=\"/images/wby-logo.png\" alt=\"Webiny\" />}\n                        label={\"Webiny\"}\n                    />\n                }\n                footer={\n                    <DropdownMenu\n                        trigger={\n                            <Sidebar.Item\n                                icon={<Sidebar.Item.Icon label=\"Settings\" element={<InfoIcon />} />}\n                                text={\"Support\"}\n                                action={<Sidebar.Item.Action element={<MoreVertIcon />} />}\n                            />\n                        }\n                        className={\"w-[225px]\"}\n                    >\n                        <DropdownMenu.Item text={\"API Playground\"} icon={<ApiPlaygroundIcon />} />\n                        <DropdownMenu.Item text={\"Documentation\"} icon={<DocsIcon />} />\n                        <DropdownMenu.Item text={\"GitHub\"} icon={<GithubIcon />} />\n                        <DropdownMenu.Item text={\"Slack\"} icon={<ChatIcon />} />\n                        <DropdownMenu.Separator />\n                        <DropdownMenu.Item\n                            text={\n                                <div className={\"flex items-center\"}>\n                                    Webiny 6.0.0\n                                    <Tag\n                                        variant={\"accent\"}\n                                        content={\"WCP \"}\n                                        className={\"ml-sm-extra\"}\n                                    />\n                                </div>\n                            }\n                        />\n                    </DropdownMenu>\n                }\n            >\n                <Sidebar.Link\n                    pinnable\n                    text={\"Audit Logs\"}\n                    action={\n                        <Sidebar.Item.Action\n                            element={<MoreVertIcon />}\n                            onClick={() => console.log(\"More action clicked\")}\n                        />\n                    }\n                    to={\"#audit-logs\"}\n                    active={hash === \"#audit-logs\"}\n                    icon={<Sidebar.Item.Icon label=\"Audit Logs\" element={<AuditLogsIcon />} />}\n                />\n                <Sidebar.Link\n                    pinnable\n                    text={\"Form Builder\"}\n                    to={\"#form-builder\"}\n                    active={hash === \"#form-builder\"}\n                    icon={<Sidebar.Item.Icon label=\"Form Builder\" element={<FormBuilderIcon />} />}\n                />\n                <Sidebar.Item\n                    pinnable\n                    text={\"File Manager\"}\n                    onClick={() => {\n                        alert(\"File Manager clicked\");\n                    }}\n                    icon={<Sidebar.Item.Icon label=\"File Manager\" element={<FileManagerIcon />} />}\n                />\n                <Sidebar.Item\n                    text={\"Content\"}\n                    icon={<Sidebar.Item.Icon label=\"Headless CMS\" element={<CmsIcon />} />}\n                >\n                    <Sidebar.Item\n                        text={\"Vehicles\"}\n                        icon={<Sidebar.Item.Icon label=\"Headless CMS\" element={<VehiclesIcon />} />}\n                        action={<Sidebar.Item.Action element={<MoreVertIcon />} />}\n                    >\n                        <Sidebar.Link\n                            pinnable\n                            pinnedIcon={\n                                <Sidebar.Item.Icon label=\"File Manager\" element={<CarIcon />} />\n                            }\n                            text={\"Cars\"}\n                            to={\"#cms-cars\"}\n                            active={hash === \"#cms-cars\"}\n                        />\n                        <Sidebar.Link\n                            pinnable\n                            text={\"Planes\"}\n                            to={\"#cms-planes\"}\n                            active={hash === \"#cms-planes\"}\n                        />\n                    </Sidebar.Item>{\" \"}\n                    <Sidebar.Item\n                        text={\"Ungrouped\"}\n                        icon={<Sidebar.Item.Icon label=\"Headless CMS\" element={<GridIcon />} />}\n                        action={<Sidebar.Item.Action element={<MoreVertIcon />} />}\n                    >\n                        <Sidebar.Link\n                            text={\"Articles\"}\n                            to={\"#cms-articles\"}\n                            active={hash === \"#cms-articles\"}\n                        />\n                        <Sidebar.Link\n                            text={\"Settings\"}\n                            to={\"#cms-settings\"}\n                            active={hash === \"#cms-settings\"}\n                        />\n                    </Sidebar.Item>\n                </Sidebar.Item>\n                <Sidebar.Item\n                    text={\"Headless CMS\"}\n                    icon={<Sidebar.Item.Icon label=\"Headless CMS\" element={<CmsIcon />} />}\n                >\n                    <Sidebar.Group text={\"Content Models\"} />\n                    <Sidebar.Link\n                        pinnable\n                        text={\"Groups\"}\n                        to={\"#cms-groups\"}\n                        active={hash === \"#cms-groups\"}\n                    />\n                    <Sidebar.Link\n                        pinnable\n                        text={\"Models\"}\n                        to={\"#cms-models\"}\n                        active={hash === \"#cms-models\"}\n                    />\n                </Sidebar.Item>\n                <Sidebar.Item\n                    text={\"Page Builder\"}\n                    icon={<Sidebar.Item.Icon label=\"Page Builder\" element={<PageBuilderIcon />} />}\n                >\n                    <Sidebar.Group text={\"Blocks\"} />\n                    <Sidebar.Link\n                        text={\"Blocks\"}\n                        to={\"#pb-blocks\"}\n                        active={hash === \"#pb-blocks\"}\n                    />\n                    <Sidebar.Link\n                        text={\"Categories\"}\n                        to={\"#pb-blocks-categories\"}\n                        active={hash === \"#pb-blocks-categories\"}\n                    />\n\n                    <Sidebar.Group text={\"Pages\"} active={hash === `#pb-pages`} />\n                    <Sidebar.Link\n                        to={\"#pb-pages-categories\"}\n                        text={\"Categories\"}\n                        active={hash === `#pb-pages-categories`}\n                    />\n                    <Sidebar.Link\n                        to={\"#pb-pages-menus\"}\n                        text={\"Menus\"}\n                        active={hash === `#pb-pages-menus`}\n                    />\n                    <Sidebar.Link\n                        to={\"#pb-pages-pages\"}\n                        text={\"Pages\"}\n                        active={hash === `#pb-pages-pages`}\n                    />\n                    <Sidebar.Link\n                        to={\"#pb-pages-templates\"}\n                        text={\"Templates\"}\n                        disabled={true}\n                        active={hash === `#pb-pages-templates`}\n                    />\n                </Sidebar.Item>\n            </Sidebar>\n        </SidebarProvider>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/Sidebar/components/SidebarContent.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const SidebarContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+declare const SidebarContent: ({ className, children, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
 export { SidebarContent };

package/Sidebar/components/SidebarContent.js

@@ -1,13 +1,33 @@
 import React from "react";
-import { cn } from "../../utils";
+import { cn } from "../../utils.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
+import { useSidebar } from "./SidebarProvider.js";
 const SidebarContent = ({
   className,
+  children,
   ...props
 }) => {
+  const {
+    state
+  } = useSidebar();
+  const isExpanded = state === "expanded";
+  if (isExpanded) {
+    // Extract dir and onScroll props to avoid type conflicts with ScrollArea.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      dir,
+      onScroll,
+      ...restProps
+    } = props;
+    return /*#__PURE__*/React.createElement(ScrollArea, Object.assign({
+      "data-sidebar": "content",
+      className: cn("flex text-neutral-primary min-h-0 flex-1 flex-col gap-2", className)
+    }, restProps), children);
+  }
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     "data-sidebar": "content",
-    className: cn("wby-flex wby-text-neutral-primary wby-min-h-0 wby-flex-1 wby-flex-col wby-gap-2 wby-overflow-y-auto wby-overflow-x-hidden group-data-[state=collapsed]:wby-overflow-hidden", className)
-  }));
+    className: cn("flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[state=collapsed]:overflow-hidden", className)
+  }), children);
 };
 export { SidebarContent };
 

package/Sidebar/components/SidebarContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","SidebarContent","className","props","createElement","Object","assign"],"sources":["SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils\";\n\nconst SidebarContent = ({ className, ...props }: React.ComponentProps<\"div\">) => {\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"wby-flex wby-text-neutral-primary wby-min-h-0 wby-flex-1 wby-flex-col wby-gap-2 wby-overflow-y-auto wby-overflow-x-hidden group-data-[state=collapsed]:wby-overflow-hidden\",\n                className\n            )}\n        />\n    );\n};\n\nexport { SidebarContent };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE;AAEX,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAmC,CAAC,KAAK;EAC7E,oBACIJ,KAAA,CAAAK,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;IACT,gBAAa,SAAS;IACtBD,SAAS,EAAEF,EAAE,CACT,4KAA4K,EAC5KE,SACJ;EAAE,EACL,CAAC;AAEV,CAAC;AAED,SAASD,cAAc","ignoreList":[]}
+{"version":3,"names":["React","cn","ScrollArea","useSidebar","SidebarContent","className","children","props","state","isExpanded","dir","onScroll","restProps","createElement","Object","assign"],"sources":["SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\nconst SidebarContent = ({ className, children, ...props }: React.ComponentProps<\"div\">) => {\n    const { state } = useSidebar();\n    const isExpanded = state === \"expanded\";\n\n    if (isExpanded) {\n        // Extract dir and onScroll props to avoid type conflicts with ScrollArea.\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const { dir, onScroll, ...restProps } = props;\n        return (\n            <ScrollArea\n                data-sidebar=\"content\"\n                className={cn(\"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2\", className)}\n                {...restProps}\n            >\n                {children}\n            </ScrollArea>\n        );\n    }\n\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[state=collapsed]:overflow-hidden\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarContent };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE;AACX,SAASC,UAAU;AACnB,SAASC,UAAU;AAEnB,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAmC,CAAC,KAAK;EACvF,MAAM;IAAEC;EAAM,CAAC,GAAGL,UAAU,CAAC,CAAC;EAC9B,MAAMM,UAAU,GAAGD,KAAK,KAAK,UAAU;EAEvC,IAAIC,UAAU,EAAE;IACZ;IACA;IACA,MAAM;MAAEC,GAAG;MAAEC,QAAQ;MAAE,GAAGC;IAAU,CAAC,GAAGL,KAAK;IAC7C,oBACIP,KAAA,CAAAa,aAAA,CAACX,UAAU,EAAAY,MAAA,CAAAC,MAAA;MACP,gBAAa,SAAS;MACtBV,SAAS,EAAEJ,EAAE,CAAC,yDAAyD,EAAEI,SAAS;IAAE,GAChFO,SAAS,GAEZN,QACO,CAAC;EAErB;EAEA,oBACIN,KAAA,CAAAa,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQR,KAAK;IACT,gBAAa,SAAS;IACtBF,SAAS,EAAEJ,EAAE,CACT,wIAAwI,EACxII,SACJ;EAAE,IAEDC,QACA,CAAC;AAEd,CAAC;AAED,SAASF,cAAc","ignoreList":[]}

package/Sidebar/components/SidebarFooter.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Separator } from "../../Separator";
+import { Separator } from "../../Separator/index.js";
 const SidebarFooter = ({
   children,
   ...props
@@ -7,9 +7,9 @@ const SidebarFooter = ({
   return /*#__PURE__*/React.createElement("div", Object.assign({
     "data-sidebar": "footer"
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: "wby-px-sm wby-pb-xs"
+    className: "px-sm pb-xs"
   }, /*#__PURE__*/React.createElement(Separator, {
-    className: "wby-mb-px"
+    className: "mb-px"
   })), children);
 };
 export { SidebarFooter };

package/Sidebar/components/SidebarFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","SidebarFooter","children","props","createElement","Object","assign","className"],"sources":["SidebarFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator\";\n\nconst SidebarFooter = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div data-sidebar=\"footer\" {...props}>\n            <div className={\"wby-px-sm wby-pb-xs\"}>\n                <Separator className={\"wby-mb-px\"} />\n            </div>\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarFooter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAA4C,CAAC,KAAK;EACpF,oBACIJ,KAAA,CAAAK,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAK,gBAAa;EAAQ,GAAKH,KAAK,gBAChCJ,KAAA,CAAAK,aAAA;IAAKG,SAAS,EAAE;EAAsB,gBAClCR,KAAA,CAAAK,aAAA,CAACJ,SAAS;IAACO,SAAS,EAAE;EAAY,CAAE,CACnC,CAAC,EACLL,QACA,CAAC;AAEd,CAAC;AAED,SAASD,aAAa","ignoreList":[]}
+{"version":3,"names":["React","Separator","SidebarFooter","children","props","createElement","Object","assign","className"],"sources":["SidebarFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst SidebarFooter = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div data-sidebar=\"footer\" {...props}>\n            <div className={\"px-sm pb-xs\"}>\n                <Separator className={\"mb-px\"} />\n            </div>\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarFooter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAA4C,CAAC,KAAK;EACpF,oBACIJ,KAAA,CAAAK,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAK,gBAAa;EAAQ,GAAKH,KAAK,gBAChCJ,KAAA,CAAAK,aAAA;IAAKG,SAAS,EAAE;EAAc,gBAC1BR,KAAA,CAAAK,aAAA,CAACJ,SAAS;IAACO,SAAS,EAAE;EAAQ,CAAE,CAC/B,CAAC,EACLL,QACA,CAAC;AAEd,CAAC;AAED,SAASD,aAAa","ignoreList":[]}

package/Sidebar/components/SidebarHeader.js

@@ -1,10 +1,10 @@
-import React from "react";
-import { Separator } from "../../Separator";
-import { IconButton } from "../../Button";
-import { useSidebar } from "./SidebarProvider";
+import React, { useEffect, useState } from "react";
+import { Separator } from "../../Separator/index.js";
+import { IconButton } from "../../Button/index.js";
+import { useSidebar } from "./SidebarProvider.js";
 import { ReactComponent as PinSidebarIcon } from "@webiny/icons/chrome_reader_mode.svg";
 import { ReactComponent as UnpinSidebarIcon } from "@webiny/icons/width_full.svg";
-import { Tooltip } from "../../Tooltip";
+import { Tooltip } from "../../Tooltip/index.js";
 const SidebarHeader = ({
   title,
   icon
@@ -14,19 +14,30 @@ const SidebarHeader = ({
     expanded,
     pinned
   } = useSidebar();
+  const [showButton, setShowButton] = useState(false);
+  useEffect(() => {
+    if (expanded) {
+      const timer = setTimeout(() => {
+        setShowButton(true);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    setShowButton(false);
+    return undefined;
+  }, [expanded]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-px-xs-plus"
+    className: "px-xs-plus"
   }, /*#__PURE__*/React.createElement("div", {
     "data-sidebar": "header",
-    className: "wby-flex wby-justify-between wby-items-center wby-gap-sm wby-py-xs-plus wby-px-xs wby-overflow-x-hidden"
+    className: "flex justify-between items-center gap-sm py-xs-plus px-xs overflow-x-hidden"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-items-center wby-gap-x-sm [&_a]:!wby-no-underline [&_a]:!wby-text-neutral-primary wby-truncate"
+    className: "flex items-center gap-x-sm [&_a]:no-underline! [&_a]:text-neutral-primary! truncate"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-shrink-0"
+    className: "flex shrink-0"
   }, icon), /*#__PURE__*/React.createElement("span", {
-    className: "wby-text-md wby-font-semibold wby-truncate"
-  }, title)), expanded && /*#__PURE__*/React.createElement("div", {
-    className: "wby-size-md"
+    className: "text-md font-semibold truncate"
+  }, title)), showButton && /*#__PURE__*/React.createElement("div", {
+    className: "size-md"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     side: "right",
     trigger: /*#__PURE__*/React.createElement(IconButton, {
@@ -38,9 +49,9 @@ const SidebarHeader = ({
     }),
     content: pinned ? "Unlock sidebar" : "Lock sidebar open"
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "wby-px-sm wby-py-xs"
+    className: "px-sm py-xs"
   }, /*#__PURE__*/React.createElement(Separator, {
-    className: "wby-mb-px"
+    className: "mb-px"
   })));
 };
 export { SidebarHeader };

package/Sidebar/components/SidebarHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","IconButton","useSidebar","ReactComponent","PinSidebarIcon","UnpinSidebarIcon","Tooltip","SidebarHeader","title","icon","togglePinned","expanded","pinned","createElement","Fragment","className","side","trigger","size","variant","onClick","content"],"sources":["SidebarHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator\";\nimport { IconButton } from \"~/Button\";\nimport { useSidebar } from \"./SidebarProvider\";\nimport { ReactComponent as PinSidebarIcon } from \"@webiny/icons/chrome_reader_mode.svg\";\nimport { ReactComponent as UnpinSidebarIcon } from \"@webiny/icons/width_full.svg\";\nimport { Tooltip } from \"~/Tooltip\";\n\ninterface SidebarHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n    icon?: React.ReactNode;\n    title?: React.ReactNode;\n}\n\nconst SidebarHeader = ({ title, icon }: SidebarHeaderProps) => {\n    const { togglePinned, expanded, pinned } = useSidebar();\n\n    return (\n        <>\n            <div className={\"wby-px-xs-plus\"}>\n                <div\n                    data-sidebar=\"header\"\n                    className={\n                        \"wby-flex wby-justify-between wby-items-center wby-gap-sm wby-py-xs-plus wby-px-xs wby-overflow-x-hidden\"\n                    }\n                >\n                    <div\n                        className={\n                            \"wby-flex wby-items-center wby-gap-x-sm [&_a]:!wby-no-underline [&_a]:!wby-text-neutral-primary wby-truncate\"\n                        }\n                    >\n                        <div className={\"wby-flex wby-flex-shrink-0\"}>{icon}</div>\n\n                        <span className={\"wby-text-md wby-font-semibold wby-truncate\"}>\n                            {title}\n                        </span>\n                    </div>\n\n                    {expanded && (\n                        <div className={\"wby-size-md\"}>\n                            <Tooltip\n                                side={\"right\"}\n                                trigger={\n                                    <IconButton\n                                        icon={pinned ? <UnpinSidebarIcon /> : <PinSidebarIcon />}\n                                        data-sidebar=\"trigger\"\n                                        size=\"xs\"\n                                        variant={\"ghost\"}\n                                        onClick={togglePinned}\n                                    />\n                                }\n                                content={pinned ? \"Unlock sidebar\" : \"Lock sidebar open\"}\n                            />\n                        </div>\n                    )}\n                </div>\n            </div>\n            <div className={\"wby-px-sm wby-py-xs\"}>\n                <Separator className={\"wby-mb-px\"} />\n            </div>\n        </>\n    );\n};\n\nexport { SidebarHeader, type SidebarHeaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SAASC,UAAU;AACnB,SAASC,UAAU;AACnB,SAASC,cAAc,IAAIC,cAAc,QAAQ,sCAAsC;AACvF,SAASD,cAAc,IAAIE,gBAAgB,QAAQ,8BAA8B;AACjF,SAASC,OAAO;AAOhB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAGV,UAAU,CAAC,CAAC;EAEvD,oBACIH,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACIf,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAiB,gBAC7BhB,KAAA,CAAAc,aAAA;IACI,gBAAa,QAAQ;IACrBE,SAAS,EACL;EACH,gBAEDhB,KAAA,CAAAc,aAAA;IACIE,SAAS,EACL;EACH,gBAEDhB,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAA6B,GAAEN,IAAU,CAAC,eAE1DV,KAAA,CAAAc,aAAA;IAAME,SAAS,EAAE;EAA6C,GACzDP,KACC,CACL,CAAC,EAELG,QAAQ,iBACLZ,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAc,gBAC1BhB,KAAA,CAAAc,aAAA,CAACP,OAAO;IACJU,IAAI,EAAE,OAAQ;IACdC,OAAO,eACHlB,KAAA,CAAAc,aAAA,CAACZ,UAAU;MACPQ,IAAI,EAAEG,MAAM,gBAAGb,KAAA,CAAAc,aAAA,CAACR,gBAAgB,MAAE,CAAC,gBAAGN,KAAA,CAAAc,aAAA,CAACT,cAAc,MAAE,CAAE;MACzD,gBAAa,SAAS;MACtBc,IAAI,EAAC,IAAI;MACTC,OAAO,EAAE,OAAQ;MACjBC,OAAO,EAAEV;IAAa,CACzB,CACJ;IACDW,OAAO,EAAET,MAAM,GAAG,gBAAgB,GAAG;EAAoB,CAC5D,CACA,CAER,CACJ,CAAC,eACNb,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAsB,gBAClChB,KAAA,CAAAc,aAAA,CAACb,SAAS;IAACe,SAAS,EAAE;EAAY,CAAE,CACnC,CACP,CAAC;AAEX,CAAC;AAED,SAASR,aAAa","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","Separator","IconButton","useSidebar","ReactComponent","PinSidebarIcon","UnpinSidebarIcon","Tooltip","SidebarHeader","title","icon","togglePinned","expanded","pinned","showButton","setShowButton","timer","setTimeout","clearTimeout","undefined","createElement","Fragment","className","side","trigger","size","variant","onClick","content"],"sources":["SidebarHeader.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\nimport { ReactComponent as PinSidebarIcon } from \"@webiny/icons/chrome_reader_mode.svg\";\nimport { ReactComponent as UnpinSidebarIcon } from \"@webiny/icons/width_full.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\n\ninterface SidebarHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n    icon?: React.ReactNode;\n    title?: React.ReactNode;\n}\n\nconst SidebarHeader = ({ title, icon }: SidebarHeaderProps) => {\n    const { togglePinned, expanded, pinned } = useSidebar();\n    const [showButton, setShowButton] = useState(false);\n\n    useEffect(() => {\n        if (expanded) {\n            const timer = setTimeout(() => {\n                setShowButton(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowButton(false);\n        return undefined;\n    }, [expanded]);\n\n    return (\n        <>\n            <div className={\"px-xs-plus\"}>\n                <div\n                    data-sidebar=\"header\"\n                    className={\n                        \"flex justify-between items-center gap-sm py-xs-plus px-xs overflow-x-hidden\"\n                    }\n                >\n                    <div\n                        className={\n                            \"flex items-center gap-x-sm [&_a]:no-underline! [&_a]:text-neutral-primary! truncate\"\n                        }\n                    >\n                        <div className={\"flex shrink-0\"}>{icon}</div>\n\n                        <span className={\"text-md font-semibold truncate\"}>{title}</span>\n                    </div>\n\n                    {showButton && (\n                        <div className={\"size-md\"}>\n                            <Tooltip\n                                side={\"right\"}\n                                trigger={\n                                    <IconButton\n                                        icon={pinned ? <UnpinSidebarIcon /> : <PinSidebarIcon />}\n                                        data-sidebar=\"trigger\"\n                                        size=\"xs\"\n                                        variant={\"ghost\"}\n                                        onClick={togglePinned}\n                                    />\n                                }\n                                content={pinned ? \"Unlock sidebar\" : \"Lock sidebar open\"}\n                            />\n                        </div>\n                    )}\n                </div>\n            </div>\n            <div className={\"px-sm py-xs\"}>\n                <Separator className={\"mb-px\"} />\n            </div>\n        </>\n    );\n};\n\nexport { SidebarHeader, type SidebarHeaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,SAAS;AAClB,SAASC,UAAU;AACnB,SAASC,UAAU;AACnB,SAASC,cAAc,IAAIC,cAAc,QAAQ,sCAAsC;AACvF,SAASD,cAAc,IAAIE,gBAAgB,QAAQ,8BAA8B;AACjF,SAASC,OAAO;AAOhB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAGV,UAAU,CAAC,CAAC;EACvD,MAAM,CAACW,UAAU,EAAEC,aAAa,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACZ,IAAIa,QAAQ,EAAE;MACV,MAAMI,KAAK,GAAGC,UAAU,CAAC,MAAM;QAC3BF,aAAa,CAAC,IAAI,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;MACP,OAAO,MAAMG,YAAY,CAACF,KAAK,CAAC;IACpC;IACAD,aAAa,CAAC,KAAK,CAAC;IACpB,OAAOI,SAAS;EACpB,CAAC,EAAE,CAACP,QAAQ,CAAC,CAAC;EAEd,oBACId,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,qBACIvB,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAa,gBACzBxB,KAAA,CAAAsB,aAAA;IACI,gBAAa,QAAQ;IACrBE,SAAS,EACL;EACH,gBAEDxB,KAAA,CAAAsB,aAAA;IACIE,SAAS,EACL;EACH,gBAEDxB,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAgB,GAAEZ,IAAU,CAAC,eAE7CZ,KAAA,CAAAsB,aAAA;IAAME,SAAS,EAAE;EAAiC,GAAEb,KAAY,CAC/D,CAAC,EAELK,UAAU,iBACPhB,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAU,gBACtBxB,KAAA,CAAAsB,aAAA,CAACb,OAAO;IACJgB,IAAI,EAAE,OAAQ;IACdC,OAAO,eACH1B,KAAA,CAAAsB,aAAA,CAAClB,UAAU;MACPQ,IAAI,EAAEG,MAAM,gBAAGf,KAAA,CAAAsB,aAAA,CAACd,gBAAgB,MAAE,CAAC,gBAAGR,KAAA,CAAAsB,aAAA,CAACf,cAAc,MAAE,CAAE;MACzD,gBAAa,SAAS;MACtBoB,IAAI,EAAC,IAAI;MACTC,OAAO,EAAE,OAAQ;MACjBC,OAAO,EAAEhB;IAAa,CACzB,CACJ;IACDiB,OAAO,EAAEf,MAAM,GAAG,gBAAgB,GAAG;EAAoB,CAC5D,CACA,CAER,CACJ,CAAC,eACNf,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAc,gBAC1BxB,KAAA,CAAAsB,aAAA,CAACnB,SAAS;IAACqB,SAAS,EAAE;EAAQ,CAAE,CAC/B,CACP,CAAC;AAEX,CAAC;AAED,SAASd,aAAa","ignoreList":[]}

package/Sidebar/components/SidebarIcon.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type IconProps } from "../../Icon";
+import { type IconProps } from "../../Icon/index.js";
 interface SidebarIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
 }

package/Sidebar/components/SidebarIcon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "../../Icon";
+import { Icon } from "../../Icon/index.js";
 import { makeDecoratable } from "@webiny/react-composition";
 const SidebarIconBase = ({
   element,

package/Sidebar/components/SidebarIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","makeDecoratable","SidebarIconBase","element","props","createElement","Object","assign","icon","size","SidebarIcon"],"sources":["SidebarIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\ninterface SidebarIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n}\n\nconst SidebarIconBase = ({ element, ...props }: SidebarIconProps) => {\n    return <Icon icon={element} size={\"lg\"} {...props} />;\n};\n\nconst SidebarIcon = makeDecoratable(\"SidebarIcon\", SidebarIconBase);\n\nexport { SidebarIcon, type SidebarIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,eAAe,QAAQ,2BAA2B;AAM3D,MAAMC,eAAe,GAAGA,CAAC;EAAEC,OAAO;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACjE,oBAAOL,KAAA,CAAAM,aAAA,CAACL,IAAI,EAAAM,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAEL,OAAQ;IAACM,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AACzD,CAAC;AAED,MAAMM,WAAW,GAAGT,eAAe,CAAC,aAAa,EAAEC,eAAe,CAAC;AAEnE,SAASQ,WAAW","ignoreList":[]}
+{"version":3,"names":["React","Icon","makeDecoratable","SidebarIconBase","element","props","createElement","Object","assign","icon","size","SidebarIcon"],"sources":["SidebarIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\ninterface SidebarIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n}\n\nconst SidebarIconBase = ({ element, ...props }: SidebarIconProps) => {\n    return <Icon icon={element} size={\"lg\"} {...props} />;\n};\n\nconst SidebarIcon = makeDecoratable(\"SidebarIcon\", SidebarIconBase);\n\nexport { SidebarIcon, type SidebarIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,eAAe,QAAQ,2BAA2B;AAM3D,MAAMC,eAAe,GAAGA,CAAC;EAAEC,OAAO;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACjE,oBAAOL,KAAA,CAAAM,aAAA,CAACL,IAAI,EAAAM,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAEL,OAAQ;IAACM,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AACzD,CAAC;AAED,MAAMM,WAAW,GAAGT,eAAe,CAAC,aAAa,EAAEC,eAAe,CAAC;AAEnE,SAASQ,WAAW","ignoreList":[]}

package/Sidebar/components/SidebarProvider.d.ts

@@ -1,4 +1,12 @@
 import React from "react";
+type PinnedItemData = {
+    id: string;
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    to?: string;
+    onClick?: React.MouseEventHandler;
+    active?: boolean;
+};
 type SidebarContext = {
     state: "expanded" | "collapsed";
     expanded: boolean;
@@ -10,12 +18,26 @@ type SidebarContext = {
     togglePinned: () => void;
     toggleSectionExpanded: (sectionId: string) => void;
     isSectionExpanded: (sectionId: string) => boolean;
+    pinnedItems: string[];
+    toggleItemPinned: (itemId: string) => void;
+    isItemPinned: (itemId: string) => boolean;
+    registerPinnedItem: (data: PinnedItemData) => void;
+    unregisterPinnedItem: (itemId: string) => void;
+    getPinnedItemsData: () => PinnedItemData[];
 };
 declare const SidebarContext: React.Context<SidebarContext | null>;
 declare function useSidebar(): SidebarContext;
-type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement>;
+type SidebarCachedState = {
+    pinned: boolean;
+    expandedSections: string[];
+    pinnedItems: string[];
+};
+type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement> & {
+    state?: SidebarCachedState;
+    onChangeState?: (state: SidebarCachedState) => void;
+};
 declare const SidebarProvider: {
-    ({ className, children, ...props }: SidebarProviderProps): React.JSX.Element;
+    ({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
     displayName: string;
 };
-export { SidebarProvider, useSidebar };
+export { SidebarProvider, useSidebar, type PinnedItemData };