@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/Sidebar/components/SidebarCache.d.ts

@@ -0,0 +1,9 @@
+type CachedSidebarState = {
+    pinned: boolean;
+    expandedSections: string[];
+};
+export declare class SidebarCache {
+    static get(): CachedSidebarState;
+    static set(state: CachedSidebarState): void;
+}
+export {};

package/Sidebar/components/SidebarCache.js

@@ -0,0 +1,23 @@
+import { SIDEBAR_LS_KEY } from "./constants";
+const DEFAULT_CACHED_STATE = {
+  pinned: false,
+  expandedSections: []
+};
+export class SidebarCache {
+  static get() {
+    const item = window.localStorage.getItem(SIDEBAR_LS_KEY);
+    if (!item) {
+      return DEFAULT_CACHED_STATE;
+    }
+    try {
+      return JSON.parse(item) || DEFAULT_CACHED_STATE;
+    } catch {
+      return DEFAULT_CACHED_STATE;
+    }
+  }
+  static set(state) {
+    window.localStorage.setItem(SIDEBAR_LS_KEY, JSON.stringify(state));
+  }
+}
+
+//# sourceMappingURL=SidebarCache.js.map

package/Sidebar/components/SidebarCache.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SIDEBAR_LS_KEY","DEFAULT_CACHED_STATE","pinned","expandedSections","SidebarCache","get","item","window","localStorage","getItem","JSON","parse","set","state","setItem","stringify"],"sources":["SidebarCache.ts"],"sourcesContent":["import { SIDEBAR_LS_KEY } from \"./constants\";\n\ntype CachedSidebarState = {\n    pinned: boolean;\n    expandedSections: string[];\n};\n\nconst DEFAULT_CACHED_STATE: CachedSidebarState = {\n    pinned: false,\n    expandedSections: []\n};\n\nexport class SidebarCache {\n    static get(): CachedSidebarState {\n        const item = window.localStorage.getItem(SIDEBAR_LS_KEY);\n        if (!item) {\n            return DEFAULT_CACHED_STATE;\n        }\n\n        try {\n            return JSON.parse(item) || DEFAULT_CACHED_STATE;\n        } catch {\n            return DEFAULT_CACHED_STATE;\n        }\n    }\n\n    static set(state: CachedSidebarState) {\n        window.localStorage.setItem(SIDEBAR_LS_KEY, JSON.stringify(state));\n    }\n}\n"],"mappings":"AAAA,SAASA,cAAc;AAOvB,MAAMC,oBAAwC,GAAG;EAC7CC,MAAM,EAAE,KAAK;EACbC,gBAAgB,EAAE;AACtB,CAAC;AAED,OAAO,MAAMC,YAAY,CAAC;EACtB,OAAOC,GAAGA,CAAA,EAAuB;IAC7B,MAAMC,IAAI,GAAGC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACT,cAAc,CAAC;IACxD,IAAI,CAACM,IAAI,EAAE;MACP,OAAOL,oBAAoB;IAC/B;IAEA,IAAI;MACA,OAAOS,IAAI,CAACC,KAAK,CAACL,IAAI,CAAC,IAAIL,oBAAoB;IACnD,CAAC,CAAC,MAAM;MACJ,OAAOA,oBAAoB;IAC/B;EACJ;EAEA,OAAOW,GAAGA,CAACC,KAAyB,EAAE;IAClCN,MAAM,CAACC,YAAY,CAACM,OAAO,CAACd,cAAc,EAAEU,IAAI,CAACK,SAAS,CAACF,KAAK,CAAC,CAAC;EACtE;AACJ","ignoreList":[]}

package/Sidebar/components/SidebarContent.d.ts

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

package/Sidebar/components/SidebarContent.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { cn } from "../../utils";
+const SidebarContent = ({
+  className,
+  ...props
+}) => {
+  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)
+  }));
+};
+export { SidebarContent };
+
+//# sourceMappingURL=SidebarContent.js.map

package/Sidebar/components/SidebarContent.js.map

@@ -0,0 +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":[]}

package/Sidebar/components/SidebarFooter.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const SidebarFooter: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export { SidebarFooter };

package/Sidebar/components/SidebarFooter.js

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

package/Sidebar/components/SidebarFooter.js.map

@@ -0,0 +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":[]}

package/Sidebar/components/SidebarHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface SidebarHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare const SidebarHeader: ({ title, icon }: SidebarHeaderProps) => React.JSX.Element;
+export { SidebarHeader, type SidebarHeaderProps };

package/Sidebar/components/SidebarHeader.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Separator } from "../../Separator";
+import { IconButton } from "../../Button";
+import { useSidebar } from "./SidebarProvider";
+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";
+const SidebarHeader = ({
+  title,
+  icon
+}) => {
+  const {
+    togglePinned,
+    expanded,
+    pinned
+  } = useSidebar();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-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"
+  }, /*#__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"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-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"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    side: "right",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      icon: pinned ? /*#__PURE__*/React.createElement(UnpinSidebarIcon, null) : /*#__PURE__*/React.createElement(PinSidebarIcon, null),
+      "data-sidebar": "trigger",
+      size: "xs",
+      variant: "ghost",
+      onClick: togglePinned
+    }),
+    content: pinned ? "Unlock sidebar" : "Lock sidebar open"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "wby-px-sm wby-py-xs"
+  }, /*#__PURE__*/React.createElement(Separator, {
+    className: "wby-mb-px"
+  })));
+};
+export { SidebarHeader };
+
+//# sourceMappingURL=SidebarHeader.js.map

package/Sidebar/components/SidebarHeader.js.map

@@ -0,0 +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":[]}

package/Sidebar/components/SidebarIcon.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { type IconProps } from "../../Icon";
+interface SidebarIconProps extends Omit<IconProps, "icon"> {
+    element?: React.ReactNode;
+}
+declare const SidebarIcon: (({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
+    original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
+        original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
+        original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { SidebarIcon, type SidebarIconProps };

package/Sidebar/components/SidebarIcon.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Icon } from "../../Icon";
+import { makeDecoratable } from "@webiny/react-composition";
+const SidebarIconBase = ({
+  element,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Icon, Object.assign({
+    icon: element,
+    size: "lg"
+  }, props));
+};
+const SidebarIcon = makeDecoratable("SidebarIcon", SidebarIconBase);
+export { SidebarIcon };
+
+//# sourceMappingURL=SidebarIcon.js.map

package/Sidebar/components/SidebarIcon.js.map

@@ -0,0 +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":[]}

package/Sidebar/components/SidebarProvider.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+type SidebarContext = {
+    state: "expanded" | "collapsed";
+    expanded: boolean;
+    expandedSections: string[];
+    pinned: boolean;
+    transition: null | "expanding" | "collapsing";
+    setExpanded: (expanded: boolean) => void;
+    toggleExpanded: () => void;
+    togglePinned: () => void;
+    toggleSectionExpanded: (sectionId: string) => void;
+    isSectionExpanded: (sectionId: string) => boolean;
+};
+declare const SidebarContext: React.Context<SidebarContext | null>;
+declare function useSidebar(): SidebarContext;
+type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SidebarProvider: {
+    ({ className, children, ...props }: SidebarProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export { SidebarProvider, useSidebar };

package/Sidebar/components/SidebarProvider.js

@@ -0,0 +1,121 @@
+import React from "react";
+import { cn } from "../../utils";
+import { SIDEBAR_TRANSITION_DURATION } from "./constants";
+import { SidebarCache } from "./SidebarCache";
+const SidebarContext = /*#__PURE__*/React.createContext(null);
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+const createInitialSidebarState = () => {
+  const {
+    pinned,
+    expandedSections
+  } = SidebarCache.get();
+  return {
+    expanded: pinned,
+    // If pinned, we want the sidebar to be open by default.
+    pinned,
+    expandedSections,
+    transition: null
+  };
+};
+const SidebarProvider = ({
+  className,
+  children,
+  ...props
+}) => {
+  const [sidebarState, setSidebarState] = React.useState(createInitialSidebarState);
+
+  // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
+  const timeoutRef = React.useRef(null);
+  const {
+    expanded,
+    transition,
+    pinned,
+    expandedSections
+  } = sidebarState;
+  const setExpanded = React.useCallback(value => {
+    const newValue = typeof value === "function" ? value(expanded) : value;
+    setSidebarState(state => ({
+      ...state,
+      expanded: newValue,
+      transition: newValue ? "expanding" : "collapsing"
+    }));
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    timeoutRef.current = window.setTimeout(() => {
+      setSidebarState(state => ({
+        ...state,
+        transition: null
+      }));
+    }, SIDEBAR_TRANSITION_DURATION);
+  }, [expanded]);
+  const setPinned = React.useCallback(value => {
+    const newValue = typeof value === "function" ? value(pinned) : value;
+    setSidebarState(state => ({
+      ...state,
+      pinned: newValue
+    }));
+    SidebarCache.set({
+      pinned: newValue,
+      expandedSections
+    });
+  }, [pinned]);
+  const toggleExpanded = React.useCallback(() => {
+    return setExpanded(prev => !prev);
+  }, [setExpanded]); // Helper to toggle the sidebar.
+
+  const togglePinned = React.useCallback(() => {
+    return setPinned(prev => !prev);
+  }, [setPinned]);
+  const toggleSectionExpanded = React.useCallback(sectionId => {
+    setSidebarState(state => {
+      const expandedSections = state.expandedSections.includes(sectionId) ? state.expandedSections.filter(id => id !== sectionId) : [...state.expandedSections, sectionId];
+      SidebarCache.set({
+        pinned: state.pinned,
+        expandedSections
+      });
+      return {
+        ...state,
+        expandedSections
+      };
+    });
+  }, [setSidebarState]);
+  const isSectionExpanded = React.useCallback(sectionId => {
+    return expandedSections.includes(sectionId);
+  }, [expandedSections]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = expanded ? "expanded" : "collapsed";
+  const contextValue = React.useMemo(() => ({
+    state,
+    transition,
+    expanded,
+    expandedSections,
+    pinned,
+    setExpanded,
+    toggleExpanded,
+    toggleSectionExpanded,
+    setPinned,
+    togglePinned,
+    isSectionExpanded
+  }), [state, transition, expanded, expandedSections, pinned, setExpanded, setPinned, toggleExpanded, togglePinned]);
+  return /*#__PURE__*/React.createElement(SidebarContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", Object.assign({
+    "data-sidebar": "provider"
+  }, props, {
+    className: cn("wby-group/sidebar-wrapper wby-flex wby-min-h-svh wby-w-full", className)
+  }), children));
+};
+SidebarProvider.displayName = "SidebarProvider";
+export { SidebarProvider, useSidebar };
+
+//# sourceMappingURL=SidebarProvider.js.map

package/Sidebar/components/SidebarProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","SIDEBAR_TRANSITION_DURATION","SidebarCache","SidebarContext","createContext","useSidebar","context","useContext","Error","createInitialSidebarState","pinned","expandedSections","get","expanded","transition","SidebarProvider","className","children","props","sidebarState","setSidebarState","useState","timeoutRef","useRef","setExpanded","useCallback","value","newValue","state","current","window","clearTimeout","setTimeout","setPinned","set","toggleExpanded","prev","togglePinned","toggleSectionExpanded","sectionId","includes","filter","id","isSectionExpanded","contextValue","useMemo","createElement","Provider","Object","assign","displayName"],"sources":["SidebarProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils\";\nimport { SIDEBAR_TRANSITION_DURATION } from \"./constants\";\nimport { SidebarCache } from \"./SidebarCache\";\n\ntype SidebarContext = {\n    state: \"expanded\" | \"collapsed\";\n    expanded: boolean;\n    expandedSections: string[];\n    pinned: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    setExpanded: (expanded: boolean) => void;\n    toggleExpanded: () => void;\n    togglePinned: () => void;\n    toggleSectionExpanded: (sectionId: string) => void;\n    isSectionExpanded: (sectionId: string) => boolean;\n};\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null);\n\nfunction useSidebar() {\n    const context = React.useContext(SidebarContext);\n    if (!context) {\n        throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n    }\n\n    return context;\n}\n\ntype SidebarProviderProps = React.HTMLAttributes<HTMLDivElement>;\n\ninterface SidebarState {\n    expanded: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    pinned: boolean;\n    expandedSections: string[];\n}\n\nconst createInitialSidebarState = (): SidebarState => {\n    const { pinned, expandedSections } = SidebarCache.get();\n    return {\n        expanded: pinned, // If pinned, we want the sidebar to be open by default.\n        pinned,\n        expandedSections,\n        transition: null\n    };\n};\n\nconst SidebarProvider = ({ className, children, ...props }: SidebarProviderProps) => {\n    const [sidebarState, setSidebarState] = React.useState<SidebarState>(createInitialSidebarState);\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = React.useRef<number | null>(null);\n\n    const { expanded, transition, pinned, expandedSections } = sidebarState;\n\n    const setExpanded = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(expanded) : value;\n            setSidebarState(state => ({\n                ...state,\n                expanded: newValue,\n                transition: newValue ? \"expanding\" : \"collapsing\"\n            }));\n\n            if (timeoutRef.current) {\n                window.clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            timeoutRef.current = window.setTimeout(() => {\n                setSidebarState(state => ({\n                    ...state,\n                    transition: null\n                }));\n            }, SIDEBAR_TRANSITION_DURATION);\n        },\n        [expanded]\n    );\n\n    const setPinned = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(pinned) : value;\n            setSidebarState(state => ({\n                ...state,\n                pinned: newValue\n            }));\n\n            SidebarCache.set({ pinned: newValue, expandedSections });\n        },\n        [pinned]\n    );\n\n    const toggleExpanded = React.useCallback(() => {\n        return setExpanded(prev => !prev);\n    }, [setExpanded]); // Helper to toggle the sidebar.\n\n    const togglePinned = React.useCallback(() => {\n        return setPinned(prev => !prev);\n    }, [setPinned]);\n\n    const toggleSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            setSidebarState(state => {\n                const expandedSections = state.expandedSections.includes(sectionId)\n                    ? state.expandedSections.filter(id => id !== sectionId)\n                    : [...state.expandedSections, sectionId];\n\n                SidebarCache.set({ pinned: state.pinned, expandedSections });\n\n                return {\n                    ...state,\n                    expandedSections\n                };\n            });\n        },\n        [setSidebarState]\n    );\n\n    const isSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            return expandedSections.includes(sectionId);\n        },\n        [expandedSections]\n    );\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = expanded ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContext>(\n        () => ({\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            toggleExpanded,\n            toggleSectionExpanded,\n            setPinned,\n            togglePinned,\n            isSectionExpanded\n        }),\n        [\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            setPinned,\n            toggleExpanded,\n            togglePinned\n        ]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                data-sidebar={\"provider\"}\n                {...props}\n                className={cn(\n                    \"wby-group/sidebar-wrapper wby-flex wby-min-h-svh wby-w-full\",\n                    className\n                )}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n};\nSidebarProvider.displayName = \"SidebarProvider\";\n\nexport { SidebarProvider, useSidebar };\n"],"mappings":"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","ignoreList":[]}

package/Sidebar/components/SidebarRoot.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface SidebarRootProps extends React.ComponentProps<"div"> {
+    side?: "left" | "right";
+}
+declare const SidebarRoot: ({ side, className, children, ...props }: SidebarRootProps) => React.JSX.Element;
+export { SidebarRoot, type SidebarRootProps };

package/Sidebar/components/SidebarRoot.js

@@ -0,0 +1,69 @@
+import React, { useCallback, useRef } from "react";
+import { cn, cva } from "../../utils";
+import { useSidebar } from "./SidebarProvider";
+const variants = cva("wby-group wby-peer wby-block wby-border-r-sm wby-border-neutral-dimmed wby-bg-neutral-light", {
+  variants: {
+    pinned: {
+      false: "wby-fixed wby-top-0 wby-z-10 "
+    }
+  }
+});
+const SidebarRoot = ({
+  side = "left",
+  className,
+  children,
+  ...props
+}) => {
+  const {
+    state,
+    setExpanded,
+    pinned
+  } = useSidebar();
+  const elementRef = useRef(null);
+
+  // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
+  const timeoutRef = useRef(null);
+  const onMouseEnter = useCallback(() => {
+    // If the sidebar is pinned, we don't want to open the sidebar on mouse enter.
+    if (pinned) {
+      return;
+    }
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setExpanded(true);
+  }, [pinned, setExpanded]);
+  const onMouseLeave = useCallback(() => {
+    // If the sidebar is pinned, we don't want to close the sidebar on mouse leave.
+    if (pinned) {
+      return;
+    }
+
+    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
+    timeoutRef.current = window.setTimeout(() => {
+      setExpanded(false);
+    }, 50);
+  }, [pinned, setExpanded]);
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: elementRef,
+    "data-state": state,
+    "data-sidebar": "root",
+    "data-side": side,
+    className: variants({
+      pinned
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-duration-175 wby-relative wby-h-svh wby-w-sidebar-expanded wby-bg-transparent wby-transition-[width] wby-ease-linear wby-duration-175", "group-data-[side=right]:wby-rotate-180", "group-data-[state=collapsed]:wby-w-sidebar-collapsed")
+  }), /*#__PURE__*/React.createElement("div", Object.assign({
+    className: cn("wby-duration-175 wby-fixed wby-inset-y-0 wby-z-10 wby-h-svh wby-w-sidebar-expanded wby-transition-[width] wby-ease-linear md:wby-flex", side === "left" ? "wby-left-0" : "wby-right-0", "group-data-[state=collapsed]:wby-w-sidebar-collapsed group-data-[side=left]:wby-border-r-px group-data-[side=right]:wby-border-l-px", className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    "data-sidebar": "sidebar",
+    className: "wby-flex wby-h-full wby-w-full wby-py-xs wby-flex-col"
+  }, children)));
+};
+export { SidebarRoot };
+
+//# sourceMappingURL=SidebarRoot.js.map

package/Sidebar/components/SidebarRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useRef","cn","cva","useSidebar","variants","pinned","false","SidebarRoot","side","className","children","props","state","setExpanded","elementRef","timeoutRef","onMouseEnter","current","window","clearTimeout","onMouseLeave","setTimeout","createElement","ref","Object","assign"],"sources":["SidebarRoot.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { cn, cva } from \"~/utils\";\nimport { useSidebar } from \"./SidebarProvider\";\n\ninterface SidebarRootProps extends React.ComponentProps<\"div\"> {\n    side?: \"left\" | \"right\";\n}\n\nconst variants = cva(\n    \"wby-group wby-peer wby-block wby-border-r-sm wby-border-neutral-dimmed wby-bg-neutral-light\",\n    {\n        variants: {\n            pinned: {\n                false: \"wby-fixed wby-top-0 wby-z-10 \"\n            }\n        }\n    }\n);\n\nconst SidebarRoot = ({ side = \"left\", className, children, ...props }: SidebarRootProps) => {\n    const { state, setExpanded, pinned } = useSidebar();\n\n    const elementRef = useRef<HTMLDivElement>(null);\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = useRef<number | null>(null);\n\n    const onMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to open the sidebar on mouse enter.\n        if (pinned) {\n            return;\n        }\n\n        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\n        }\n\n        setExpanded(true);\n    }, [pinned, setExpanded]);\n\n    const onMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to close the sidebar on mouse leave.\n        if (pinned) {\n            return;\n        }\n\n        // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n        timeoutRef.current = window.setTimeout(() => {\n            setExpanded(false);\n        }, 50);\n    }, [pinned, setExpanded]);\n\n    return (\n        <div\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            ref={elementRef}\n            data-state={state}\n            data-sidebar={\"root\"}\n            data-side={side}\n            className={variants({ pinned })}\n        >\n            <div\n                className={cn(\n                    \"wby-duration-175 wby-relative wby-h-svh wby-w-sidebar-expanded wby-bg-transparent wby-transition-[width] wby-ease-linear wby-duration-175\",\n                    \"group-data-[side=right]:wby-rotate-180\",\n                    \"group-data-[state=collapsed]:wby-w-sidebar-collapsed\"\n                )}\n            />\n            <div\n                className={cn(\n                    \"wby-duration-175 wby-fixed wby-inset-y-0 wby-z-10 wby-h-svh wby-w-sidebar-expanded wby-transition-[width] wby-ease-linear md:wby-flex\",\n                    side === \"left\" ? \"wby-left-0\" : \"wby-right-0\",\n                    \"group-data-[state=collapsed]:wby-w-sidebar-collapsed group-data-[side=left]:wby-border-r-px group-data-[side=right]:wby-border-l-px\",\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"wby-flex wby-h-full wby-w-full wby-py-xs wby-flex-col\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport { SidebarRoot, type SidebarRootProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,UAAU;AAMnB,MAAMC,QAAQ,GAAGF,GAAG,CAChB,6FAA6F,EAC7F;EACIE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CACJ,CAAC;AAED,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI,GAAG,MAAM;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACxF,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAER;EAAO,CAAC,GAAGF,UAAU,CAAC,CAAC;EAEnD,MAAMW,UAAU,GAAGd,MAAM,CAAiB,IAAI,CAAC;;EAE/C;EACA,MAAMe,UAAU,GAAGf,MAAM,CAAgB,IAAI,CAAC;EAE9C,MAAMgB,YAAY,GAAGjB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;IAEA,IAAIU,UAAU,CAACE,OAAO,EAAE;MACpBC,MAAM,CAACC,YAAY,CAACJ,UAAU,CAACE,OAAO,CAAC;MACvCF,UAAU,CAACE,OAAO,GAAG,IAAI;IAC7B;IAEAJ,WAAW,CAAC,IAAI,CAAC;EACrB,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,CAAC,CAAC;EAEzB,MAAMO,YAAY,GAAGrB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;;IAEA;IACAU,UAAU,CAACE,OAAO,GAAGC,MAAM,CAACG,UAAU,CAAC,MAAM;MACzCR,WAAW,CAAC,KAAK,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,CAAC,CAAC;EAEzB,oBACIf,KAAA,CAAAwB,aAAA;IACIN,YAAY,EAAEA,YAAa;IAC3BI,YAAY,EAAEA,YAAa;IAC3BG,GAAG,EAAET,UAAW;IAChB,cAAYF,KAAM;IAClB,gBAAc,MAAO;IACrB,aAAWJ,IAAK;IAChBC,SAAS,EAAEL,QAAQ,CAAC;MAAEC;IAAO,CAAC;EAAE,gBAEhCP,KAAA,CAAAwB,aAAA;IACIb,SAAS,EAAER,EAAE,CACT,2IAA2I,EAC3I,wCAAwC,EACxC,sDACJ;EAAE,CACL,CAAC,eACFH,KAAA,CAAAwB,aAAA,QAAAE,MAAA,CAAAC,MAAA;IACIhB,SAAS,EAAER,EAAE,CACT,uIAAuI,EACvIO,IAAI,KAAK,MAAM,GAAG,YAAY,GAAG,aAAa,EAC9C,qIAAqI,EACrIC,SACJ;EAAE,GACEE,KAAK,gBAETb,KAAA,CAAAwB,aAAA;IACI,gBAAa,SAAS;IACtBb,SAAS,EAAC;EAAuD,GAEhEC,QACA,CACJ,CACJ,CAAC;AAEd,CAAC;AAED,SAASH,WAAW","ignoreList":[]}

package/Sidebar/components/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SIDEBAR_TRANSITION_DURATION = 175;
+export declare const SIDEBAR_LS_KEY = "webiny_sidebar_state";

package/Sidebar/components/constants.js

@@ -0,0 +1,4 @@
+export const SIDEBAR_TRANSITION_DURATION = 175;
+export const SIDEBAR_LS_KEY = "webiny_sidebar_state";
+
+//# sourceMappingURL=constants.js.map

package/Sidebar/components/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SIDEBAR_TRANSITION_DURATION","SIDEBAR_LS_KEY"],"sources":["constants.ts"],"sourcesContent":["export const SIDEBAR_TRANSITION_DURATION = 175;\nexport const SIDEBAR_LS_KEY = \"webiny_sidebar_state\";\n"],"mappings":"AAAA,OAAO,MAAMA,2BAA2B,GAAG,GAAG;AAC9C,OAAO,MAAMC,cAAc,GAAG,sBAAsB","ignoreList":[]}

package/Sidebar/components/items/DivButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface DivButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+}
+declare const DivButton: ({ tabIndex, disabled, ...props }: DivButtonProps) => React.JSX.Element;
+export { DivButton, type DivButtonProps };

package/Sidebar/components/items/DivButton.js

@@ -0,0 +1,27 @@
+import React, { useMemo } from "react";
+const DivButton = ({
+  tabIndex,
+  disabled,
+  ...props
+}) => {
+  const divAsButtonProps = useMemo(() => {
+    let tabIndexToUse = typeof tabIndex === "number" ? tabIndex : 0;
+    if (disabled) {
+      tabIndexToUse = -1;
+    }
+    return {
+      role: "button",
+      tabIndex: tabIndexToUse,
+      onKeyDown: e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+      }
+    };
+  }, [disabled, tabIndex]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, divAsButtonProps));
+};
+export { DivButton };
+
+//# sourceMappingURL=DivButton.js.map

package/Sidebar/components/items/DivButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","DivButton","tabIndex","disabled","props","divAsButtonProps","tabIndexToUse","role","onKeyDown","e","key","preventDefault","currentTarget","click","createElement","Object","assign"],"sources":["DivButton.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n\ninterface DivButtonProps extends React.HTMLAttributes<HTMLDivElement> {\n    disabled?: boolean;\n}\n\nconst DivButton = ({ tabIndex, disabled, ...props }: DivButtonProps) => {\n    const divAsButtonProps = useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        let tabIndexToUse = typeof tabIndex === \"number\" ? tabIndex : 0;\n        if (disabled) {\n            tabIndexToUse = -1;\n        }\n\n        return {\n            role: \"button\",\n            tabIndex: tabIndexToUse,\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [disabled, tabIndex]);\n\n    return <div {...props} {...divAsButtonProps} />;\n};\n\nexport { DivButton, type DivButtonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAMtC,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAsB,CAAC,KAAK;EACpE,MAAMC,gBAAgB,GAAGL,OAAO,CAAuC,MAAM;IACzE,IAAIM,aAAa,GAAG,OAAOJ,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAG,CAAC;IAC/D,IAAIC,QAAQ,EAAE;MACVG,aAAa,GAAG,CAAC,CAAC;IACtB;IAEA,OAAO;MACHC,IAAI,EAAE,QAAQ;MACdL,QAAQ,EAAEI,aAAa;MACvBE,SAAS,EAAEC,CAAC,IAAI;QACZ,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;UACpCD,CAAC,CAACE,cAAc,CAAC,CAAC;UAClBF,CAAC,CAACG,aAAa,CAACC,KAAK,CAAC,CAAC;QAC3B;MACJ;IACJ,CAAC;EACL,CAAC,EAAE,CAACV,QAAQ,EAAED,QAAQ,CAAC,CAAC;EAExB,oBAAOH,KAAA,CAAAe,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASZ,KAAK,EAAMC,gBAAgB,CAAG,CAAC;AACnD,CAAC;AAED,SAASJ,SAAS","ignoreList":[]}

package/Sidebar/components/items/SidebarMenuGroup.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { type SidebarMenuItemGroupProps } from "./SidebarMenuItem";
+import { type SidebarMenuItemIconProps } from "./SidebarMenuItemIcon";
+import { type SidebarMenuItemActionProps } from "./SidebarMenuItemAction";
+declare const SidebarMenuGroup: ((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
+    original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
+        original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
+        original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Icon: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element) & {
+        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    Action: ({ element, ...props }: SidebarMenuItemActionProps) => React.JSX.Element;
+};
+export { SidebarMenuGroup, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps };

package/Sidebar/components/items/SidebarMenuGroup.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { SidebarMenuItem } from "./SidebarMenuItem";
+import { makeDecoratable, withStaticProps } from "../../../utils";
+import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon";
+import { SidebarMenuItemAction } from "./SidebarMenuItemAction";
+const SidebarMenuGroupBase = props => {
+  return /*#__PURE__*/React.createElement(SidebarMenuItem, Object.assign({
+    variant: "group-label"
+  }, props));
+};
+const DecoratableSidebarMenuGroup = makeDecoratable("SidebarMenuGroup", SidebarMenuGroupBase);
+const SidebarMenuGroup = withStaticProps(DecoratableSidebarMenuGroup, {
+  Icon: SidebarMenuItemIcon,
+  Action: SidebarMenuItemAction
+});
+export { SidebarMenuGroup };
+
+//# sourceMappingURL=SidebarMenuGroup.js.map

package/Sidebar/components/items/SidebarMenuGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SidebarMenuItem","makeDecoratable","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuGroupBase","props","createElement","Object","assign","variant","DecoratableSidebarMenuGroup","SidebarMenuGroup","Icon","Action"],"sources":["SidebarMenuGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemGroupProps } from \"./SidebarMenuItem\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport {\n    SidebarMenuItemIcon,\n    type SidebarMenuItemIconProps\n} from \"~/Sidebar/components/items/SidebarMenuItemIcon\";\nimport {\n    SidebarMenuItemAction,\n    type SidebarMenuItemActionProps\n} from \"~/Sidebar/components/items/SidebarMenuItemAction\";\n\nconst SidebarMenuGroupBase = (props: SidebarMenuItemGroupProps) => {\n    return <SidebarMenuItem variant={\"group-label\"} {...props} />;\n};\n\nconst DecoratableSidebarMenuGroup = makeDecoratable(\"SidebarMenuGroup\", SidebarMenuGroupBase);\n\nconst SidebarMenuGroup = withStaticProps(DecoratableSidebarMenuGroup, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuGroup,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,eAAe,EAAEC,eAAe;AACzC,SACIC,mBAAmB;AAGvB,SACIC,qBAAqB;AAIzB,MAAMC,oBAAoB,GAAIC,KAAgC,IAAK;EAC/D,oBAAOP,KAAA,CAAAQ,aAAA,CAACP,eAAe,EAAAQ,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE;EAAc,GAAKJ,KAAK,CAAG,CAAC;AACjE,CAAC;AAED,MAAMK,2BAA2B,GAAGV,eAAe,CAAC,kBAAkB,EAAEI,oBAAoB,CAAC;AAE7F,MAAMO,gBAAgB,GAAGV,eAAe,CAACS,2BAA2B,EAAE;EAClEE,IAAI,EAAEV,mBAAmB;EACzBW,MAAM,EAAEV;AACZ,CAAC,CAAC;AAEF,SACIQ,gBAAgB","ignoreList":[]}