@webiny/admin-ui 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/Separator/Separator.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["Separator","React","Heading","Text","meta","title","component","argTypes","decorators","Story","createElement","className","Documentation","args","variant","margin","orientation","decorative","description","control","options","render","props","level","size","Default","VerticalAndHorizontal","HorizontalOrientation","VerticalOrientation","LessMargin","MoreMargin"],"sources":["Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Separator } from \"./Separator\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof Separator> = {\n    title: \"Components/Separator\",\n    component: Separator,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"wby-w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Separator>;\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"none\",\n        orientation: \"horizontal\",\n        decorative: true\n    },\n    argTypes: {\n        margin: {\n            description: \"The margin around the separator.\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            description: \"The visual style variant of the separator.\",\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\"]\n        },\n        orientation: {\n            description: \"The orientation of the separator.\",\n            control: \"select\",\n            options: [\"horizontal\", \"vertical\"]\n        },\n        decorative: {\n            description:\n                \"Whether the separator is purely decorative and should be hidden from screen readers.\",\n            control: \"boolean\"\n        }\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator\n                    margin={props.margin}\n                    variant={props.variant}\n                    orientation={props.orientation}\n                    decorative={props.decorative}\n                />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"lg\"\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={props.margin} variant={props.variant} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    },\n    argTypes: {\n        margin: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\"]\n        }\n    }\n};\n\nexport const VerticalAndHorizontal: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const HorizontalOrientation: Story = {\n    args: {\n        orientation: \"horizontal\"\n    },\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const VerticalOrientation: Story = {\n    args: {\n        orientation: \"vertical\"\n    },\n    render: () => {\n        return (\n            <div className=\"wby-flex wby-justify-center wby-h-6 wby-text-sm\">\n                <Text>{\"This is text 1.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 2.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 3.\"}</Text>\n            </div>\n        );\n    }\n};\n\nexport const LessMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"md\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const MoreMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"xl\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Separator/Separator.stories.js","sources":["../../src/Separator/Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Separator } from \"./Separator.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof Separator> = {\n    title: \"Components/Separator\",\n    component: Separator,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Separator>;\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"none\",\n        orientation: \"horizontal\",\n        decorative: true,\n        children: undefined,\n        labelPosition: \"middle\"\n    },\n    argTypes: {\n        margin: {\n            description: \"The margin around the separator.\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            description: \"The visual style variant of the separator.\",\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\", \"accent\"]\n        },\n        orientation: {\n            description: \"The orientation of the separator.\",\n            control: \"select\",\n            options: [\"horizontal\", \"vertical\"]\n        },\n        decorative: {\n            description:\n                \"Whether the separator is purely decorative and should be hidden from screen readers.\",\n            control: \"boolean\"\n        },\n        children: {\n            description:\n                \"Optional label text to display with the separator. Text will use text-neutral-primary text-md font-semibold styles.\",\n            control: \"text\"\n        },\n        labelPosition: {\n            description: \"Position of the label when children are provided.\",\n            control: \"select\",\n            options: [\"start\", \"middle\", \"end\"]\n        }\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator\n                    margin={props.margin}\n                    variant={props.variant}\n                    orientation={props.orientation}\n                    decorative={props.decorative}\n                />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"lg\"\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={props.margin} variant={props.variant} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    },\n    argTypes: {\n        margin: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\", \"accent\"]\n        }\n    }\n};\n\nexport const VerticalAndHorizontal: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const HorizontalOrientation: Story = {\n    args: {\n        orientation: \"horizontal\"\n    },\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const VerticalOrientation: Story = {\n    args: {\n        orientation: \"vertical\"\n    },\n    render: () => {\n        return (\n            <div className=\"flex justify-center h-6 text-sm\">\n                <Text>{\"This is text 1.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 2.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 3.\"}</Text>\n            </div>\n        );\n    }\n};\n\nexport const LessMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"md\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const MoreMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"xl\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Transparent: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Transparent Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator is transparent and not visible\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"transparent\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Base: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Base Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-white\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"base\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Muted: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Muted Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-neutral-muted\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"muted\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Strong: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Strong Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-neutral-strong\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"strong\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Accent: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Accent Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-primary\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"accent\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const AllVariants: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Transparent\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"transparent\" />\n                    <Text size=\"sm\">{\"Not visible\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Base\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"base\" />\n                    <Text size=\"sm\">{\"bg-white\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Dimmed (default)\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"dimmed\" />\n                    <Text size=\"sm\">{\"bg-neutral-dimmed\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Muted\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"muted\" />\n                    <Text size=\"sm\">{\"bg-neutral-muted\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Strong\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"strong\" />\n                    <Text size=\"sm\">{\"bg-neutral-strong\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Accent\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"accent\" />\n                    <Text size=\"sm\">{\"bg-primary\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelMiddle: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label in the middle\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned in the center (default)\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"middle\">\n                        {\"OR\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"middle\">\n                        {\"Section Title\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"middle\">\n                        {\"Important\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelStart: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label at start\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned at the beginning\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"start\">\n                        {\"Start\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"start\">\n                        {\"Section 1\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"start\">\n                        {\"New Feature\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelEnd: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label at end\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned at the end\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"end\">\n                        {\"End\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"end\">\n                        {\"See More\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"end\">\n                        {\"Continue\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelVertical: Story = {\n    render: () => {\n        return (\n            <div>\n                <Heading level={6} className=\"mb-4\">\n                    {\"Vertical separator with labels\"}\n                </Heading>\n                <div className=\"flex gap-8\" style={{ height: \"200px\" }}>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"Start\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"dimmed\" labelPosition=\"start\">\n                            {\"Top\"}\n                        </Separator>\n                    </div>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"Middle\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"muted\" labelPosition=\"middle\">\n                            {\"Center\"}\n                        </Separator>\n                    </div>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"End\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"accent\" labelPosition=\"end\">\n                            {\"Bottom\"}\n                        </Separator>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","Separator","Story","Documentation","undefined","props","Heading","Text","Default","VerticalAndHorizontal","HorizontalOrientation","VerticalOrientation","LessMargin","MoreMargin","Transparent","Base","Muted","Strong","Accent","AllVariants","WithLabelMiddle","WithLabelStart","WithLabelEnd","WithLabelVertical"],"mappings":"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"}

package/Separator/index.d.ts

@@ -1 +1 @@
-export * from "./Separator";
+export * from "./Separator.js";

package/Separator/index.js

@@ -1,3 +1 @@
-export * from "./Separator";
-
-//# sourceMappingURL=index.js.map
+export * from "./Separator.js";

package/Sidebar/Sidebar.d.ts

@@ -1,166 +1,169 @@
 import * as React from "react";
-import { SidebarRoot } from "./components/SidebarRoot";
-import { SidebarContent } from "./components/SidebarContent";
+import { SidebarRoot } from "./components/SidebarRoot.js";
+import { SidebarContent } from "./components/SidebarContent.js";
 interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<typeof SidebarRoot>, "title">, Omit<React.ComponentPropsWithoutRef<typeof SidebarContent>, "title"> {
     title?: React.ReactNode;
     icon?: React.ReactNode;
     children: React.ReactNode;
     footer?: React.ReactNode;
 }
-declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
-    original: (props: SidebarProps) => React.JSX.Element;
+declare const SidebarBase: (props: SidebarProps) => React.JSX.Element;
+declare const Sidebar: typeof SidebarBase & {
+    original: typeof SidebarBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarProps) => React.JSX.Element) & {
-        original: (props: SidebarProps) => React.JSX.Element;
+    original: typeof SidebarBase & {
+        original: typeof SidebarBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: SidebarProps) => React.JSX.Element) & {
-        original: (props: SidebarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarBase & {
+        original: typeof SidebarBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Item: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element) & {
-        original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element;
+    Item: ((props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemProps) => React.JSX.Element) & {
+        original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element) & {
-            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element;
+        original: ((props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element) & {
-            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Icon: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-            original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+        Icon: (({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+            original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            original: (({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+                original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+                original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Action: ({ element, ...props }: import("./components/items/SidebarMenuItemAction").SidebarMenuItemActionProps) => React.JSX.Element;
+        Action: ({ element, showOnHover, className, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
+        Badge: ({ text }: import("./components/items/SidebarMenuItemBadge.js").SidebarMenuItemBadgeProps) => React.JSX.Element;
     };
-    Link: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element) & {
-        original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element;
+    Link: ((props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element) & {
+        original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element) & {
-            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element;
+        original: ((props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element) & {
-            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Icon: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-            original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+        Icon: (({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+            original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            original: (({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+                original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+                original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Action: ({ element, ...props }: import("./components/items/SidebarMenuItemAction").SidebarMenuItemActionProps) => React.JSX.Element;
+        Action: ({ element, showOnHover, className, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
+        Badge: ({ text }: import("./components/items/SidebarMenuItemBadge.js").SidebarMenuItemBadgeProps) => React.JSX.Element;
     };
-    Group: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element) & {
-        original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element;
+    Group: ((props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element) & {
+        original: (props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element) & {
-            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element;
+        original: ((props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element) & {
+            original: (props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element) & {
-            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element) & {
+            original: (props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Icon: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-            original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+        Icon: (({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+            original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            original: (({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+                original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
-                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+                original: ({ element, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemIconProps) => React.JSX.Element | null;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Action: ({ element, ...props }: import("./components/items/SidebarMenuItemAction").SidebarMenuItemActionProps) => React.JSX.Element;
+        Action: ({ element, showOnHover, className, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
     };
-    Icon: (({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element) & {
-        original: ({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element;
+    Icon: (({ element, ...props }: import("./components/SidebarIcon.js").SidebarIconProps) => React.JSX.Element) & {
+        original: ({ element, ...props }: import("./components/SidebarIcon.js").SidebarIconProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element) & {
-            original: ({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element;
+        original: (({ element, ...props }: import("./components/SidebarIcon.js").SidebarIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: import("./components/SidebarIcon.js").SidebarIconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element) & {
-            original: ({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ element, ...props }: import("./components/SidebarIcon.js").SidebarIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: import("./components/SidebarIcon.js").SidebarIconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/Sidebar.js

@@ -1,54 +1,45 @@
-import * as React from "react";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { SidebarRoot } from "./components/SidebarRoot";
-import { SidebarHeader } from "./components/SidebarHeader";
-import { SidebarContent } from "./components/SidebarContent";
-import { SidebarIcon } from "./components/SidebarIcon";
-import { SidebarFooter } from "./components/SidebarFooter";
-import { SidebarMenuItem } from "./components/items/SidebarMenuItem";
-import { SidebarMenuLink } from "./components/items/SidebarMenuLink";
-import { SidebarMenuRoot } from "./components/items/SidebarMenuRoot";
-import { SidebarMenuGroup } from "./components/items/SidebarMenuGroup";
-const SidebarBase = props => {
-  const {
-    headerProps,
-    rootProps,
-    footerProps,
-    contentProps
-  } = React.useMemo(() => {
-    const {
-      // Header props.
-      title,
-      icon,
-      // Root props.
-      side,
-      // Footer props.
-      footer,
-      // Content props.
-      ...rest
-    } = props;
-    return {
-      headerProps: {
-        title,
-        icon
-      },
-      rootProps: {
-        side
-      },
-      footerProps: {
-        footer
-      },
-      contentProps: rest
-    };
-  }, [props]);
-  return /*#__PURE__*/React.createElement(SidebarRoot, rootProps, /*#__PURE__*/React.createElement(SidebarHeader, headerProps), /*#__PURE__*/React.createElement(SidebarContent, contentProps, /*#__PURE__*/React.createElement(SidebarMenuRoot, null, props.children)), /*#__PURE__*/React.createElement(SidebarFooter, null, /*#__PURE__*/React.createElement(SidebarMenuRoot, null, footerProps.footer)));
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { SidebarRoot } from "./components/SidebarRoot.js";
+import { SidebarHeader } from "./components/SidebarHeader.js";
+import { SidebarContent } from "./components/SidebarContent.js";
+import { SidebarIcon } from "./components/SidebarIcon.js";
+import { SidebarFooter } from "./components/SidebarFooter.js";
+import { SidebarMenuItem } from "./components/items/SidebarMenuItem.js";
+import { SidebarMenuLink } from "./components/items/SidebarMenuLink.js";
+import { SidebarMenuRoot } from "./components/items/SidebarMenuRoot.js";
+import { SidebarMenuGroup } from "./components/items/SidebarMenuGroup.js";
+import * as __rspack_external_react from "react";
+const SidebarBase = (props)=>{
+    const { headerProps, rootProps, footerProps, contentProps } = __rspack_external_react.useMemo(()=>{
+        const { title, icon, side, footer, ...rest } = props;
+        return {
+            headerProps: {
+                title,
+                icon
+            },
+            rootProps: {
+                side
+            },
+            footerProps: {
+                footer
+            },
+            contentProps: rest
+        };
+    }, [
+        props
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(SidebarRoot, rootProps, /*#__PURE__*/ __rspack_external_react.createElement(SidebarHeader, headerProps), /*#__PURE__*/ __rspack_external_react.createElement(SidebarContent, contentProps, /*#__PURE__*/ __rspack_external_react.createElement(SidebarMenuRoot, {
+        showPinnedItems: true
+    }, props.children)), footerProps.footer && /*#__PURE__*/ __rspack_external_react.createElement(SidebarFooter, null, /*#__PURE__*/ __rspack_external_react.createElement(SidebarMenuRoot, {
+        showPinnedItems: false
+    }, footerProps.footer)));
 };
 const DecoratableSidebar = makeDecoratable("Sidebar", SidebarBase);
 const Sidebar = withStaticProps(DecoratableSidebar, {
-  Item: SidebarMenuItem,
-  Link: SidebarMenuLink,
-  Group: SidebarMenuGroup,
-  Icon: SidebarIcon
+    Item: SidebarMenuItem,
+    Link: SidebarMenuLink,
+    Group: SidebarMenuGroup,
+    Icon: SidebarIcon
 });
 export { Sidebar };
 

package/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","SidebarRoot","SidebarHeader","SidebarContent","SidebarIcon","SidebarFooter","SidebarMenuItem","SidebarMenuLink","SidebarMenuRoot","SidebarMenuGroup","SidebarBase","props","headerProps","rootProps","footerProps","contentProps","useMemo","title","icon","side","footer","rest","createElement","children","DecoratableSidebar","Sidebar","Item","Link","Group","Icon"],"sources":["Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { SidebarRoot } from \"./components/SidebarRoot\";\nimport { SidebarHeader } from \"./components/SidebarHeader\";\nimport { SidebarContent } from \"./components/SidebarContent\";\nimport { SidebarIcon } from \"./components/SidebarIcon\";\nimport { SidebarFooter } from \"./components/SidebarFooter\";\nimport { SidebarMenuItem } from \"./components/items/SidebarMenuItem\";\nimport { SidebarMenuLink } from \"./components/items/SidebarMenuLink\";\nimport { SidebarMenuRoot } from \"./components/items/SidebarMenuRoot\";\nimport { SidebarMenuGroup } from \"~/Sidebar/components/items/SidebarMenuGroup\";\n\ninterface SidebarProps\n    extends Omit<React.ComponentPropsWithoutRef<typeof SidebarRoot>, \"title\">,\n        Omit<React.ComponentPropsWithoutRef<typeof SidebarContent>, \"title\"> {\n    title?: React.ReactNode;\n    icon?: React.ReactNode;\n    children: React.ReactNode;\n    footer?: React.ReactNode;\n}\n\nconst SidebarBase = (props: SidebarProps) => {\n    const { headerProps, rootProps, footerProps, contentProps } = React.useMemo(() => {\n        const {\n            // Header props.\n            title,\n            icon,\n\n            // Root props.\n            side,\n\n            // Footer props.\n            footer,\n\n            // Content props.\n            ...rest\n        } = props;\n\n        return {\n            headerProps: {\n                title,\n                icon\n            },\n            rootProps: {\n                side\n            },\n            footerProps: {\n                footer\n            },\n            contentProps: rest\n        };\n    }, [props]);\n\n    return (\n        <SidebarRoot {...rootProps}>\n            <SidebarHeader {...headerProps} />\n            <SidebarContent {...contentProps}>\n                <SidebarMenuRoot>{props.children}</SidebarMenuRoot>\n            </SidebarContent>\n            <SidebarFooter>\n                <SidebarMenuRoot>{footerProps.footer}</SidebarMenuRoot>\n            </SidebarFooter>\n        </SidebarRoot>\n    );\n};\n\nconst DecoratableSidebar = makeDecoratable(\"Sidebar\", SidebarBase);\n\nconst Sidebar = withStaticProps(DecoratableSidebar, {\n    Item: SidebarMenuItem,\n    Link: SidebarMenuLink,\n    Group: SidebarMenuGroup,\n    Icon: SidebarIcon\n});\n\nexport { Sidebar };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,WAAW;AACpB,SAASC,aAAa;AACtB,SAASC,cAAc;AACvB,SAASC,WAAW;AACpB,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAWzB,MAAMC,WAAW,GAAIC,KAAmB,IAAK;EACzC,MAAM;IAAEC,WAAW;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAa,CAAC,GAAGjB,KAAK,CAACkB,OAAO,CAAC,MAAM;IAC9E,MAAM;MACF;MACAC,KAAK;MACLC,IAAI;MAEJ;MACAC,IAAI;MAEJ;MACAC,MAAM;MAEN;MACA,GAAGC;IACP,CAAC,GAAGV,KAAK;IAET,OAAO;MACHC,WAAW,EAAE;QACTK,KAAK;QACLC;MACJ,CAAC;MACDL,SAAS,EAAE;QACPM;MACJ,CAAC;MACDL,WAAW,EAAE;QACTM;MACJ,CAAC;MACDL,YAAY,EAAEM;IAClB,CAAC;EACL,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;EAEX,oBACIb,KAAA,CAAAwB,aAAA,CAACrB,WAAW,EAAKY,SAAS,eACtBf,KAAA,CAAAwB,aAAA,CAACpB,aAAa,EAAKU,WAAc,CAAC,eAClCd,KAAA,CAAAwB,aAAA,CAACnB,cAAc,EAAKY,YAAY,eAC5BjB,KAAA,CAAAwB,aAAA,CAACd,eAAe,QAAEG,KAAK,CAACY,QAA0B,CACtC,CAAC,eACjBzB,KAAA,CAAAwB,aAAA,CAACjB,aAAa,qBACVP,KAAA,CAAAwB,aAAA,CAACd,eAAe,QAAEM,WAAW,CAACM,MAAwB,CAC3C,CACN,CAAC;AAEtB,CAAC;AAED,MAAMI,kBAAkB,GAAGzB,eAAe,CAAC,SAAS,EAAEW,WAAW,CAAC;AAElE,MAAMe,OAAO,GAAGzB,eAAe,CAACwB,kBAAkB,EAAE;EAChDE,IAAI,EAAEpB,eAAe;EACrBqB,IAAI,EAAEpB,eAAe;EACrBqB,KAAK,EAAEnB,gBAAgB;EACvBoB,IAAI,EAAEzB;AACV,CAAC,CAAC;AAEF,SAASqB,OAAO","ignoreList":[]}
+{"version":3,"file":"Sidebar/Sidebar.js","sources":["../../src/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarRoot } from \"./components/SidebarRoot.js\";\nimport { SidebarHeader } from \"./components/SidebarHeader.js\";\nimport { SidebarContent } from \"./components/SidebarContent.js\";\nimport { SidebarIcon } from \"./components/SidebarIcon.js\";\nimport { SidebarFooter } from \"./components/SidebarFooter.js\";\nimport { SidebarMenuItem } from \"./components/items/SidebarMenuItem.js\";\nimport { SidebarMenuLink } from \"./components/items/SidebarMenuLink.js\";\nimport { SidebarMenuRoot } from \"./components/items/SidebarMenuRoot.js\";\nimport { SidebarMenuGroup } from \"~/Sidebar/components/items/SidebarMenuGroup.js\";\n\ninterface SidebarProps\n    extends\n        Omit<React.ComponentPropsWithoutRef<typeof SidebarRoot>, \"title\">,\n        Omit<React.ComponentPropsWithoutRef<typeof SidebarContent>, \"title\"> {\n    title?: React.ReactNode;\n    icon?: React.ReactNode;\n    children: React.ReactNode;\n    footer?: React.ReactNode;\n}\n\nconst SidebarBase = (props: SidebarProps) => {\n    const { headerProps, rootProps, footerProps, contentProps } = React.useMemo(() => {\n        const {\n            // Header props.\n            title,\n            icon,\n\n            // Root props.\n            side,\n\n            // Footer props.\n            footer,\n\n            // Content props.\n            ...rest\n        } = props;\n\n        return {\n            headerProps: {\n                title,\n                icon\n            },\n            rootProps: {\n                side\n            },\n            footerProps: {\n                footer\n            },\n            contentProps: rest\n        };\n    }, [props]);\n\n    return (\n        <SidebarRoot {...rootProps}>\n            <SidebarHeader {...headerProps} />\n            <SidebarContent {...contentProps}>\n                <SidebarMenuRoot showPinnedItems={true}>{props.children}</SidebarMenuRoot>\n            </SidebarContent>\n            {footerProps.footer && (\n                <SidebarFooter>\n                    <SidebarMenuRoot showPinnedItems={false}>{footerProps.footer}</SidebarMenuRoot>\n                </SidebarFooter>\n            )}\n        </SidebarRoot>\n    );\n};\n\nconst DecoratableSidebar = makeDecoratable(\"Sidebar\", SidebarBase);\n\nconst Sidebar = withStaticProps(DecoratableSidebar, {\n    Item: SidebarMenuItem,\n    Link: SidebarMenuLink,\n    Group: SidebarMenuGroup,\n    Icon: SidebarIcon\n});\n\nexport { Sidebar };\n"],"names":["SidebarBase","props","headerProps","rootProps","footerProps","contentProps","React","title","icon","side","footer","rest","SidebarRoot","SidebarHeader","SidebarContent","SidebarMenuRoot","SidebarFooter","DecoratableSidebar","makeDecoratable","Sidebar","withStaticProps","SidebarMenuItem","SidebarMenuLink","SidebarMenuGroup","SidebarIcon"],"mappings":";;;;;;;;;;;AAsBA,MAAMA,cAAc,CAACC;IACjB,MAAM,EAAEC,WAAW,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAE,GAAGC,wBAAAA,OAAa,CAAC;QACxE,MAAM,EAEFC,KAAK,EACLC,IAAI,EAGJC,IAAI,EAGJC,MAAM,EAGN,GAAGC,MACN,GAAGV;QAEJ,OAAO;YACH,aAAa;gBACTM;gBACAC;YACJ;YACA,WAAW;gBACPC;YACJ;YACA,aAAa;gBACTC;YACJ;YACA,cAAcC;QAClB;IACJ,GAAG;QAACV;KAAM;IAEV,OAAO,WAAP,GACI,sCAACW,aAAgBT,WAAAA,WAAAA,GACb,sCAACU,eAAkBX,cAAAA,WAAAA,GACnB,sCAACY,gBAAmBT,cAAAA,WAAAA,GAChB,sCAACU,iBAAeA;QAAC,iBAAiB;OAAOd,MAAM,QAAQ,IAE1DG,YAAY,MAAM,IAAI,WAAJ,GACf,sCAACY,eAAaA,MAAAA,WAAAA,GACV,sCAACD,iBAAeA;QAAC,iBAAiB;OAAQX,YAAY,MAAM;AAKhF;AAEA,MAAMa,qBAAqBC,gBAAgB,WAAWlB;AAEtD,MAAMmB,UAAUC,gBAAgBH,oBAAoB;IAChD,MAAMI;IACN,MAAMC;IACN,OAAOC;IACP,MAAMC;AACV"}